diff --git a/.changeset/config.json b/.changeset/config.json index ec9454c7bd1..5e1305538ef 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json", - "changelog": ["@changesets/changelog-github", { "repo": "shadcn/ui" }], + "changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui/ui" }], "commit": false, "fixed": [], "linked": [], diff --git a/.changeset/new-jeans-doubt.md b/.changeset/mean-badgers-grab.md similarity index 52% rename from .changeset/new-jeans-doubt.md rename to .changeset/mean-badgers-grab.md index 04708eec284..95f7f8b239b 100644 --- a/.changeset/new-jeans-doubt.md +++ b/.changeset/mean-badgers-grab.md @@ -2,4 +2,4 @@ "shadcn-ui": patch --- -remove duplicate vi call +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/copy-button.tsx b/apps/www/components/copy-button.tsx index d7c4ef263a5..5a2c7747888 100644 --- a/apps/www/components/copy-button.tsx +++ b/apps/www/components/copy-button.tsx @@ -151,7 +151,7 @@ export function CopyNpmCommandButton({ }, [hasCopied]) const copyCommand = React.useCallback( - (value: string, pm: "npm" | "pnpm" | "yarn") => { + (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => { copyToClipboardWithMeta(value, { name: "copy_npm_command", properties: { @@ -199,6 +199,11 @@ export function CopyNpmCommandButton({ > pnpm + copyCommand(commands.__bunCommand__, "bun")} + > + bun + ) diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx index c8495d80f3d..934e7139d4f 100644 --- a/apps/www/components/mdx-components.tsx +++ b/apps/www/components/mdx-components.tsx @@ -170,8 +170,9 @@ const components = { className, __rawString__, __npmCommand__, - __pnpmCommand__, __yarnCommand__, + __pnpmCommand__, + __bunCommand__, __withMeta__, __src__, __event__, @@ -201,16 +202,20 @@ const components = { className={cn("absolute right-4 top-4", __withMeta__ && "top-16")} /> )} - {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && ( - - )} + {__npmCommand__ && + __yarnCommand__ && + __pnpmCommand__ && + __bunCommand__ && ( + + )} ) }, 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/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/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx index e689b207003..cb5e84c3de3 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/*" + ] } + // ... } } ``` 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/lib/rehype-npm-command.ts b/apps/www/lib/rehype-npm-command.ts index e0812bcd36a..7b11718be8c 100644 --- a/apps/www/lib/rehype-npm-command.ts +++ b/apps/www/lib/rehype-npm-command.ts @@ -20,6 +20,10 @@ export function rehypeNpmCommand() { "npm install", "pnpm add" ) + node.properties["__bunCommand__"] = npmCommand.replace( + "npm install", + "bun add" + ) } // npx create. @@ -34,6 +38,7 @@ export function rehypeNpmCommand() { "npx create-", "pnpm create " ) + node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx") } // npx. @@ -48,6 +53,7 @@ export function rehypeNpmCommand() { "npx", "pnpm dlx" ) + node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx") } }) } 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/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/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..3e98e6fbece 100644 --- a/apps/www/registry/default/ui/sheet.tsx +++ b/apps/www/registry/default/ui/sheet.tsx @@ -134,6 +134,8 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, + SheetPortal, + SheetOverlay, SheetTrigger, SheetClose, SheetContent, diff --git a/apps/www/registry/default/ui/table.tsx b/apps/www/registry/default/ui/table.tsx index bb3a87f32a0..116d34bb77b 100644 --- a/apps/www/registry/default/ui/table.tsx +++ b/apps/www/registry/default/ui/table.tsx @@ -6,7 +6,7 @@ const Table = React.forwardRef< HTMLTableElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
+ + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + + ) +} 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/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..36e21b0cb66 100644 --- a/apps/www/registry/new-york/ui/sheet.tsx +++ b/apps/www/registry/new-york/ui/sheet.tsx @@ -134,6 +134,8 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, + SheetPortal, + SheetOverlay, SheetTrigger, SheetClose, SheetContent, diff --git a/apps/www/registry/new-york/ui/table.tsx b/apps/www/registry/new-york/ui/table.tsx index eb17c5a0447..647c4c299bf 100644 --- a/apps/www/registry/new-york/ui/table.tsx +++ b/apps/www/registry/new-york/ui/table.tsx @@ -6,7 +6,7 @@ const Table = React.forwardRef< HTMLTableElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
", "the working directory. defaults to the current directory.", process.cwd() ) + .option("-a, --all", "add all available components", false) .option("-p, --path ", "the path to add the component to.") .action(async (components, opts) => { try { @@ -65,8 +67,10 @@ export const add = new Command() const registryIndex = await getRegistryIndex() - let selectedComponents = options.components - if (!options.components?.length) { + let selectedComponents = options.all + ? registryIndex.map((entry) => entry.name) + : options.components + if (!options.components?.length && !options.all) { const { components } = await prompts({ type: "multiselect", name: "components", @@ -76,6 +80,9 @@ export const add = new Command() choices: registryIndex.map((entry) => ({ title: entry.name, value: entry.name, + selected: options.all + ? true + : options.components?.includes(entry.name), })), }) selectedComponents = components @@ -131,15 +138,27 @@ export const add = new Command() if (existingComponent.length && !options.overwrite) { if (selectedComponents.includes(item.name)) { - logger.warn( - `Component ${item.name} already exists. Use ${chalk.green( - "--overwrite" - )} to overwrite.` - ) - process.exit(1) - } + spinner.stop() + const { overwrite } = await prompts({ + type: "confirm", + name: "overwrite", + message: `Component ${item.name} already exists. Would you like to overwrite?`, + initial: false, + }) + + if (!overwrite) { + logger.info( + `Skipped ${item.name}. To overwrite, run with the ${chalk.green( + "--overwrite" + )} flag.` + ) + continue + } - continue + spinner.start(`Installing ${item.name}...`) + } else { + continue + } } for (const file of item.files) { @@ -155,6 +174,7 @@ export const add = new Command() if (!config.tsx) { filePath = filePath.replace(/\.tsx$/, ".jsx") + filePath = filePath.replace(/\.ts$/, ".js") } await fs.writeFile(filePath, content) 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/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts index d0ad624b147..b5f1259c102 100644 --- a/packages/cli/src/utils/transformers/transform-css-vars.ts +++ b/packages/cli/src/utils/transformers/transform-css-vars.ts @@ -146,27 +146,27 @@ export function applyColorMapping( // Build color mappings. const classNames = input.split(" ") - const lightMode: string[] = [] - const darkMode: string[] = [] + const lightMode = new Set() + const darkMode = new Set() for (let className of classNames) { const [variant, value, modifier] = splitClassName(className) const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix)) if (!prefix) { - if (!lightMode.includes(className)) { - lightMode.push(className) + if (!lightMode.has(className)) { + lightMode.add(className) } continue } const needle = value?.replace(prefix, "") if (needle && needle in mapping.light) { - lightMode.push( + lightMode.add( [variant, `${prefix}${mapping.light[needle]}`] .filter(Boolean) .join(":") + (modifier ? `/${modifier}` : "") ) - darkMode.push( + darkMode.add( ["dark", variant, `${prefix}${mapping.dark[needle]}`] .filter(Boolean) .join(":") + (modifier ? `/${modifier}` : "") @@ -174,10 +174,10 @@ export function applyColorMapping( continue } - if (!lightMode.includes(className)) { - lightMode.push(className) + if (!lightMode.has(className)) { + lightMode.add(className) } } - return lightMode.join(" ") + " " + darkMode.join(" ").trim() + return [...Array.from(lightMode), ...Array.from(darkMode)].join(" ").trim() } 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/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap index 9f5962a2a73..baedb74d2d5 100644 --- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap @@ -23,3 +23,11 @@ export function Foo() { }\\"\\" " `; + +exports[`transform css vars 4`] = ` +"import * as React from \\"react\\" +export function Foo() { + return
foo
+}\\"\\" + " +`; diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts index 1b21150d57b..8da6765c772 100644 --- a/packages/cli/test/utils/apply-color-mapping.test.ts +++ b/packages/cli/test/utils/apply-color-mapping.test.ts @@ -64,7 +64,7 @@ describe("apply color mapping", async () => { input: "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive", output: - "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900", + "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900", }, { input: diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts index 46ad6916a58..586f1cee2bc 100644 --- a/packages/cli/test/utils/transform-css-vars.test.ts +++ b/packages/cli/test/utils/transform-css-vars.test.ts @@ -56,6 +56,29 @@ export function Foo() { raw: `import * as React from "react" export function Foo() { return
foo
+}" + `, + config: { + tsx: true, + tailwind: { + baseColor: "stone", + cssVariables: false, + }, + aliases: { + components: "@/components", + utils: "@/lib/utils", + }, + }, + baseColor: stone, + }) + ).toMatchSnapshot() + + expect( + await transform({ + filename: "test.ts", + raw: `import * as React from "react" +export function Foo() { + return
foo
}" `, config: { 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: {