From 500a353816969e3cce2b3f4f0699ce4e6ad06f0b Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 30 Oct 2024 21:28:58 +0400 Subject: [PATCH 01/41] feat: update home page (#5648) --- apps/www/app/(app)/page.tsx | 24 +++++++++---------- apps/www/components/examples-nav.tsx | 5 ++++ .../registry/new-york/example/cards/chat.tsx | 2 ++ .../new-york/example/cards/metric.tsx | 2 ++ .../registry/new-york/example/cards/stats.tsx | 2 ++ 5 files changed, 22 insertions(+), 13 deletions(-) diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx index 812a4fb29df..72a080e8421 100644 --- a/apps/www/app/(app)/page.tsx +++ b/apps/www/app/(app)/page.tsx @@ -10,8 +10,8 @@ import { PageHeaderDescription, PageHeaderHeading, } from "@/components/page-header" +import CardsNewYork from "@/registry/new-york/example/cards" import { Button } from "@/registry/new-york/ui/button" -import MailPage from "@/app/(app)/examples/mail/page" export default function IndexPage() { return ( @@ -41,24 +41,22 @@ export default function IndexPage() {
Mail Mail
-
-
- -
+
+
) diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx index 95d65531198..c0d72eb84a6 100644 --- a/apps/www/components/examples-nav.tsx +++ b/apps/www/components/examples-nav.tsx @@ -8,6 +8,11 @@ import { cn } from "@/lib/utils" import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" const examples = [ + { + name: "Examples", + href: "/", + code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail", + }, { name: "Mail", href: "/examples/mail", diff --git a/apps/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx index ccb8f596ae3..5d839d3a189 100644 --- a/apps/www/registry/new-york/example/cards/chat.tsx +++ b/apps/www/registry/new-york/example/cards/chat.tsx @@ -1,3 +1,5 @@ +"use client" + import * as React from "react" import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons" diff --git a/apps/www/registry/new-york/example/cards/metric.tsx b/apps/www/registry/new-york/example/cards/metric.tsx index 8b788c2f78f..e9d6e7f5453 100644 --- a/apps/www/registry/new-york/example/cards/metric.tsx +++ b/apps/www/registry/new-york/example/cards/metric.tsx @@ -1,3 +1,5 @@ +"use client" + import { useTheme } from "next-themes" import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts" diff --git a/apps/www/registry/new-york/example/cards/stats.tsx b/apps/www/registry/new-york/example/cards/stats.tsx index 450d06d1aae..a676ccff013 100644 --- a/apps/www/registry/new-york/example/cards/stats.tsx +++ b/apps/www/registry/new-york/example/cards/stats.tsx @@ -1,3 +1,5 @@ +"use client" + import { useTheme } from "next-themes" import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts" From 4ff64ba818d15a094547f845ea294c2e1ab208d4 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 3 Nov 2024 12:12:41 +0400 Subject: [PATCH 02/41] feat: remove npm flags (#5686) * docs: update status table and docs * feat(shadcn): remove react-19 check * chore: add changeset --- .changeset/kind-suits-wait.md | 5 ++ apps/www/content/docs/components/chart.mdx | 54 ++++++++++++++----- apps/www/content/docs/react-19.mdx | 6 ++- .../src/utils/updaters/update-dependencies.ts | 45 +--------------- 4 files changed, 52 insertions(+), 58 deletions(-) create mode 100644 .changeset/kind-suits-wait.md diff --git a/.changeset/kind-suits-wait.md b/.changeset/kind-suits-wait.md new file mode 100644 index 00000000000..cab01c1b92b --- /dev/null +++ b/.changeset/kind-suits-wait.md @@ -0,0 +1,5 @@ +--- +"shadcn": patch +--- + +remove flag for npm diff --git a/apps/www/content/docs/components/chart.mdx b/apps/www/content/docs/components/chart.mdx index 9566275e48b..907625729b9 100644 --- a/apps/www/content/docs/components/chart.mdx +++ b/apps/www/content/docs/components/chart.mdx @@ -4,12 +4,6 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap component: true --- - - -**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts). - - - - -**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts). - - - @@ -95,6 +83,27 @@ npx shadcn@latest add chart } ``` + + To use recharts with React 19 and Next.js 15, you will need to override the + `react-is` dependency.{" "} + + +Add the following to your `package.json` + +```json title="package.json" +"overrides": { + "react-is": "^19.0.0-rc-69d4b800-20241021" +} +``` + +Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example. + +Run `npm install` + +```bash +npm install +``` + @@ -135,6 +144,27 @@ npm install recharts } ``` + + To use recharts with React 19 and Next.js 15, you will need to override the + `react-is` dependency.{" "} + + +Add the following to your `package.json` + +```json title="package.json" +"overrides": { + "react-is": "^19.0.0-rc-69d4b800-20241021" +} +``` + +Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example. + +Run `npm install` + +```bash +npm install +``` + diff --git a/apps/www/content/docs/react-19.mdx b/apps/www/content/docs/react-19.mdx index 4ba6a5ec8b9..2f15ef52270 100644 --- a/apps/www/content/docs/react-19.mdx +++ b/apps/www/content/docs/react-19.mdx @@ -3,7 +3,9 @@ title: Next.js 15 + React 19 description: Using shadcn/ui with Next.js 15 and React 19. --- - +**shadcn/ui is now fully compatible with React 19!** + + **The following guide applies to any framework that supports React 19**. I titled this page "Next.js 15 + React 19" to help people upgrading to Next.js 15 find it. We are working with package maintainers to help upgrade to React @@ -143,7 +145,7 @@ To make it easy for you track the progress of the upgrade, I've created a table | [input-otp](https://www.npmjs.com/package/input-otp) | ✅ | | | [vaul](https://www.npmjs.com/package/vaul) | ✅ | | | [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons) | ✅ | | -| [cmdk](https://www.npmjs.com/package/cmdk) | 🚧 | See [PR #318](https://github.com/pacocoursey/cmdk/pull/318) | +| [cmdk](https://www.npmjs.com/package/cmdk) | ✅ | | If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub. diff --git a/packages/shadcn/src/utils/updaters/update-dependencies.ts b/packages/shadcn/src/utils/updaters/update-dependencies.ts index ad3c1af5abd..8eb53a0937a 100644 --- a/packages/shadcn/src/utils/updaters/update-dependencies.ts +++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts @@ -1,11 +1,8 @@ import { Config } from "@/src/utils/get-config" -import { getPackageInfo } from "@/src/utils/get-package-info" import { getPackageManager } from "@/src/utils/get-package-manager" -import { logger } from "@/src/utils/logger" import { RegistryItem } from "@/src/utils/registry/schema" import { spinner } from "@/src/utils/spinner" import { execa } from "execa" -import prompts from "prompts" export async function updateDependencies( dependencies: RegistryItem["dependencies"], @@ -29,52 +26,12 @@ export async function updateDependencies( })?.start() const packageManager = await getPackageManager(config.resolvedPaths.cwd) - // Offer to use --force or --legacy-peer-deps if using React 19 with npm. - let flag = "" - if (isUsingReact19(config) && packageManager === "npm") { - dependenciesSpinner.stopAndPersist() - logger.warn( - "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).\n" - ) - const confirmation = await prompts([ - { - type: "select", - name: "flag", - message: "How would you like to proceed?", - choices: [ - { title: "Use --force", value: "force" }, - { title: "Use --legacy-peer-deps", value: "legacy-peer-deps" }, - ], - }, - ]) - - if (confirmation) { - flag = confirmation.flag - } - } - - dependenciesSpinner?.start() - await execa( packageManager, - [ - packageManager === "npm" ? "install" : "add", - ...(packageManager === "npm" && flag ? [`--${flag}`] : []), - ...dependencies, - ], + [packageManager === "npm" ? "install" : "add", ...dependencies], { cwd: config.resolvedPaths.cwd, } ) dependenciesSpinner?.succeed() } - -function isUsingReact19(config: Config) { - const packageInfo = getPackageInfo(config.resolvedPaths.cwd) - - if (!packageInfo?.dependencies?.react) { - return false - } - - return /^(?:\^|~)?19(?:\.\d+)*(?:-.*)?$/.test(packageInfo.dependencies.react) -} From 70c684c224be10777a86b36ceafc7a890b7481d0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 3 Nov 2024 12:17:58 +0400 Subject: [PATCH 03/41] chore(release): version packages (#5687) Co-authored-by: github-actions[bot] --- .changeset/kind-suits-wait.md | 5 ----- packages/shadcn/CHANGELOG.md | 6 ++++++ packages/shadcn/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/kind-suits-wait.md diff --git a/.changeset/kind-suits-wait.md b/.changeset/kind-suits-wait.md deleted file mode 100644 index cab01c1b92b..00000000000 --- a/.changeset/kind-suits-wait.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"shadcn": patch ---- - -remove flag for npm diff --git a/packages/shadcn/CHANGELOG.md b/packages/shadcn/CHANGELOG.md index a54a7a6b853..113afa56ff7 100644 --- a/packages/shadcn/CHANGELOG.md +++ b/packages/shadcn/CHANGELOG.md @@ -1,5 +1,11 @@ # @shadcn/ui +## 2.1.4 + +### Patch Changes + +- [#5686](https://github.com/shadcn-ui/ui/pull/5686) [`4ff64ba`](https://github.com/shadcn-ui/ui/commit/4ff64ba818d15a094547f845ea294c2e1ab208d4) Thanks [@shadcn](https://github.com/shadcn)! - remove flag for npm + ## 2.1.3 ### Patch Changes diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json index 727ab170e16..3ff643df1d2 100644 --- a/packages/shadcn/package.json +++ b/packages/shadcn/package.json @@ -1,6 +1,6 @@ { "name": "shadcn", - "version": "2.1.3", + "version": "2.1.4", "description": "Add components to your apps.", "publishConfig": { "access": "public" From 961e0b62d770f9f7e1d5c6c0c62ba510f3964d26 Mon Sep 17 00:00:00 2001 From: shadcn Date: Sun, 3 Nov 2024 13:27:10 +0400 Subject: [PATCH 04/41] fix: a11y for card and calendar --- .../cards/components/share-document.tsx | 2 +- apps/www/content/docs/components/calendar.mdx | 11 +++++++ apps/www/content/docs/components/card.mdx | 32 +++++++++++++++++++ .../www/public/r/styles/default/calendar.json | 2 +- apps/www/public/r/styles/default/card.json | 2 +- .../public/r/styles/new-york/calendar.json | 2 +- apps/www/public/r/styles/new-york/card.json | 2 +- .../registry/default/example/cards/share.tsx | 2 +- apps/www/registry/default/ui/calendar.tsx | 2 +- apps/www/registry/default/ui/card.tsx | 12 +++---- .../registry/new-york/example/cards/share.tsx | 2 +- apps/www/registry/new-york/ui/calendar.tsx | 2 +- apps/www/registry/new-york/ui/card.tsx | 12 +++---- 13 files changed, 64 insertions(+), 21 deletions(-) diff --git a/apps/www/app/(app)/examples/cards/components/share-document.tsx b/apps/www/app/(app)/examples/cards/components/share-document.tsx index fb599c7892d..aea2607cc46 100644 --- a/apps/www/app/(app)/examples/cards/components/share-document.tsx +++ b/apps/www/app/(app)/examples/cards/components/share-document.tsx @@ -41,7 +41,7 @@ export function DemoShareDocument() {
-

People with access

+
People with access
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx index d4a7a40980e..867dbd0eafb 100644 --- a/apps/www/content/docs/components/calendar.mdx +++ b/apps/www/content/docs/components/calendar.mdx @@ -88,3 +88,14 @@ You can use the `` component to build a date picker. See the [Date Pic ### Form + +## Changelog + +### 11-03-2024 day_outside color + +- Changed the color of the `day_outside` class to the following to improve contrast: + + ```tsx showLineNumbers title="calendar.tsx" + "day_outside: + "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", + ``` diff --git a/apps/www/content/docs/components/card.mdx b/apps/www/content/docs/components/card.mdx index 78ddec27166..63036867c41 100644 --- a/apps/www/content/docs/components/card.mdx +++ b/apps/www/content/docs/components/card.mdx @@ -72,3 +72,35 @@ import { name="card-demo" description="A card showing notifications settings." /> + +## Changelog + +### 11-03-2024 a11y for title and description + +- Changed the `CardTitle` and `CardDescription` components to use `div` instead of `h3` and `p` to improve accessibility. + +```tsx showLineNumbers title="card.tsx" +const CardTitle = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardDescription.displayName = "CardDescription" +``` diff --git a/apps/www/public/r/styles/default/calendar.json b/apps/www/public/r/styles/default/calendar.json index edbb6230612..84a7c394fe1 100644 --- a/apps/www/public/r/styles/default/calendar.json +++ b/apps/www/public/r/styles/default/calendar.json @@ -11,7 +11,7 @@ "files": [ { "path": "ui/calendar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/default/card.json b/apps/www/public/r/styles/default/card.json index 8cdcab2ddf5..16d6528e401 100644 --- a/apps/www/public/r/styles/default/card.json +++ b/apps/www/public/r/styles/default/card.json @@ -4,7 +4,7 @@ "files": [ { "path": "ui/card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/calendar.json b/apps/www/public/r/styles/new-york/calendar.json index 2078a379618..2aafb7948c3 100644 --- a/apps/www/public/r/styles/new-york/calendar.json +++ b/apps/www/public/r/styles/new-york/calendar.json @@ -11,7 +11,7 @@ "files": [ { "path": "ui/calendar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ ...props }) => ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/card.json b/apps/www/public/r/styles/new-york/card.json index 31436e3e6f6..75b687da4fa 100644 --- a/apps/www/public/r/styles/new-york/card.json +++ b/apps/www/public/r/styles/new-york/card.json @@ -4,7 +4,7 @@ "files": [ { "path": "ui/card.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/registry/default/example/cards/share.tsx b/apps/www/registry/default/example/cards/share.tsx index e22c03f11ac..7451c05b341 100644 --- a/apps/www/registry/default/example/cards/share.tsx +++ b/apps/www/registry/default/example/cards/share.tsx @@ -49,7 +49,7 @@ export function CardsShare() {
-

People with access

+
People with access
diff --git a/apps/www/registry/default/ui/calendar.tsx b/apps/www/registry/default/ui/calendar.tsx index e04fe19511f..d8eb5231a30 100644 --- a/apps/www/registry/default/ui/calendar.tsx +++ b/apps/www/registry/default/ui/calendar.tsx @@ -46,7 +46,7 @@ function Calendar({ "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: - "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", + "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", diff --git a/apps/www/registry/default/ui/card.tsx b/apps/www/registry/default/ui/card.tsx index afa13ecfa3b..f62edea578d 100644 --- a/apps/www/registry/default/ui/card.tsx +++ b/apps/www/registry/default/ui/card.tsx @@ -30,10 +30,10 @@ const CardHeader = React.forwardRef< CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

+ HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

-

People with access

+
People with access
diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx index 85571a1ca01..d09f8f9d192 100644 --- a/apps/www/registry/new-york/ui/calendar.tsx +++ b/apps/www/registry/new-york/ui/calendar.tsx @@ -52,7 +52,7 @@ function Calendar({ "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: - "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", + "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", diff --git a/apps/www/registry/new-york/ui/card.tsx b/apps/www/registry/new-york/ui/card.tsx index 77e9fb789bf..cabfbfc59d9 100644 --- a/apps/www/registry/new-york/ui/card.tsx +++ b/apps/www/registry/new-york/ui/card.tsx @@ -30,10 +30,10 @@ const CardHeader = React.forwardRef< CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes + HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

+ HTMLDivElement, + React.HTMLAttributes >(({ className, ...props }, ref) => ( -

Date: Sun, 3 Nov 2024 14:35:04 +0400 Subject: [PATCH 05/41] feat: www updates (#5688) * feat: www updates * fix: lint --- apps/www/app/(app)/docs/[[...slug]]/page.tsx | 4 +- apps/www/app/(app)/docs/layout.tsx | 2 +- apps/www/app/(app)/layout.tsx | 4 +- apps/www/app/(app)/page.tsx | 2 +- apps/www/components/examples-nav.tsx | 7 +--- apps/www/components/mobile-nav.tsx | 37 ++++++------------ apps/www/components/mode-toggle.tsx | 2 +- apps/www/components/pager.tsx | 29 ++++++-------- apps/www/components/site-header.tsx | 2 +- apps/www/public/favicon-16x16.png | Bin 246 -> 191 bytes apps/www/public/favicon-32x32.png | Bin 324 -> 241 bytes apps/www/public/favicon.ico | Bin 15406 -> 379 bytes .../public/r/styles/new-york/accordion.json | 2 +- .../new-york/example/cards/activity-goal.tsx | 6 +-- .../registry/new-york/example/cards/chat.tsx | 6 +-- .../new-york/example/cards/data-table.tsx | 20 +++------- .../new-york/example/cards/report-issue.tsx | 6 ++- .../registry/new-york/example/cards/stats.tsx | 2 +- .../new-york/example/cards/team-members.tsx | 2 +- apps/www/registry/new-york/ui/accordion.tsx | 2 +- tailwind.config.cjs | 2 +- 21 files changed, 53 insertions(+), 84 deletions(-) diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index 824de656341..076542e7c3d 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx @@ -89,7 +89,7 @@ export default async function DocPage({ params }: DocPageProps) { return (

-
+
Docs
@@ -137,7 +137,7 @@ export default async function DocPage({ params }: DocPageProps) {
-
+
{doc.toc && } diff --git a/apps/www/app/(app)/docs/layout.tsx b/apps/www/app/(app)/docs/layout.tsx index f16dc0c35b6..234ab4fbe1f 100644 --- a/apps/www/app/(app)/docs/layout.tsx +++ b/apps/www/app/(app)/docs/layout.tsx @@ -8,7 +8,7 @@ interface DocsLayoutProps { export default function DocsLayout({ children }: DocsLayoutProps) { return ( -
+
- + - + - +
diff --git a/apps/www/registry/new-york/example/cards/metric.tsx b/apps/www/registry/new-york/example/cards/metric.tsx index e9d6e7f5453..f1f84d8d9e0 100644 --- a/apps/www/registry/new-york/example/cards/metric.tsx +++ b/apps/www/registry/new-york/example/cards/metric.tsx @@ -11,6 +11,12 @@ import { CardHeader, CardTitle, } from "@/registry/new-york/ui/card" +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/registry/new-york/ui/chart" import { baseColors } from "@/registry/registry-base-colors" const data = [ @@ -44,14 +50,18 @@ const data = [ }, ] -export function CardsMetric() { - const { theme: mode } = useTheme() - const [config] = useConfig() - - const baseColor = baseColors.find( - (baseColor) => baseColor.name === config.theme - ) +const chartConfig = { + today: { + label: "Today", + color: "hsl(var(--primary))", + }, + average: { + label: "Average", + color: "hsl(var(--muted-foreground))", + }, +} satisfies ChartConfig +export function CardsMetric() { return ( @@ -61,87 +71,39 @@ export function CardsMetric() { -
- - + + - { - if (active && payload && payload.length) { - return ( -
-
-
- - Average - - - {payload[0].value} - -
-
- - Today - - - {payload[1].value} - -
-
-
- ) - } - - return null - }} - /> - - -
-
-
+ /> + + } /> + +
) diff --git a/apps/www/registry/new-york/example/cards/stats.tsx b/apps/www/registry/new-york/example/cards/stats.tsx index 53e9b389638..c198191a739 100644 --- a/apps/www/registry/new-york/example/cards/stats.tsx +++ b/apps/www/registry/new-york/example/cards/stats.tsx @@ -1,16 +1,14 @@ "use client" -import { useTheme } from "next-themes" -import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts" +import { Bar, BarChart, Line, LineChart } from "recharts" -import { useConfig } from "@/hooks/use-config" import { Card, CardContent, CardHeader, CardTitle, } from "@/registry/new-york/ui/card" -import { baseColors } from "@/registry/registry-base-colors" +import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart" const data = [ { @@ -47,14 +45,24 @@ const data = [ }, ] -export function CardsStats() { - const { theme: mode } = useTheme() - const [config] = useConfig() - - const baseColor = baseColors.find( - (baseColor) => baseColor.name === config.theme - ) +const chartConfig = { + revenue: { + label: "Revenue", + theme: { + light: "black", + dark: "white", + }, + }, + subscription: { + label: "Subscriptions", + theme: { + light: "black", + dark: "white", + }, + }, +} satisfies ChartConfig +export function CardsStats() { return (
@@ -66,38 +74,28 @@ export function CardsStats() {

+20.1% from last month

-
- - + + - - - -
+ stroke="var(--color-revenue)" + /> + +
@@ -109,25 +107,15 @@ export function CardsStats() {

+180.1% from last month

-
- - - - - -
+ + + + +
From 2c2fe97eb96b2c5c7d03d1ae2756a851c3790030 Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 6 Nov 2024 00:00:41 +0400 Subject: [PATCH 11/41] feat: move new-york to lucide-react (#5602) * feat: move new-york to lucide-react * fix: mail open * chore: update registry * chore: add test:dev * chore: add changeset * feat: build an icon registry * chore: add missing registry icons * feat: add an icons debug page * feat: add an icon migration * chore(www): migrate all radix icons to lucide * feat: update migration script * chore: update changeset * feat(shadcn): implement icons transformer * fix: missing registry icons * fix(shadcn): handling of missing icons * feat: add support for multiple libraries --- .changeset/tame-falcons-beg.md | 6 + .../__registry__/default/block/_sink/page.tsx | 273 +++++++++++ apps/www/__registry__/icons.tsx | 451 ++++++++++++++++++ apps/www/__registry__/index.tsx | 24 + .../new-york/block/_sink/page.tsx | 273 +++++++++++ apps/www/app/(app)/colors/layout.tsx | 4 +- apps/www/app/(app)/docs/[[...slug]]/page.tsx | 8 +- .../examples/cards/components/github-card.tsx | 17 +- .../cards/components/notifications.tsx | 8 +- .../cards/components/team-members.tsx | 8 +- .../components/date-range-picker.tsx | 2 +- .../dashboard/components/team-switcher.tsx | 14 +- .../examples/forms/account/account-form.tsx | 8 +- .../forms/appearance/appearance-form.tsx | 4 +- .../music/components/album-artwork.tsx | 4 +- apps/www/app/(app)/examples/music/page.tsx | 4 +- .../playground/components/model-selector.tsx | 11 +- .../playground/components/preset-actions.tsx | 6 +- .../playground/components/preset-selector.tsx | 8 +- .../playground/components/preset-share.tsx | 4 +- .../app/(app)/examples/playground/page.tsx | 8 +- .../components/data-table-column-header.tsx | 19 +- .../components/data-table-faceted-filter.tsx | 6 +- .../components/data-table-pagination.tsx | 20 +- .../components/data-table-row-actions.tsx | 4 +- .../tasks/components/data-table-toolbar.tsx | 4 +- .../components/data-table-view-options.tsx | 4 +- .../app/(app)/examples/tasks/data/data.tsx | 34 +- apps/www/app/(app)/sink/layout.tsx | 27 -- apps/www/app/(app)/sink/new-york/page.tsx | 206 -------- apps/www/app/(app)/sink/page.tsx | 210 -------- apps/www/app/(internal)/icons/layout.tsx | 34 ++ apps/www/app/(internal)/icons/page.tsx | 52 ++ apps/www/app/(internal)/sink/page.tsx | 3 + apps/www/components/announcement.tsx | 7 +- apps/www/components/command-menu.tsx | 18 +- apps/www/components/examples-nav.tsx | 7 +- apps/www/components/pager.tsx | 6 +- apps/www/components/theme-customizer.tsx | 35 +- apps/www/content/docs/installation/manual.mdx | 6 - apps/www/public/r/icons/index.json | 150 ++++++ apps/www/public/r/styles/default/_sink.json | 386 +++++++++++++++ .../public/r/styles/default/button-icon.json | 2 +- .../r/styles/default/button-loading.json | 2 +- .../r/styles/default/collapsible-demo.json | 2 +- .../r/styles/default/combobox-demo.json | 2 +- .../r/styles/default/combobox-form.json | 2 +- .../r/styles/default/data-table-demo.json | 2 +- .../r/styles/default/date-picker-demo.json | 2 +- .../r/styles/default/dialog-close-button.json | 2 +- .../public/r/styles/default/drawer-demo.json | 2 +- apps/www/public/r/styles/default/sink.json | 106 ++++ .../public/r/styles/default/sonner-demo.json | 2 +- apps/www/public/r/styles/default/toggle.json | 2 +- apps/www/public/r/styles/new-york/_sink.json | 386 +++++++++++++++ .../public/r/styles/new-york/accordion.json | 2 +- .../public/r/styles/new-york/alert-demo.json | 2 +- .../r/styles/new-york/alert-destructive.json | 2 +- .../styles/new-york/breadcrumb-dropdown.json | 2 +- .../styles/new-york/breadcrumb-separator.json | 2 +- .../public/r/styles/new-york/breadcrumb.json | 2 +- .../public/r/styles/new-york/button-icon.json | 2 +- .../r/styles/new-york/button-loading.json | 2 +- .../r/styles/new-york/button-with-icon.json | 2 +- .../r/styles/new-york/calendar-form.json | 2 +- .../public/r/styles/new-york/calendar.json | 2 +- .../public/r/styles/new-york/card-demo.json | 2 +- .../public/r/styles/new-york/carousel.json | 2 +- .../public/r/styles/new-york/checkbox.json | 2 +- .../r/styles/new-york/collapsible-demo.json | 2 +- .../r/styles/new-york/combobox-demo.json | 2 +- .../new-york/combobox-dropdown-menu.json | 2 +- .../r/styles/new-york/combobox-form.json | 2 +- .../r/styles/new-york/command-demo.json | 2 +- .../r/styles/new-york/command-dialog.json | 2 +- .../www/public/r/styles/new-york/command.json | 2 +- .../r/styles/new-york/context-menu.json | 2 +- .../r/styles/new-york/data-table-demo.json | 2 +- .../r/styles/new-york/date-picker-demo.json | 2 +- .../r/styles/new-york/date-picker-form.json | 2 +- .../new-york/date-picker-with-presets.json | 2 +- .../new-york/date-picker-with-range.json | 2 +- .../styles/new-york/dialog-close-button.json | 2 +- apps/www/public/r/styles/new-york/dialog.json | 2 +- .../public/r/styles/new-york/drawer-demo.json | 2 +- .../r/styles/new-york/dropdown-menu.json | 2 +- .../r/styles/new-york/hover-card-demo.json | 2 +- apps/www/public/r/styles/new-york/index.json | 3 +- .../public/r/styles/new-york/input-otp.json | 2 +- .../www/public/r/styles/new-york/menubar.json | 2 +- .../public/r/styles/new-york/mode-toggle.json | 2 +- .../r/styles/new-york/navigation-menu.json | 2 +- .../public/r/styles/new-york/pagination.json | 2 +- .../public/r/styles/new-york/radio-group.json | 2 +- .../r/styles/new-york/resizable-handle.json | 2 +- .../public/r/styles/new-york/resizable.json | 2 +- apps/www/public/r/styles/new-york/select.json | 2 +- apps/www/public/r/styles/new-york/sheet.json | 2 +- apps/www/public/r/styles/new-york/sink.json | 106 ++++ .../public/r/styles/new-york/sonner-demo.json | 2 +- apps/www/public/r/styles/new-york/toast.json | 2 +- .../public/r/styles/new-york/toggle-demo.json | 2 +- .../r/styles/new-york/toggle-disabled.json | 2 +- .../r/styles/new-york/toggle-group-demo.json | 2 +- .../new-york/toggle-group-disabled.json | 2 +- .../r/styles/new-york/toggle-group-lg.json | 2 +- .../styles/new-york/toggle-group-outline.json | 2 +- .../styles/new-york/toggle-group-single.json | 2 +- .../r/styles/new-york/toggle-group-sm.json | 2 +- .../public/r/styles/new-york/toggle-lg.json | 2 +- .../r/styles/new-york/toggle-outline.json | 2 +- .../public/r/styles/new-york/toggle-sm.json | 2 +- .../r/styles/new-york/toggle-with-text.json | 2 +- apps/www/public/r/styles/new-york/toggle.json | 2 +- apps/www/public/schema.json | 3 + .../block/_sink/components/accordion-demo.tsx | 32 ++ .../block/_sink/components/alert-demo.tsx | 19 + .../_sink/components/alert-dialog-demo.tsx | 35 ++ .../_sink/components/app-sidebar copy.tsx | 175 +++++++ .../block/_sink/components/app-sidebar.tsx | 175 +++++++ .../_sink/components/aspect-ratio-demo.tsx | 16 + .../block/_sink/components/avatar-demo.tsx | 14 + .../block/_sink/components/badge-demo.tsx | 5 + .../_sink/components/badge-destructive.tsx | 5 + .../block/_sink/components/badge-outline.tsx | 5 + .../_sink/components/badge-secondary.tsx | 5 + .../_sink/components/breadcrumb-demo.tsx | 49 ++ .../_sink/components/button-demo copy.tsx | 5 + .../block/_sink/components/button-demo.tsx | 5 + .../_sink/components/button-destructive.tsx | 5 + .../block/_sink/components/button-ghost.tsx | 5 + .../block/_sink/components/button-icon.tsx | 11 + .../block/_sink/components/button-link.tsx | 5 + .../block/_sink/components/button-loading.tsx | 12 + .../block/_sink/components/button-outline.tsx | 5 + .../_sink/components/button-secondary.tsx | 5 + .../_sink/components/button-with-icon.tsx | 11 + .../block/_sink/components/calendar-demo.tsx | 18 + .../block/_sink/components/card-demo.tsx | 78 +++ .../block/_sink/components/carousel-demo.tsx | 32 ++ .../block/_sink/components/checkbox-demo.tsx | 17 + .../_sink/components/collapsible-demo.tsx | 46 ++ .../block/_sink/components/combobox-demo.tsx | 94 ++++ .../block/_sink/components/command-demo.tsx | 62 +++ .../components/component-wrapper copy.tsx | 22 + .../_sink/components/component-wrapper.tsx | 22 + .../_sink/components/context-menu-demo.tsx | 67 +++ .../_sink/components/date-picker-demo.tsx | 43 ++ .../block/_sink/components/dialog-demo.tsx | 47 ++ .../block/_sink/components/drawer-demo.tsx | 136 ++++++ .../_sink/components/dropdown-menu-demo.tsx | 75 +++ .../_sink/components/hover-card-demo.tsx | 43 ++ .../block/_sink/components/input-demo.tsx | 5 + .../block/_sink/components/input-otp-demo.tsx | 24 + .../block/_sink/components/label-demo.tsx | 13 + .../block/_sink/components/menubar-demo.tsx | 107 +++++ .../block/_sink/components/nav-main copy.tsx | 73 +++ .../block/_sink/components/nav-main.tsx | 73 +++ .../_sink/components/nav-projects copy.tsx | 89 ++++ .../block/_sink/components/nav-projects.tsx | 89 ++++ .../block/_sink/components/nav-user copy.tsx | 114 +++++ .../block/_sink/components/nav-user.tsx | 114 +++++ .../_sink/components/navigation-menu-demo.tsx | 143 ++++++ .../_sink/components/pagination-demo.tsx | 38 ++ .../block/_sink/components/popover-demo.tsx | 62 +++ .../block/_sink/components/progress-demo.tsx | 16 + .../_sink/components/radio-group-demo.tsx | 21 + .../_sink/components/resizable-handle.tsx | 26 + .../_sink/components/scroll-area-demo.tsx | 24 + .../block/_sink/components/select-demo.tsx | 31 ++ .../block/_sink/components/separator-demo.tsx | 22 + .../block/_sink/components/sheet-demo.tsx | 50 ++ .../block/_sink/components/skeleton-demo.tsx | 13 + .../block/_sink/components/slider-demo.tsx | 16 + .../block/_sink/components/sonner-demo.tsx | 24 + .../block/_sink/components/switch-demo.tsx | 11 + .../block/_sink/components/table-demo.tsx | 87 ++++ .../block/_sink/components/tabs-demo.tsx | 74 +++ .../_sink/components/team-switcher copy.tsx | 89 ++++ .../block/_sink/components/team-switcher.tsx | 89 ++++ .../block/_sink/components/textarea-demo.tsx | 5 + .../block/_sink/components/toast-demo.tsx | 26 + .../block/_sink/components/toggle-demo.tsx | 11 + .../_sink/components/toggle-disabled.tsx | 11 + .../_sink/components/toggle-group-demo.tsx | 22 + .../block/_sink/components/toggle-outline.tsx | 11 + .../_sink/components/toggle-with-text.tsx | 12 + .../block/_sink/components/tooltip-demo.tsx | 22 + .../www/registry/default/block/_sink/page.tsx | 273 +++++++++++ .../registry/default/example/button-icon.tsx | 2 +- .../default/example/button-loading.tsx | 2 +- .../default/example/cards/activity-goal.tsx | 4 +- .../default/example/cards/data-table.tsx | 12 +- .../default/example/cards/team-members.tsx | 11 +- .../default/example/collapsible-demo.tsx | 2 +- .../default/example/combobox-demo.tsx | 6 +- .../default/example/combobox-form.tsx | 4 +- .../default/example/data-table-demo.tsx | 6 +- .../default/example/date-picker-demo.tsx | 2 +- .../default/example/dialog-close-button.tsx | 2 +- .../registry/default/example/drawer-demo.tsx | 6 +- .../registry/default/example/sonner-demo.tsx | 2 + apps/www/registry/default/ui/toggle.tsx | 8 +- .../block/_sink/components/accordion-demo.tsx | 32 ++ .../block/_sink/components/alert-demo.tsx | 19 + .../_sink/components/alert-dialog-demo.tsx | 35 ++ .../_sink/components/app-sidebar copy.tsx | 175 +++++++ .../block/_sink/components/app-sidebar.tsx | 175 +++++++ .../_sink/components/aspect-ratio-demo.tsx | 16 + .../block/_sink/components/avatar-demo.tsx | 14 + .../block/_sink/components/badge-demo.tsx | 5 + .../_sink/components/badge-destructive.tsx | 5 + .../block/_sink/components/badge-outline.tsx | 5 + .../_sink/components/badge-secondary.tsx | 5 + .../_sink/components/breadcrumb-demo.tsx | 49 ++ .../_sink/components/button-demo copy.tsx | 5 + .../block/_sink/components/button-demo.tsx | 5 + .../_sink/components/button-destructive.tsx | 5 + .../block/_sink/components/button-ghost.tsx | 5 + .../block/_sink/components/button-icon.tsx | 11 + .../block/_sink/components/button-link.tsx | 5 + .../block/_sink/components/button-loading.tsx | 12 + .../block/_sink/components/button-outline.tsx | 5 + .../_sink/components/button-secondary.tsx | 5 + .../_sink/components/button-with-icon.tsx | 11 + .../block/_sink/components/calendar-demo.tsx | 18 + .../block/_sink/components/card-demo.tsx | 78 +++ .../block/_sink/components/carousel-demo.tsx | 32 ++ .../block/_sink/components/checkbox-demo.tsx | 17 + .../_sink/components/collapsible-demo.tsx | 46 ++ .../block/_sink/components/combobox-demo.tsx | 94 ++++ .../block/_sink/components/command-demo.tsx | 62 +++ .../components/component-wrapper copy.tsx | 22 + .../_sink/components/component-wrapper.tsx | 22 + .../_sink/components/context-menu-demo.tsx | 67 +++ .../_sink/components/date-picker-demo.tsx | 43 ++ .../block/_sink/components/dialog-demo.tsx | 47 ++ .../block/_sink/components/drawer-demo.tsx | 136 ++++++ .../_sink/components/dropdown-menu-demo.tsx | 75 +++ .../_sink/components/hover-card-demo.tsx | 43 ++ .../block/_sink/components/input-demo.tsx | 5 + .../block/_sink/components/input-otp-demo.tsx | 24 + .../block/_sink/components/label-demo.tsx | 13 + .../block/_sink/components/menubar-demo.tsx | 107 +++++ .../block/_sink/components/nav-main copy.tsx | 73 +++ .../block/_sink/components/nav-main.tsx | 73 +++ .../_sink/components/nav-projects copy.tsx | 89 ++++ .../block/_sink/components/nav-projects.tsx | 89 ++++ .../block/_sink/components/nav-user copy.tsx | 114 +++++ .../block/_sink/components/nav-user.tsx | 114 +++++ .../_sink/components/navigation-menu-demo.tsx | 143 ++++++ .../_sink/components/pagination-demo.tsx | 38 ++ .../block/_sink/components/popover-demo.tsx | 62 +++ .../block/_sink/components/progress-demo.tsx | 16 + .../_sink/components/radio-group-demo.tsx | 21 + .../_sink/components/resizable-handle.tsx | 26 + .../_sink/components/scroll-area-demo.tsx | 24 + .../block/_sink/components/select-demo.tsx | 31 ++ .../block/_sink/components/separator-demo.tsx | 22 + .../block/_sink/components/sheet-demo.tsx | 50 ++ .../block/_sink/components/skeleton-demo.tsx | 13 + .../block/_sink/components/slider-demo.tsx | 16 + .../block/_sink/components/sonner-demo.tsx | 24 + .../block/_sink/components/switch-demo.tsx | 11 + .../block/_sink/components/table-demo.tsx | 87 ++++ .../block/_sink/components/tabs-demo.tsx | 74 +++ .../_sink/components/team-switcher copy.tsx | 89 ++++ .../block/_sink/components/team-switcher.tsx | 89 ++++ .../block/_sink/components/textarea-demo.tsx | 5 + .../block/_sink/components/toast-demo.tsx | 26 + .../block/_sink/components/toggle-demo.tsx | 11 + .../_sink/components/toggle-disabled.tsx | 11 + .../_sink/components/toggle-group-demo.tsx | 22 + .../block/_sink/components/toggle-outline.tsx | 11 + .../_sink/components/toggle-with-text.tsx | 12 + .../block/_sink/components/tooltip-demo.tsx | 22 + .../registry/new-york/block/_sink/page.tsx | 273 +++++++++++ .../registry/new-york/example/alert-demo.tsx | 4 +- .../new-york/example/alert-destructive.tsx | 4 +- .../new-york/example/breadcrumb-dropdown.tsx | 8 +- .../new-york/example/breadcrumb-separator.tsx | 6 +- .../registry/new-york/example/button-icon.tsx | 4 +- .../new-york/example/button-loading.tsx | 4 +- .../new-york/example/button-with-icon.tsx | 4 +- .../new-york/example/calendar-form.tsx | 2 +- .../registry/new-york/example/card-demo.tsx | 6 +- .../new-york/example/cards/activity-goal.tsx | 6 +- .../registry/new-york/example/cards/chat.tsx | 8 +- .../new-york/example/cards/data-table.tsx | 8 +- .../new-york/example/cards/team-members.tsx | 11 +- .../new-york/example/collapsible-demo.tsx | 4 +- .../new-york/example/combobox-demo.tsx | 8 +- .../example/combobox-dropdown-menu.tsx | 4 +- .../new-york/example/combobox-form.tsx | 8 +- .../new-york/example/command-demo.tsx | 30 +- .../new-york/example/command-dialog.tsx | 30 +- .../new-york/example/data-table-demo.tsx | 12 +- .../new-york/example/date-picker-demo.tsx | 2 +- .../new-york/example/date-picker-form.tsx | 2 +- .../example/date-picker-with-presets.tsx | 2 +- .../example/date-picker-with-range.tsx | 2 +- .../new-york/example/dialog-close-button.tsx | 4 +- .../registry/new-york/example/drawer-demo.tsx | 8 +- .../new-york/example/hover-card-demo.tsx | 2 +- .../registry/new-york/example/mode-toggle.tsx | 6 +- .../new-york/example/resizable-handle.tsx | 2 +- .../registry/new-york/example/sonner-demo.tsx | 2 + .../registry/new-york/example/toggle-demo.tsx | 4 +- .../new-york/example/toggle-disabled.tsx | 4 +- .../new-york/example/toggle-group-demo.tsx | 12 +- .../example/toggle-group-disabled.tsx | 12 +- .../new-york/example/toggle-group-lg.tsx | 12 +- .../new-york/example/toggle-group-outline.tsx | 12 +- .../new-york/example/toggle-group-single.tsx | 12 +- .../new-york/example/toggle-group-sm.tsx | 12 +- .../registry/new-york/example/toggle-lg.tsx | 4 +- .../new-york/example/toggle-outline.tsx | 4 +- .../registry/new-york/example/toggle-sm.tsx | 4 +- .../new-york/example/toggle-with-text.tsx | 4 +- apps/www/registry/new-york/ui/accordion.tsx | 4 +- apps/www/registry/new-york/ui/breadcrumb.tsx | 6 +- apps/www/registry/new-york/ui/calendar.tsx | 6 +- apps/www/registry/new-york/ui/carousel.tsx | 6 +- apps/www/registry/new-york/ui/checkbox.tsx | 4 +- apps/www/registry/new-york/ui/command.tsx | 4 +- .../www/registry/new-york/ui/context-menu.tsx | 12 +- apps/www/registry/new-york/ui/dialog.tsx | 4 +- .../registry/new-york/ui/dropdown-menu.tsx | 12 +- apps/www/registry/new-york/ui/input-otp.tsx | 4 +- apps/www/registry/new-york/ui/menubar.tsx | 12 +- .../registry/new-york/ui/navigation-menu.tsx | 4 +- apps/www/registry/new-york/ui/pagination.tsx | 12 +- apps/www/registry/new-york/ui/radio-group.tsx | 4 +- apps/www/registry/new-york/ui/resizable.tsx | 4 +- apps/www/registry/new-york/ui/select.tsx | 15 +- apps/www/registry/new-york/ui/sheet.tsx | 4 +- apps/www/registry/new-york/ui/toast.tsx | 4 +- apps/www/registry/new-york/ui/toggle.tsx | 8 +- apps/www/registry/registry-blocks.ts | 321 +++++++++++++ apps/www/registry/registry-icons.ts | 166 +++++++ apps/www/scripts/build-registry.mts | 69 ++- package.json | 1 + packages/cli/package.json | 3 +- packages/shadcn/package.json | 1 + packages/shadcn/src/commands/info.ts | 20 + packages/shadcn/src/commands/init.ts | 1 + packages/shadcn/src/commands/migrate.ts | 89 ++++ packages/shadcn/src/index.ts | 9 +- .../src/migrations/migrate-icons.test.ts | 158 ++++++ .../shadcn/src/migrations/migrate-icons.ts | 201 ++++++++ .../src/preflights/preflight-migrate.ts | 64 +++ packages/shadcn/src/utils/get-config.ts | 6 + packages/shadcn/src/utils/get-project-info.ts | 1 + packages/shadcn/src/utils/icon-libraries.ts | 12 + packages/shadcn/src/utils/registry/index.ts | 11 + packages/shadcn/src/utils/registry/schema.ts | 5 + .../shadcn/src/utils/transformers/index.ts | 4 +- .../transformers/transform-icons.test.ts | 140 ++++++ .../src/utils/transformers/transform-icons.ts | 82 ++++ .../shadcn/src/utils/updaters/update-files.ts | 9 +- .../test/fixtures/config-full/components.json | 3 +- .../test/fixtures/config-jsx/components.json | 3 +- packages/shadcn/test/utils/get-config.test.ts | 3 + vitest.workspace.ts | 3 + 364 files changed, 10712 insertions(+), 965 deletions(-) create mode 100644 .changeset/tame-falcons-beg.md create mode 100644 apps/www/__registry__/default/block/_sink/page.tsx create mode 100644 apps/www/__registry__/icons.tsx create mode 100644 apps/www/__registry__/new-york/block/_sink/page.tsx delete mode 100644 apps/www/app/(app)/sink/layout.tsx delete mode 100644 apps/www/app/(app)/sink/new-york/page.tsx delete mode 100644 apps/www/app/(app)/sink/page.tsx create mode 100644 apps/www/app/(internal)/icons/layout.tsx create mode 100644 apps/www/app/(internal)/icons/page.tsx create mode 100644 apps/www/app/(internal)/sink/page.tsx create mode 100644 apps/www/public/r/icons/index.json create mode 100644 apps/www/public/r/styles/default/_sink.json create mode 100644 apps/www/public/r/styles/default/sink.json create mode 100644 apps/www/public/r/styles/new-york/_sink.json create mode 100644 apps/www/public/r/styles/new-york/sink.json create mode 100644 apps/www/registry/default/block/_sink/components/accordion-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/alert-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/alert-dialog-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/app-sidebar copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/_sink/components/aspect-ratio-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/avatar-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-destructive.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-outline.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-secondary.tsx create mode 100644 apps/www/registry/default/block/_sink/components/breadcrumb-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-demo copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-destructive.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-ghost.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-icon.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-link.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-loading.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-outline.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-secondary.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-with-icon.tsx create mode 100644 apps/www/registry/default/block/_sink/components/calendar-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/card-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/carousel-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/checkbox-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/collapsible-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/combobox-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/command-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/component-wrapper copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/component-wrapper.tsx create mode 100644 apps/www/registry/default/block/_sink/components/context-menu-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/date-picker-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/dialog-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/drawer-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/dropdown-menu-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/hover-card-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/input-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/input-otp-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/label-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/menubar-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-main copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-projects copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-projects.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-user copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/_sink/components/navigation-menu-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/pagination-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/popover-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/progress-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/radio-group-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/resizable-handle.tsx create mode 100644 apps/www/registry/default/block/_sink/components/scroll-area-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/select-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/separator-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/sheet-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/skeleton-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/slider-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/sonner-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/switch-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/table-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/tabs-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/team-switcher copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/team-switcher.tsx create mode 100644 apps/www/registry/default/block/_sink/components/textarea-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toast-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-disabled.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-group-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-outline.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-with-text.tsx create mode 100644 apps/www/registry/default/block/_sink/components/tooltip-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/page.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/accordion-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/alert-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/alert-dialog-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/app-sidebar copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/aspect-ratio-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/avatar-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-destructive.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-outline.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-secondary.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/breadcrumb-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-demo copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-destructive.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-ghost.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-icon.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-link.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-loading.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-outline.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-secondary.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-with-icon.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/calendar-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/card-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/carousel-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/checkbox-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/collapsible-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/combobox-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/command-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/component-wrapper copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/component-wrapper.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/context-menu-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/date-picker-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/dialog-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/drawer-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/dropdown-menu-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/hover-card-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/input-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/input-otp-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/label-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/menubar-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-main copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-projects copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-projects.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-user copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/navigation-menu-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/pagination-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/popover-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/progress-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/radio-group-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/resizable-handle.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/scroll-area-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/select-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/separator-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/sheet-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/skeleton-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/slider-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/sonner-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/switch-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/table-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/tabs-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/team-switcher copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/team-switcher.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/textarea-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toast-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-disabled.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-group-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-outline.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-with-text.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/tooltip-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/page.tsx create mode 100644 apps/www/registry/registry-icons.ts create mode 100644 packages/shadcn/src/commands/info.ts create mode 100644 packages/shadcn/src/commands/migrate.ts create mode 100644 packages/shadcn/src/migrations/migrate-icons.test.ts create mode 100644 packages/shadcn/src/migrations/migrate-icons.ts create mode 100644 packages/shadcn/src/preflights/preflight-migrate.ts create mode 100644 packages/shadcn/src/utils/icon-libraries.ts create mode 100644 packages/shadcn/src/utils/transformers/transform-icons.test.ts create mode 100644 packages/shadcn/src/utils/transformers/transform-icons.ts create mode 100644 vitest.workspace.ts diff --git a/.changeset/tame-falcons-beg.md b/.changeset/tame-falcons-beg.md new file mode 100644 index 00000000000..9bff373a859 --- /dev/null +++ b/.changeset/tame-falcons-beg.md @@ -0,0 +1,6 @@ +--- +"shadcn": patch +"shadcn-ui": patch +--- + +move new-york icons to lucide-react diff --git a/apps/www/__registry__/default/block/_sink/page.tsx b/apps/www/__registry__/default/block/_sink/page.tsx new file mode 100644 index 00000000000..6ed2f8841ed --- /dev/null +++ b/apps/www/__registry__/default/block/_sink/page.tsx @@ -0,0 +1,273 @@ +import { AccordionDemo } from "@/registry/default/block/_sink/components/accordion-demo" +import { AlertDemo } from "@/registry/default/block/_sink/components/alert-demo" +import { AlertDialogDemo } from "@/registry/default/block/_sink/components/alert-dialog-demo" +import { AppSidebar } from "@/registry/default/block/_sink/components/app-sidebar" +import { AspectRatioDemo } from "@/registry/default/block/_sink/components/aspect-ratio-demo" +import { AvatarDemo } from "@/registry/default/block/_sink/components/avatar-demo" +import { BadgeDemo } from "@/registry/default/block/_sink/components/badge-demo" +import { BadgeDestructive } from "@/registry/default/block/_sink/components/badge-destructive" +import { BadgeOutline } from "@/registry/default/block/_sink/components/badge-outline" +import { BadgeSecondary } from "@/registry/default/block/_sink/components/badge-secondary" +import { BreadcrumbDemo } from "@/registry/default/block/_sink/components/breadcrumb-demo" +import { ButtonDemo } from "@/registry/default/block/_sink/components/button-demo" +import { ButtonDestructive } from "@/registry/default/block/_sink/components/button-destructive" +import { ButtonGhost } from "@/registry/default/block/_sink/components/button-ghost" +import { ButtonLink } from "@/registry/default/block/_sink/components/button-link" +import { ButtonLoading } from "@/registry/default/block/_sink/components/button-loading" +import { ButtonOutline } from "@/registry/default/block/_sink/components/button-outline" +import { ButtonSecondary } from "@/registry/default/block/_sink/components/button-secondary" +import { ButtonWithIcon } from "@/registry/default/block/_sink/components/button-with-icon" +import { CalendarDemo } from "@/registry/default/block/_sink/components/calendar-demo" +import { CardDemo } from "@/registry/default/block/_sink/components/card-demo" +import { CarouselDemo } from "@/registry/default/block/_sink/components/carousel-demo" +import { CheckboxDemo } from "@/registry/default/block/_sink/components/checkbox-demo" +import { CollapsibleDemo } from "@/registry/default/block/_sink/components/collapsible-demo" +import { ComboboxDemo } from "@/registry/default/block/_sink/components/combobox-demo" +import { CommandDemo } from "@/registry/default/block/_sink/components/command-demo" +import { ComponentWrapper } from "@/registry/default/block/_sink/components/component-wrapper" +import { ContextMenuDemo } from "@/registry/default/block/_sink/components/context-menu-demo" +import { DatePickerDemo } from "@/registry/default/block/_sink/components/date-picker-demo" +import { DialogDemo } from "@/registry/default/block/_sink/components/dialog-demo" +import { DrawerDemo } from "@/registry/default/block/_sink/components/drawer-demo" +import { DropdownMenuDemo } from "@/registry/default/block/_sink/components/dropdown-menu-demo" +import { HoverCardDemo } from "@/registry/default/block/_sink/components/hover-card-demo" +import { InputDemo } from "@/registry/default/block/_sink/components/input-demo" +import { InputOTPDemo } from "@/registry/default/block/_sink/components/input-otp-demo" +import { LabelDemo } from "@/registry/default/block/_sink/components/label-demo" +import { MenubarDemo } from "@/registry/default/block/_sink/components/menubar-demo" +import { NavigationMenuDemo } from "@/registry/default/block/_sink/components/navigation-menu-demo" +import { PaginationDemo } from "@/registry/default/block/_sink/components/pagination-demo" +import { PopoverDemo } from "@/registry/default/block/_sink/components/popover-demo" +import { ProgressDemo } from "@/registry/default/block/_sink/components/progress-demo" +import { RadioGroupDemo } from "@/registry/default/block/_sink/components/radio-group-demo" +import { ResizableHandleDemo } from "@/registry/default/block/_sink/components/resizable-handle" +import { ScrollAreaDemo } from "@/registry/default/block/_sink/components/scroll-area-demo" +import { SelectDemo } from "@/registry/default/block/_sink/components/select-demo" +import { SeparatorDemo } from "@/registry/default/block/_sink/components/separator-demo" +import { SheetDemo } from "@/registry/default/block/_sink/components/sheet-demo" +import { SkeletonDemo } from "@/registry/default/block/_sink/components/skeleton-demo" +import { SliderDemo } from "@/registry/default/block/_sink/components/slider-demo" +import { SonnerDemo } from "@/registry/default/block/_sink/components/sonner-demo" +import { SwitchDemo } from "@/registry/default/block/_sink/components/switch-demo" +import { TableDemo } from "@/registry/default/block/_sink/components/table-demo" +import { TabsDemo } from "@/registry/default/block/_sink/components/tabs-demo" +import { TextareaDemo } from "@/registry/default/block/_sink/components/textarea-demo" +import { ToastDemo } from "@/registry/default/block/_sink/components/toast-demo" +import { ToggleDemo } from "@/registry/default/block/_sink/components/toggle-demo" +import { ToggleDisabled } from "@/registry/default/block/_sink/components/toggle-disabled" +import { ToggleGroupDemo } from "@/registry/default/block/_sink/components/toggle-group-demo" +import { ToggleOutline } from "@/registry/default/block/_sink/components/toggle-outline" +import { ToggleWithText } from "@/registry/default/block/_sink/components/toggle-with-text" +import { TooltipDemo } from "@/registry/default/block/_sink/components/tooltip-demo" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/default/ui/breadcrumb" +import { Separator } from "@/registry/default/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/default/ui/sidebar" + +export default function SinkPage() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + + + + +
+
+
+
+ ) +} diff --git a/apps/www/__registry__/icons.tsx b/apps/www/__registry__/icons.tsx new file mode 100644 index 00000000000..3c8f028fcb3 --- /dev/null +++ b/apps/www/__registry__/icons.tsx @@ -0,0 +1,451 @@ +// @ts-nocheck +// This file is autogenerated by scripts/build-registry.ts +// Do not edit this file directly. +import * as React from "react" + +export const Icons = { + AlertCircle: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.AlertCircle, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ExclamationTriangleIcon, + })) + ), + }, + ArrowLeft: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ArrowLeft, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ArrowLeftIcon, + })) + ), + }, + ArrowRight: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ArrowRight, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ArrowRightIcon, + })) + ), + }, + ArrowUpDown: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ArrowUpDown, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.CaretSortIcon, + })) + ), + }, + BellRing: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.BellRing, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.BellIcon, + })) + ), + }, + Bold: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Bold, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.FontBoldIcon, + })) + ), + }, + Calculator: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Calculator, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ComponentPlaceholderIcon, + })) + ), + }, + Calendar: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Calendar, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.CalendarIcon, + })) + ), + }, + Check: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Check, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.CheckIcon, + })) + ), + }, + ChevronDown: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ChevronDown, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ChevronDownIcon, + })) + ), + }, + ChevronLeft: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ChevronLeft, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ChevronLeftIcon, + })) + ), + }, + ChevronRight: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ChevronRight, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ChevronRightIcon, + })) + ), + }, + ChevronUp: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ChevronUp, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ChevronUpIcon, + })) + ), + }, + ChevronsUpDown: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.ChevronsUpDown, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.CaretSortIcon, + })) + ), + }, + Circle: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Circle, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.DotFilledIcon, + })) + ), + }, + Copy: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Copy, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.CopyIcon, + })) + ), + }, + CreditCard: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.CreditCard, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ComponentPlaceholderIcon, + })) + ), + }, + GripVertical: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.GripVertical, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.DragHandleDots2Icon, + })) + ), + }, + Italic: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Italic, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.FontItalicIcon, + })) + ), + }, + Loader2: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Loader2, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ReloadIcon, + })) + ), + }, + Mail: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Mail, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.EnvelopeClosedIcon, + })) + ), + }, + MailOpen: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.MailOpen, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.EnvelopeOpenIcon, + })) + ), + }, + Minus: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Minus, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.MinusIcon, + })) + ), + }, + Moon: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Moon, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.MoonIcon, + })) + ), + }, + MoreHorizontal: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.MoreHorizontal, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.DotsHorizontalIcon, + })) + ), + }, + PanelLeft: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.PanelLeft, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.ViewVerticalIcon, + })) + ), + }, + Plus: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Plus, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.PlusIcon, + })) + ), + }, + Search: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Search, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.MagnifyingGlassIcon, + })) + ), + }, + Send: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Send, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.PaperPlaneIcon, + })) + ), + }, + Settings: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Settings, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.GearIcon, + })) + ), + }, + Slash: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Slash, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.SlashIcon, + })) + ), + }, + Smile: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Smile, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.FaceIcon, + })) + ), + }, + Sun: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Sun, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.SunIcon, + })) + ), + }, + Terminal: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Terminal, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.RocketIcon, + })) + ), + }, + Underline: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.Underline, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.UnderlineIcon, + })) + ), + }, + User: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.User, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.PersonIcon, + })) + ), + }, + X: { + lucide: React.lazy(() => + import("lucide-react").then((mod) => ({ + default: mod.X, + })) + ), + radix: React.lazy(() => + import("@radix-ui/react-icons").then((mod) => ({ + default: mod.Cross2Icon, + })) + ), + }, +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index c4d78e46f74..eb5dd3ddc30 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -2501,6 +2501,18 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "_sink": { + name: "_sink", + description: "", + type: "registry:block", + registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"], + files: ["registry/new-york/block/_sink/page.tsx","registry/new-york/block/_sink/components/app-sidebar.tsx","registry/new-york/block/_sink/components/component-wrapper.tsx","registry/new-york/block/_sink/components/nav-main.tsx","registry/new-york/block/_sink/components/nav-projects.tsx","registry/new-york/block/_sink/components/nav-user.tsx","registry/new-york/block/_sink/components/team-switcher.tsx","registry/new-york/block/_sink/components/accordion-demo.tsx","registry/new-york/block/_sink/components/alert-demo.tsx","registry/new-york/block/_sink/components/alert-dialog-demo.tsx","registry/new-york/block/_sink/components/aspect-ratio-demo.tsx","registry/new-york/block/_sink/components/avatar-demo.tsx","registry/new-york/block/_sink/components/badge-demo.tsx","registry/new-york/block/_sink/components/breadcrumb-demo.tsx","registry/new-york/block/_sink/components/button-demo.tsx","registry/new-york/block/_sink/components/calendar-demo.tsx","registry/new-york/block/_sink/components/card-demo.tsx","registry/new-york/block/_sink/components/carousel-demo.tsx","registry/new-york/block/_sink/components/checkbox-demo.tsx","registry/new-york/block/_sink/components/collapsible-demo.tsx","registry/new-york/block/_sink/components/combobox-demo.tsx","registry/new-york/block/_sink/components/command-demo.tsx","registry/new-york/block/_sink/components/context-menu-demo.tsx","registry/new-york/block/_sink/components/date-picker-demo.tsx","registry/new-york/block/_sink/components/dialog-demo.tsx","registry/new-york/block/_sink/components/drawer-demo.tsx","registry/new-york/block/_sink/components/dropdown-menu-demo.tsx","registry/new-york/block/_sink/components/hover-card-demo.tsx","registry/new-york/block/_sink/components/input-demo.tsx","registry/new-york/block/_sink/components/input-otp-demo.tsx","registry/new-york/block/_sink/components/label-demo.tsx","registry/new-york/block/_sink/components/menubar-demo.tsx","registry/new-york/block/_sink/components/navigation-menu-demo.tsx","registry/new-york/block/_sink/components/pagination-demo.tsx","registry/new-york/block/_sink/components/popover-demo.tsx","registry/new-york/block/_sink/components/progress-demo.tsx","registry/new-york/block/_sink/components/radio-group-demo.tsx","registry/new-york/block/_sink/components/resizable-handle.tsx","registry/new-york/block/_sink/components/scroll-area-demo.tsx","registry/new-york/block/_sink/components/select-demo.tsx","registry/new-york/block/_sink/components/separator-demo.tsx","registry/new-york/block/_sink/components/sheet-demo.tsx","registry/new-york/block/_sink/components/skeleton-demo.tsx","registry/new-york/block/_sink/components/slider-demo.tsx","registry/new-york/block/_sink/components/sonner-demo.tsx","registry/new-york/block/_sink/components/switch-demo.tsx","registry/new-york/block/_sink/components/table-demo.tsx","registry/new-york/block/_sink/components/tabs-demo.tsx","registry/new-york/block/_sink/components/textarea-demo.tsx","registry/new-york/block/_sink/components/toast-demo.tsx","registry/new-york/block/_sink/components/toggle-demo.tsx","registry/new-york/block/_sink/components/toggle-group-demo.tsx","registry/new-york/block/_sink/components/tooltip-demo.tsx","registry/new-york/block/_sink/components/badge-destructive.tsx","registry/new-york/block/_sink/components/badge-outline.tsx","registry/new-york/block/_sink/components/badge-secondary.tsx","registry/new-york/block/_sink/components/button-destructive.tsx","registry/new-york/block/_sink/components/button-ghost.tsx","registry/new-york/block/_sink/components/button-link.tsx","registry/new-york/block/_sink/components/button-loading.tsx","registry/new-york/block/_sink/components/button-outline.tsx","registry/new-york/block/_sink/components/button-secondary.tsx","registry/new-york/block/_sink/components/button-with-icon.tsx","registry/new-york/block/_sink/components/toggle-disabled.tsx","registry/new-york/block/_sink/components/toggle-outline.tsx","registry/new-york/block/_sink/components/toggle-with-text.tsx"], + component: React.lazy(() => import("@/registry/new-york/block/_sink/page.tsx")), + source: "__registry__/new-york/block/_sink/page.tsx", + category: "", + subcategory: "", + chunks: [] + }, "sidebar-01": { name: "sidebar-01", description: "A simple sidebar with navigation grouped by section.", @@ -6258,6 +6270,18 @@ export const Index: Record = { subcategory: "", chunks: [] }, + "_sink": { + name: "_sink", + description: "", + type: "registry:block", + registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"], + files: ["registry/default/block/_sink/page.tsx","registry/default/block/_sink/components/app-sidebar.tsx","registry/default/block/_sink/components/component-wrapper.tsx","registry/default/block/_sink/components/nav-main.tsx","registry/default/block/_sink/components/nav-projects.tsx","registry/default/block/_sink/components/nav-user.tsx","registry/default/block/_sink/components/team-switcher.tsx","registry/default/block/_sink/components/accordion-demo.tsx","registry/default/block/_sink/components/alert-demo.tsx","registry/default/block/_sink/components/alert-dialog-demo.tsx","registry/default/block/_sink/components/aspect-ratio-demo.tsx","registry/default/block/_sink/components/avatar-demo.tsx","registry/default/block/_sink/components/badge-demo.tsx","registry/default/block/_sink/components/breadcrumb-demo.tsx","registry/default/block/_sink/components/button-demo.tsx","registry/default/block/_sink/components/calendar-demo.tsx","registry/default/block/_sink/components/card-demo.tsx","registry/default/block/_sink/components/carousel-demo.tsx","registry/default/block/_sink/components/checkbox-demo.tsx","registry/default/block/_sink/components/collapsible-demo.tsx","registry/default/block/_sink/components/combobox-demo.tsx","registry/default/block/_sink/components/command-demo.tsx","registry/default/block/_sink/components/context-menu-demo.tsx","registry/default/block/_sink/components/date-picker-demo.tsx","registry/default/block/_sink/components/dialog-demo.tsx","registry/default/block/_sink/components/drawer-demo.tsx","registry/default/block/_sink/components/dropdown-menu-demo.tsx","registry/default/block/_sink/components/hover-card-demo.tsx","registry/default/block/_sink/components/input-demo.tsx","registry/default/block/_sink/components/input-otp-demo.tsx","registry/default/block/_sink/components/label-demo.tsx","registry/default/block/_sink/components/menubar-demo.tsx","registry/default/block/_sink/components/navigation-menu-demo.tsx","registry/default/block/_sink/components/pagination-demo.tsx","registry/default/block/_sink/components/popover-demo.tsx","registry/default/block/_sink/components/progress-demo.tsx","registry/default/block/_sink/components/radio-group-demo.tsx","registry/default/block/_sink/components/resizable-handle.tsx","registry/default/block/_sink/components/scroll-area-demo.tsx","registry/default/block/_sink/components/select-demo.tsx","registry/default/block/_sink/components/separator-demo.tsx","registry/default/block/_sink/components/sheet-demo.tsx","registry/default/block/_sink/components/skeleton-demo.tsx","registry/default/block/_sink/components/slider-demo.tsx","registry/default/block/_sink/components/sonner-demo.tsx","registry/default/block/_sink/components/switch-demo.tsx","registry/default/block/_sink/components/table-demo.tsx","registry/default/block/_sink/components/tabs-demo.tsx","registry/default/block/_sink/components/textarea-demo.tsx","registry/default/block/_sink/components/toast-demo.tsx","registry/default/block/_sink/components/toggle-demo.tsx","registry/default/block/_sink/components/toggle-group-demo.tsx","registry/default/block/_sink/components/tooltip-demo.tsx","registry/default/block/_sink/components/badge-destructive.tsx","registry/default/block/_sink/components/badge-outline.tsx","registry/default/block/_sink/components/badge-secondary.tsx","registry/default/block/_sink/components/button-destructive.tsx","registry/default/block/_sink/components/button-ghost.tsx","registry/default/block/_sink/components/button-link.tsx","registry/default/block/_sink/components/button-loading.tsx","registry/default/block/_sink/components/button-outline.tsx","registry/default/block/_sink/components/button-secondary.tsx","registry/default/block/_sink/components/button-with-icon.tsx","registry/default/block/_sink/components/toggle-disabled.tsx","registry/default/block/_sink/components/toggle-outline.tsx","registry/default/block/_sink/components/toggle-with-text.tsx"], + component: React.lazy(() => import("@/registry/default/block/_sink/page.tsx")), + source: "__registry__/default/block/_sink/page.tsx", + category: "", + subcategory: "", + chunks: [] + }, "sidebar-01": { name: "sidebar-01", description: "A simple sidebar with navigation grouped by section.", diff --git a/apps/www/__registry__/new-york/block/_sink/page.tsx b/apps/www/__registry__/new-york/block/_sink/page.tsx new file mode 100644 index 00000000000..ccbeec18681 --- /dev/null +++ b/apps/www/__registry__/new-york/block/_sink/page.tsx @@ -0,0 +1,273 @@ +import { AccordionDemo } from "@/registry/new-york/block/_sink/components/accordion-demo" +import { AlertDemo } from "@/registry/new-york/block/_sink/components/alert-demo" +import { AlertDialogDemo } from "@/registry/new-york/block/_sink/components/alert-dialog-demo" +import { AppSidebar } from "@/registry/new-york/block/_sink/components/app-sidebar" +import { AspectRatioDemo } from "@/registry/new-york/block/_sink/components/aspect-ratio-demo" +import { AvatarDemo } from "@/registry/new-york/block/_sink/components/avatar-demo" +import { BadgeDemo } from "@/registry/new-york/block/_sink/components/badge-demo" +import { BadgeDestructive } from "@/registry/new-york/block/_sink/components/badge-destructive" +import { BadgeOutline } from "@/registry/new-york/block/_sink/components/badge-outline" +import { BadgeSecondary } from "@/registry/new-york/block/_sink/components/badge-secondary" +import { BreadcrumbDemo } from "@/registry/new-york/block/_sink/components/breadcrumb-demo" +import { ButtonDemo } from "@/registry/new-york/block/_sink/components/button-demo" +import { ButtonDestructive } from "@/registry/new-york/block/_sink/components/button-destructive" +import { ButtonGhost } from "@/registry/new-york/block/_sink/components/button-ghost" +import { ButtonLink } from "@/registry/new-york/block/_sink/components/button-link" +import { ButtonLoading } from "@/registry/new-york/block/_sink/components/button-loading" +import { ButtonOutline } from "@/registry/new-york/block/_sink/components/button-outline" +import { ButtonSecondary } from "@/registry/new-york/block/_sink/components/button-secondary" +import { ButtonWithIcon } from "@/registry/new-york/block/_sink/components/button-with-icon" +import { CalendarDemo } from "@/registry/new-york/block/_sink/components/calendar-demo" +import { CardDemo } from "@/registry/new-york/block/_sink/components/card-demo" +import { CarouselDemo } from "@/registry/new-york/block/_sink/components/carousel-demo" +import { CheckboxDemo } from "@/registry/new-york/block/_sink/components/checkbox-demo" +import { CollapsibleDemo } from "@/registry/new-york/block/_sink/components/collapsible-demo" +import { ComboboxDemo } from "@/registry/new-york/block/_sink/components/combobox-demo" +import { CommandDemo } from "@/registry/new-york/block/_sink/components/command-demo" +import { ComponentWrapper } from "@/registry/new-york/block/_sink/components/component-wrapper" +import { ContextMenuDemo } from "@/registry/new-york/block/_sink/components/context-menu-demo" +import { DatePickerDemo } from "@/registry/new-york/block/_sink/components/date-picker-demo" +import { DialogDemo } from "@/registry/new-york/block/_sink/components/dialog-demo" +import { DrawerDemo } from "@/registry/new-york/block/_sink/components/drawer-demo" +import { DropdownMenuDemo } from "@/registry/new-york/block/_sink/components/dropdown-menu-demo" +import { HoverCardDemo } from "@/registry/new-york/block/_sink/components/hover-card-demo" +import { InputDemo } from "@/registry/new-york/block/_sink/components/input-demo" +import { InputOTPDemo } from "@/registry/new-york/block/_sink/components/input-otp-demo" +import { LabelDemo } from "@/registry/new-york/block/_sink/components/label-demo" +import { MenubarDemo } from "@/registry/new-york/block/_sink/components/menubar-demo" +import { NavigationMenuDemo } from "@/registry/new-york/block/_sink/components/navigation-menu-demo" +import { PaginationDemo } from "@/registry/new-york/block/_sink/components/pagination-demo" +import { PopoverDemo } from "@/registry/new-york/block/_sink/components/popover-demo" +import { ProgressDemo } from "@/registry/new-york/block/_sink/components/progress-demo" +import { RadioGroupDemo } from "@/registry/new-york/block/_sink/components/radio-group-demo" +import { ResizableHandleDemo } from "@/registry/new-york/block/_sink/components/resizable-handle" +import { ScrollAreaDemo } from "@/registry/new-york/block/_sink/components/scroll-area-demo" +import { SelectDemo } from "@/registry/new-york/block/_sink/components/select-demo" +import { SeparatorDemo } from "@/registry/new-york/block/_sink/components/separator-demo" +import { SheetDemo } from "@/registry/new-york/block/_sink/components/sheet-demo" +import { SkeletonDemo } from "@/registry/new-york/block/_sink/components/skeleton-demo" +import { SliderDemo } from "@/registry/new-york/block/_sink/components/slider-demo" +import { SonnerDemo } from "@/registry/new-york/block/_sink/components/sonner-demo" +import { SwitchDemo } from "@/registry/new-york/block/_sink/components/switch-demo" +import { TableDemo } from "@/registry/new-york/block/_sink/components/table-demo" +import { TabsDemo } from "@/registry/new-york/block/_sink/components/tabs-demo" +import { TextareaDemo } from "@/registry/new-york/block/_sink/components/textarea-demo" +import { ToastDemo } from "@/registry/new-york/block/_sink/components/toast-demo" +import { ToggleDemo } from "@/registry/new-york/block/_sink/components/toggle-demo" +import { ToggleDisabled } from "@/registry/new-york/block/_sink/components/toggle-disabled" +import { ToggleGroupDemo } from "@/registry/new-york/block/_sink/components/toggle-group-demo" +import { ToggleOutline } from "@/registry/new-york/block/_sink/components/toggle-outline" +import { ToggleWithText } from "@/registry/new-york/block/_sink/components/toggle-with-text" +import { TooltipDemo } from "@/registry/new-york/block/_sink/components/tooltip-demo" +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/registry/new-york/ui/breadcrumb" +import { Separator } from "@/registry/new-york/ui/separator" +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/registry/new-york/ui/sidebar" + +export default function SinkPage() { + return ( + + + +
+
+ + + + + + + Building Your Application + + + + + Data Fetching + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + + + + +
+
+
+
+ ) +} diff --git a/apps/www/app/(app)/colors/layout.tsx b/apps/www/app/(app)/colors/layout.tsx index 35d973c625e..12211f05d5a 100644 --- a/apps/www/app/(app)/colors/layout.tsx +++ b/apps/www/app/(app)/colors/layout.tsx @@ -15,7 +15,7 @@ export const metadata: Metadata = { description: "All colors in all formats.", } -export default function ChartsLayout({ +export default function ColorsLayout({ children, }: { children: React.ReactNode @@ -37,7 +37,7 @@ export default function ChartsLayout({ -
+
{children}
diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index 076542e7c3d..ed95548fe0f 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx @@ -4,7 +4,7 @@ import { allDocs } from "contentlayer/generated" import "@/styles/mdx.css" import type { Metadata } from "next" import Link from "next/link" -import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons" +import { ChevronRight, ExternalLink } from "lucide-react" import Balancer from "react-wrap-balancer" import { siteConfig } from "@/config/site" @@ -92,7 +92,7 @@ export default async function DocPage({ params }: DocPageProps) {
Docs
- +
{doc.title}
@@ -115,7 +115,7 @@ export default async function DocPage({ params }: DocPageProps) { className={cn(badgeVariants({ variant: "secondary" }), "gap-1")} > Docs - + )} {doc.links?.api && ( @@ -126,7 +126,7 @@ export default async function DocPage({ params }: DocPageProps) { className={cn(badgeVariants({ variant: "secondary" }), "gap-1")} > API Reference - + )}
diff --git a/apps/www/app/(app)/examples/cards/components/github-card.tsx b/apps/www/app/(app)/examples/cards/components/github-card.tsx index b80ea22b221..9e4c039da47 100644 --- a/apps/www/app/(app)/examples/cards/components/github-card.tsx +++ b/apps/www/app/(app)/examples/cards/components/github-card.tsx @@ -1,9 +1,4 @@ -import { - ChevronDownIcon, - CircleIcon, - PlusIcon, - StarIcon, -} from "@radix-ui/react-icons" +import { ChevronDown, Circle, Plus, Star } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -37,14 +32,14 @@ export function DemoGithub() {
Inspiration - Create List + Create List @@ -71,11 +66,11 @@ export function DemoGithub() {
- + TypeScript
- + 20k
Updated April 2023
diff --git a/apps/www/app/(app)/examples/cards/components/notifications.tsx b/apps/www/app/(app)/examples/cards/components/notifications.tsx index c0a2cec57cb..766e16584d3 100644 --- a/apps/www/app/(app)/examples/cards/components/notifications.tsx +++ b/apps/www/app/(app)/examples/cards/components/notifications.tsx @@ -1,4 +1,4 @@ -import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons" +import { Bell, EyeOff, User } from "lucide-react" import { Card, @@ -19,7 +19,7 @@ export function DemoNotifications() {
- +

Everything

@@ -28,7 +28,7 @@ export function DemoNotifications() {

- +

Available

@@ -37,7 +37,7 @@ export function DemoNotifications() {

- +

Ignoring

diff --git a/apps/www/app/(app)/examples/cards/components/team-members.tsx b/apps/www/app/(app)/examples/cards/components/team-members.tsx index ff8d9a58176..52e841535a8 100644 --- a/apps/www/app/(app)/examples/cards/components/team-members.tsx +++ b/apps/www/app/(app)/examples/cards/components/team-members.tsx @@ -1,4 +1,4 @@ -import { ChevronDownIcon } from "@radix-ui/react-icons" +import { ChevronDown } from "lucide-react" import { Avatar, @@ -51,8 +51,7 @@ export function DemoTeamMembers() { @@ -105,8 +104,7 @@ export function DemoTeamMembers() { diff --git a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx index 46238b12063..a4dd6ca2da0 100644 --- a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx +++ b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx @@ -1,8 +1,8 @@ "use client" import * as React from "react" -import { CalendarIcon } from "@radix-ui/react-icons" import { addDays, format } from "date-fns" +import { CalendarIcon } from "lucide-react" import { DateRange } from "react-day-picker" import { cn } from "@/lib/utils" diff --git a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx index 42c7af13240..8171046e7c5 100644 --- a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx +++ b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx @@ -1,11 +1,7 @@ "use client" import * as React from "react" -import { - CaretSortIcon, - CheckIcon, - PlusCircledIcon, -} from "@radix-ui/react-icons" +import { Check, ChevronsUpDown, PlusCircle } from "lucide-react" import { cn } from "@/lib/utils" import { @@ -105,7 +101,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { SC {selectedTeam.label} - + @@ -133,9 +129,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { SC {team.label} - - + Create Team diff --git a/apps/www/app/(app)/examples/forms/account/account-form.tsx b/apps/www/app/(app)/examples/forms/account/account-form.tsx index a5862b4b210..0eed6c44ebc 100644 --- a/apps/www/app/(app)/examples/forms/account/account-form.tsx +++ b/apps/www/app/(app)/examples/forms/account/account-form.tsx @@ -1,8 +1,8 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" import { format } from "date-fns" +import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react" import { useForm } from "react-hook-form" import { z } from "zod" @@ -174,7 +174,7 @@ export function AccountForm() { (language) => language.value === field.value )?.label : "Select language"} - + @@ -192,9 +192,9 @@ export function AccountForm() { form.setValue("language", language.value) }} > - System - +

Set the font you want to use in the dashboard. diff --git a/apps/www/app/(app)/examples/music/components/album-artwork.tsx b/apps/www/app/(app)/examples/music/components/album-artwork.tsx index a226c83bcc5..8cdc5e2a262 100644 --- a/apps/www/app/(app)/examples/music/components/album-artwork.tsx +++ b/apps/www/app/(app)/examples/music/components/album-artwork.tsx @@ -1,5 +1,5 @@ import Image from "next/image" -import { PlusCircledIcon } from "@radix-ui/react-icons" +import { PlusCircle } from "lucide-react" import { cn } from "@/lib/utils" import { @@ -54,7 +54,7 @@ export function AlbumArtwork({ Add to Playlist - + New Playlist diff --git a/apps/www/app/(app)/examples/music/page.tsx b/apps/www/app/(app)/examples/music/page.tsx index 40960c6b180..5321ccc41d8 100644 --- a/apps/www/app/(app)/examples/music/page.tsx +++ b/apps/www/app/(app)/examples/music/page.tsx @@ -1,6 +1,6 @@ import { Metadata } from "next" import Image from "next/image" -import { PlusCircledIcon } from "@radix-ui/react-icons" +import { PlusCircle } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" @@ -64,7 +64,7 @@ export default function MusicPage() {
diff --git a/apps/www/app/(app)/examples/playground/components/model-selector.tsx b/apps/www/app/(app)/examples/playground/components/model-selector.tsx index fb669827d07..1269069e650 100644 --- a/apps/www/app/(app)/examples/playground/components/model-selector.tsx +++ b/apps/www/app/(app)/examples/playground/components/model-selector.tsx @@ -1,8 +1,8 @@ "use client" import * as React from "react" -import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" import { PopoverProps } from "@radix-ui/react-popover" +import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { useMutationObserver } from "@/hooks/use-mutation-observer" @@ -64,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) { className="w-full justify-between" > {selectedModel ? selectedModel.name : "Select a model..."} - + @@ -154,11 +154,8 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) { className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground" > {model.name} - ) diff --git a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx index 8fb6aa115b3..9b57241a045 100644 --- a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx +++ b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { Dialog } from "@radix-ui/react-dialog" -import { DotsHorizontalIcon } from "@radix-ui/react-icons" +import { MoreHorizontal } from "lucide-react" import { toast } from "@/registry/new-york/hooks/use-toast" import { @@ -40,9 +40,9 @@ export function PresetActions() { <> - diff --git a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx index eefb4b06d5d..f8a99beb95c 100644 --- a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx +++ b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx @@ -2,8 +2,8 @@ import * as React from "react" import { useRouter } from "next/navigation" -import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" import { PopoverProps } from "@radix-ui/react-popover" +import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -43,7 +43,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) { className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]" > {selectedPreset ? selectedPreset.name : "Load a preset..."} - + @@ -61,9 +61,9 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) { }} > {preset.name} -
diff --git a/apps/www/app/(app)/examples/playground/page.tsx b/apps/www/app/(app)/examples/playground/page.tsx index 0ab59665ae5..6d046508f3d 100644 --- a/apps/www/app/(app)/examples/playground/page.tsx +++ b/apps/www/app/(app)/examples/playground/page.tsx @@ -1,6 +1,6 @@ import { Metadata } from "next" import Image from "next/image" -import { CounterClockwiseClockIcon } from "@radix-ui/react-icons" +import { RotateCcw } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -265,7 +265,7 @@ export default function PlaygroundPage() {
@@ -283,7 +283,7 @@ export default function PlaygroundPage() {
@@ -314,7 +314,7 @@ export default function PlaygroundPage() {
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx index 7df71bb4a12..389c53c4ced 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx +++ b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx @@ -1,10 +1,5 @@ -import { - ArrowDownIcon, - ArrowUpIcon, - CaretSortIcon, - EyeNoneIcon, -} from "@radix-ui/react-icons" import { Column } from "@tanstack/react-table" +import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -42,26 +37,26 @@ export function DataTableColumnHeader({ > {title} {column.getIsSorted() === "desc" ? ( - + ) : column.getIsSorted() === "asc" ? ( - + ) : ( - + )} column.toggleSorting(false)}> - + Asc column.toggleSorting(true)}> - + Desc column.toggleVisibility(false)}> - + Hide diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx index b1a975fd7a9..d39bd53ea61 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx +++ b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx @@ -1,6 +1,6 @@ import * as React from "react" -import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons" import { Column } from "@tanstack/react-table" +import { Check, PlusCircle } from "lucide-react" import { cn } from "@/lib/utils" import { Badge } from "@/registry/new-york/ui/badge" @@ -43,7 +43,7 @@ export function DataTableFacetedFilter({
{option.icon && ( diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx index 3e40a83b4f4..049b2e20c0d 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx +++ b/apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx @@ -1,10 +1,10 @@ -import { - ChevronLeftIcon, - ChevronRightIcon, - DoubleArrowLeftIcon, - DoubleArrowRightIcon, -} from "@radix-ui/react-icons" import { Table } from "@tanstack/react-table" +import { + ChevronLeft, + ChevronRight, + ChevronsLeft, + ChevronsRight, +} from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -61,7 +61,7 @@ export function DataTablePagination({ disabled={!table.getCanPreviousPage()} > Go to first page - +

diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx index 2dfa8cd2069..8546b2a38ad 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx +++ b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx @@ -1,7 +1,7 @@ "use client" -import { DotsHorizontalIcon } from "@radix-ui/react-icons" import { Row } from "@tanstack/react-table" +import { MoreHorizontal } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -37,7 +37,7 @@ export function DataTableRowActions({ variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" > - + Open menu diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx index 10bd91aee2a..a3a87b11c38 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx +++ b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx @@ -1,7 +1,7 @@ "use client" -import { Cross2Icon } from "@radix-ui/react-icons" import { Table } from "@tanstack/react-table" +import { X } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { Input } from "@/registry/new-york/ui/input" @@ -51,7 +51,7 @@ export function DataTableToolbar({ className="h-8 px-2 lg:px-3" > Reset - + )}
diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx index 270bd8edf16..d7fe8776590 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx +++ b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx @@ -1,8 +1,8 @@ "use client" import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu" -import { MixerHorizontalIcon } from "@radix-ui/react-icons" import { Table } from "@tanstack/react-table" +import { Settings2 } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -28,7 +28,7 @@ export function DataTableViewOptions({ size="sm" className="ml-auto hidden h-8 lg:flex" > - + View diff --git a/apps/www/app/(app)/examples/tasks/data/data.tsx b/apps/www/app/(app)/examples/tasks/data/data.tsx index a507982f623..c4792ba82c2 100644 --- a/apps/www/app/(app)/examples/tasks/data/data.tsx +++ b/apps/www/app/(app)/examples/tasks/data/data.tsx @@ -1,13 +1,13 @@ import { - ArrowDownIcon, - ArrowRightIcon, - ArrowUpIcon, - CheckCircledIcon, - CircleIcon, - CrossCircledIcon, - QuestionMarkCircledIcon, - StopwatchIcon, -} from "@radix-ui/react-icons" + ArrowDown, + ArrowRight, + ArrowUp, + CheckCircle, + Circle, + CircleOff, + HelpCircle, + Timer, +} from "lucide-react" export const labels = [ { @@ -28,27 +28,27 @@ export const statuses = [ { value: "backlog", label: "Backlog", - icon: QuestionMarkCircledIcon, + icon: HelpCircle, }, { value: "todo", label: "Todo", - icon: CircleIcon, + icon: Circle, }, { value: "in progress", label: "In Progress", - icon: StopwatchIcon, + icon: Timer, }, { value: "done", label: "Done", - icon: CheckCircledIcon, + icon: CheckCircle, }, { value: "canceled", label: "Canceled", - icon: CrossCircledIcon, + icon: CircleOff, }, ] @@ -56,16 +56,16 @@ export const priorities = [ { label: "Low", value: "low", - icon: ArrowDownIcon, + icon: ArrowDown, }, { label: "Medium", value: "medium", - icon: ArrowRightIcon, + icon: ArrowRight, }, { label: "High", value: "high", - icon: ArrowUpIcon, + icon: ArrowUp, }, ] diff --git a/apps/www/app/(app)/sink/layout.tsx b/apps/www/app/(app)/sink/layout.tsx deleted file mode 100644 index 70da365c39f..00000000000 --- a/apps/www/app/(app)/sink/layout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Link from "next/link" - -import { ThemeWrapper } from "@/components/theme-wrapper" -import { styles } from "@/registry/registry-styles" - -interface SinkLayoutProps { - children: React.ReactNode -} - -export default function SinkLayout({ children }: SinkLayoutProps) { - return ( -
-
-
- {styles.map((style) => ( - - {style.label} - - ))} -
-
-
- {children} -
-
- ) -} diff --git a/apps/www/app/(app)/sink/new-york/page.tsx b/apps/www/app/(app)/sink/new-york/page.tsx deleted file mode 100644 index f7897d193d3..00000000000 --- a/apps/www/app/(app)/sink/new-york/page.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import * as React from "react" -import Link from "next/link" - -import { cn } from "@/lib/utils" -import AccordionDemo from "@/registry/new-york/example/accordion-demo" -import AlertDialogDemo from "@/registry/new-york/example/alert-dialog-demo" -import AspectRatioDemo from "@/registry/new-york/example/aspect-ratio-demo" -import AvatarDemo from "@/registry/new-york/example/avatar-demo" -import BadgeDemo from "@/registry/new-york/example/badge-demo" -import BadgeDestructive from "@/registry/new-york/example/badge-destructive" -import BadgeOutline from "@/registry/new-york/example/badge-outline" -import BadgeSecondary from "@/registry/new-york/example/badge-secondary" -import ButtonDemo from "@/registry/new-york/example/button-demo" -import ButtonDestructive from "@/registry/new-york/example/button-destructive" -import ButtonGhost from "@/registry/new-york/example/button-ghost" -import ButtonLink from "@/registry/new-york/example/button-link" -import ButtonLoading from "@/registry/new-york/example/button-loading" -import ButtonOutline from "@/registry/new-york/example/button-outline" -import ButtonSecondary from "@/registry/new-york/example/button-secondary" -import ButtonWithIcon from "@/registry/new-york/example/button-with-icon" -import CardDemo from "@/registry/new-york/example/card-demo" -import CheckboxDemo from "@/registry/new-york/example/checkbox-demo" -import CollapsibleDemo from "@/registry/new-york/example/collapsible-demo" -import CommandDemo from "@/registry/new-york/example/command-demo" -import ContextMenuDemo from "@/registry/new-york/example/context-menu-demo" -import DatePickerDemo from "@/registry/new-york/example/date-picker-demo" -import DialogDemo from "@/registry/new-york/example/dialog-demo" -import DropdownMenuDemo from "@/registry/new-york/example/dropdown-menu-demo" -import HoverCardDemo from "@/registry/new-york/example/hover-card-demo" -import MenubarDemo from "@/registry/new-york/example/menubar-demo" -import NavigationMenuDemo from "@/registry/new-york/example/navigation-menu-demo" -import PopoverDemo from "@/registry/new-york/example/popover-demo" -import ProgressDemo from "@/registry/new-york/example/progress-demo" -import RadioGroupDemo from "@/registry/new-york/example/radio-group-demo" -import ScrollAreaDemo from "@/registry/new-york/example/scroll-area-demo" -import SelectDemo from "@/registry/new-york/example/select-demo" -import SeparatorDemo from "@/registry/new-york/example/separator-demo" -import SheetDemo from "@/registry/new-york/example/sheet-demo" -import SkeletonDemo from "@/registry/new-york/example/skeleton-demo" -import SliderDemo from "@/registry/new-york/example/slider-demo" -import SwitchDemo from "@/registry/new-york/example/switch-demo" -import TabsDemo from "@/registry/new-york/example/tabs-demo" -import ToastDemo from "@/registry/new-york/example/toast-demo" -import ToggleDemo from "@/registry/new-york/example/toggle-demo" -import ToggleDisabled from "@/registry/new-york/example/toggle-disabled" -import ToggleOutline from "@/registry/new-york/example/toggle-outline" -import ToggleWithText from "@/registry/new-york/example/toggle-with-text" -import TooltipDemo from "@/registry/new-york/example/tooltip-demo" -import { Button } from "@/registry/new-york/ui/button" - -export default function KitchenSinkPage() { - return ( -
-
-
-
- - - - - - - -

Documentation

-

- You can customize the theme using{" "} - - CSS variables - - .{" "} - - Click here - {" "} - to learn more. -

-
- - - - - - - -
-
- - - - - -
- - - -
-
- - - -
-
- - -
-
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - -
- - - -
-
- -
- - - - -
-
- - - - - - - -
- - - - -
-
- - - -
-
-
-
- ) -} - -function ComponentWrapper({ - className, - children, -}: React.HTMLAttributes) { - return ( -
- {children} -
- ) -} diff --git a/apps/www/app/(app)/sink/page.tsx b/apps/www/app/(app)/sink/page.tsx deleted file mode 100644 index 9533913922a..00000000000 --- a/apps/www/app/(app)/sink/page.tsx +++ /dev/null @@ -1,210 +0,0 @@ -import * as React from "react" -import Link from "next/link" - -import { cn } from "@/lib/utils" -import AccordionDemo from "@/registry/default/example/accordion-demo" -import AlertDialogDemo from "@/registry/default/example/alert-dialog-demo" -import AspectRatioDemo from "@/registry/default/example/aspect-ratio-demo" -import AvatarDemo from "@/registry/default/example/avatar-demo" -import BadgeDemo from "@/registry/default/example/badge-demo" -import BadgeDestructive from "@/registry/default/example/badge-destructive" -import BadgeOutline from "@/registry/default/example/badge-outline" -import BadgeSecondary from "@/registry/default/example/badge-secondary" -import ButtonDemo from "@/registry/default/example/button-demo" -import ButtonDestructive from "@/registry/default/example/button-destructive" -import ButtonGhost from "@/registry/default/example/button-ghost" -import ButtonLink from "@/registry/default/example/button-link" -import ButtonLoading from "@/registry/default/example/button-loading" -import ButtonOutline from "@/registry/default/example/button-outline" -import ButtonSecondary from "@/registry/default/example/button-secondary" -import ButtonWithIcon from "@/registry/default/example/button-with-icon" -import CardDemo from "@/registry/default/example/card-demo" -import CheckboxDemo from "@/registry/default/example/checkbox-demo" -import CollapsibleDemo from "@/registry/default/example/collapsible-demo" -import CommandDemo from "@/registry/default/example/command-demo" -import ContextMenuDemo from "@/registry/default/example/context-menu-demo" -import DatePickerDemo from "@/registry/default/example/date-picker-demo" -import DialogDemo from "@/registry/default/example/dialog-demo" -import DropdownMenuDemo from "@/registry/default/example/dropdown-menu-demo" -import HoverCardDemo from "@/registry/default/example/hover-card-demo" -import MenubarDemo from "@/registry/default/example/menubar-demo" -import NavigationMenuDemo from "@/registry/default/example/navigation-menu-demo" -import PopoverDemo from "@/registry/default/example/popover-demo" -import ProgressDemo from "@/registry/default/example/progress-demo" -import RadioGroupDemo from "@/registry/default/example/radio-group-demo" -import ScrollAreaDemo from "@/registry/default/example/scroll-area-demo" -import SelectDemo from "@/registry/default/example/select-demo" -import SeparatorDemo from "@/registry/default/example/separator-demo" -import SheetDemo from "@/registry/default/example/sheet-demo" -import SkeletonDemo from "@/registry/default/example/skeleton-demo" -import SliderDemo from "@/registry/default/example/slider-demo" -import SwitchDemo from "@/registry/default/example/switch-demo" -import TabsDemo from "@/registry/default/example/tabs-demo" -import ToastDemo from "@/registry/default/example/toast-demo" -import ToggleDemo from "@/registry/default/example/toggle-demo" -import ToggleDisabled from "@/registry/default/example/toggle-disabled" -import ToggleGroupDemo from "@/registry/default/example/toggle-group-demo" -import ToggleOutline from "@/registry/default/example/toggle-outline" -import ToggleWithText from "@/registry/default/example/toggle-with-text" -import TooltipDemo from "@/registry/default/example/tooltip-demo" -import { Button } from "@/registry/default/ui/button" - -export default function KitchenSinkPage() { - return ( -
-
-
-
- - - - - - - -

Documentation

-

- You can customize the theme using{" "} - - CSS variables - - .{" "} - - Click here - {" "} - to learn more. -

-
- - - - - - - -
-
- - - - - -
- - - -
-
- - - -
-
- - -
-
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - -
- - - -
-
- -
- - - - -
-
- - - - - - - -
- - - - -
-
- - - -
-
-
-
- ) -} - -function ComponentWrapper({ - className, - children, -}: React.HTMLAttributes) { - return ( -
- {children} -
- ) -} diff --git a/apps/www/app/(internal)/icons/layout.tsx b/apps/www/app/(internal)/icons/layout.tsx new file mode 100644 index 00000000000..e8fc4e32866 --- /dev/null +++ b/apps/www/app/(internal)/icons/layout.tsx @@ -0,0 +1,34 @@ +import { Metadata } from "next" + +import { Announcement } from "@/components/announcement" +import { + PageHeader, + PageHeaderDescription, + PageHeaderHeading, +} from "@/components/page-header" + +export const metadata: Metadata = { + title: "Icons", + description: "All icons in all libraries.", +} + +export default function IconsLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( +
+ + + Icons + + All icons in all libraries. + + +
+ {children} +
+
+ ) +} diff --git a/apps/www/app/(internal)/icons/page.tsx b/apps/www/app/(internal)/icons/page.tsx new file mode 100644 index 00000000000..635426d32c6 --- /dev/null +++ b/apps/www/app/(internal)/icons/page.tsx @@ -0,0 +1,52 @@ +"use client" + +import * as React from "react" +import { Icons } from "@/__registry__/icons" + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/registry/new-york/ui/table" +import { iconLibraries } from "@/registry/registry-icons" + +export default function IconsPage() { + return ( +
+ + + + + name + + {Object.keys(iconLibraries).map((library) => ( + {library} + ))} + + + + {Object.entries(Icons).map(([name, icon]) => ( + + + {name} + + {Object.entries(iconLibraries).map(([library, name]) => { + const IconComponent = icon[library as keyof typeof icon] + return ( + + Loading...}> + {IconComponent && } + + + ) + })} + + ))} + +
+
+ ) +} diff --git a/apps/www/app/(internal)/sink/page.tsx b/apps/www/app/(internal)/sink/page.tsx new file mode 100644 index 00000000000..bd291db322a --- /dev/null +++ b/apps/www/app/(internal)/sink/page.tsx @@ -0,0 +1,3 @@ +import SinkPage from "@/registry/new-york/block/_sink/page" + +export default SinkPage diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx index e70b00745bf..cafbc1710fc 100644 --- a/apps/www/components/announcement.tsx +++ b/apps/www/components/announcement.tsx @@ -1,6 +1,5 @@ import Link from "next/link" -import { ArrowRightIcon } from "@radix-ui/react-icons" -import { Blocks, PieChart } from "lucide-react" +import { ArrowRight, PanelLeft } from "lucide-react" import { Separator } from "@/registry/new-york/ui/separator" @@ -10,12 +9,12 @@ export function Announcement() { href="/docs/components/sidebar" className="group inline-flex items-center px-0.5 text-sm font-medium" > - {" "} + {" "} {" "} New sidebar component - + ) } diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx index 6ffed599821..9d8b1d868ec 100644 --- a/apps/www/components/command-menu.tsx +++ b/apps/www/components/command-menu.tsx @@ -3,13 +3,7 @@ import * as React from "react" import { useRouter } from "next/navigation" import { type DialogProps } from "@radix-ui/react-dialog" -import { - CircleIcon, - FileIcon, - LaptopIcon, - MoonIcon, - SunIcon, -} from "@radix-ui/react-icons" +import { Circle, File, Laptop, Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { docsConfig } from "@/config/docs" @@ -87,7 +81,7 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => router.push(navItem.href as string)) }} > - + {navItem.title} ))} @@ -103,7 +97,7 @@ export function CommandMenu({ ...props }: DialogProps) { }} >
- +
{navItem.title} @@ -113,15 +107,15 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => setTheme("light"))}> - + Light runCommand(() => setTheme("dark"))}> - + Dark runCommand(() => setTheme("system"))}> - + System diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx index 3a70efc7ede..75fa28eafb6 100644 --- a/apps/www/components/examples-nav.tsx +++ b/apps/www/components/examples-nav.tsx @@ -2,7 +2,7 @@ import Link from "next/link" import { usePathname } from "next/navigation" -import { ArrowRightIcon } from "@radix-ui/react-icons" +import { ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" @@ -65,8 +65,7 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) { key={example.href} className={cn( "flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary", - pathname?.startsWith(example.href) || - (index === 0 && pathname === "/") + pathname?.startsWith(example.href) ? "bg-muted font-medium text-primary" : "text-muted-foreground" )} @@ -100,7 +99,7 @@ export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) { className="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex" > View code - + ) } diff --git a/apps/www/components/pager.tsx b/apps/www/components/pager.tsx index 7c90cfbc60c..bb304120353 100644 --- a/apps/www/components/pager.tsx +++ b/apps/www/components/pager.tsx @@ -1,6 +1,6 @@ import Link from "next/link" -import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" import { Doc } from "contentlayer/generated" +import { ChevronLeft, ChevronRight } from "lucide-react" import { NavItem, NavItemWithChildren } from "types/nav" import { docsConfig } from "@/config/docs" @@ -22,7 +22,7 @@ export function DocsPager({ doc }: DocsPagerProps) { {pager?.prev?.href && ( @@ -31,7 +31,7 @@ export function DocsPager({ doc }: DocsPagerProps) { )} diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx index efbc66d6c29..d457ded0c48 100644 --- a/apps/www/components/theme-customizer.tsx +++ b/apps/www/components/theme-customizer.tsx @@ -1,15 +1,8 @@ "use client" import * as React from "react" -import { - CheckIcon, - CopyIcon, - InfoCircledIcon, - MoonIcon, - ResetIcon, - SunIcon, -} from "@radix-ui/react-icons" import template from "lodash.template" +import { Check, Copy, HelpCircle, Moon, Repeat, Sun } from "lucide-react" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" @@ -123,9 +116,7 @@ export function ThemeCustomizer() { "flex h-5 w-5 items-center justify-center rounded-full bg-[--theme-primary]" )} > - {isActive && ( - - )} + {isActive && } {baseColor.label} @@ -191,7 +182,7 @@ function Customizer() { }) }} > - + Reset
@@ -201,7 +192,7 @@ function Customizer() { - + About styles - {isActive && } + {isActive && } {theme.label} @@ -334,7 +325,7 @@ function Customizer() { onClick={() => setMode("light")} className={cn(mode === "light" && "border-2 border-primary")} > - + Light @@ -391,11 +382,7 @@ function CopyCodeButton({ className={cn("md:hidden", className)} {...props} > - {hasCopied ? ( - - ) : ( - - )} + {hasCopied ? : } Copy code )} @@ -432,11 +419,7 @@ function CopyCodeButton({ }} className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" > - {hasCopied ? ( - - ) : ( - - )} + {hasCopied ? : } Copy )} diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx index 4625b2cde47..1a51e81cf51 100644 --- a/apps/www/content/docs/installation/manual.mdx +++ b/apps/www/content/docs/installation/manual.mdx @@ -27,12 +27,6 @@ If you're using the `default` style, install `lucide-react`: npm install lucide-react ``` -If you're using the `new-york` style, install `@radix-ui/react-icons`: - -```bash -npm install @radix-ui/react-icons -``` - ### Configure path aliases I use the `@` alias. This is how I configure it in tsconfig.json: diff --git a/apps/www/public/r/icons/index.json b/apps/www/public/r/icons/index.json new file mode 100644 index 00000000000..bf65dca463d --- /dev/null +++ b/apps/www/public/r/icons/index.json @@ -0,0 +1,150 @@ +{ + "AlertCircle": { + "lucide": "AlertCircle", + "radix": "ExclamationTriangleIcon" + }, + "ArrowLeft": { + "lucide": "ArrowLeft", + "radix": "ArrowLeftIcon" + }, + "ArrowRight": { + "lucide": "ArrowRight", + "radix": "ArrowRightIcon" + }, + "ArrowUpDown": { + "lucide": "ArrowUpDown", + "radix": "CaretSortIcon" + }, + "BellRing": { + "lucide": "BellRing", + "radix": "BellIcon" + }, + "Bold": { + "lucide": "Bold", + "radix": "FontBoldIcon" + }, + "Calculator": { + "lucide": "Calculator", + "radix": "ComponentPlaceholderIcon" + }, + "Calendar": { + "lucide": "Calendar", + "radix": "CalendarIcon" + }, + "Check": { + "lucide": "Check", + "radix": "CheckIcon" + }, + "ChevronDown": { + "lucide": "ChevronDown", + "radix": "ChevronDownIcon" + }, + "ChevronLeft": { + "lucide": "ChevronLeft", + "radix": "ChevronLeftIcon" + }, + "ChevronRight": { + "lucide": "ChevronRight", + "radix": "ChevronRightIcon" + }, + "ChevronUp": { + "lucide": "ChevronUp", + "radix": "ChevronUpIcon" + }, + "ChevronsUpDown": { + "lucide": "ChevronsUpDown", + "radix": "CaretSortIcon" + }, + "Circle": { + "lucide": "Circle", + "radix": "DotFilledIcon" + }, + "Copy": { + "lucide": "Copy", + "radix": "CopyIcon" + }, + "CreditCard": { + "lucide": "CreditCard", + "radix": "ComponentPlaceholderIcon" + }, + "GripVertical": { + "lucide": "GripVertical", + "radix": "DragHandleDots2Icon" + }, + "Italic": { + "lucide": "Italic", + "radix": "FontItalicIcon" + }, + "Loader2": { + "lucide": "Loader2", + "radix": "ReloadIcon" + }, + "Mail": { + "lucide": "Mail", + "radix": "EnvelopeClosedIcon" + }, + "MailOpen": { + "lucide": "MailOpen", + "radix": "EnvelopeOpenIcon" + }, + "Minus": { + "lucide": "Minus", + "radix": "MinusIcon" + }, + "Moon": { + "lucide": "Moon", + "radix": "MoonIcon" + }, + "MoreHorizontal": { + "lucide": "MoreHorizontal", + "radix": "DotsHorizontalIcon" + }, + "PanelLeft": { + "lucide": "PanelLeft", + "radix": "ViewVerticalIcon" + }, + "Plus": { + "lucide": "Plus", + "radix": "PlusIcon" + }, + "Search": { + "lucide": "Search", + "radix": "MagnifyingGlassIcon" + }, + "Send": { + "lucide": "Send", + "radix": "PaperPlaneIcon" + }, + "Settings": { + "lucide": "Settings", + "radix": "GearIcon" + }, + "Slash": { + "lucide": "Slash", + "radix": "SlashIcon" + }, + "Smile": { + "lucide": "Smile", + "radix": "FaceIcon" + }, + "Sun": { + "lucide": "Sun", + "radix": "SunIcon" + }, + "Terminal": { + "lucide": "Terminal", + "radix": "RocketIcon" + }, + "Underline": { + "lucide": "Underline", + "radix": "UnderlineIcon" + }, + "User": { + "lucide": "User", + "radix": "PersonIcon" + }, + "X": { + "lucide": "X", + "radix": "Cross2Icon" + } +} \ No newline at end of file diff --git a/apps/www/public/r/styles/default/_sink.json b/apps/www/public/r/styles/default/_sink.json new file mode 100644 index 00000000000..771a993e93e --- /dev/null +++ b/apps/www/public/r/styles/default/_sink.json @@ -0,0 +1,386 @@ +{ + "name": "_sink", + "type": "registry:block", + "description": "", + "registryDependencies": [ + "accordion", + "alert", + "alert-dialog", + "aspect-ratio", + "avatar", + "badge", + "breadcrumb", + "button", + "calendar", + "card", + "carousel", + "chart", + "checkbox", + "collapsible", + "command", + "context-menu", + "dialog", + "drawer", + "dropdown-menu", + "hover-card", + "input", + "input-otp", + "label", + "menubar", + "navigation-menu", + "pagination", + "popover", + "progress", + "radio-group", + "resizable", + "scroll-area", + "select", + "separator", + "sheet", + "sidebar", + "skeleton", + "slider", + "sonner", + "switch", + "table", + "tabs", + "textarea", + "toast", + "toggle", + "toggle-group", + "tooltip" + ], + "files": [ + { + "path": "block/_sink/page.tsx", + "content": "import { AccordionDemo } from \"@/registry/default/block/_sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/default/block/_sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/default/block/_sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/default/block/_sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/default/block/_sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/default/block/_sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/default/block/_sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/default/block/_sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/default/block/_sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/default/block/_sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/default/block/_sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/default/block/_sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/default/block/_sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/default/block/_sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/default/block/_sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/default/block/_sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/default/block/_sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/default/block/_sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/default/block/_sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/default/block/_sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/default/block/_sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/default/block/_sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/default/block/_sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/default/block/_sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/default/block/_sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/default/block/_sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/default/block/_sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/default/block/_sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/default/block/_sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/default/block/_sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/default/block/_sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/default/block/_sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/default/block/_sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/default/block/_sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/default/block/_sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/default/block/_sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/default/block/_sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/default/block/_sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/default/block/_sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/default/block/_sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/default/block/_sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/default/block/_sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/default/block/_sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/default/block/_sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/default/block/_sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/default/block/_sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/default/block/_sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/default/block/_sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/default/block/_sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/default/block/_sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/default/block/_sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/default/block/_sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/default/block/_sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/default/block/_sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/default/block/_sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/default/block/_sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/default/block/_sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/default/block/_sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/default/block/_sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/default/block/_sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/default/block/_sink/components/tooltip-demo\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function SinkPage() {\n return (\n \n \n \n
\n
\n \n \n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n \n \n \n
\n
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n
\n )\n}\n", + "type": "registry:page", + "target": "app/sink/page.tsx" + }, + { + "path": "block/_sink/components/app-sidebar.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n AudioWaveform,\n BookOpen,\n Bot,\n Command,\n Frame,\n GalleryVerticalEnd,\n Map,\n PieChart,\n Settings2,\n SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/block/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/block/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/block/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/block/sidebar-07/components/team-switcher\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n teams: [\n {\n name: \"Acme Inc\",\n logo: GalleryVerticalEnd,\n plan: \"Enterprise\",\n },\n {\n name: \"Acme Corp.\",\n logo: AudioWaveform,\n plan: \"Startup\",\n },\n {\n name: \"Evil Corp.\",\n logo: Command,\n plan: \"Free\",\n },\n ],\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: \"History\",\n url: \"#\",\n },\n {\n title: \"Starred\",\n url: \"#\",\n },\n {\n title: \"Settings\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Models\",\n url: \"#\",\n icon: Bot,\n items: [\n {\n title: \"Genesis\",\n url: \"#\",\n },\n {\n title: \"Explorer\",\n url: \"#\",\n },\n {\n title: \"Quantum\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Documentation\",\n url: \"#\",\n icon: BookOpen,\n items: [\n {\n title: \"Introduction\",\n url: \"#\",\n },\n {\n title: \"Get Started\",\n url: \"#\",\n },\n {\n title: \"Tutorials\",\n url: \"#\",\n },\n {\n title: \"Changelog\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n items: [\n {\n title: \"General\",\n url: \"#\",\n },\n {\n title: \"Team\",\n url: \"#\",\n },\n {\n title: \"Billing\",\n url: \"#\",\n },\n {\n title: \"Limits\",\n url: \"#\",\n },\n ],\n },\n ],\n projects: [\n {\n name: \"Design Engineering\",\n url: \"#\",\n icon: Frame,\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: PieChart,\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: Map,\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/component-wrapper.tsx", + "content": "import { cn } from \"@/registry/default/lib/utils\"\n\nexport function ComponentWrapper({\n className,\n name,\n children,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n return (\n \n
\n
{name}
\n
\n
div]:max-w-full\">\n {children}\n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/nav-main.tsx", + "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n return (\n \n Platform\n \n {items.map((item) => (\n \n \n \n \n {item.icon && }\n {item.title}\n \n \n \n \n \n {item.items?.map((subItem) => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n \n ))}\n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/nav-projects.tsx", + "content": "\"use client\"\n\nimport {\n Folder,\n Forward,\n MoreHorizontal,\n Trash2,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n projects,\n}: {\n projects: {\n name: string\n url: string\n icon: LucideIcon\n }[]\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n Projects\n \n {projects.map((item) => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/nav-user.tsx", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n
\n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n
\n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n
\n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/team-switcher.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n teams,\n}: {\n teams: {\n name: string\n logo: React.ElementType\n plan: string\n }[]\n}) {\n const { isMobile } = useSidebar()\n const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n return (\n \n \n \n \n \n
\n \n
\n
\n \n {activeTeam.name}\n \n {activeTeam.plan}\n
\n \n \n
\n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n className=\"gap-2 p-2\"\n >\n
\n \n
\n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n
\n \n
\n
Add team
\n
\n \n
\n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/accordion-demo.tsx", + "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport function AccordionDemo() {\n return (\n \n \n Is it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n \n Is it styled?\n \n Yes. It comes with default styles that matches the other\n components' aesthetic.\n \n \n \n Is it animated?\n \n Yes. It's animated by default, but you can disable it if you prefer.\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/alert-demo.tsx", + "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport function AlertDemo() {\n return (\n \n \n Heads up!\n \n You can add components to your app using the cli.\n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/alert-dialog-demo.tsx", + "content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function AlertDialogDemo() {\n return (\n \n \n \n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/aspect-ratio-demo.tsx", + "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n return (\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/avatar-demo.tsx", + "content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n return (\n \n \n CN\n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/badge-demo.tsx", + "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDemo() {\n return Badge\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/breadcrumb-demo.tsx", + "content": "import {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n return (\n \n \n \n Home\n \n \n \n \n \n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/button-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n return \n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/calendar-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport function CalendarDemo() {\n const [date, setDate] = React.useState(new Date())\n\n return (\n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/card-demo.tsx", + "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nconst notifications = [\n {\n title: \"Your call has been confirmed.\",\n description: \"1 hour ago\",\n },\n {\n title: \"You have a new message!\",\n description: \"1 hour ago\",\n },\n {\n title: \"Your subscription is expiring soon!\",\n description: \"2 hours ago\",\n },\n]\n\ntype CardProps = React.ComponentProps\n\nexport function CardDemo({ className, ...props }: CardProps) {\n return (\n \n \n Notifications\n You have 3 unread messages.\n \n \n
\n \n
\n

\n Push Notifications\n

\n

\n Send notifications to device.\n

\n
\n \n
\n
\n {notifications.map((notification, index) => (\n \n \n
\n

\n {notification.title}\n

\n

\n {notification.description}\n

\n
\n
\n ))}\n

\n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/carousel-demo.tsx", + "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport function CarouselDemo() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n
\n ))}\n
\n \n \n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/checkbox-demo.tsx", + "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport function CheckboxDemo() {\n return (\n
\n \n \n Accept terms and conditions\n \n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/collapsible-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport function CollapsibleDemo() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n
\n

\n @peduarte starred 3 repositories\n

\n \n \n \n
\n
\n @radix-ui/primitives\n
\n \n
\n @radix-ui/colors\n
\n
\n @stitches/react\n
\n
\n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/combobox-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n {\n value: \"next.js\",\n label: \"Next.js\",\n },\n {\n value: \"sveltekit\",\n label: \"SvelteKit\",\n },\n {\n value: \"nuxt.js\",\n label: \"Nuxt.js\",\n },\n {\n value: \"remix\",\n label: \"Remix\",\n },\n {\n value: \"astro\",\n label: \"Astro\",\n },\n]\n\nexport function ComboboxDemo() {\n const [open, setOpen] = React.useState(false)\n const [value, setValue] = React.useState(\"\")\n\n return (\n \n \n \n {value\n ? frameworks.find((framework) => framework.value === value)?.label\n : \"Select framework...\"}\n \n \n \n \n \n \n \n No framework found.\n \n {frameworks.map((framework) => (\n {\n setValue(currentValue === value ? \"\" : currentValue)\n setOpen(false)\n }}\n >\n {framework.label}\n \n \n ))}\n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/command-demo.tsx", + "content": "import {\n Calculator,\n Calendar,\n CreditCard,\n Settings,\n Smile,\n User,\n} from \"lucide-react\"\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport function CommandDemo() {\n return (\n \n \n \n No results found.\n \n \n \n Calendar\n \n \n \n Search Emoji\n \n \n \n Calculator\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/context-menu-demo.tsx", + "content": "import {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n return (\n \n \n Right click here\n \n \n \n Back\n ⌘[\n \n \n Forward\n ⌘]\n \n \n Reload\n ⌘R\n \n \n More Tools\n \n \n Save Page As...\n ⇧⌘S\n \n Create Shortcut...\n Name Window...\n \n Developer Tools\n \n \n \n \n Show Bookmarks Bar\n ⌘⇧B\n \n Show Full URLs\n \n \n People\n \n \n Pedro Duarte\n \n Colm Tuite\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/date-picker-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function DatePickerDemo() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n \n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/dialog-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function DialogDemo() {\n return (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/drawer-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n \n \n \n \n \n
\n \n Move Goal\n Set your daily activity goal.\n \n
\n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
\n {goal}\n
\n
\n Calories/day\n
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/dropdown-menu-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n return (\n \n \n \n \n \n My Account\n \n \n \n Profile\n ⇧⌘P\n \n \n Billing\n ⌘B\n \n \n Settings\n ⌘S\n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n \n Team\n \n Invite users\n \n \n Email\n Message\n \n More...\n \n \n \n \n New Team\n ⌘+T\n \n \n \n GitHub\n Support\n API\n \n \n Log out\n ⇧⌘Q\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/hover-card-demo.tsx", + "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport function HoverCardDemo() {\n return (\n \n \n \n \n \n
\n \n \n VC\n \n
\n

@nextjs

\n

\n The React Framework – created and maintained by @vercel.\n

\n
\n {\" \"}\n \n Joined December 2021\n \n
\n
\n
\n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/input-demo.tsx", + "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport function InputDemo() {\n return \n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/input-otp-demo.tsx", + "content": "import {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport function InputOTPDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/label-demo.tsx", + "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LabelDemo() {\n return (\n
\n
\n \n \n
\n
\n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/menubar-demo.tsx", + "content": "import {\n Menubar,\n MenubarCheckboxItem,\n MenubarContent,\n MenubarItem,\n MenubarMenu,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSeparator,\n MenubarShortcut,\n MenubarSub,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport function MenubarDemo() {\n return (\n \n \n File\n \n \n New Tab ⌘T\n \n \n New Window ⌘N\n \n New Incognito Window\n \n \n Share\n \n Email link\n Messages\n Notes\n \n \n \n \n Print... ⌘P\n \n \n \n \n Edit\n \n \n Undo ⌘Z\n \n \n Redo ⇧⌘Z\n \n \n \n Find\n \n Search the web\n \n Find...\n Find Next\n Find Previous\n \n \n \n Cut\n Copy\n Paste\n \n \n \n View\n \n Always Show Bookmarks Bar\n \n Always Show Full URLs\n \n \n \n Reload ⌘R\n \n \n Force Reload ⇧⌘R\n \n \n Toggle Fullscreen\n \n Hide Sidebar\n \n \n \n Profiles\n \n \n Andy\n Benoit\n Luis\n \n \n Edit...\n \n Add Profile...\n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/navigation-menu-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n {\n title: \"Alert Dialog\",\n href: \"/docs/primitives/alert-dialog\",\n description:\n \"A modal dialog that interrupts the user with important content and expects a response.\",\n },\n {\n title: \"Hover Card\",\n href: \"/docs/primitives/hover-card\",\n description:\n \"For sighted users to preview content available behind a link.\",\n },\n {\n title: \"Progress\",\n href: \"/docs/primitives/progress\",\n description:\n \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n },\n {\n title: \"Scroll-area\",\n href: \"/docs/primitives/scroll-area\",\n description: \"Visually or semantically separates content.\",\n },\n {\n title: \"Tabs\",\n href: \"/docs/primitives/tabs\",\n description:\n \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n },\n {\n title: \"Tooltip\",\n href: \"/docs/primitives/tooltip\",\n description:\n \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n },\n]\n\nexport function NavigationMenuDemo() {\n return (\n \n \n \n Getting started\n \n
    \n
  • \n \n \n
    \n shadcn/ui\n
    \n

    \n Beautifully designed components built with Radix UI and\n Tailwind CSS.\n

    \n \n
    \n
  • \n \n Re-usable components built using Radix UI and Tailwind CSS.\n \n \n How to install dependencies and structure your app.\n \n \n Styles for headings, paragraphs, lists...etc\n \n
\n
\n
\n \n Components\n \n
    \n {components.map((component) => (\n \n {component.description}\n \n ))}\n
\n
\n
\n \n \n \n Documentation\n \n \n \n
\n
\n )\n}\n\nconst ListItem = React.forwardRef<\n React.ElementRef<\"a\">,\n React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n return (\n
  • \n \n \n
    {title}
    \n

    \n {children}\n

    \n \n
    \n
  • \n )\n})\nListItem.displayName = \"ListItem\"\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/pagination-demo.tsx", + "content": "import {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport function PaginationDemo() {\n return (\n \n \n \n \n \n \n 1\n \n \n \n 2\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/popover-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function PopoverDemo() {\n return (\n \n \n \n \n \n
    \n
    \n

    Dimensions

    \n

    \n Set the dimensions for the layer.\n

    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/progress-demo.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport function ProgressDemo() {\n const [progress, setProgress] = React.useState(13)\n\n React.useEffect(() => {\n const timer = setTimeout(() => setProgress(66), 500)\n return () => clearTimeout(timer)\n }, [])\n\n return \n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/radio-group-demo.tsx", + "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n return (\n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/resizable-handle.tsx", + "content": "import {\n ResizableHandle,\n ResizablePanel,\n ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n return (\n \n \n
    \n Sidebar\n
    \n
    \n \n \n
    \n Content\n
    \n
    \n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/scroll-area-demo.tsx", + "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n return (\n \n
    \n

    Tags

    \n {tags.map((tag) => (\n \n
    {tag}
    \n \n
    \n ))}\n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/select-demo.tsx", + "content": "import * as React from \"react\"\n\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport function SelectDemo() {\n return (\n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/separator-demo.tsx", + "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport function SeparatorDemo() {\n return (\n
    \n
    \n

    Radix Primitives

    \n

    \n An open-source UI component library.\n

    \n
    \n \n
    \n
    Blog
    \n \n
    Docs
    \n \n
    Source
    \n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/sheet-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport function SheetDemo() {\n return (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n \n \n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/skeleton-demo.tsx", + "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport function SkeletonDemo() {\n return (\n
    \n \n
    \n \n \n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/slider-demo.tsx", + "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n return (\n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/sonner-demo.tsx", + "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function SonnerDemo() {\n return (\n \n toast(\"Event has been created\", {\n description: \"Sunday, December 03, 2023 at 9:00 AM\",\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo\"),\n },\n })\n }\n >\n Show Toast\n \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/switch-demo.tsx", + "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport function SwitchDemo() {\n return (\n
    \n \n \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/table-demo.tsx", + "content": "import {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableFooter,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n {\n invoice: \"INV001\",\n paymentStatus: \"Paid\",\n totalAmount: \"$250.00\",\n paymentMethod: \"Credit Card\",\n },\n {\n invoice: \"INV002\",\n paymentStatus: \"Pending\",\n totalAmount: \"$150.00\",\n paymentMethod: \"PayPal\",\n },\n {\n invoice: \"INV003\",\n paymentStatus: \"Unpaid\",\n totalAmount: \"$350.00\",\n paymentMethod: \"Bank Transfer\",\n },\n {\n invoice: \"INV004\",\n paymentStatus: \"Paid\",\n totalAmount: \"$450.00\",\n paymentMethod: \"Credit Card\",\n },\n {\n invoice: \"INV005\",\n paymentStatus: \"Paid\",\n totalAmount: \"$550.00\",\n paymentMethod: \"PayPal\",\n },\n {\n invoice: \"INV006\",\n paymentStatus: \"Pending\",\n totalAmount: \"$200.00\",\n paymentMethod: \"Bank Transfer\",\n },\n {\n invoice: \"INV007\",\n paymentStatus: \"Unpaid\",\n totalAmount: \"$300.00\",\n paymentMethod: \"Credit Card\",\n },\n]\n\nexport function TableDemo() {\n return (\n \n A list of your recent invoices.\n \n \n Invoice\n Status\n Method\n Amount\n \n \n \n {invoices.map((invoice) => (\n \n {invoice.invoice}\n {invoice.paymentStatus}\n {invoice.paymentMethod}\n {invoice.totalAmount}\n \n ))}\n \n \n \n Total\n $2,500.00\n \n \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/tabs-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport function TabsDemo() {\n return (\n \n \n Account\n Password\n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're done.\n \n \n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n
    \n
    \n \n \n \n Password\n \n Change your password here. After saving, you'll be logged out.\n \n \n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n
    \n
    \n
    \n )\n}\n", + "type": "registry:component" + }, + { + "path": "block/_sink/components/textarea-demo.tsx", + "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n return