diff --git a/.changeset/slimy-cooks-glow.md b/.changeset/slimy-cooks-glow.md new file mode 100644 index 00000000000..4a70aa2ebca --- /dev/null +++ b/.changeset/slimy-cooks-glow.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": minor +--- + +everything is new diff --git a/.eslintrc.json b/.eslintrc.json index 920b86f3445..9a48847ba7b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -10,13 +10,12 @@ "plugins": ["tailwindcss"], "rules": { "@next/next/no-html-link-for-pages": "off", - "react/jsx-key": "off", "tailwindcss/no-custom-classname": "off", "tailwindcss/classnames-order": "error" }, "settings": { "tailwindcss": { - "callees": ["cn"], + "callees": ["cn", "cva"], "config": "tailwind.config.cjs" }, "next": { diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml index e5a59d3220b..c6fcb9aca94 100644 --- a/.github/workflows/code-check.yml +++ b/.github/workflows/code-check.yml @@ -22,6 +22,7 @@ jobs: name: Install pnpm id: pnpm-install with: + version: 8.6.1 run_install: false - name: Get pnpm store directory @@ -57,6 +58,7 @@ jobs: name: Install pnpm id: pnpm-install with: + version: 8.6.1 run_install: false - name: Get pnpm store directory @@ -94,6 +96,7 @@ jobs: name: Install pnpm id: pnpm-install with: + version: 8.6.1 run_install: false - name: Get pnpm store directory diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml index 18f35004f17..d31a8ebaa80 100644 --- a/.github/workflows/prerelease.yml +++ b/.github/workflows/prerelease.yml @@ -24,6 +24,8 @@ jobs: - name: Use PNPM uses: pnpm/action-setup@v2.2.4 + with: + version: 8.6.1 - name: Use Node.js 18 uses: actions/setup-node@v3 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 87eee6e42be..3ba8d4a6e8e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -20,10 +20,13 @@ jobs: - name: Use PNPM uses: pnpm/action-setup@v2.2.4 + with: + version: 8.6.1 - name: Use Node.js 18 uses: actions/setup-node@v3 with: + version: 8.6.1 node-version: 18 cache: "pnpm" diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 00000000000..79d58c08a23 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,42 @@ +name: Test + +on: + pull_request: + branches: ["*"] + +jobs: + test: + runs-on: ubuntu-latest + name: Test + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: 16 + + - uses: pnpm/action-setup@v2.2.4 + name: Install pnpm + id: pnpm-install + with: + version: 8.6.1 + run_install: false + + - name: Get pnpm store directory + id: pnpm-cache + run: | + echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT + - uses: actions/cache@v3 + name: Setup pnpm cache + with: + path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + - name: Install dependencies + run: pnpm install + + - run: pnpm test diff --git a/.prettierignore b/.prettierignore index 59a3d1274ed..b2269835327 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,4 +3,4 @@ node_modules .next build .contentlayer -apps/www/pages/api/components.json \ No newline at end of file +apps/www/pages/api/registry.json \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 304879dc230..2de03938860 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,9 @@ "eslint.workingDirectories": [ { "pattern": "apps/*/" }, { "pattern": "packages/*/" } + ], + "tailwindCSS.experimental.classRegex": [ + ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], + ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] ] } diff --git a/apps/www/.prettierignore b/apps/www/.prettierignore index 3aea320e008..ccf2b0bb078 100644 --- a/apps/www/.prettierignore +++ b/apps/www/.prettierignore @@ -2,4 +2,5 @@ dist node_modules .next build -.contentlayer \ No newline at end of file +.contentlayer +__registry__/index.tsx \ No newline at end of file diff --git a/apps/www/__registry__/.autogenerated b/apps/www/__registry__/.autogenerated new file mode 100644 index 00000000000..0055c2a3e0a --- /dev/null +++ b/apps/www/__registry__/.autogenerated @@ -0,0 +1 @@ +// The content of this directory is autogenerated by the registry server. diff --git a/apps/www/__registry__/.gitkeep b/apps/www/__registry__/.gitkeep new file mode 100644 index 00000000000..e69de29bb2d diff --git a/apps/www/__registry__/README.md b/apps/www/__registry__/README.md new file mode 100644 index 00000000000..5621ceace48 --- /dev/null +++ b/apps/www/__registry__/README.md @@ -0,0 +1 @@ +> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - shadcn diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx new file mode 100644 index 00000000000..7fcfda380b3 --- /dev/null +++ b/apps/www/__registry__/index.tsx @@ -0,0 +1,1493 @@ +// This file is autogenerated by scripts/build-registry.ts +// Do not edit this file directly. +import * as React from "react" + +export const Index: Record = { + "default": { + "accordion-demo": { + name: "accordion-demo", + type: "components:example", + registryDependencies: ["accordion"], + component: React.lazy(() => import("@/registry/default/example/accordion-demo")), + files: ["registry/default/example/accordion-demo.tsx"], + }, + "alert-demo": { + name: "alert-demo", + type: "components:example", + registryDependencies: ["alert"], + component: React.lazy(() => import("@/registry/default/example/alert-demo")), + files: ["registry/default/example/alert-demo.tsx"], + }, + "alert-destructive": { + name: "alert-destructive", + type: "components:example", + registryDependencies: ["alert"], + component: React.lazy(() => import("@/registry/default/example/alert-destructive")), + files: ["registry/default/example/alert-destructive.tsx"], + }, + "alert-dialog-demo": { + name: "alert-dialog-demo", + type: "components:example", + registryDependencies: ["alert-dialog","button"], + component: React.lazy(() => import("@/registry/default/example/alert-dialog-demo")), + files: ["registry/default/example/alert-dialog-demo.tsx"], + }, + "aspect-ratio-demo": { + name: "aspect-ratio-demo", + type: "components:example", + registryDependencies: ["aspect-ratio"], + component: React.lazy(() => import("@/registry/default/example/aspect-ratio-demo")), + files: ["registry/default/example/aspect-ratio-demo.tsx"], + }, + "avatar-demo": { + name: "avatar-demo", + type: "components:example", + registryDependencies: ["avatar"], + component: React.lazy(() => import("@/registry/default/example/avatar-demo")), + files: ["registry/default/example/avatar-demo.tsx"], + }, + "badge-demo": { + name: "badge-demo", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/default/example/badge-demo")), + files: ["registry/default/example/badge-demo.tsx"], + }, + "badge-destructive": { + name: "badge-destructive", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/default/example/badge-destructive")), + files: ["registry/default/example/badge-destructive.tsx"], + }, + "badge-outline": { + name: "badge-outline", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/default/example/badge-outline")), + files: ["registry/default/example/badge-outline.tsx"], + }, + "badge-secondary": { + name: "badge-secondary", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/default/example/badge-secondary")), + files: ["registry/default/example/badge-secondary.tsx"], + }, + "button-demo": { + name: "button-demo", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-demo")), + files: ["registry/default/example/button-demo.tsx"], + }, + "button-secondary": { + name: "button-secondary", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-secondary")), + files: ["registry/default/example/button-secondary.tsx"], + }, + "button-destructive": { + name: "button-destructive", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-destructive")), + files: ["registry/default/example/button-destructive.tsx"], + }, + "button-outline": { + name: "button-outline", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-outline")), + files: ["registry/default/example/button-outline.tsx"], + }, + "button-ghost": { + name: "button-ghost", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-ghost")), + files: ["registry/default/example/button-ghost.tsx"], + }, + "button-link": { + name: "button-link", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-link")), + files: ["registry/default/example/button-link.tsx"], + }, + "button-with-icon": { + name: "button-with-icon", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-with-icon")), + files: ["registry/default/example/button-with-icon.tsx"], + }, + "button-loading": { + name: "button-loading", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-loading")), + files: ["registry/default/example/button-loading.tsx"], + }, + "button-icon": { + name: "button-icon", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-icon")), + files: ["registry/default/example/button-icon.tsx"], + }, + "button-as-child": { + name: "button-as-child", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/default/example/button-as-child")), + files: ["registry/default/example/button-as-child.tsx"], + }, + "calendar-demo": { + name: "calendar-demo", + type: "components:example", + registryDependencies: ["calendar"], + component: React.lazy(() => import("@/registry/default/example/calendar-demo")), + files: ["registry/default/example/calendar-demo.tsx"], + }, + "calendar-form": { + name: "calendar-form", + type: "components:example", + registryDependencies: ["calendar","form","popover"], + component: React.lazy(() => import("@/registry/default/example/calendar-form")), + files: ["registry/default/example/calendar-form.tsx"], + }, + "card-demo": { + name: "card-demo", + type: "components:example", + registryDependencies: ["card","button","switch"], + component: React.lazy(() => import("@/registry/default/example/card-demo")), + files: ["registry/default/example/card-demo.tsx"], + }, + "card-with-form": { + name: "card-with-form", + type: "components:example", + registryDependencies: ["button","card","input","label","select"], + component: React.lazy(() => import("@/registry/default/example/card-with-form")), + files: ["registry/default/example/card-with-form.tsx"], + }, + "checkbox-demo": { + name: "checkbox-demo", + type: "components:example", + registryDependencies: ["checkbox"], + component: React.lazy(() => import("@/registry/default/example/checkbox-demo")), + files: ["registry/default/example/checkbox-demo.tsx"], + }, + "checkbox-disabled": { + name: "checkbox-disabled", + type: "components:example", + registryDependencies: ["checkbox"], + component: React.lazy(() => import("@/registry/default/example/checkbox-disabled")), + files: ["registry/default/example/checkbox-disabled.tsx"], + }, + "checkbox-form-multiple": { + name: "checkbox-form-multiple", + type: "components:example", + registryDependencies: ["checkbox","form"], + component: React.lazy(() => import("@/registry/default/example/checkbox-form-multiple")), + files: ["registry/default/example/checkbox-form-multiple.tsx"], + }, + "checkbox-form-single": { + name: "checkbox-form-single", + type: "components:example", + registryDependencies: ["checkbox","form"], + component: React.lazy(() => import("@/registry/default/example/checkbox-form-single")), + files: ["registry/default/example/checkbox-form-single.tsx"], + }, + "checkbox-with-text": { + name: "checkbox-with-text", + type: "components:example", + registryDependencies: ["checkbox"], + component: React.lazy(() => import("@/registry/default/example/checkbox-with-text")), + files: ["registry/default/example/checkbox-with-text.tsx"], + }, + "collapsible-demo": { + name: "collapsible-demo", + type: "components:example", + registryDependencies: ["collapsible"], + component: React.lazy(() => import("@/registry/default/example/collapsible-demo")), + files: ["registry/default/example/collapsible-demo.tsx"], + }, + "combobox-demo": { + name: "combobox-demo", + type: "components:example", + registryDependencies: ["command"], + component: React.lazy(() => import("@/registry/default/example/combobox-demo")), + files: ["registry/default/example/combobox-demo.tsx"], + }, + "combobox-dropdown-menu": { + name: "combobox-dropdown-menu", + type: "components:example", + registryDependencies: ["command","dropdown-menu","button"], + component: React.lazy(() => import("@/registry/default/example/combobox-dropdown-menu")), + files: ["registry/default/example/combobox-dropdown-menu.tsx"], + }, + "combobox-form": { + name: "combobox-form", + type: "components:example", + registryDependencies: ["command","form"], + component: React.lazy(() => import("@/registry/default/example/combobox-form")), + files: ["registry/default/example/combobox-form.tsx"], + }, + "combobox-popover": { + name: "combobox-popover", + type: "components:example", + registryDependencies: ["combobox","popover"], + component: React.lazy(() => import("@/registry/default/example/combobox-popover")), + files: ["registry/default/example/combobox-popover.tsx"], + }, + "command-demo": { + name: "command-demo", + type: "components:example", + registryDependencies: ["command"], + component: React.lazy(() => import("@/registry/default/example/command-demo")), + files: ["registry/default/example/command-demo.tsx"], + }, + "command-dialog": { + name: "command-dialog", + type: "components:example", + registryDependencies: ["command","dialog"], + component: React.lazy(() => import("@/registry/default/example/command-dialog")), + files: ["registry/default/example/command-dialog.tsx"], + }, + "context-menu-demo": { + name: "context-menu-demo", + type: "components:example", + registryDependencies: ["context-menu"], + component: React.lazy(() => import("@/registry/default/example/context-menu-demo")), + files: ["registry/default/example/context-menu-demo.tsx"], + }, + "data-table-demo": { + name: "data-table-demo", + type: "components:example", + registryDependencies: ["data-table"], + component: React.lazy(() => import("@/registry/default/example/data-table-demo")), + files: ["registry/default/example/data-table-demo.tsx"], + }, + "date-picker-demo": { + name: "date-picker-demo", + type: "components:example", + registryDependencies: ["button","calendar","popover"], + component: React.lazy(() => import("@/registry/default/example/date-picker-demo")), + files: ["registry/default/example/date-picker-demo.tsx"], + }, + "date-picker-form": { + name: "date-picker-form", + type: "components:example", + registryDependencies: ["button","calendar","form","popover"], + component: React.lazy(() => import("@/registry/default/example/date-picker-form")), + files: ["registry/default/example/date-picker-form.tsx"], + }, + "date-picker-with-presets": { + name: "date-picker-with-presets", + type: "components:example", + registryDependencies: ["button","calendar","popover","select"], + component: React.lazy(() => import("@/registry/default/example/date-picker-with-presets")), + files: ["registry/default/example/date-picker-with-presets.tsx"], + }, + "date-picker-with-range": { + name: "date-picker-with-range", + type: "components:example", + registryDependencies: ["button","calendar","popover"], + component: React.lazy(() => import("@/registry/default/example/date-picker-with-range")), + files: ["registry/default/example/date-picker-with-range.tsx"], + }, + "dialog-demo": { + name: "dialog-demo", + type: "components:example", + registryDependencies: ["dialog"], + component: React.lazy(() => import("@/registry/default/example/dialog-demo")), + files: ["registry/default/example/dialog-demo.tsx"], + }, + "dropdown-menu-demo": { + name: "dropdown-menu-demo", + type: "components:example", + registryDependencies: ["dropdown-menu"], + component: React.lazy(() => import("@/registry/default/example/dropdown-menu-demo")), + files: ["registry/default/example/dropdown-menu-demo.tsx"], + }, + "dropdown-menu-checkboxes": { + name: "dropdown-menu-checkboxes", + type: "components:example", + registryDependencies: ["dropdown-menu","checkbox"], + component: React.lazy(() => import("@/registry/default/example/dropdown-menu-checkboxes")), + files: ["registry/default/example/dropdown-menu-checkboxes.tsx"], + }, + "dropdown-menu-radio-group": { + name: "dropdown-menu-radio-group", + type: "components:example", + registryDependencies: ["dropdown-menu","radio-group"], + component: React.lazy(() => import("@/registry/default/example/dropdown-menu-radio-group")), + files: ["registry/default/example/dropdown-menu-radio-group.tsx"], + }, + "hover-card-demo": { + name: "hover-card-demo", + type: "components:example", + registryDependencies: ["hover-card"], + component: React.lazy(() => import("@/registry/default/example/hover-card-demo")), + files: ["registry/default/example/hover-card-demo.tsx"], + }, + "input-demo": { + name: "input-demo", + type: "components:example", + registryDependencies: ["input"], + component: React.lazy(() => import("@/registry/default/example/input-demo")), + files: ["registry/default/example/input-demo.tsx"], + }, + "input-disabled": { + name: "input-disabled", + type: "components:example", + registryDependencies: ["input"], + component: React.lazy(() => import("@/registry/default/example/input-disabled")), + files: ["registry/default/example/input-disabled.tsx"], + }, + "input-file": { + name: "input-file", + type: "components:example", + registryDependencies: ["input"], + component: React.lazy(() => import("@/registry/default/example/input-file")), + files: ["registry/default/example/input-file.tsx"], + }, + "input-form": { + name: "input-form", + type: "components:example", + registryDependencies: ["input","button","form"], + component: React.lazy(() => import("@/registry/default/example/input-form")), + files: ["registry/default/example/input-form.tsx"], + }, + "input-with-button": { + name: "input-with-button", + type: "components:example", + registryDependencies: ["input","button"], + component: React.lazy(() => import("@/registry/default/example/input-with-button")), + files: ["registry/default/example/input-with-button.tsx"], + }, + "input-with-label": { + name: "input-with-label", + type: "components:example", + registryDependencies: ["input","button","label"], + component: React.lazy(() => import("@/registry/default/example/input-with-label")), + files: ["registry/default/example/input-with-label.tsx"], + }, + "input-with-text": { + name: "input-with-text", + type: "components:example", + registryDependencies: ["input","button","label"], + component: React.lazy(() => import("@/registry/default/example/input-with-text")), + files: ["registry/default/example/input-with-text.tsx"], + }, + "label-demo": { + name: "label-demo", + type: "components:example", + registryDependencies: ["label"], + component: React.lazy(() => import("@/registry/default/example/label-demo")), + files: ["registry/default/example/label-demo.tsx"], + }, + "menubar-demo": { + name: "menubar-demo", + type: "components:example", + registryDependencies: ["menubar"], + component: React.lazy(() => import("@/registry/default/example/menubar-demo")), + files: ["registry/default/example/menubar-demo.tsx"], + }, + "navigation-menu-demo": { + name: "navigation-menu-demo", + type: "components:example", + registryDependencies: ["navigation-menu"], + component: React.lazy(() => import("@/registry/default/example/navigation-menu-demo")), + files: ["registry/default/example/navigation-menu-demo.tsx"], + }, + "popover-demo": { + name: "popover-demo", + type: "components:example", + registryDependencies: ["popover"], + component: React.lazy(() => import("@/registry/default/example/popover-demo")), + files: ["registry/default/example/popover-demo.tsx"], + }, + "progress-demo": { + name: "progress-demo", + type: "components:example", + registryDependencies: ["progress"], + component: React.lazy(() => import("@/registry/default/example/progress-demo")), + files: ["registry/default/example/progress-demo.tsx"], + }, + "radio-group-demo": { + name: "radio-group-demo", + type: "components:example", + registryDependencies: ["radio-group"], + component: React.lazy(() => import("@/registry/default/example/radio-group-demo")), + files: ["registry/default/example/radio-group-demo.tsx"], + }, + "radio-group-form": { + name: "radio-group-form", + type: "components:example", + registryDependencies: ["radio-group","form"], + component: React.lazy(() => import("@/registry/default/example/radio-group-form")), + files: ["registry/default/example/radio-group-form.tsx"], + }, + "scroll-area-demo": { + name: "scroll-area-demo", + type: "components:example", + registryDependencies: ["scroll-area"], + component: React.lazy(() => import("@/registry/default/example/scroll-area-demo")), + files: ["registry/default/example/scroll-area-demo.tsx"], + }, + "select-demo": { + name: "select-demo", + type: "components:example", + registryDependencies: ["select"], + component: React.lazy(() => import("@/registry/default/example/select-demo")), + files: ["registry/default/example/select-demo.tsx"], + }, + "select-form": { + name: "select-form", + type: "components:example", + registryDependencies: ["select"], + component: React.lazy(() => import("@/registry/default/example/select-form")), + files: ["registry/default/example/select-form.tsx"], + }, + "separator-demo": { + name: "separator-demo", + type: "components:example", + registryDependencies: ["separator"], + component: React.lazy(() => import("@/registry/default/example/separator-demo")), + files: ["registry/default/example/separator-demo.tsx"], + }, + "sheet-demo": { + name: "sheet-demo", + type: "components:example", + registryDependencies: ["sheet"], + component: React.lazy(() => import("@/registry/default/example/sheet-demo")), + files: ["registry/default/example/sheet-demo.tsx"], + }, + "sheet-side": { + name: "sheet-side", + type: "components:example", + registryDependencies: ["sheet"], + component: React.lazy(() => import("@/registry/default/example/sheet-side")), + files: ["registry/default/example/sheet-side.tsx"], + }, + "skeleton-demo": { + name: "skeleton-demo", + type: "components:example", + registryDependencies: ["skeleton"], + component: React.lazy(() => import("@/registry/default/example/skeleton-demo")), + files: ["registry/default/example/skeleton-demo.tsx"], + }, + "slider-demo": { + name: "slider-demo", + type: "components:example", + registryDependencies: ["slider"], + component: React.lazy(() => import("@/registry/default/example/slider-demo")), + files: ["registry/default/example/slider-demo.tsx"], + }, + "switch-demo": { + name: "switch-demo", + type: "components:example", + registryDependencies: ["switch"], + component: React.lazy(() => import("@/registry/default/example/switch-demo")), + files: ["registry/default/example/switch-demo.tsx"], + }, + "switch-form": { + name: "switch-form", + type: "components:example", + registryDependencies: ["switch","form"], + component: React.lazy(() => import("@/registry/default/example/switch-form")), + files: ["registry/default/example/switch-form.tsx"], + }, + "table-demo": { + name: "table-demo", + type: "components:example", + registryDependencies: ["table"], + component: React.lazy(() => import("@/registry/default/example/table-demo")), + files: ["registry/default/example/table-demo.tsx"], + }, + "tabs-demo": { + name: "tabs-demo", + type: "components:example", + registryDependencies: ["tabs"], + component: React.lazy(() => import("@/registry/default/example/tabs-demo")), + files: ["registry/default/example/tabs-demo.tsx"], + }, + "textarea-demo": { + name: "textarea-demo", + type: "components:example", + registryDependencies: ["textarea"], + component: React.lazy(() => import("@/registry/default/example/textarea-demo")), + files: ["registry/default/example/textarea-demo.tsx"], + }, + "textarea-disabled": { + name: "textarea-disabled", + type: "components:example", + registryDependencies: ["textarea"], + component: React.lazy(() => import("@/registry/default/example/textarea-disabled")), + files: ["registry/default/example/textarea-disabled.tsx"], + }, + "textarea-form": { + name: "textarea-form", + type: "components:example", + registryDependencies: ["textarea","form"], + component: React.lazy(() => import("@/registry/default/example/textarea-form")), + files: ["registry/default/example/textarea-form.tsx"], + }, + "textarea-with-button": { + name: "textarea-with-button", + type: "components:example", + registryDependencies: ["textarea","button"], + component: React.lazy(() => import("@/registry/default/example/textarea-with-button")), + files: ["registry/default/example/textarea-with-button.tsx"], + }, + "textarea-with-label": { + name: "textarea-with-label", + type: "components:example", + registryDependencies: ["textarea","label"], + component: React.lazy(() => import("@/registry/default/example/textarea-with-label")), + files: ["registry/default/example/textarea-with-label.tsx"], + }, + "textarea-with-text": { + name: "textarea-with-text", + type: "components:example", + registryDependencies: ["textarea","label"], + component: React.lazy(() => import("@/registry/default/example/textarea-with-text")), + files: ["registry/default/example/textarea-with-text.tsx"], + }, + "toast-demo": { + name: "toast-demo", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/default/example/toast-demo")), + files: ["registry/default/example/toast-demo.tsx"], + }, + "toast-destructive": { + name: "toast-destructive", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/default/example/toast-destructive")), + files: ["registry/default/example/toast-destructive.tsx"], + }, + "toast-simple": { + name: "toast-simple", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/default/example/toast-simple")), + files: ["registry/default/example/toast-simple.tsx"], + }, + "toast-with-action": { + name: "toast-with-action", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/default/example/toast-with-action")), + files: ["registry/default/example/toast-with-action.tsx"], + }, + "toast-with-title": { + name: "toast-with-title", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/default/example/toast-with-title")), + files: ["registry/default/example/toast-with-title.tsx"], + }, + "toggle-demo": { + name: "toggle-demo", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/default/example/toggle-demo")), + files: ["registry/default/example/toggle-demo.tsx"], + }, + "toggle-disabled": { + name: "toggle-disabled", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/default/example/toggle-disabled")), + files: ["registry/default/example/toggle-disabled.tsx"], + }, + "toggle-lg": { + name: "toggle-lg", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/default/example/toggle-lg")), + files: ["registry/default/example/toggle-lg.tsx"], + }, + "toggle-outline": { + name: "toggle-outline", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/default/example/toggle-outline")), + files: ["registry/default/example/toggle-outline.tsx"], + }, + "toggle-sm": { + name: "toggle-sm", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/default/example/toggle-sm")), + files: ["registry/default/example/toggle-sm.tsx"], + }, + "toggle-with-text": { + name: "toggle-with-text", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/default/example/toggle-with-text")), + files: ["registry/default/example/toggle-with-text.tsx"], + }, + "tooltip-demo": { + name: "tooltip-demo", + type: "components:example", + registryDependencies: ["tooltip"], + component: React.lazy(() => import("@/registry/default/example/tooltip-demo")), + files: ["registry/default/example/tooltip-demo.tsx"], + }, + "typography-blockquote": { + name: "typography-blockquote", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-blockquote")), + files: ["registry/default/example/typography-blockquote.tsx"], + }, + "typography-demo": { + name: "typography-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-demo")), + files: ["registry/default/example/typography-demo.tsx"], + }, + "typography-h1": { + name: "typography-h1", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-h1")), + files: ["registry/default/example/typography-h1.tsx"], + }, + "typography-h2": { + name: "typography-h2", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-h2")), + files: ["registry/default/example/typography-h2.tsx"], + }, + "typography-h3": { + name: "typography-h3", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-h3")), + files: ["registry/default/example/typography-h3.tsx"], + }, + "typography-h4": { + name: "typography-h4", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-h4")), + files: ["registry/default/example/typography-h4.tsx"], + }, + "typography-inline-code": { + name: "typography-inline-code", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-inline-code")), + files: ["registry/default/example/typography-inline-code.tsx"], + }, + "typography-large": { + name: "typography-large", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-large")), + files: ["registry/default/example/typography-large.tsx"], + }, + "typography-lead": { + name: "typography-lead", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-lead")), + files: ["registry/default/example/typography-lead.tsx"], + }, + "typography-list": { + name: "typography-list", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-list")), + files: ["registry/default/example/typography-list.tsx"], + }, + "typography-muted": { + name: "typography-muted", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-muted")), + files: ["registry/default/example/typography-muted.tsx"], + }, + "typography-p": { + name: "typography-p", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-p")), + files: ["registry/default/example/typography-p.tsx"], + }, + "typography-small": { + name: "typography-small", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-small")), + files: ["registry/default/example/typography-small.tsx"], + }, + "typography-table": { + name: "typography-table", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/typography-table")), + files: ["registry/default/example/typography-table.tsx"], + }, + "mode-toggle": { + name: "mode-toggle", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/default/example/mode-toggle")), + files: ["registry/default/example/mode-toggle.tsx"], + }, + }, "new-york": { + "accordion-demo": { + name: "accordion-demo", + type: "components:example", + registryDependencies: ["accordion"], + component: React.lazy(() => import("@/registry/new-york/example/accordion-demo")), + files: ["registry/new-york/example/accordion-demo.tsx"], + }, + "alert-demo": { + name: "alert-demo", + type: "components:example", + registryDependencies: ["alert"], + component: React.lazy(() => import("@/registry/new-york/example/alert-demo")), + files: ["registry/new-york/example/alert-demo.tsx"], + }, + "alert-destructive": { + name: "alert-destructive", + type: "components:example", + registryDependencies: ["alert"], + component: React.lazy(() => import("@/registry/new-york/example/alert-destructive")), + files: ["registry/new-york/example/alert-destructive.tsx"], + }, + "alert-dialog-demo": { + name: "alert-dialog-demo", + type: "components:example", + registryDependencies: ["alert-dialog","button"], + component: React.lazy(() => import("@/registry/new-york/example/alert-dialog-demo")), + files: ["registry/new-york/example/alert-dialog-demo.tsx"], + }, + "aspect-ratio-demo": { + name: "aspect-ratio-demo", + type: "components:example", + registryDependencies: ["aspect-ratio"], + component: React.lazy(() => import("@/registry/new-york/example/aspect-ratio-demo")), + files: ["registry/new-york/example/aspect-ratio-demo.tsx"], + }, + "avatar-demo": { + name: "avatar-demo", + type: "components:example", + registryDependencies: ["avatar"], + component: React.lazy(() => import("@/registry/new-york/example/avatar-demo")), + files: ["registry/new-york/example/avatar-demo.tsx"], + }, + "badge-demo": { + name: "badge-demo", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/new-york/example/badge-demo")), + files: ["registry/new-york/example/badge-demo.tsx"], + }, + "badge-destructive": { + name: "badge-destructive", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/new-york/example/badge-destructive")), + files: ["registry/new-york/example/badge-destructive.tsx"], + }, + "badge-outline": { + name: "badge-outline", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/new-york/example/badge-outline")), + files: ["registry/new-york/example/badge-outline.tsx"], + }, + "badge-secondary": { + name: "badge-secondary", + type: "components:example", + registryDependencies: ["badge"], + component: React.lazy(() => import("@/registry/new-york/example/badge-secondary")), + files: ["registry/new-york/example/badge-secondary.tsx"], + }, + "button-demo": { + name: "button-demo", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-demo")), + files: ["registry/new-york/example/button-demo.tsx"], + }, + "button-secondary": { + name: "button-secondary", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-secondary")), + files: ["registry/new-york/example/button-secondary.tsx"], + }, + "button-destructive": { + name: "button-destructive", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-destructive")), + files: ["registry/new-york/example/button-destructive.tsx"], + }, + "button-outline": { + name: "button-outline", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-outline")), + files: ["registry/new-york/example/button-outline.tsx"], + }, + "button-ghost": { + name: "button-ghost", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-ghost")), + files: ["registry/new-york/example/button-ghost.tsx"], + }, + "button-link": { + name: "button-link", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-link")), + files: ["registry/new-york/example/button-link.tsx"], + }, + "button-with-icon": { + name: "button-with-icon", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-with-icon")), + files: ["registry/new-york/example/button-with-icon.tsx"], + }, + "button-loading": { + name: "button-loading", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-loading")), + files: ["registry/new-york/example/button-loading.tsx"], + }, + "button-icon": { + name: "button-icon", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-icon")), + files: ["registry/new-york/example/button-icon.tsx"], + }, + "button-as-child": { + name: "button-as-child", + type: "components:example", + registryDependencies: ["button"], + component: React.lazy(() => import("@/registry/new-york/example/button-as-child")), + files: ["registry/new-york/example/button-as-child.tsx"], + }, + "calendar-demo": { + name: "calendar-demo", + type: "components:example", + registryDependencies: ["calendar"], + component: React.lazy(() => import("@/registry/new-york/example/calendar-demo")), + files: ["registry/new-york/example/calendar-demo.tsx"], + }, + "calendar-form": { + name: "calendar-form", + type: "components:example", + registryDependencies: ["calendar","form","popover"], + component: React.lazy(() => import("@/registry/new-york/example/calendar-form")), + files: ["registry/new-york/example/calendar-form.tsx"], + }, + "card-demo": { + name: "card-demo", + type: "components:example", + registryDependencies: ["card","button","switch"], + component: React.lazy(() => import("@/registry/new-york/example/card-demo")), + files: ["registry/new-york/example/card-demo.tsx"], + }, + "card-with-form": { + name: "card-with-form", + type: "components:example", + registryDependencies: ["button","card","input","label","select"], + component: React.lazy(() => import("@/registry/new-york/example/card-with-form")), + files: ["registry/new-york/example/card-with-form.tsx"], + }, + "checkbox-demo": { + name: "checkbox-demo", + type: "components:example", + registryDependencies: ["checkbox"], + component: React.lazy(() => import("@/registry/new-york/example/checkbox-demo")), + files: ["registry/new-york/example/checkbox-demo.tsx"], + }, + "checkbox-disabled": { + name: "checkbox-disabled", + type: "components:example", + registryDependencies: ["checkbox"], + component: React.lazy(() => import("@/registry/new-york/example/checkbox-disabled")), + files: ["registry/new-york/example/checkbox-disabled.tsx"], + }, + "checkbox-form-multiple": { + name: "checkbox-form-multiple", + type: "components:example", + registryDependencies: ["checkbox","form"], + component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-multiple")), + files: ["registry/new-york/example/checkbox-form-multiple.tsx"], + }, + "checkbox-form-single": { + name: "checkbox-form-single", + type: "components:example", + registryDependencies: ["checkbox","form"], + component: React.lazy(() => import("@/registry/new-york/example/checkbox-form-single")), + files: ["registry/new-york/example/checkbox-form-single.tsx"], + }, + "checkbox-with-text": { + name: "checkbox-with-text", + type: "components:example", + registryDependencies: ["checkbox"], + component: React.lazy(() => import("@/registry/new-york/example/checkbox-with-text")), + files: ["registry/new-york/example/checkbox-with-text.tsx"], + }, + "collapsible-demo": { + name: "collapsible-demo", + type: "components:example", + registryDependencies: ["collapsible"], + component: React.lazy(() => import("@/registry/new-york/example/collapsible-demo")), + files: ["registry/new-york/example/collapsible-demo.tsx"], + }, + "combobox-demo": { + name: "combobox-demo", + type: "components:example", + registryDependencies: ["command"], + component: React.lazy(() => import("@/registry/new-york/example/combobox-demo")), + files: ["registry/new-york/example/combobox-demo.tsx"], + }, + "combobox-dropdown-menu": { + name: "combobox-dropdown-menu", + type: "components:example", + registryDependencies: ["command","dropdown-menu","button"], + component: React.lazy(() => import("@/registry/new-york/example/combobox-dropdown-menu")), + files: ["registry/new-york/example/combobox-dropdown-menu.tsx"], + }, + "combobox-form": { + name: "combobox-form", + type: "components:example", + registryDependencies: ["command","form"], + component: React.lazy(() => import("@/registry/new-york/example/combobox-form")), + files: ["registry/new-york/example/combobox-form.tsx"], + }, + "combobox-popover": { + name: "combobox-popover", + type: "components:example", + registryDependencies: ["combobox","popover"], + component: React.lazy(() => import("@/registry/new-york/example/combobox-popover")), + files: ["registry/new-york/example/combobox-popover.tsx"], + }, + "command-demo": { + name: "command-demo", + type: "components:example", + registryDependencies: ["command"], + component: React.lazy(() => import("@/registry/new-york/example/command-demo")), + files: ["registry/new-york/example/command-demo.tsx"], + }, + "command-dialog": { + name: "command-dialog", + type: "components:example", + registryDependencies: ["command","dialog"], + component: React.lazy(() => import("@/registry/new-york/example/command-dialog")), + files: ["registry/new-york/example/command-dialog.tsx"], + }, + "context-menu-demo": { + name: "context-menu-demo", + type: "components:example", + registryDependencies: ["context-menu"], + component: React.lazy(() => import("@/registry/new-york/example/context-menu-demo")), + files: ["registry/new-york/example/context-menu-demo.tsx"], + }, + "data-table-demo": { + name: "data-table-demo", + type: "components:example", + registryDependencies: ["data-table"], + component: React.lazy(() => import("@/registry/new-york/example/data-table-demo")), + files: ["registry/new-york/example/data-table-demo.tsx"], + }, + "date-picker-demo": { + name: "date-picker-demo", + type: "components:example", + registryDependencies: ["button","calendar","popover"], + component: React.lazy(() => import("@/registry/new-york/example/date-picker-demo")), + files: ["registry/new-york/example/date-picker-demo.tsx"], + }, + "date-picker-form": { + name: "date-picker-form", + type: "components:example", + registryDependencies: ["button","calendar","form","popover"], + component: React.lazy(() => import("@/registry/new-york/example/date-picker-form")), + files: ["registry/new-york/example/date-picker-form.tsx"], + }, + "date-picker-with-presets": { + name: "date-picker-with-presets", + type: "components:example", + registryDependencies: ["button","calendar","popover","select"], + component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-presets")), + files: ["registry/new-york/example/date-picker-with-presets.tsx"], + }, + "date-picker-with-range": { + name: "date-picker-with-range", + type: "components:example", + registryDependencies: ["button","calendar","popover"], + component: React.lazy(() => import("@/registry/new-york/example/date-picker-with-range")), + files: ["registry/new-york/example/date-picker-with-range.tsx"], + }, + "dialog-demo": { + name: "dialog-demo", + type: "components:example", + registryDependencies: ["dialog"], + component: React.lazy(() => import("@/registry/new-york/example/dialog-demo")), + files: ["registry/new-york/example/dialog-demo.tsx"], + }, + "dropdown-menu-demo": { + name: "dropdown-menu-demo", + type: "components:example", + registryDependencies: ["dropdown-menu"], + component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-demo")), + files: ["registry/new-york/example/dropdown-menu-demo.tsx"], + }, + "dropdown-menu-checkboxes": { + name: "dropdown-menu-checkboxes", + type: "components:example", + registryDependencies: ["dropdown-menu","checkbox"], + component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-checkboxes")), + files: ["registry/new-york/example/dropdown-menu-checkboxes.tsx"], + }, + "dropdown-menu-radio-group": { + name: "dropdown-menu-radio-group", + type: "components:example", + registryDependencies: ["dropdown-menu","radio-group"], + component: React.lazy(() => import("@/registry/new-york/example/dropdown-menu-radio-group")), + files: ["registry/new-york/example/dropdown-menu-radio-group.tsx"], + }, + "hover-card-demo": { + name: "hover-card-demo", + type: "components:example", + registryDependencies: ["hover-card"], + component: React.lazy(() => import("@/registry/new-york/example/hover-card-demo")), + files: ["registry/new-york/example/hover-card-demo.tsx"], + }, + "input-demo": { + name: "input-demo", + type: "components:example", + registryDependencies: ["input"], + component: React.lazy(() => import("@/registry/new-york/example/input-demo")), + files: ["registry/new-york/example/input-demo.tsx"], + }, + "input-disabled": { + name: "input-disabled", + type: "components:example", + registryDependencies: ["input"], + component: React.lazy(() => import("@/registry/new-york/example/input-disabled")), + files: ["registry/new-york/example/input-disabled.tsx"], + }, + "input-file": { + name: "input-file", + type: "components:example", + registryDependencies: ["input"], + component: React.lazy(() => import("@/registry/new-york/example/input-file")), + files: ["registry/new-york/example/input-file.tsx"], + }, + "input-form": { + name: "input-form", + type: "components:example", + registryDependencies: ["input","button","form"], + component: React.lazy(() => import("@/registry/new-york/example/input-form")), + files: ["registry/new-york/example/input-form.tsx"], + }, + "input-with-button": { + name: "input-with-button", + type: "components:example", + registryDependencies: ["input","button"], + component: React.lazy(() => import("@/registry/new-york/example/input-with-button")), + files: ["registry/new-york/example/input-with-button.tsx"], + }, + "input-with-label": { + name: "input-with-label", + type: "components:example", + registryDependencies: ["input","button","label"], + component: React.lazy(() => import("@/registry/new-york/example/input-with-label")), + files: ["registry/new-york/example/input-with-label.tsx"], + }, + "input-with-text": { + name: "input-with-text", + type: "components:example", + registryDependencies: ["input","button","label"], + component: React.lazy(() => import("@/registry/new-york/example/input-with-text")), + files: ["registry/new-york/example/input-with-text.tsx"], + }, + "label-demo": { + name: "label-demo", + type: "components:example", + registryDependencies: ["label"], + component: React.lazy(() => import("@/registry/new-york/example/label-demo")), + files: ["registry/new-york/example/label-demo.tsx"], + }, + "menubar-demo": { + name: "menubar-demo", + type: "components:example", + registryDependencies: ["menubar"], + component: React.lazy(() => import("@/registry/new-york/example/menubar-demo")), + files: ["registry/new-york/example/menubar-demo.tsx"], + }, + "navigation-menu-demo": { + name: "navigation-menu-demo", + type: "components:example", + registryDependencies: ["navigation-menu"], + component: React.lazy(() => import("@/registry/new-york/example/navigation-menu-demo")), + files: ["registry/new-york/example/navigation-menu-demo.tsx"], + }, + "popover-demo": { + name: "popover-demo", + type: "components:example", + registryDependencies: ["popover"], + component: React.lazy(() => import("@/registry/new-york/example/popover-demo")), + files: ["registry/new-york/example/popover-demo.tsx"], + }, + "progress-demo": { + name: "progress-demo", + type: "components:example", + registryDependencies: ["progress"], + component: React.lazy(() => import("@/registry/new-york/example/progress-demo")), + files: ["registry/new-york/example/progress-demo.tsx"], + }, + "radio-group-demo": { + name: "radio-group-demo", + type: "components:example", + registryDependencies: ["radio-group"], + component: React.lazy(() => import("@/registry/new-york/example/radio-group-demo")), + files: ["registry/new-york/example/radio-group-demo.tsx"], + }, + "radio-group-form": { + name: "radio-group-form", + type: "components:example", + registryDependencies: ["radio-group","form"], + component: React.lazy(() => import("@/registry/new-york/example/radio-group-form")), + files: ["registry/new-york/example/radio-group-form.tsx"], + }, + "scroll-area-demo": { + name: "scroll-area-demo", + type: "components:example", + registryDependencies: ["scroll-area"], + component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo")), + files: ["registry/new-york/example/scroll-area-demo.tsx"], + }, + "select-demo": { + name: "select-demo", + type: "components:example", + registryDependencies: ["select"], + component: React.lazy(() => import("@/registry/new-york/example/select-demo")), + files: ["registry/new-york/example/select-demo.tsx"], + }, + "select-form": { + name: "select-form", + type: "components:example", + registryDependencies: ["select"], + component: React.lazy(() => import("@/registry/new-york/example/select-form")), + files: ["registry/new-york/example/select-form.tsx"], + }, + "separator-demo": { + name: "separator-demo", + type: "components:example", + registryDependencies: ["separator"], + component: React.lazy(() => import("@/registry/new-york/example/separator-demo")), + files: ["registry/new-york/example/separator-demo.tsx"], + }, + "sheet-demo": { + name: "sheet-demo", + type: "components:example", + registryDependencies: ["sheet"], + component: React.lazy(() => import("@/registry/new-york/example/sheet-demo")), + files: ["registry/new-york/example/sheet-demo.tsx"], + }, + "sheet-side": { + name: "sheet-side", + type: "components:example", + registryDependencies: ["sheet"], + component: React.lazy(() => import("@/registry/new-york/example/sheet-side")), + files: ["registry/new-york/example/sheet-side.tsx"], + }, + "skeleton-demo": { + name: "skeleton-demo", + type: "components:example", + registryDependencies: ["skeleton"], + component: React.lazy(() => import("@/registry/new-york/example/skeleton-demo")), + files: ["registry/new-york/example/skeleton-demo.tsx"], + }, + "slider-demo": { + name: "slider-demo", + type: "components:example", + registryDependencies: ["slider"], + component: React.lazy(() => import("@/registry/new-york/example/slider-demo")), + files: ["registry/new-york/example/slider-demo.tsx"], + }, + "switch-demo": { + name: "switch-demo", + type: "components:example", + registryDependencies: ["switch"], + component: React.lazy(() => import("@/registry/new-york/example/switch-demo")), + files: ["registry/new-york/example/switch-demo.tsx"], + }, + "switch-form": { + name: "switch-form", + type: "components:example", + registryDependencies: ["switch","form"], + component: React.lazy(() => import("@/registry/new-york/example/switch-form")), + files: ["registry/new-york/example/switch-form.tsx"], + }, + "table-demo": { + name: "table-demo", + type: "components:example", + registryDependencies: ["table"], + component: React.lazy(() => import("@/registry/new-york/example/table-demo")), + files: ["registry/new-york/example/table-demo.tsx"], + }, + "tabs-demo": { + name: "tabs-demo", + type: "components:example", + registryDependencies: ["tabs"], + component: React.lazy(() => import("@/registry/new-york/example/tabs-demo")), + files: ["registry/new-york/example/tabs-demo.tsx"], + }, + "textarea-demo": { + name: "textarea-demo", + type: "components:example", + registryDependencies: ["textarea"], + component: React.lazy(() => import("@/registry/new-york/example/textarea-demo")), + files: ["registry/new-york/example/textarea-demo.tsx"], + }, + "textarea-disabled": { + name: "textarea-disabled", + type: "components:example", + registryDependencies: ["textarea"], + component: React.lazy(() => import("@/registry/new-york/example/textarea-disabled")), + files: ["registry/new-york/example/textarea-disabled.tsx"], + }, + "textarea-form": { + name: "textarea-form", + type: "components:example", + registryDependencies: ["textarea","form"], + component: React.lazy(() => import("@/registry/new-york/example/textarea-form")), + files: ["registry/new-york/example/textarea-form.tsx"], + }, + "textarea-with-button": { + name: "textarea-with-button", + type: "components:example", + registryDependencies: ["textarea","button"], + component: React.lazy(() => import("@/registry/new-york/example/textarea-with-button")), + files: ["registry/new-york/example/textarea-with-button.tsx"], + }, + "textarea-with-label": { + name: "textarea-with-label", + type: "components:example", + registryDependencies: ["textarea","label"], + component: React.lazy(() => import("@/registry/new-york/example/textarea-with-label")), + files: ["registry/new-york/example/textarea-with-label.tsx"], + }, + "textarea-with-text": { + name: "textarea-with-text", + type: "components:example", + registryDependencies: ["textarea","label"], + component: React.lazy(() => import("@/registry/new-york/example/textarea-with-text")), + files: ["registry/new-york/example/textarea-with-text.tsx"], + }, + "toast-demo": { + name: "toast-demo", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/new-york/example/toast-demo")), + files: ["registry/new-york/example/toast-demo.tsx"], + }, + "toast-destructive": { + name: "toast-destructive", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/new-york/example/toast-destructive")), + files: ["registry/new-york/example/toast-destructive.tsx"], + }, + "toast-simple": { + name: "toast-simple", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/new-york/example/toast-simple")), + files: ["registry/new-york/example/toast-simple.tsx"], + }, + "toast-with-action": { + name: "toast-with-action", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/new-york/example/toast-with-action")), + files: ["registry/new-york/example/toast-with-action.tsx"], + }, + "toast-with-title": { + name: "toast-with-title", + type: "components:example", + registryDependencies: ["toast"], + component: React.lazy(() => import("@/registry/new-york/example/toast-with-title")), + files: ["registry/new-york/example/toast-with-title.tsx"], + }, + "toggle-demo": { + name: "toggle-demo", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/new-york/example/toggle-demo")), + files: ["registry/new-york/example/toggle-demo.tsx"], + }, + "toggle-disabled": { + name: "toggle-disabled", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/new-york/example/toggle-disabled")), + files: ["registry/new-york/example/toggle-disabled.tsx"], + }, + "toggle-lg": { + name: "toggle-lg", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/new-york/example/toggle-lg")), + files: ["registry/new-york/example/toggle-lg.tsx"], + }, + "toggle-outline": { + name: "toggle-outline", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/new-york/example/toggle-outline")), + files: ["registry/new-york/example/toggle-outline.tsx"], + }, + "toggle-sm": { + name: "toggle-sm", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/new-york/example/toggle-sm")), + files: ["registry/new-york/example/toggle-sm.tsx"], + }, + "toggle-with-text": { + name: "toggle-with-text", + type: "components:example", + registryDependencies: ["toggle"], + component: React.lazy(() => import("@/registry/new-york/example/toggle-with-text")), + files: ["registry/new-york/example/toggle-with-text.tsx"], + }, + "tooltip-demo": { + name: "tooltip-demo", + type: "components:example", + registryDependencies: ["tooltip"], + component: React.lazy(() => import("@/registry/new-york/example/tooltip-demo")), + files: ["registry/new-york/example/tooltip-demo.tsx"], + }, + "typography-blockquote": { + name: "typography-blockquote", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-blockquote")), + files: ["registry/new-york/example/typography-blockquote.tsx"], + }, + "typography-demo": { + name: "typography-demo", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-demo")), + files: ["registry/new-york/example/typography-demo.tsx"], + }, + "typography-h1": { + name: "typography-h1", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-h1")), + files: ["registry/new-york/example/typography-h1.tsx"], + }, + "typography-h2": { + name: "typography-h2", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-h2")), + files: ["registry/new-york/example/typography-h2.tsx"], + }, + "typography-h3": { + name: "typography-h3", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-h3")), + files: ["registry/new-york/example/typography-h3.tsx"], + }, + "typography-h4": { + name: "typography-h4", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-h4")), + files: ["registry/new-york/example/typography-h4.tsx"], + }, + "typography-inline-code": { + name: "typography-inline-code", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-inline-code")), + files: ["registry/new-york/example/typography-inline-code.tsx"], + }, + "typography-large": { + name: "typography-large", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-large")), + files: ["registry/new-york/example/typography-large.tsx"], + }, + "typography-lead": { + name: "typography-lead", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-lead")), + files: ["registry/new-york/example/typography-lead.tsx"], + }, + "typography-list": { + name: "typography-list", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-list")), + files: ["registry/new-york/example/typography-list.tsx"], + }, + "typography-muted": { + name: "typography-muted", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-muted")), + files: ["registry/new-york/example/typography-muted.tsx"], + }, + "typography-p": { + name: "typography-p", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-p")), + files: ["registry/new-york/example/typography-p.tsx"], + }, + "typography-small": { + name: "typography-small", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-small")), + files: ["registry/new-york/example/typography-small.tsx"], + }, + "typography-table": { + name: "typography-table", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/typography-table")), + files: ["registry/new-york/example/typography-table.tsx"], + }, + "mode-toggle": { + name: "mode-toggle", + type: "components:example", + registryDependencies: undefined, + component: React.lazy(() => import("@/registry/new-york/example/mode-toggle")), + files: ["registry/new-york/example/mode-toggle.tsx"], + }, + }, +} diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx index 9c4f9cfe8a5..a7806347bc9 100644 --- a/apps/www/app/docs/[[...slug]]/page.tsx +++ b/apps/www/app/docs/[[...slug]]/page.tsx @@ -10,13 +10,13 @@ import Balancer from "react-wrap-balancer" import { siteConfig } from "@/config/site" import { getTableOfContents } from "@/lib/toc" import { absoluteUrl, cn } from "@/lib/utils" -import { badgeVariants } from "@/components/ui/badge" -import { ScrollArea } from "@/components/ui/scroll-area" -import { Separator } from "@/components/ui/separator" import { Icons } from "@/components/icons" import { Mdx } from "@/components/mdx-components" import { DocsPager } from "@/components/pager" import { DashboardTableOfContents } from "@/components/toc" +import { badgeVariants } from "@/registry/new-york/ui/badge" +import { ScrollArea } from "@/registry/new-york/ui/scroll-area" +import { Separator } from "@/registry/new-york/ui/separator" interface DocPageProps { params: { @@ -133,18 +133,20 @@ export default async function DocPage({ params }: DocPageProps) { )} ) : null} - - - +
+ +
-
-
- - - + {doc.toc && ( +
+
+ + + +
-
+ )} ) } diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx index 57a4cb79d1d..7168fce1a04 100644 --- a/apps/www/app/docs/layout.tsx +++ b/apps/www/app/docs/layout.tsx @@ -1,6 +1,6 @@ import { docsConfig } from "@/config/docs" -import { ScrollArea } from "@/components/ui/scroll-area" import { DocsSidebarNav } from "@/components/sidebar-nav" +import { ScrollArea } from "@/registry/new-york/ui/scroll-area" interface DocsLayoutProps { children: React.ReactNode @@ -8,13 +8,15 @@ interface DocsLayoutProps { export default function DocsLayout({ children }: DocsLayoutProps) { return ( -
- - {children} +
+
+ + {children} +
) } diff --git a/apps/www/app/examples/authentication/components/user-auth-form.tsx b/apps/www/app/examples/authentication/components/user-auth-form.tsx index 816d48971d4..728e16ca2b7 100644 --- a/apps/www/app/examples/authentication/components/user-auth-form.tsx +++ b/apps/www/app/examples/authentication/components/user-auth-form.tsx @@ -3,10 +3,10 @@ import * as React from "react" import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" import { Icons } from "@/components/icons" +import { Button } from "@/registry/new-york/ui/button" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" interface UserAuthFormProps extends React.HTMLAttributes {} diff --git a/apps/www/app/examples/authentication/page.tsx b/apps/www/app/examples/authentication/page.tsx index b9e90111d69..3207e14c6b0 100644 --- a/apps/www/app/examples/authentication/page.tsx +++ b/apps/www/app/examples/authentication/page.tsx @@ -4,7 +4,7 @@ import Link from "next/link" import { Command } from "lucide-react" import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { buttonVariants } from "@/registry/new-york/ui/button" import { UserAuthForm } from "@/app/examples/authentication/components/user-auth-form" export const metadata: Metadata = { @@ -35,20 +35,14 @@ export default function AuthenticationPage() { Login
-
+
Acme Inc
@@ -57,7 +51,7 @@ export default function AuthenticationPage() {

“This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than - ever before. Highly recommended!” + ever before.”

Sofia Davis
diff --git a/apps/www/app/examples/cards/components/cookie-settings.tsx b/apps/www/app/examples/cards/components/cookie-settings.tsx index a186e2670e2..e23dd8ba5c3 100644 --- a/apps/www/app/examples/cards/components/cookie-settings.tsx +++ b/apps/www/app/examples/cards/components/cookie-settings.tsx @@ -1,6 +1,6 @@ "use client" -import { Button } from "@/components/ui/button" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, @@ -8,9 +8,9 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/components/ui/card" -import { Label } from "@/components/ui/label" -import { Switch } from "@/components/ui/switch" +} from "@/registry/new-york/ui/card" +import { Label } from "@/registry/new-york/ui/label" +import { Switch } from "@/registry/new-york/ui/switch" export function DemoCookieSettings() { return ( diff --git a/apps/www/app/examples/cards/components/create-account.tsx b/apps/www/app/examples/cards/components/create-account.tsx index 11709b672f2..95c11c53fe0 100644 --- a/apps/www/app/examples/cards/components/create-account.tsx +++ b/apps/www/app/examples/cards/components/create-account.tsx @@ -1,6 +1,7 @@ "use client" -import { Button } from "@/components/ui/button" +import { Icons } from "@/components/icons" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, @@ -8,10 +9,9 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/components/ui/card" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" -import { Icons } from "@/components/icons" +} from "@/registry/new-york/ui/card" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" export function DemoCreateAccount() { return ( diff --git a/apps/www/app/examples/cards/components/date-picker.tsx b/apps/www/app/examples/cards/components/date-picker.tsx index 3b5ba51ff17..124c13a1e06 100644 --- a/apps/www/app/examples/cards/components/date-picker.tsx +++ b/apps/www/app/examples/cards/components/date-picker.tsx @@ -1,6 +1,6 @@ -import { Card, CardContent } from "@/components/ui/card" -import { Label } from "@/components/ui/label" -import { DatePickerWithRange } from "@/components/examples/date-picker/with-range" +import DatePickerWithRange from "@/registry/default/example/date-picker-with-range" +import { Card, CardContent } from "@/registry/new-york/ui/card" +import { Label } from "@/registry/new-york/ui/label" export function DemoDatePicker() { return ( diff --git a/apps/www/app/examples/cards/components/github-card.tsx b/apps/www/app/examples/cards/components/github-card.tsx index ef686bb0f12..453ac763c1b 100644 --- a/apps/www/app/examples/cards/components/github-card.tsx +++ b/apps/www/app/examples/cards/components/github-card.tsx @@ -1,13 +1,13 @@ import { ChevronDown, Circle, Plus, Star } from "lucide-react" -import { Button } from "@/components/ui/button" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, -} from "@/components/ui/card" +} from "@/registry/new-york/ui/card" import { DropdownMenu, DropdownMenuCheckboxItem, @@ -16,8 +16,8 @@ import { DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { Separator } from "@/components/ui/separator" +} from "@/registry/new-york/ui/dropdown-menu" +import { Separator } from "@/registry/new-york/ui/separator" export function DemoGithub() { return ( @@ -71,7 +71,7 @@ export function DemoGithub() {
- 10k + 20k
Updated April 2023
diff --git a/apps/www/app/examples/cards/components/notifications.tsx b/apps/www/app/examples/cards/components/notifications.tsx index 8615f93cfe8..c2204c06942 100644 --- a/apps/www/app/examples/cards/components/notifications.tsx +++ b/apps/www/app/examples/cards/components/notifications.tsx @@ -6,20 +6,20 @@ import { CardDescription, CardHeader, CardTitle, -} from "@/components/ui/card" +} from "@/registry/new-york/ui/card" export function DemoNotifications() { return ( - + Notifications Choose what you want to be notified about. - -
- + +
+

Everything

@@ -27,8 +27,8 @@ export function DemoNotifications() {

-
- +
+

Available

@@ -36,8 +36,8 @@ export function DemoNotifications() {

-
- +
+

Ignoring

diff --git a/apps/www/app/examples/cards/components/payment-method.tsx b/apps/www/app/examples/cards/components/payment-method.tsx index aa489510c44..1a2522234ee 100644 --- a/apps/www/app/examples/cards/components/payment-method.tsx +++ b/apps/www/app/examples/cards/components/payment-method.tsx @@ -1,6 +1,7 @@ import { CreditCard } from "lucide-react" -import { Button } from "@/components/ui/button" +import { Icons } from "@/components/icons" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, @@ -8,18 +9,17 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/components/ui/card" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" +} from "@/registry/new-york/ui/card" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" +import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" -import { Icons } from "@/components/icons" +} from "@/registry/new-york/ui/select" export function DemoPaymentMethod() { return ( diff --git a/apps/www/app/examples/cards/components/report-an-issue.tsx b/apps/www/app/examples/cards/components/report-an-issue.tsx index bd8bf87fa45..5da6206a3a3 100644 --- a/apps/www/app/examples/cards/components/report-an-issue.tsx +++ b/apps/www/app/examples/cards/components/report-an-issue.tsx @@ -1,6 +1,6 @@ "use client" -import { Button } from "@/components/ui/button" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, @@ -8,17 +8,17 @@ import { CardFooter, CardHeader, CardTitle, -} from "@/components/ui/card" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +} from "@/registry/new-york/ui/card" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" -import { Textarea } from "@/components/ui/textarea" +} from "@/registry/new-york/ui/select" +import { Textarea } from "@/registry/new-york/ui/textarea" export function DemoReportAnIssue() { return ( diff --git a/apps/www/app/examples/cards/components/share-document.tsx b/apps/www/app/examples/cards/components/share-document.tsx index 1ad8fe177e0..fb599c7892d 100644 --- a/apps/www/app/examples/cards/components/share-document.tsx +++ b/apps/www/app/examples/cards/components/share-document.tsx @@ -1,23 +1,27 @@ "use client" -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" -import { Button } from "@/components/ui/button" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, -} from "@/components/ui/card" -import { Input } from "@/components/ui/input" +} from "@/registry/new-york/ui/card" +import { Input } from "@/registry/new-york/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" -import { Separator } from "@/components/ui/separator" +} from "@/registry/new-york/ui/select" +import { Separator } from "@/registry/new-york/ui/separator" export function DemoShareDocument() { return ( diff --git a/apps/www/app/examples/cards/components/team-members.tsx b/apps/www/app/examples/cards/components/team-members.tsx index 4ad8a103fa5..d9e17987745 100644 --- a/apps/www/app/examples/cards/components/team-members.tsx +++ b/apps/www/app/examples/cards/components/team-members.tsx @@ -1,14 +1,18 @@ import { ChevronDown } from "lucide-react" -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" -import { Button } from "@/components/ui/button" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { Button } from "@/registry/new-york/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, -} from "@/components/ui/card" +} from "@/registry/new-york/ui/card" import { Command, CommandEmpty, @@ -16,12 +20,12 @@ import { CommandInput, CommandItem, CommandList, -} from "@/components/ui/command" +} from "@/registry/new-york/ui/command" import { Popover, PopoverContent, PopoverTrigger, -} from "@/components/ui/popover" +} from "@/registry/new-york/ui/popover" export function DemoTeamMembers() { return ( diff --git a/apps/www/app/examples/dashboard/components/date-range-picker.tsx b/apps/www/app/examples/dashboard/components/date-range-picker.tsx index ea915bfc55f..760f0ef6ef1 100644 --- a/apps/www/app/examples/dashboard/components/date-range-picker.tsx +++ b/apps/www/app/examples/dashboard/components/date-range-picker.tsx @@ -6,13 +6,13 @@ import { Calendar as CalendarIcon } from "lucide-react" import { DateRange } from "react-day-picker" import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Calendar } from "@/components/ui/calendar" +import { Button } from "@/registry/new-york/ui/button" +import { Calendar } from "@/registry/new-york/ui/calendar" import { Popover, PopoverContent, PopoverTrigger, -} from "@/components/ui/popover" +} from "@/registry/new-york/ui/popover" export function CalendarDateRangePicker({ className, @@ -29,9 +29,8 @@ export function CalendarDateRangePicker({

) diff --git a/apps/www/app/examples/dashboard/components/team-switcher.tsx b/apps/www/app/examples/dashboard/components/team-switcher.tsx index 2f9b58e0cb2..96d4cff3e01 100644 --- a/apps/www/app/examples/dashboard/components/team-switcher.tsx +++ b/apps/www/app/examples/dashboard/components/team-switcher.tsx @@ -4,8 +4,12 @@ import * as React from "react" import { Check, ChevronsUpDown, PlusCircle } from "lucide-react" import { cn } from "@/lib/utils" -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" -import { Button } from "@/components/ui/button" +import { + Avatar, + AvatarFallback, + AvatarImage, +} from "@/registry/new-york/ui/avatar" +import { Button } from "@/registry/new-york/ui/button" import { Command, CommandEmpty, @@ -14,7 +18,7 @@ import { CommandItem, CommandList, CommandSeparator, -} from "@/components/ui/command" +} from "@/registry/new-york/ui/command" import { Dialog, DialogContent, @@ -23,21 +27,21 @@ import { DialogHeader, DialogTitle, DialogTrigger, -} from "@/components/ui/dialog" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" +} from "@/registry/new-york/ui/dialog" +import { Input } from "@/registry/new-york/ui/input" +import { Label } from "@/registry/new-york/ui/label" import { Popover, PopoverContent, PopoverTrigger, -} from "@/components/ui/popover" +} from "@/registry/new-york/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select" +} from "@/registry/new-york/ui/select" const groups = [ { @@ -83,7 +87,6 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { diff --git a/apps/www/app/examples/forms/account/account-form.tsx b/apps/www/app/examples/forms/account/account-form.tsx index b8c4ca6c2bf..dfaac54158d 100644 --- a/apps/www/app/examples/forms/account/account-form.tsx +++ b/apps/www/app/examples/forms/account/account-form.tsx @@ -7,22 +7,15 @@ import { useForm } from "react-hook-form" import * as z from "zod" import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Calendar } from "@/components/ui/calendar" +import { Button } from "@/registry/new-york/ui/button" +import { Calendar } from "@/registry/new-york/ui/calendar" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, -} from "@/components/ui/command" -import { Input } from "@/components/ui/input" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover" -import { toast } from "@/components/ui/use-toast" +} from "@/registry/new-york/ui/command" import { Form, FormControl, @@ -31,7 +24,14 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/react-hook-form/form" +} from "@/registry/new-york/ui/form" +import { Input } from "@/registry/new-york/ui/input" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/registry/new-york/ui/popover" +import { toast } from "@/registry/new-york/ui/use-toast" const languages = [ { label: "English", value: "en" }, diff --git a/apps/www/app/examples/forms/account/page.tsx b/apps/www/app/examples/forms/account/page.tsx index f48c4e1d3a1..1b21224ec5e 100644 --- a/apps/www/app/examples/forms/account/page.tsx +++ b/apps/www/app/examples/forms/account/page.tsx @@ -1,4 +1,4 @@ -import { Separator } from "@/components/ui/separator" +import { Separator } from "@/registry/new-york/ui/separator" import { AccountForm } from "@/app/examples/forms/account/account-form" export default function SettingsAccountPage() { diff --git a/apps/www/app/examples/forms/appearance/appearance-form.tsx b/apps/www/app/examples/forms/appearance/appearance-form.tsx index 99ca947ab70..1d12391a800 100644 --- a/apps/www/app/examples/forms/appearance/appearance-form.tsx +++ b/apps/www/app/examples/forms/appearance/appearance-form.tsx @@ -6,9 +6,7 @@ import { useForm } from "react-hook-form" import * as z from "zod" import { cn } from "@/lib/utils" -import { Button, buttonVariants } from "@/components/ui/button" -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" -import { toast } from "@/components/ui/use-toast" +import { Button, buttonVariants } from "@/registry/new-york/ui/button" import { Form, FormControl, @@ -17,7 +15,9 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/react-hook-form/form" +} from "@/registry/new-york/ui/form" +import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group" +import { toast } from "@/registry/new-york/ui/use-toast" const appearanceFormSchema = z.object({ theme: z.enum(["light", "dark"], { diff --git a/apps/www/app/examples/forms/appearance/page.tsx b/apps/www/app/examples/forms/appearance/page.tsx index 929253454b8..745d0715499 100644 --- a/apps/www/app/examples/forms/appearance/page.tsx +++ b/apps/www/app/examples/forms/appearance/page.tsx @@ -1,4 +1,4 @@ -import { Separator } from "@/components/ui/separator" +import { Separator } from "@/registry/new-york/ui/separator" import { AppearanceForm } from "@/app/examples/forms/appearance/appearance-form" export default function SettingsAppearancePage() { diff --git a/apps/www/app/examples/forms/components/sidebar-nav.tsx b/apps/www/app/examples/forms/components/sidebar-nav.tsx index addcfefdc5a..1fce3b3231c 100644 --- a/apps/www/app/examples/forms/components/sidebar-nav.tsx +++ b/apps/www/app/examples/forms/components/sidebar-nav.tsx @@ -4,7 +4,7 @@ import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { buttonVariants } from "@/registry/new-york/ui/button" interface SidebarNavProps extends React.HTMLAttributes { items: { diff --git a/apps/www/app/examples/forms/display/display-form.tsx b/apps/www/app/examples/forms/display/display-form.tsx index 09147907aad..d6a28335530 100644 --- a/apps/www/app/examples/forms/display/display-form.tsx +++ b/apps/www/app/examples/forms/display/display-form.tsx @@ -4,9 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { toast } from "@/components/ui/use-toast" +import { Button } from "@/registry/new-york/ui/button" +import { Checkbox } from "@/registry/new-york/ui/checkbox" import { Form, FormControl, @@ -15,7 +14,8 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/react-hook-form/form" +} from "@/registry/new-york/ui/form" +import { toast } from "@/registry/new-york/ui/use-toast" const items = [ { diff --git a/apps/www/app/examples/forms/display/page.tsx b/apps/www/app/examples/forms/display/page.tsx index 5d8942301d6..e36a6904135 100644 --- a/apps/www/app/examples/forms/display/page.tsx +++ b/apps/www/app/examples/forms/display/page.tsx @@ -1,4 +1,4 @@ -import { Separator } from "@/components/ui/separator" +import { Separator } from "@/registry/new-york/ui/separator" import { DisplayForm } from "@/app/examples/forms/display/display-form" export default function SettingsDisplayPage() { diff --git a/apps/www/app/examples/forms/layout.tsx b/apps/www/app/examples/forms/layout.tsx index 36208d26b3e..a5d60c7b0b8 100644 --- a/apps/www/app/examples/forms/layout.tsx +++ b/apps/www/app/examples/forms/layout.tsx @@ -1,7 +1,7 @@ import { Metadata } from "next" import Image from "next/image" -import { Separator } from "@/components/ui/separator" +import { Separator } from "@/registry/new-york/ui/separator" import { SidebarNav } from "@/app/examples/forms/components/sidebar-nav" export const metadata: Metadata = { diff --git a/apps/www/app/examples/forms/notifications/notifications-form.tsx b/apps/www/app/examples/forms/notifications/notifications-form.tsx index 344719cf6bc..b016fb6b809 100644 --- a/apps/www/app/examples/forms/notifications/notifications-form.tsx +++ b/apps/www/app/examples/forms/notifications/notifications-form.tsx @@ -5,11 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" -import { Switch } from "@/components/ui/switch" -import { toast } from "@/components/ui/use-toast" +import { Button } from "@/registry/new-york/ui/button" +import { Checkbox } from "@/registry/new-york/ui/checkbox" import { Form, FormControl, @@ -18,7 +15,10 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/react-hook-form/form" +} from "@/registry/new-york/ui/form" +import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group" +import { Switch } from "@/registry/new-york/ui/switch" +import { toast } from "@/registry/new-york/ui/use-toast" const notificationsFormSchema = z.object({ type: z.enum(["all", "mentions", "none"], { diff --git a/apps/www/app/examples/forms/notifications/page.tsx b/apps/www/app/examples/forms/notifications/page.tsx index 659dd4b0a89..7def678c724 100644 --- a/apps/www/app/examples/forms/notifications/page.tsx +++ b/apps/www/app/examples/forms/notifications/page.tsx @@ -1,4 +1,4 @@ -import { Separator } from "@/components/ui/separator" +import { Separator } from "@/registry/new-york/ui/separator" import { AccountForm } from "@/app/examples/forms/account/account-form" import { NotificationsForm } from "@/app/examples/forms/notifications/notifications-form" diff --git a/apps/www/app/examples/forms/page.tsx b/apps/www/app/examples/forms/page.tsx index 3f5f3366494..77b0ec4e0af 100644 --- a/apps/www/app/examples/forms/page.tsx +++ b/apps/www/app/examples/forms/page.tsx @@ -1,4 +1,4 @@ -import { Separator } from "@/components/ui/separator" +import { Separator } from "@/registry/new-york/ui/separator" import { ProfileForm } from "@/app/examples/forms/profile-form" export default function SettingsProfilePage() { diff --git a/apps/www/app/examples/forms/profile-form.tsx b/apps/www/app/examples/forms/profile-form.tsx index 40ed8ec563c..b6d54fcba19 100644 --- a/apps/www/app/examples/forms/profile-form.tsx +++ b/apps/www/app/examples/forms/profile-form.tsx @@ -6,17 +6,7 @@ import { useFieldArray, useForm } from "react-hook-form" import * as z from "zod" import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select" -import { Textarea } from "@/components/ui/textarea" -import { toast } from "@/components/ui/use-toast" +import { Button } from "@/registry/new-york/ui/button" import { Form, FormControl, @@ -25,7 +15,17 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/react-hook-form/form" +} from "@/registry/new-york/ui/form" +import { Input } from "@/registry/new-york/ui/input" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/registry/new-york/ui/select" +import { Textarea } from "@/registry/new-york/ui/textarea" +import { toast } from "@/registry/new-york/ui/use-toast" const profileFormSchema = z.object({ username: z @@ -176,9 +176,9 @@ export function ProfileForm() { ))} - -
-
-

+
+

Library

- - - - -
-

+

Playlists

- +
{playlists?.map((playlist, i) => (
- - + + diff --git a/apps/www/app/page.tsx b/apps/www/app/page.tsx index 0f8aca84e74..ced96c87586 100644 --- a/apps/www/app/page.tsx +++ b/apps/www/app/page.tsx @@ -4,8 +4,6 @@ import { ChevronRight } from "lucide-react" import { siteConfig } from "@/config/site" import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" -import { Separator } from "@/components/ui/separator" import { ExamplesNav } from "@/components/examples-nav" import { Icons } from "@/components/icons" import { @@ -13,20 +11,23 @@ import { PageHeaderDescription, PageHeaderHeading, } from "@/components/page-header" -import { StyleSwitcher } from "@/components/style-switcher" +import { buttonVariants } from "@/registry/new-york/ui/button" +import { Separator } from "@/registry/new-york/ui/separator" import DashboardPage from "@/app/examples/dashboard/page" export default function IndexPage() { return ( -
- - +
+ - 🎉 Building - forms with React Hook Form and Zod + 🎉 {" "} + Style, a new CLI and more. + + Introducing Style, a new CLI and more. + Build your component library. @@ -67,7 +68,7 @@ export default function IndexPage() { />
-
+
diff --git a/apps/www/app/sink/layout.tsx b/apps/www/app/sink/layout.tsx new file mode 100644 index 00000000000..2b34130ae18 --- /dev/null +++ b/apps/www/app/sink/layout.tsx @@ -0,0 +1,27 @@ +import Link from "next/link" + +import { ThemeWrapper } from "@/components/theme-wrapper" +import { styles } from "@/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/sink/new-york/page.tsx b/apps/www/app/sink/new-york/page.tsx new file mode 100644 index 00000000000..f7897d193d3 --- /dev/null +++ b/apps/www/app/sink/new-york/page.tsx @@ -0,0 +1,206 @@ +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/sink/page.tsx b/apps/www/app/sink/page.tsx index 5384443b157..f05ecb39ad4 100644 --- a/apps/www/app/sink/page.tsx +++ b/apps/www/app/sink/page.tsx @@ -2,55 +2,56 @@ import * as React from "react" import Link from "next/link" import { cn } from "@/lib/utils" -import { AccordionDemo } from "@/components/examples/accordion/demo" -import { AlertDialogDemo } from "@/components/examples/alert-dialog/demo" -import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo" -import { AvatarDemo } from "@/components/examples/avatar/demo" -import { BadgeDemo } from "@/components/examples/badge/demo" -import { BadgeDestructive } from "@/components/examples/badge/destructive" -import { BadgeOutline } from "@/components/examples/badge/outline" -import { BadgeSecondary } from "@/components/examples/badge/secondary" -import { ButtonDemo } from "@/components/examples/button/demo" -import { ButtonDestructive } from "@/components/examples/button/destructive" -import { ButtonGhost } from "@/components/examples/button/ghost" -import { ButtonLink } from "@/components/examples/button/link" -import { ButtonLoading } from "@/components/examples/button/loading" -import { ButtonOutline } from "@/components/examples/button/outline" -import { ButtonSecondary } from "@/components/examples/button/secondary" -import { ButtonWithIcon } from "@/components/examples/button/with-icon" -import { CardDemo } from "@/components/examples/card/demo" -import { CheckboxDemo } from "@/components/examples/checkbox/demo" -import { CollapsibleDemo } from "@/components/examples/collapsible/demo" -import { CommandDemo } from "@/components/examples/command/demo" -import { ContextMenuDemo } from "@/components/examples/context-menu/demo" -import { DatePickerDemo } from "@/components/examples/date-picker/demo" -import { DialogDemo } from "@/components/examples/dialog/demo" -import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo" -import { HoverCardDemo } from "@/components/examples/hover-card/demo" -import { MenubarDemo } from "@/components/examples/menubar/demo" -import { NavigationMenuDemo } from "@/components/examples/navigation-menu/demo" -import { PopoverDemo } from "@/components/examples/popover/demo" -import { ProgressDemo } from "@/components/examples/progress/demo" -import { RadioGroupDemo } from "@/components/examples/radio-group/demo" -import { ScrollAreaDemo } from "@/components/examples/scroll-area/demo" -import { SelectDemo } from "@/components/examples/select/demo" -import { SeparatorDemo } from "@/components/examples/separator/demo" -import { SheetDemo } from "@/components/examples/sheet/demo" -import { SkeletonDemo } from "@/components/examples/skeleton/demo" -import { SliderDemo } from "@/components/examples/slider/demo" -import { SwitchDemo } from "@/components/examples/switch/demo" -import { TabsDemo } from "@/components/examples/tabs/demo" -import { ToastDemo } from "@/components/examples/toast/demo" -import { ToggleDemo } from "@/components/examples/toggle/demo" -import { ToggleDisabled } from "@/components/examples/toggle/disabled" -import { ToggleOutline } from "@/components/examples/toggle/outline" -import { ToggleWithText } from "@/components/examples/toggle/with-text" -import { TooltipDemo } from "@/components/examples/tooltip/demo" +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 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 (
-
+
@@ -107,6 +108,10 @@ export default function KitchenSinkPage() {
+
+ + +
@@ -191,7 +196,7 @@ function ComponentWrapper({ return (
diff --git a/apps/www/components/callout.tsx b/apps/www/components/callout.tsx index e1c70a242d4..6c07ffa1583 100644 --- a/apps/www/components/callout.tsx +++ b/apps/www/components/callout.tsx @@ -1,5 +1,9 @@ import { cn } from "@/lib/utils" -import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" +import { + Alert, + AlertDescription, + AlertTitle, +} from "@/registry/new-york/ui/alert" interface CalloutProps { icon?: string diff --git a/apps/www/components/code-block-wrapper.tsx b/apps/www/components/code-block-wrapper.tsx index 5e7b685681c..bb5fd27f111 100644 --- a/apps/www/components/code-block-wrapper.tsx +++ b/apps/www/components/code-block-wrapper.tsx @@ -3,12 +3,12 @@ import * as React from "react" import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +import { Button } from "@/registry/new-york/ui/button" import { Collapsible, CollapsibleContent, CollapsibleTrigger, -} from "@/components/ui/collapsible" +} from "@/registry/new-york/ui/collapsible" interface CodeBlockProps extends React.HTMLAttributes { expandButtonTitle?: string diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx index 07605e056dd..41c6aecb48c 100644 --- a/apps/www/components/command-menu.tsx +++ b/apps/www/components/command-menu.tsx @@ -8,7 +8,7 @@ import { useTheme } from "next-themes" import { docsConfig } from "@/config/docs" import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +import { Button } from "@/registry/new-york/ui/button" import { CommandDialog, CommandEmpty, @@ -17,7 +17,7 @@ import { CommandItem, CommandList, CommandSeparator, -} from "@/components/ui/command" +} from "@/registry/new-york/ui/command" export function CommandMenu({ ...props }: DialogProps) { const router = useRouter() @@ -46,14 +46,14 @@ export function CommandMenu({ ...props }: DialogProps) { diff --git a/apps/www/components/component-card.tsx b/apps/www/components/component-card.tsx index eb9ed18dacf..d4ec2acef32 100644 --- a/apps/www/components/component-card.tsx +++ b/apps/www/components/component-card.tsx @@ -1,7 +1,7 @@ import React from "react" import { cn } from "@/lib/utils" -import { AspectRatio } from "@/components/ui/aspect-ratio" +import { AspectRatio } from "@/registry/new-york/ui/aspect-ratio" export function ComponentCard({ className, diff --git a/apps/www/components/component-example.tsx b/apps/www/components/component-example.tsx index 666fe02883f..433b3ba1a6b 100644 --- a/apps/www/components/component-example.tsx +++ b/apps/www/components/component-example.tsx @@ -3,8 +3,13 @@ import * as React from "react" import { cn } from "@/lib/utils" -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { CopyButton, CopyWithClassNames } from "@/components/copy-button" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/registry/new-york/ui/tabs" interface ComponentExampleProps extends React.HTMLAttributes { extractClassname?: boolean diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx new file mode 100644 index 00000000000..a1c5bd6c8b6 --- /dev/null +++ b/apps/www/components/component-preview.tsx @@ -0,0 +1,139 @@ +"use client" + +import * as React from "react" +import { Index } from "@/__registry__" +import { Loader2 } from "lucide-react" + +import { cn } from "@/lib/utils" +import { useConfig } from "@/hooks/use-config" +import { CopyButton, CopyWithClassNames } from "@/components/copy-button" +import { StyleSwitcher } from "@/components/style-switcher" +import { ThemeWrapper } from "@/components/theme-wrapper" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/registry/new-york/ui/tabs" +import { styles } from "@/registry/styles" + +interface ComponentPreviewProps extends React.HTMLAttributes { + name: string + extractClassname?: boolean + extractedClassNames?: string + align?: "center" | "start" | "end" +} + +export function ComponentPreview({ + name, + children, + className, + extractClassname, + extractedClassNames, + align = "center", + ...props +}: ComponentPreviewProps) { + const [config] = useConfig() + const index = styles.findIndex((style) => style.name === config.style) + + const Codes = React.Children.toArray(children) as React.ReactElement[] + const Code = Codes[index] + + const Preview = React.useMemo(() => { + const Component = Index[config.style][name]?.component + + if (!Component) { + return ( +

+ Component{" "} + + {name} + {" "} + not found in registry. +

+ ) + } + + return + }, [name, config.style]) + + const codeString = React.useMemo(() => { + if ( + typeof Code?.props["data-rehype-pretty-code-fragment"] !== "undefined" + ) { + const [, Button] = React.Children.toArray( + Code.props.children + ) as React.ReactElement[] + return Button?.props?.value || Button?.props?.__rawString__ || null + } + }, [Code]) + + return ( +
+ +
+ + + Preview + + + Code + + +
+ +
+ + {extractedClassNames ? ( + + ) : ( + codeString && + )} +
+ +
+ + + Loading... +
+ } + > + {Preview} + +
+ + + +
+
+ {Code} +
+
+ + +
+ ) +} diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx index 8e37984bf1d..97489753d60 100644 --- a/apps/www/components/copy-button.tsx +++ b/apps/www/components/copy-button.tsx @@ -6,13 +6,14 @@ import { NpmCommands } from "types/unist" import { Event, trackEvent } from "@/lib/events" import { cn } from "@/lib/utils" +import { Icons } from "@/components/icons" +import { Button } from "@/registry/new-york/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { Icons } from "@/components/icons" +} from "@/registry/new-york/ui/dropdown-menu" interface CopyButtonProps extends React.HTMLAttributes { value: string @@ -43,9 +44,11 @@ export function CopyButton({ }, [hasCopied]) return ( - + ) } @@ -101,19 +104,22 @@ export function CopyWithClassNames({ return ( - - {hasCopied ? ( - - ) : ( - - )} - Copy + + copyToClipboard(value)}> @@ -162,38 +168,38 @@ export function CopyNpmCommandButton({ return ( - - {hasCopied ? ( - - ) : ( - - )} - Copy + + copyCommand(commands.__npmCommand__, "npm")} > - - npm + npm copyCommand(commands.__yarnCommand__, "yarn")} > - - yarn + yarn copyCommand(commands.__pnpmCommand__, "pnpm")} > - - pnpm + pnpm diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx index b4a10dd490f..636eeec3bbd 100644 --- a/apps/www/components/examples-nav.tsx +++ b/apps/www/components/examples-nav.tsx @@ -5,7 +5,7 @@ import { usePathname } from "next/navigation" import { ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" -import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area" +import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area" const examples = [ { @@ -21,7 +21,6 @@ const examples = [ { name: "Tasks", href: "/examples/tasks", - label: "New", code: "https://github.com/shadcn/ui/tree/main/apps/www/app/examples/tasks", }, { @@ -32,7 +31,6 @@ const examples = [ { name: "Forms", href: "/examples/forms", - label: "New", code: "https://github.com/shadcn/ui/tree/main/apps/www/app/examples/forms", }, { @@ -67,12 +65,7 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) { : "font-medium text-muted-foreground" )} > - {example.name}{" "} - {example.label && ( - - {example.label} - - )} + {example.name} ))}
diff --git a/apps/www/components/examples/badge/demo.tsx b/apps/www/components/examples/badge/demo.tsx deleted file mode 100644 index 649c8355f77..00000000000 --- a/apps/www/components/examples/badge/demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from "@/components/ui/badge" - -export function BadgeDemo() { - return Badge -} diff --git a/apps/www/components/examples/badge/destructive.tsx b/apps/www/components/examples/badge/destructive.tsx deleted file mode 100644 index 1ce605b4f3d..00000000000 --- a/apps/www/components/examples/badge/destructive.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from "@/components/ui/badge" - -export function BadgeDestructive() { - return Destructive -} diff --git a/apps/www/components/examples/badge/outline.tsx b/apps/www/components/examples/badge/outline.tsx deleted file mode 100644 index c6ef6e6fb38..00000000000 --- a/apps/www/components/examples/badge/outline.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from "@/components/ui/badge" - -export function BadgeOutline() { - return Outline -} diff --git a/apps/www/components/examples/badge/secondary.tsx b/apps/www/components/examples/badge/secondary.tsx deleted file mode 100644 index 1ceaf80b504..00000000000 --- a/apps/www/components/examples/badge/secondary.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Badge } from "@/components/ui/badge" - -export function BadgeSecondary() { - return Secondary -} diff --git a/apps/www/components/examples/button/demo.tsx b/apps/www/components/examples/button/demo.tsx deleted file mode 100644 index 3c564b6aabe..00000000000 --- a/apps/www/components/examples/button/demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@/components/ui/button" - -export function ButtonDemo() { - return -} diff --git a/apps/www/components/examples/button/destructive.tsx b/apps/www/components/examples/button/destructive.tsx deleted file mode 100644 index bc07e6ad85f..00000000000 --- a/apps/www/components/examples/button/destructive.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@/components/ui/button" - -export function ButtonDestructive() { - return -} diff --git a/apps/www/components/examples/button/ghost.tsx b/apps/www/components/examples/button/ghost.tsx deleted file mode 100644 index eda0a3315c5..00000000000 --- a/apps/www/components/examples/button/ghost.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@/components/ui/button" - -export function ButtonGhost() { - return -} diff --git a/apps/www/components/examples/button/link.tsx b/apps/www/components/examples/button/link.tsx deleted file mode 100644 index e0f0138a892..00000000000 --- a/apps/www/components/examples/button/link.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@/components/ui/button" - -export function ButtonLink() { - return -} diff --git a/apps/www/components/examples/button/outline.tsx b/apps/www/components/examples/button/outline.tsx deleted file mode 100644 index a392ee77c2d..00000000000 --- a/apps/www/components/examples/button/outline.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@/components/ui/button" - -export function ButtonOutline() { - return -} diff --git a/apps/www/components/examples/button/secondary.tsx b/apps/www/components/examples/button/secondary.tsx deleted file mode 100644 index 97d122e815f..00000000000 --- a/apps/www/components/examples/button/secondary.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Button } from "@/components/ui/button" - -export function ButtonSecondary() { - return -} diff --git a/apps/www/components/examples/data-table/columns.tsx b/apps/www/components/examples/data-table/columns.tsx deleted file mode 100644 index 26585917e40..00000000000 --- a/apps/www/components/examples/data-table/columns.tsx +++ /dev/null @@ -1,110 +0,0 @@ -"use client" - -import { ColumnDef } from "@tanstack/react-table" -import { ArrowUpDown, MoreHorizontal } from "lucide-react" - -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" - -export type Payment = { - id: string - amount: number - status: "pending" | "processing" | "success" | "failed" - email: string -} - -export const columns: ColumnDef[] = [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - /> - ), - cell: ({ row }) => ( - row.toggleSelected(!!value)} - aria-label="Select row" - /> - ), - enableSorting: false, - enableHiding: false, - }, - { - accessorKey: "status", - header: "Status", - cell: ({ row }) => ( -
{row.getValue("status")}
- ), - }, - { - accessorKey: "email", - header: ({ column }) => { - return ( - - ) - }, - cell: ({ row }) =>
{row.getValue("email")}
, - }, - { - accessorKey: "amount", - header: () =>
Amount
, - cell: ({ row }) => { - const amount = parseFloat(row.getValue("amount")) - - // Format the amount as a dollar amount - const formatted = new Intl.NumberFormat("en-US", { - style: "currency", - currency: "USD", - }).format(amount) - - return
{formatted}
- }, - }, - { - id: "actions", - enableHiding: false, - cell: ({ row }) => { - const payment = row.original - - return ( - - - - - - Actions - navigator.clipboard.writeText(payment.id)} - > - Copy payment ID - - - View customer - View payment details - - - ) - }, - }, -] diff --git a/apps/www/components/examples/data-table/demo.tsx b/apps/www/components/examples/data-table/demo.tsx deleted file mode 100644 index e379cd4b7ed..00000000000 --- a/apps/www/components/examples/data-table/demo.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { faker } from "@faker-js/faker" - -import { Payment, columns } from "@/components/examples/data-table/columns" -import { DataTable } from "@/components/examples/data-table/data-table" - -const data: Payment[] = [ - { - id: "m5gr84i9", - amount: 316, - status: "success", - email: "ken99@yahoo.com", - }, - { - id: "3u1reuv4", - amount: 242, - status: "success", - email: "Abe45@gmail.com", - }, - { - id: "derv1ws0", - amount: 837, - status: "processing", - email: "Monserrat44@gmail.com", - }, - { - id: "5kma53ae", - amount: 874, - status: "success", - email: "Silas22@gmail.com", - }, - { - id: "bhqecj4p", - amount: 721, - status: "failed", - email: "carmella@hotmail.com", - }, -] - -export function DataTableDemo() { - return -} diff --git a/apps/www/components/examples/index.tsx b/apps/www/components/examples/index.tsx deleted file mode 100644 index 2d3c335becf..00000000000 --- a/apps/www/components/examples/index.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { AccordionDemo } from "@/components/examples/accordion/demo" -import { AlertDialogDemo } from "@/components/examples/alert-dialog/demo" -import { AlertDemo } from "@/components/examples/alert/demo" -import { AlertDestructive } from "@/components/examples/alert/destructive" -import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo" -import { AvatarDemo } from "@/components/examples/avatar/demo" -import { BadgeDemo } from "@/components/examples/badge/demo" -import { BadgeDestructive } from "@/components/examples/badge/destructive" -import { BadgeOutline } from "@/components/examples/badge/outline" -import { BadgeSecondary } from "@/components/examples/badge/secondary" -import { ButtonAsChild } from "@/components/examples/button/as-child" -import { ButtonDemo } from "@/components/examples/button/demo" -import { ButtonDestructive } from "@/components/examples/button/destructive" -import { ButtonGhost } from "@/components/examples/button/ghost" -import { ButtonLink } from "@/components/examples/button/link" -import { ButtonLoading } from "@/components/examples/button/loading" -import { ButtonOutline } from "@/components/examples/button/outline" -import { ButtonSecondary } from "@/components/examples/button/secondary" -import { ButtonWithIcon } from "@/components/examples/button/with-icon" -import { CalendarDemo } from "@/components/examples/calendar/demo" -import { CalendarReactHookForm } from "@/components/examples/calendar/react-hook-form" -import { CardDemo } from "@/components/examples/card/demo" -import { CardWithForm } from "@/components/examples/card/with-form" -import { CheckboxDemo } from "@/components/examples/checkbox/demo" -import { CheckboxDisabled } from "@/components/examples/checkbox/disabled" -import { CheckboxReactHookFormMultiple } from "@/components/examples/checkbox/react-hook-form-multiple" -import { CheckboxReactHookFormSingle } from "@/components/examples/checkbox/react-hook-form-single" -import { CheckboxWithText } from "@/components/examples/checkbox/with-text" -import { CollapsibleDemo } from "@/components/examples/collapsible/demo" -import { ComboboxDemo } from "@/components/examples/combobox/demo" -import { ComboboxDropdownMenu } from "@/components/examples/combobox/dropdown-menu" -import { ComboboxPopover } from "@/components/examples/combobox/popover" -import { ComboboxReactHookForm } from "@/components/examples/combobox/react-hook-form" -import { CommandDemo } from "@/components/examples/command/demo" -import { CommandDialogDemo } from "@/components/examples/command/dialog" -import { ContextMenuDemo } from "@/components/examples/context-menu/demo" -import { DataTableDemo } from "@/components/examples/data-table/demo" -import { DatePickerDemo } from "@/components/examples/date-picker/demo" -import { DatePickerReactHookForm } from "@/components/examples/date-picker/react-hook-form" -import { DatePickerWithPresets } from "@/components/examples/date-picker/with-presets" -import { DatePickerWithRange } from "@/components/examples/date-picker/with-range" -import { DialogDemo } from "@/components/examples/dialog/demo" -import { DropdownMenuCheckboxes } from "@/components/examples/dropdown-menu/checkboxes" -import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo" -import { DropdownMenuRadioGroupDemo } from "@/components/examples/dropdown-menu/radio-group" -import { HoverCardDemo } from "@/components/examples/hover-card/demo" -import { InputDemo } from "@/components/examples/input/demo" -import { InputDisabled } from "@/components/examples/input/disabled" -import { InputFile } from "@/components/examples/input/file" -import { InputReactHookForm } from "@/components/examples/input/react-hook-form" -import { InputWithButton } from "@/components/examples/input/with-button" -import { InputWithLabel } from "@/components/examples/input/with-label" -import { InputWithText } from "@/components/examples/input/with-text" -import { LabelDemo } from "@/components/examples/label/demo" -import { MenubarDemo } from "@/components/examples/menubar/demo" -import { NavigationMenuDemo } from "@/components/examples/navigation-menu/demo" -import { PopoverDemo } from "@/components/examples/popover/demo" -import { ProgressDemo } from "@/components/examples/progress/demo" -import { RadioGroupDemo } from "@/components/examples/radio-group/demo" -import { RadioGroupReactHookForm } from "@/components/examples/radio-group/react-hook-form" -import { ScrollAreaDemo } from "@/components/examples/scroll-area/demo" -import { SelectDemo } from "@/components/examples/select/demo" -import { SelectReactHookForm } from "@/components/examples/select/react-hook-form" -import { SeparatorDemo } from "@/components/examples/separator/demo" -import { SheetDemo } from "@/components/examples/sheet/demo" -import { SheetPosition } from "@/components/examples/sheet/position" -import { SheetSize } from "@/components/examples/sheet/size" -import { SkeletonDemo } from "@/components/examples/skeleton/demo" -import { SliderDemo } from "@/components/examples/slider/demo" -import { SwitchDemo } from "@/components/examples/switch/demo" -import { SwitchReactHookForm } from "@/components/examples/switch/react-hook-form" -import { TableDemo } from "@/components/examples/table/demo" -import { TabsDemo } from "@/components/examples/tabs/demo" -import { TextareaDemo } from "@/components/examples/textarea/demo" -import { TextareaDisabled } from "@/components/examples/textarea/disabled" -import { TextareaReactHookForm } from "@/components/examples/textarea/react-hook-form" -import { TextareaWithButton } from "@/components/examples/textarea/with-button" -import { TextareaWithLabel } from "@/components/examples/textarea/with-label" -import { TextareaWithText } from "@/components/examples/textarea/with-text" -import { ToastDemo } from "@/components/examples/toast/demo" -import { ToastDestructive } from "@/components/examples/toast/destructive" -import { ToastSimple } from "@/components/examples/toast/simple" -import { ToastWithAction } from "@/components/examples/toast/with-action" -import { ToastWithTitle } from "@/components/examples/toast/with-title" -import { ToggleDemo } from "@/components/examples/toggle/demo" -import { ToggleDisabled } from "@/components/examples/toggle/disabled" -import { ToggleLg } from "@/components/examples/toggle/lg" -import { ToggleOutline } from "@/components/examples/toggle/outline" -import { ToggleSm } from "@/components/examples/toggle/sm" -import { ToggleWithText } from "@/components/examples/toggle/with-text" -import { TooltipDemo } from "@/components/examples/tooltip/demo" -import { TypographyBlockquote } from "@/components/examples/typography/blockquote" -import { TypographyDemo } from "@/components/examples/typography/demo" -import { TypographyH1 } from "@/components/examples/typography/h1" -import { TypographyH2 } from "@/components/examples/typography/h2" -import { TypographyH3 } from "@/components/examples/typography/h3" -import { TypographyH4 } from "@/components/examples/typography/h4" -import { TypographyInlineCode } from "@/components/examples/typography/inline-code" -import { TypographyLarge } from "@/components/examples/typography/large" -import { TypographyLead } from "@/components/examples/typography/lead" -import { TypographyList } from "@/components/examples/typography/list" -import { TypographyMuted } from "@/components/examples/typography/muted" -import { TypographyP } from "@/components/examples/typography/p" -import { TypographySmall } from "@/components/examples/typography/small" -import { TypographyTable } from "@/components/examples/typography/table" - -export const examples = { - AccordionDemo, - AlertDemo, - AlertDialogDemo, - AlertDestructive, - AspectRatioDemo, - AvatarDemo, - BadgeDemo, - BadgeDestructive, - BadgeOutline, - BadgeSecondary, - ButtonDemo, - ButtonGhost, - ButtonDestructive, - ButtonLink, - ButtonLoading, - ButtonOutline, - ButtonSecondary, - ButtonWithIcon, - ButtonAsChild, - CalendarDemo, - CalendarReactHookForm, - DataTableDemo, - DatePickerDemo, - DatePickerWithRange, - DatePickerWithPresets, - DatePickerReactHookForm, - CardDemo, - CardWithForm, - CheckboxDemo, - CheckboxDisabled, - CheckboxWithText, - CheckboxReactHookFormMultiple, - CheckboxReactHookFormSingle, - CollapsibleDemo, - CommandDemo, - CommandDialogDemo, - ComboboxDemo, - ComboboxPopover, - ComboboxDropdownMenu, - ComboboxReactHookForm, - ContextMenuDemo, - DialogDemo, - DropdownMenuCheckboxes, - DropdownMenuDemo, - DropdownMenuRadioGroupDemo, - HoverCardDemo, - InputDemo, - InputDisabled, - InputFile, - InputWithButton, - InputWithLabel, - InputWithText, - InputReactHookForm, - LabelDemo, - MenubarDemo, - NavigationMenuDemo, - PopoverDemo, - ProgressDemo, - RadioGroupDemo, - RadioGroupReactHookForm, - ScrollAreaDemo, - SelectDemo, - SelectReactHookForm, - SeparatorDemo, - SheetDemo, - SheetSize, - SheetPosition, - SkeletonDemo, - SliderDemo, - SwitchDemo, - SwitchReactHookForm, - TableDemo, - TabsDemo, - TextareaDemo, - TextareaDisabled, - TextareaWithButton, - TextareaWithLabel, - TextareaWithText, - TextareaReactHookForm, - ToastDemo, - ToastDestructive, - ToastSimple, - ToastWithTitle, - ToastWithAction, - TooltipDemo, - TypographyBlockquote, - TypographyDemo, - TypographyH1, - TypographyH2, - TypographyH3, - TypographyH4, - TypographyInlineCode, - TypographyLarge, - TypographyLead, - TypographyList, - TypographyP, - TypographySmall, - TypographyMuted, - TypographyTable, - ToggleDemo, - ToggleSm, - ToggleLg, - ToggleOutline, - ToggleDisabled, - ToggleWithText, -} diff --git a/apps/www/components/examples/input/demo.tsx b/apps/www/components/examples/input/demo.tsx deleted file mode 100644 index 8cbad785465..00000000000 --- a/apps/www/components/examples/input/demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Input } from "@/components/ui/input" - -export function InputDemo() { - return -} diff --git a/apps/www/components/examples/input/disabled.tsx b/apps/www/components/examples/input/disabled.tsx deleted file mode 100644 index 8c5861aaebe..00000000000 --- a/apps/www/components/examples/input/disabled.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Input } from "@/components/ui/input" - -export function InputDisabled() { - return -} diff --git a/apps/www/components/examples/sheet/position.tsx b/apps/www/components/examples/sheet/position.tsx deleted file mode 100644 index 30cebb3160a..00000000000 --- a/apps/www/components/examples/sheet/position.tsx +++ /dev/null @@ -1,78 +0,0 @@ -"use client" - -import { useState } from "react" - -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" -import { - Sheet, - SheetClose, - SheetContent, - SheetDescription, - SheetFooter, - SheetHeader, - SheetTitle, - SheetTrigger, -} from "@/components/ui/sheet" - -const SHEET_POSITIONS = ["top", "right", "bottom", "left"] as const - -type SheetPosition = (typeof SHEET_POSITIONS)[number] - -export function SheetPosition() { - const [position, setPosition] = useState("right") - return ( -
- setPosition(value as SheetPosition)} - > -
- {SHEET_POSITIONS.map((position, index) => ( -
- - -
- ))} -
- - - - - - - - Edit profile - - Make changes to your profile here. Click save when you're done. - - -
-
- - -
-
- - -
-
- - - - - - - -
- ) -} diff --git a/apps/www/components/examples/sheet/size.tsx b/apps/www/components/examples/sheet/size.tsx deleted file mode 100644 index 02d38181485..00000000000 --- a/apps/www/components/examples/sheet/size.tsx +++ /dev/null @@ -1,78 +0,0 @@ -"use client" - -import { useState } from "react" - -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { Label } from "@/components/ui/label" -import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" -import { - Sheet, - SheetClose, - SheetContent, - SheetDescription, - SheetFooter, - SheetHeader, - SheetTitle, - SheetTrigger, -} from "@/components/ui/sheet" - -const SHEET_SIZES = ["sm", "default", "lg", "xl", "full", "content"] as const - -type SheetSize = (typeof SHEET_SIZES)[number] - -export function SheetSize() { - const [size, setSize] = useState("default") - return ( -
- setSize(value as SheetSize)} - > -
- {SHEET_SIZES.map((size, index) => ( -
- - -
- ))} -
- - - - - - - - Edit profile - - Make changes to your profile here. Click save when you're done. - - -
-
- - -
-
- - -
-
- - - - - - - -
- ) -} diff --git a/apps/www/components/examples/textarea/demo.tsx b/apps/www/components/examples/textarea/demo.tsx deleted file mode 100644 index 6ddc09ef464..00000000000 --- a/apps/www/components/examples/textarea/demo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Textarea } from "@/components/ui/textarea" - -export function TextareaDemo() { - return