diff --git a/.changeset/mean-badgers-grab.md b/.changeset/mean-badgers-grab.md new file mode 100644 index 00000000000..95f7f8b239b --- /dev/null +++ b/.changeset/mean-badgers-grab.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": patch +--- + +fix code style diff --git a/.changeset/sweet-worms-fix.md b/.changeset/sweet-worms-fix.md new file mode 100644 index 00000000000..deaf083004a --- /dev/null +++ b/.changeset/sweet-worms-fix.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": minor +--- + +add support for tailwind.config.ts diff --git a/.kodiak.toml b/.kodiak.toml new file mode 100644 index 00000000000..bbfdb22584e --- /dev/null +++ b/.kodiak.toml @@ -0,0 +1,18 @@ +# .kodiak.toml +version = 1 + +[merge] +automerge_label = "automerge" +require_automerge_label = true +method = "squash" +delete_branch_on_merge = true +optimistic_updates = false +prioritize_ready_to_merge = true +notify_on_conflict = true + +[merge.message] +title = "pull_request_title" +body = "pull_request_body" +include_pr_number = true +body_type = "markdown" +strip_html_comments = true diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index 26fc8aace90..5648c92e91e 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -565,6 +565,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/default/example/dialog-demo")), files: ["registry/default/example/dialog-demo.tsx"], }, + "dialog-close-button": { + name: "dialog-close-button", + type: "components:example", + registryDependencies: ["dialog","button"], + component: React.lazy(() => import("@/registry/default/example/dialog-close-button")), + files: ["registry/default/example/dialog-close-button.tsx"], + }, "dropdown-menu-demo": { name: "dropdown-menu-demo", type: "components:example", @@ -1574,6 +1581,13 @@ export const Index: Record = { component: React.lazy(() => import("@/registry/new-york/example/dialog-demo")), files: ["registry/new-york/example/dialog-demo.tsx"], }, + "dialog-close-button": { + name: "dialog-close-button", + type: "components:example", + registryDependencies: ["dialog","button"], + component: React.lazy(() => import("@/registry/new-york/example/dialog-close-button")), + files: ["registry/new-york/example/dialog-close-button.tsx"], + }, "dropdown-menu-demo": { name: "dropdown-menu-demo", type: "components:example", diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx index 17cf6861f3d..3c13add4ad0 100644 --- a/apps/www/components/site-header.tsx +++ b/apps/www/components/site-header.tsx @@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button" export function SiteHeader() { return ( -
+
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts index 35f47b824a5..1f1352f90a5 100644 --- a/apps/www/config/docs.ts +++ b/apps/www/config/docs.ts @@ -147,6 +147,11 @@ export const docsConfig: DocsConfig = { href: "/docs/dark-mode/vite", items: [], }, + { + title: "Astro", + href: "/docs/dark-mode/astro", + items: [], + }, ], }, { diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx index 41ca737ee86..6db148f736d 100644 --- a/apps/www/content/docs/components/accordion.mdx +++ b/apps/www/content/docs/components/accordion.mdx @@ -42,12 +42,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -90,12 +90,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx index d617754e509..6ea442902fd 100644 --- a/apps/www/content/docs/components/dialog.mdx +++ b/apps/www/content/docs/components/dialog.mdx @@ -76,6 +76,12 @@ import { ``` +## Examples + +### Custom close button + + + ## Notes To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or diff --git a/apps/www/content/docs/components/form.mdx b/apps/www/content/docs/components/form.mdx index 02824dd1443..93d74e1dadc 100644 --- a/apps/www/content/docs/components/form.mdx +++ b/apps/www/content/docs/components/form.mdx @@ -141,6 +141,7 @@ Use the `useForm` hook from `react-hook-form` to create a form. "use client" import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" import * as z from "zod" const formSchema = z.object({ @@ -177,6 +178,7 @@ We can now use the `
` components to build our form. "use client" import { zodResolver } from "@hookform/resolvers/zod" +import { useForm } from "react-hook-form" import * as z from "zod" import { Button } from "@/components/ui/button" diff --git a/apps/www/content/docs/dark-mode/astro.mdx b/apps/www/content/docs/dark-mode/astro.mdx new file mode 100644 index 00000000000..01e4ffe4227 --- /dev/null +++ b/apps/www/content/docs/dark-mode/astro.mdx @@ -0,0 +1,121 @@ +--- +title: Astro +description: Adding dark mode to your astro app. +--- + +## Dark mode + + + +### Create an inline theme script + +```astro title="src/pages/index.astro" +--- +import '../styles/globals.css' +--- + + + + + +

Astro

+ + + +``` + +### Add a mode toggle + +```tsx title="src/components/ModeToggle.tsx" +import * as React from "react" +import { Moon, Sun } from "lucide-react" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ModeToggle() { + const [theme, setThemeState] = React.useState< + "theme-light" | "dark" | "system" + >("theme-light") + + React.useEffect(() => { + const isDarkMode = document.documentElement.classList.contains("dark") + setThemeState(isDarkMode ? "dark" : "theme-light") + }, []) + + React.useEffect(() => { + const isDark = + theme === "dark" || + (theme === "system" && + window.matchMedia("(prefers-color-scheme: dark)").matches) + document.documentElement.classList[isDark ? "add" : "remove"]("dark") + }, [theme]) + + return ( + + + + + + setThemeState("theme-light")}> + Light + + setThemeState("dark")}> + Dark + + setThemeState("system")}> + System + + + + ) +} +``` + +### Display the mode toggle + +Place a mode toggle on your site to toggle between light and dark mode. + +```astro title="src/pages/index.astro" +--- +import '../styles/globals.css' +import { ModeToggle } from '@/components/ModeToggle'; +--- + + + + + +

Astro

+ + + +``` + + diff --git a/apps/www/content/docs/dark-mode/index.mdx b/apps/www/content/docs/dark-mode/index.mdx index 214118d608a..c743279c3c2 100644 --- a/apps/www/content/docs/dark-mode/index.mdx +++ b/apps/www/content/docs/dark-mode/index.mdx @@ -30,6 +30,19 @@ description: Adding dark mode to your site.

Vite

+ + + + + +

Astro

+
## Other frameworks diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx index 1588e156c37..644b096fdcc 100644 --- a/apps/www/content/docs/index.mdx +++ b/apps/www/content/docs/index.mdx @@ -15,7 +15,7 @@ _Use this as a reference to build your own component libraries._ ## FAQ - + diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx index e689b207003..cd89f807cc4 100644 --- a/apps/www/content/docs/installation/astro.mdx +++ b/apps/www/content/docs/installation/astro.mdx @@ -62,15 +62,19 @@ Answer `Yes` to all the question prompted by the CLI when installing Tailwind CS ### Edit tsconfig.json file -Add the code below to the tsconfig.json file to resolve paths: +Add the following code to the `tsconfig.json` file to resolve paths: -```json {2-7} showLineNumbers +```ts {4-9} showLineNumbers { "compilerOptions": { + // ... "baseUrl": ".", "paths": { - "@/*": ["src/*"] + "@/*": [ + "./src/*" + ] } + // ... } } ``` @@ -123,6 +127,16 @@ export default defineConfig({ }) ``` +### Update tailwind.config.cjs + +When running `npx shadcn-ui@latest init`, your tailwind config for content will be overwritten. To fix this, change the `content` section with the code below to your `tailwind.config.cjs` file: + +```js {2-4} showLineNumbers +module.exports = { + content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], +} +``` + ### That's it You can now start adding components to your project. diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index cd83d6f8f6b..184e0f9cbfa 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -35,7 +35,7 @@ You will be asked a few questions to configure your project: ### Edit tsconfig.json file -Add the code below to the `tsconfig.json` file to resolve paths: +Add the following code to the `tsconfig.json` file to resolve paths: ```ts {4-9} showLineNumbers { diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx index efc5dd1fc7f..4625b2cde47 100644 --- a/apps/www/content/docs/installation/manual.mdx +++ b/apps/www/content/docs/installation/manual.mdx @@ -117,12 +117,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/apps/www/content/docs/installation/next.mdx b/apps/www/content/docs/installation/next.mdx index 8cda7fde6fa..505fadfbebe 100644 --- a/apps/www/content/docs/installation/next.mdx +++ b/apps/www/content/docs/installation/next.mdx @@ -37,6 +37,59 @@ Configure the import alias for utils: › @/lib/utils Are you using React Server Components? › no / yes ``` +### Fonts + +I use [Inter](https://rsms.me/inter/) as the default font. Inter is not required. You can replace it with any other font. + +Here's how I configure Inter for Next.js: + +**1. Import the font in the root layout:** + +```js showLineNumbers title=app/layout.tsx {2,4-7,15-16} +import "@/styles/globals.css" +import { Inter as FontSans } from "next/font/google" + +export const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}) + +export default function RootLayout({ children }: RootLayoutProps) { + return ( + + + + ... + + + ) +} +``` + +**2. Configure `theme.extend.fontFamily` in `tailwind.config.js`** + +```js showLineNumbers title=tailwind.config.js {9-11} +const { fontFamily } = require("tailwindcss/defaultTheme") + +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], + theme: { + extend: { + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + }, + }, + }, +} +``` + ### App structure Here's how I structure my Next.js apps. You can use this as a reference: diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx index 71235ba825e..a2e8965a9a7 100644 --- a/apps/www/content/docs/installation/remix.mdx +++ b/apps/www/content/docs/installation/remix.mdx @@ -59,7 +59,7 @@ npm add -D tailwindcss@latest autoprefixer@latest Then we create a `postcss.config.js` file: ```js -module.exports = { +export default { plugins: { tailwindcss: {}, autoprefixer: {}, @@ -71,7 +71,7 @@ And finally we add the following to our `remix.config.js` file: ```js {4-5} /** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { +export default { ... tailwind: true, postcss: true, diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index b198b23c30b..eddceefcad3 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -23,20 +23,28 @@ npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` -### Edit tsconfig.json - -Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error - -```typescript -"baseUrl": ".", -"paths": { - "@/*": ["./src/*"] +### Edit tsconfig.json file + +Add the following code to the `tsconfig.json` file to resolve paths: + +```ts {4-9} showLineNumbers +{ + "compilerOptions": { + // ... + "baseUrl": ".", + "paths": { + "@/*": [ + "./src/*" + ] + } + // ... + } } ``` ### Update vite.config.ts -Add the code below to the vite.config.ts so your app can resolve paths without error +Add the following code to the vite.config.ts so your app can resolve paths without error ```bash # (so you can import "path" without error) diff --git a/apps/www/public/registry/colors/index.json b/apps/www/public/registry/colors/index.json index 6b70773e73f..c25158efb11 100644 --- a/apps/www/public/registry/colors/index.json +++ b/apps/www/public/registry/colors/index.json @@ -1996,4 +1996,4 @@ "hslChannel": "343.1 87.7% 15.9%" } ] -} +} \ No newline at end of file diff --git a/apps/www/public/registry/colors/slate.json b/apps/www/public/registry/colors/slate.json index 5db830be4bf..6d80bc78579 100644 --- a/apps/www/public/registry/colors/slate.json +++ b/apps/www/public/registry/colors/slate.json @@ -89,4 +89,4 @@ }, "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n", "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n \n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n \n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n \n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n \n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n \n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n \n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n \n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n \n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n \n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n \n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n \n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}" -} +} \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/alert-dialog.json b/apps/www/public/registry/styles/default/alert-dialog.json index d39d893da0d..eeb9031274f 100644 --- a/apps/www/public/registry/styles/default/alert-dialog.json +++ b/apps/www/public/registry/styles/default/alert-dialog.json @@ -9,7 +9,7 @@ "files": [ { "name": "alert-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n className,\n ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n \n)\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/dialog.json b/apps/www/public/registry/styles/default/dialog.json index ed0ad45d31d..ac03372ca6e 100644 --- a/apps/www/public/registry/styles/default/dialog.json +++ b/apps/www/public/registry/styles/default/dialog.json @@ -6,7 +6,7 @@ "files": [ { "name": "dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = ({\n className,\n ...props\n}: DialogPrimitive.DialogPortalProps) => (\n \n)\nDialogPortal.displayName = DialogPrimitive.Portal.displayName\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/scroll-area.json b/apps/www/public/registry/styles/default/scroll-area.json index ee9db739071..c24fd70f8d0 100644 --- a/apps/www/public/registry/styles/default/scroll-area.json +++ b/apps/www/public/registry/styles/default/scroll-area.json @@ -6,7 +6,7 @@ "files": [ { "name": "scroll-area.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/sheet.json b/apps/www/public/registry/styles/default/sheet.json index f755a0875e4..58f5b3b287b 100644 --- a/apps/www/public/registry/styles/default/sheet.json +++ b/apps/www/public/registry/styles/default/sheet.json @@ -6,7 +6,7 @@ "files": [ { "name": "sheet.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/default/table.json b/apps/www/public/registry/styles/default/table.json index 5f61c81b3b9..be0a9d236df 100644 --- a/apps/www/public/registry/styles/default/table.json +++ b/apps/www/public/registry/styles/default/table.json @@ -3,7 +3,7 @@ "files": [ { "name": "table.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/alert-dialog.json b/apps/www/public/registry/styles/new-york/alert-dialog.json index 6ec296e58f8..6c2ad7a5bff 100644 --- a/apps/www/public/registry/styles/new-york/alert-dialog.json +++ b/apps/www/public/registry/styles/new-york/alert-dialog.json @@ -9,7 +9,7 @@ "files": [ { "name": "alert-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n className,\n ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n \n)\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/dialog.json b/apps/www/public/registry/styles/new-york/dialog.json index 9683a3eff5f..204029d7a21 100644 --- a/apps/www/public/registry/styles/new-york/dialog.json +++ b/apps/www/public/registry/styles/new-york/dialog.json @@ -6,7 +6,7 @@ "files": [ { "name": "dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = ({\n className,\n ...props\n}: DialogPrimitive.DialogPortalProps) => (\n \n)\nDialogPortal.displayName = DialogPrimitive.Portal.displayName\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/scroll-area.json b/apps/www/public/registry/styles/new-york/scroll-area.json index ee9db739071..c24fd70f8d0 100644 --- a/apps/www/public/registry/styles/new-york/scroll-area.json +++ b/apps/www/public/registry/styles/new-york/scroll-area.json @@ -6,7 +6,7 @@ "files": [ { "name": "scroll-area.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/sheet.json b/apps/www/public/registry/styles/new-york/sheet.json index 04fde8c542e..f37dfd486cc 100644 --- a/apps/www/public/registry/styles/new-york/sheet.json +++ b/apps/www/public/registry/styles/new-york/sheet.json @@ -6,7 +6,7 @@ "files": [ { "name": "sheet.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/styles/new-york/table.json b/apps/www/public/registry/styles/new-york/table.json index 66e3077ef6e..0bcade86884 100644 --- a/apps/www/public/registry/styles/new-york/table.json +++ b/apps/www/public/registry/styles/new-york/table.json @@ -3,7 +3,7 @@ "files": [ { "name": "table.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n" } ], "type": "components:ui" diff --git a/apps/www/public/registry/themes/slate.json b/apps/www/public/registry/themes/slate.json index 2cd8397f282..7c72a9d6db3 100644 --- a/apps/www/public/registry/themes/slate.json +++ b/apps/www/public/registry/themes/slate.json @@ -42,7 +42,7 @@ "destructive-foreground": "210 40% 98%", "border": "217.2 32.6% 17.5%", "input": "217.2 32.6% 17.5%", - "ring": "212.7 26.8 83.9%" + "ring": "212.7 26.8% 83.9%" } } -} +} \ No newline at end of file diff --git a/apps/www/registry/default/example/alert-demo.tsx b/apps/www/registry/default/example/alert-demo.tsx index 5255cc95143..a26c71fcfd1 100644 --- a/apps/www/registry/default/example/alert-demo.tsx +++ b/apps/www/registry/default/example/alert-demo.tsx @@ -1,4 +1,4 @@ -import { Terminal, Waves } from "lucide-react" +import { Terminal } from "lucide-react" import { Alert, diff --git a/apps/www/registry/default/example/alert-destructive.tsx b/apps/www/registry/default/example/alert-destructive.tsx index 2b4154a8a3e..a72c26b8f88 100644 --- a/apps/www/registry/default/example/alert-destructive.tsx +++ b/apps/www/registry/default/example/alert-destructive.tsx @@ -1,4 +1,4 @@ -import { AlertCircle, FileWarning, Terminal } from "lucide-react" +import { AlertCircle } from "lucide-react" import { Alert, diff --git a/apps/www/registry/default/example/combobox-form.tsx b/apps/www/registry/default/example/combobox-form.tsx index c1a3ea94449..df6a0b0194e 100644 --- a/apps/www/registry/default/example/combobox-form.tsx +++ b/apps/www/registry/default/example/combobox-form.tsx @@ -95,8 +95,8 @@ export default function ComboboxForm() { - - No framework found. + + No language found. {languages.map((language) => ( + + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + + ) +} diff --git a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx b/apps/www/registry/default/example/dropdown-menu-radio-group.tsx index 42ab782d033..2c06e7b131d 100644 --- a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx +++ b/apps/www/registry/default/example/dropdown-menu-radio-group.tsx @@ -1,12 +1,10 @@ "use client" import * as React from "react" -import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu" import { Button } from "@/registry/default/ui/button" import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, diff --git a/apps/www/registry/default/example/input-form.tsx b/apps/www/registry/default/example/input-form.tsx index 18ba7441e1b..1ea1bb7b3c4 100644 --- a/apps/www/registry/default/example/input-form.tsx +++ b/apps/www/registry/default/example/input-form.tsx @@ -26,6 +26,9 @@ const FormSchema = z.object({ export default function InputForm() { const form = useForm>({ resolver: zodResolver(FormSchema), + defaultValues: { + username: "", + }, }) function onSubmit(data: z.infer) { diff --git a/apps/www/registry/default/example/typography-h2.tsx b/apps/www/registry/default/example/typography-h2.tsx index eb4b7970e99..ea794416542 100644 --- a/apps/www/registry/default/example/typography-h2.tsx +++ b/apps/www/registry/default/example/typography-h2.tsx @@ -1,6 +1,6 @@ export default function TypographyH2() { return ( -

+

The People of the Kingdom

) diff --git a/apps/www/registry/default/ui/alert-dialog.tsx b/apps/www/registry/default/ui/alert-dialog.tsx index 35bcef95edc..6831ce8c86c 100644 --- a/apps/www/registry/default/ui/alert-dialog.tsx +++ b/apps/www/registry/default/ui/alert-dialog.tsx @@ -10,13 +10,7 @@ const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger -const AlertDialogPortal = ({ - className, - ...props -}: AlertDialogPrimitive.AlertDialogPortalProps) => ( - -) -AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName +const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, @@ -134,6 +128,8 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, diff --git a/apps/www/registry/default/ui/button.tsx b/apps/www/registry/default/ui/button.tsx index ac8e0c9ada3..0ba4277355f 100644 --- a/apps/www/registry/default/ui/button.tsx +++ b/apps/www/registry/default/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { diff --git a/apps/www/registry/default/ui/dialog.tsx b/apps/www/registry/default/ui/dialog.tsx index 2f337660022..80ee7d62210 100644 --- a/apps/www/registry/default/ui/dialog.tsx +++ b/apps/www/registry/default/ui/dialog.tsx @@ -10,13 +10,9 @@ const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger -const DialogPortal = ({ - className, - ...props -}: DialogPrimitive.DialogPortalProps) => ( - -) -DialogPortal.displayName = DialogPrimitive.Portal.displayName +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, @@ -114,6 +110,9 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, + DialogPortal, + DialogOverlay, + DialogClose, DialogTrigger, DialogContent, DialogHeader, diff --git a/apps/www/registry/default/ui/scroll-area.tsx b/apps/www/registry/default/ui/scroll-area.tsx index 54b87cd7657..590cec7fa18 100644 --- a/apps/www/registry/default/ui/scroll-area.tsx +++ b/apps/www/registry/default/ui/scroll-area.tsx @@ -40,7 +40,12 @@ const ScrollBar = React.forwardRef< )} {...props} > - + )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName diff --git a/apps/www/registry/default/ui/sheet.tsx b/apps/www/registry/default/ui/sheet.tsx index 98cdd40d2a0..6a95894ed18 100644 --- a/apps/www/registry/default/ui/sheet.tsx +++ b/apps/www/registry/default/ui/sheet.tsx @@ -13,13 +13,7 @@ const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close -const SheetPortal = ({ - className, - ...props -}: SheetPrimitive.DialogPortalProps) => ( - -) -SheetPortal.displayName = SheetPrimitive.Portal.displayName +const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, @@ -134,6 +128,8 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, + SheetPortal, + SheetOverlay, SheetTrigger, SheetClose, SheetContent, diff --git a/apps/www/registry/new-york/example/dialog-close-button.tsx b/apps/www/registry/new-york/example/dialog-close-button.tsx new file mode 100644 index 00000000000..5724000f994 --- /dev/null +++ b/apps/www/registry/new-york/example/dialog-close-button.tsx @@ -0,0 +1,56 @@ +import { CopyIcon } from "@radix-ui/react-icons" + +import { Button } from "@/registry/new-york/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/registry/new-york/ui/dialog" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" + +export default function DialogCloseButton() { + return ( + + + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + + ) +} diff --git a/apps/www/registry/new-york/example/input-form.tsx b/apps/www/registry/new-york/example/input-form.tsx index 4a9e32c96db..4be9df22364 100644 --- a/apps/www/registry/new-york/example/input-form.tsx +++ b/apps/www/registry/new-york/example/input-form.tsx @@ -26,6 +26,9 @@ const FormSchema = z.object({ export default function InputForm() { const form = useForm>({ resolver: zodResolver(FormSchema), + defaultValues: { + username: "", + }, }) function onSubmit(data: z.infer) { diff --git a/apps/www/registry/new-york/example/typography-h2.tsx b/apps/www/registry/new-york/example/typography-h2.tsx index eb4b7970e99..ea794416542 100644 --- a/apps/www/registry/new-york/example/typography-h2.tsx +++ b/apps/www/registry/new-york/example/typography-h2.tsx @@ -1,6 +1,6 @@ export default function TypographyH2() { return ( -

+

The People of the Kingdom

) diff --git a/apps/www/registry/new-york/ui/alert-dialog.tsx b/apps/www/registry/new-york/ui/alert-dialog.tsx index 03e37132cd3..d338de2fb9a 100644 --- a/apps/www/registry/new-york/ui/alert-dialog.tsx +++ b/apps/www/registry/new-york/ui/alert-dialog.tsx @@ -10,13 +10,7 @@ const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger -const AlertDialogPortal = ({ - className, - ...props -}: AlertDialogPrimitive.AlertDialogPortalProps) => ( - -) -AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName +const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, @@ -134,6 +128,8 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, diff --git a/apps/www/registry/new-york/ui/button.tsx b/apps/www/registry/new-york/ui/button.tsx index 4ecf36902a3..85d20f2867c 100644 --- a/apps/www/registry/new-york/ui/button.tsx +++ b/apps/www/registry/new-york/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { diff --git a/apps/www/registry/new-york/ui/dialog.tsx b/apps/www/registry/new-york/ui/dialog.tsx index 8cbe0d424e2..5e7c09521b2 100644 --- a/apps/www/registry/new-york/ui/dialog.tsx +++ b/apps/www/registry/new-york/ui/dialog.tsx @@ -10,13 +10,9 @@ const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger -const DialogPortal = ({ - className, - ...props -}: DialogPrimitive.DialogPortalProps) => ( - -) -DialogPortal.displayName = DialogPrimitive.Portal.displayName +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, @@ -114,7 +110,10 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, + DialogPortal, + DialogOverlay, DialogTrigger, + DialogClose, DialogContent, DialogHeader, DialogFooter, diff --git a/apps/www/registry/new-york/ui/scroll-area.tsx b/apps/www/registry/new-york/ui/scroll-area.tsx index 54b87cd7657..590cec7fa18 100644 --- a/apps/www/registry/new-york/ui/scroll-area.tsx +++ b/apps/www/registry/new-york/ui/scroll-area.tsx @@ -40,7 +40,12 @@ const ScrollBar = React.forwardRef< )} {...props} > - + )) ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName diff --git a/apps/www/registry/new-york/ui/sheet.tsx b/apps/www/registry/new-york/ui/sheet.tsx index 5f0b1b25c49..efd6e8580e4 100644 --- a/apps/www/registry/new-york/ui/sheet.tsx +++ b/apps/www/registry/new-york/ui/sheet.tsx @@ -13,13 +13,7 @@ const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close -const SheetPortal = ({ - className, - ...props -}: SheetPrimitive.DialogPortalProps) => ( - -) -SheetPortal.displayName = SheetPrimitive.Portal.displayName +const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, @@ -134,6 +128,8 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, + SheetPortal, + SheetOverlay, SheetTrigger, SheetClose, SheetContent, diff --git a/apps/www/registry/registry.ts b/apps/www/registry/registry.ts index 789a4cfcdc8..e7e8a366eaa 100644 --- a/apps/www/registry/registry.ts +++ b/apps/www/registry/registry.ts @@ -491,6 +491,12 @@ const example: Registry = [ registryDependencies: ["dialog"], files: ["example/dialog-demo.tsx"], }, + { + name: "dialog-close-button", + type: "components:example", + registryDependencies: ["dialog", "button"], + files: ["example/dialog-close-button.tsx"], + }, { name: "dropdown-menu-demo", type: "components:example", diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 5e36b64cac2..d7e170d207c 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,11 @@ # @shadcn/ui +## 0.4.1 + +### Patch Changes + +- [#1662](https://github.com/shadcn-ui/ui/pull/1662) [`95a9673`](https://github.com/shadcn-ui/ui/commit/95a9673b1ec6a1954d941d35624ad2cd93faccc4) Thanks [@shadcn](https://github.com/shadcn)! - minify build + ## 0.4.0 ### Minor Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index e956074de02..2c8330d1e3a 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "shadcn-ui", - "version": "0.4.0", + "version": "0.4.1", "description": "Add components to your apps.", "publishConfig": { "access": "public" diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 598ab6d60ee..2653af78c98 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -228,12 +228,25 @@ export async function runInit(cwd: string, config: Config) { const extension = config.tsx ? "ts" : "js" + const tailwindConfigExtension = path.extname( + config.resolvedPaths.tailwindConfig + ) + + let tailwindConfigTemplate: string + if (tailwindConfigExtension === ".ts") { + tailwindConfigTemplate = config.tailwind.cssVariables + ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES + : templates.TAILWIND_CONFIG_TS + } else { + tailwindConfigTemplate = config.tailwind.cssVariables + ? templates.TAILWIND_CONFIG_WITH_VARIABLES + : templates.TAILWIND_CONFIG + } + // Write tailwind config. await fs.writeFile( config.resolvedPaths.tailwindConfig, - config.tailwind.cssVariables - ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension }) - : template(templates.TAILWIND_CONFIG)({ extension }), + template(tailwindConfigTemplate)({ extension }), "utf8" ) diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 5af47c2f49a..f110cf90fc9 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -1,6 +1,6 @@ export const UTILS = `import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" - + export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } @@ -8,7 +8,7 @@ export function cn(...inputs: ClassValue[]) { export const UTILS_JS = `import { clsx } from "clsx" import { twMerge } from "tailwind-merge" - + export function cn(...inputs) { return twMerge(clsx(inputs)) } @@ -22,7 +22,7 @@ module.exports = { './components/**/*.{<%- extension %>,<%- extension %>x}', './app/**/*.{<%- extension %>,<%- extension %>x}', './src/**/*.{<%- extension %>,<%- extension %>x}', - ], + ], theme: { container: { center: true, @@ -34,12 +34,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -59,7 +59,7 @@ module.exports = { './components/**/*.{<%- extension %>,<%- extension %>x}', './app/**/*.{<%- extension %>,<%- extension %>x}', './src/**/*.{<%- extension %>,<%- extension %>x}', - ], + ], theme: { container: { center: true, @@ -111,12 +111,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -127,3 +127,123 @@ module.exports = { }, plugins: [require("tailwindcss-animate")], }` + +export const TAILWIND_CONFIG_TS = `import type { Config } from "tailwindcss" + +const config = { + darkMode: ["class"], + content: [ + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config` + +export const TAILWIND_CONFIG_TS_WITH_VARIABLES = `import type { Config } from "tailwindcss" + +const config = { + darkMode: ["class"], + content: [ + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config` diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts index ad2a7023b1b..8135e8a480f 100644 --- a/packages/cli/test/commands/init.test.ts +++ b/packages/cli/test/commands/init.test.ts @@ -51,7 +51,7 @@ test("init config-full", async () => { expect(mockWriteFile).toHaveBeenNthCalledWith( 1, expect.stringMatching(/tailwind.config.ts$/), - expect.stringContaining(`/** @type {import('tailwindcss').Config} */`), + expect.stringContaining(`import type { Config } from "tailwindcss"`), "utf8" ) expect(mockWriteFile).toHaveBeenNthCalledWith( @@ -121,7 +121,7 @@ test("init config-partial", async () => { expect(mockWriteFile).toHaveBeenNthCalledWith( 1, expect.stringMatching(/tailwind.config.ts$/), - expect.stringContaining(`/** @type {import('tailwindcss').Config} */`), + expect.stringContaining(`import type { Config } from "tailwindcss"`), "utf8" ) expect(mockWriteFile).toHaveBeenNthCalledWith( diff --git a/packages/cli/test/fixtures/next/tailwind.config.js b/packages/cli/test/fixtures/next/tailwind.config.js index 0377ea1ded1..6e84f58f070 100644 --- a/packages/cli/test/fixtures/next/tailwind.config.js +++ b/packages/cli/test/fixtures/next/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', - ], + ], theme: { container: { center: true, @@ -58,12 +58,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -73,4 +73,4 @@ module.exports = { }, }, plugins: [require("tailwindcss-animate")], -} \ No newline at end of file +} diff --git a/packages/cli/tsup.config.ts b/packages/cli/tsup.config.ts index 2f8b5896aeb..5e496be82c2 100644 --- a/packages/cli/tsup.config.ts +++ b/packages/cli/tsup.config.ts @@ -6,6 +6,7 @@ export default defineConfig({ entry: ["src/index.ts"], format: ["esm"], sourcemap: true, + minify: true, target: "esnext", outDir: "dist", }) diff --git a/tailwind.config.cjs b/tailwind.config.cjs index b70952b4a4a..a0c2402724d 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -59,12 +59,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/templates/next-template/components/site-header.tsx b/templates/next-template/components/site-header.tsx index 4e7d2472e6f..91e78087035 100644 --- a/templates/next-template/components/site-header.tsx +++ b/templates/next-template/components/site-header.tsx @@ -8,7 +8,7 @@ import { ThemeToggle } from "@/components/theme-toggle" export function SiteHeader() { return ( -
+
diff --git a/templates/next-template/tailwind.config.js b/templates/next-template/tailwind.config.js index ffdff01ca68..3ea1db11128 100644 --- a/templates/next-template/tailwind.config.js +++ b/templates/next-template/tailwind.config.js @@ -58,12 +58,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: {