feat(www): add login blocks

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["v4", "tests"]
+  "ignore": ["www"]
 }

.claude/settings.local.json

@@ -1,13 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm test:*)",
-      "Bash(npm run typecheck:*)",
-      "Bash(ls:*)",
-      "Bash(cat:*)",
-      "WebSearch",
-      "WebFetch(domain:github.com)"
-    ],
-    "deny": []
-  }
-}

.eslintignore

@@ -1,8 +0,0 @@
-node_modules/
-target/
-.next/
-build/
-dist/
-
-/templates/
-/fixtures/

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-github: [shadcn]

.github/changeset-version.js

@@ -1,12 +1,12 @@
 // ORIGINALLY FROM CLOUDFLARE WRANGLER:
 // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
 
-import { execSync } from "child_process"
+import { exec } from "child_process"
 
 // This script is used by the `release.yml` workflow to update the version of the packages being released.
-// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
-// So we also run `pnpm install`, which does this update.
+// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
+// So we also run `npm install`, which does this update.
 // This is a workaround until this is handled automatically by `changeset version`.
 // See https://github.com/changesets/changesets/issues/421.
-execSync("npx changeset version", { stdio: "inherit" })
-execSync("pnpm install --lockfile-only", { stdio: "inherit" })
+exec("npx changeset version")
+exec("npm install")

.github/dependabot.yml

@@ -1,46 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/astro-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/astro-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/next-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/next-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/react-router-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/react-router-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/start-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/start-monorepo"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/vite-app"
-    schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/templates/vite-monorepo"
-    schedule:
-      interval: "weekly"

.github/workflows/code-check.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 18
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -52,7 +52,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 18
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -77,9 +77,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build packages
-        run: pnpm --filter=shadcn build
-
       - run: pnpm format:check
 
   tsc:
@@ -93,7 +90,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 18
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -116,7 +113,4 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build packages
-        run: pnpm --filter=shadcn build
-
       - run: pnpm typecheck

.github/workflows/issue-stale.yml

@@ -1,5 +1,5 @@
 # Adapted from vercel/next.js
-name: "Stale issue handler"
+name: Issue Stale
 on:
   workflow_dispatch:
   schedule:
@@ -11,35 +11,17 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository_owner == 'shadcn-ui'
     steps:
-      - uses: actions/stale@v9
-        id: issue-stale
-        name: "Mark stale issues, close stale issues"
+      - uses: actions/stale@v4
+        id: stale-no-repro
+        name: "Close stale issues with no reproduction"
         with:
           repo-token: ${{ secrets.STALE_TOKEN }}
-          ascending: true
+          close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please reopen or leave a comment. Thank you.\n(This is an automated message.)"
           days-before-issue-close: 7
-          days-before-issue-stale: 365
-          days-before-pr-stale: -1
-          days-before-pr-close: -1
-          remove-issue-stale-when-updated: true
-          stale-issue-label: "stale?"
-          exempt-issue-labels: "roadmap,next"
-          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
-          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
-          operations-per-run: 300
-      - uses: actions/stale@v9
-        id: pr-state
-        name: "Mark stale PRs, close stale PRs"
-        with:
-          repo-token: ${{ secrets.STALE_TOKEN }}
-          ascending: true
-          days-before-issue-close: -1
-          days-before-issue-stale: -1
-          days-before-pr-close: 7
-          days-before-pr-stale: 365
-          remove-pr-stale-when-updated: true
-          exempt-pr-labels: "roadmap,next,bug"
+          days-before-issue-stale: 30
           stale-pr-label: "stale?"
-          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
-          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
-          operations-per-run: 300
+          days-before-pr-close: 7
+          days-before-pr-stale: 15
+          only-pr-labels: "postpone: more info or changes requested,please add a reproduction"
+          exempt-issue-labels: "roadmap,next,bug"
+          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close

.github/workflows/prerelease-comment.yml

@@ -49,7 +49,7 @@ jobs:
             A new prerelease is available for testing:
 
             ```sh
-            pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}
+            npx shadcn@${{ env.BETA_PACKAGE_VERSION }}
             ```
 
       - name: "Remove the autorelease label once published"

.github/workflows/prerelease.yml

@@ -7,11 +7,6 @@ on:
     types: [labeled]
     branches:
       - main
-
-permissions:
-  id-token: write
-  contents: read
-
 jobs:
   prerelease:
     if: |
@@ -23,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -32,22 +27,23 @@ jobs:
         with:
           version: 9.0.6
 
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
+          node-version: 18
           cache: "pnpm"
 
-      - name: Update npm for OIDC support
-        run: npm install -g npm@latest
-
       - name: Install NPM Dependencies
         run: pnpm install
 
       - name: Modify package.json version
         run: node .github/version-script-beta.js
 
+      - name: Authenticate to NPM
+        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
+        env:
+          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+
       - name: Publish Beta to NPM
         run: pnpm pub:beta
 
@@ -58,7 +54,7 @@ jobs:
           path: packages/shadcn
 
       - name: Upload packaged artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
           path: packages/shadcn/dist/index.js

.github/workflows/release.yml

@@ -7,11 +7,6 @@ on:
     branches:
       - main
 
-permissions:
-  id-token: write
-  contents: write
-  pull-requests: write
-
 jobs:
   release:
     if: ${{ github.repository_owner == 'shadcn-ui' }}
@@ -28,16 +23,13 @@ jobs:
         with:
           version: 9.0.6
 
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
+          version: 9.0.6
+          node-version: 18
           cache: "pnpm"
 
-      - name: Update npm for OIDC support
-        run: npm install -g npm@latest
-
       - name: Install NPM Dependencies
         run: pnpm install
 
@@ -49,7 +41,7 @@ jobs:
 
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@v1.4.1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
@@ -57,4 +49,5 @@ jobs:
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
           NODE_ENV: "production"

.github/workflows/test.yml

@@ -8,9 +8,6 @@ jobs:
   test:
     runs-on: ubuntu-latest
     name: pnpm test
-    env:
-      NEXT_PUBLIC_APP_URL: http://localhost:4000
-      NEXT_PUBLIC_V0_URL: https://v0.dev
     steps:
       - uses: actions/checkout@v3
         with:
@@ -19,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 22
+          node-version: 18
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm

.github/workflows/validate-registries.yml

@@ -1,91 +0,0 @@
-name: Validate Registries
-
-on:
-  pull_request:
-    paths:
-      - "apps/v4/public/r/registries.json"
-      - "apps/v4/registry/directory.json"
-  push:
-    branches:
-      - main
-    paths:
-      - "apps/v4/public/r/registries.json"
-      - "apps/v4/registry/directory.json"
-
-jobs:
-  check-registry-sync:
-    if: github.event_name == 'pull_request'
-    runs-on: ubuntu-latest
-    name: Check registry sync
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Check changed files
-        id: changed
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)
-
-          DIRECTORY_CHANGED=false
-          REGISTRIES_CHANGED=false
-
-          if echo "$CHANGED_FILES" | grep -q "^apps/v4/registry/directory.json$"; then
-            DIRECTORY_CHANGED=true
-          fi
-
-          if echo "$CHANGED_FILES" | grep -q "^apps/v4/public/r/registries.json$"; then
-            REGISTRIES_CHANGED=true
-          fi
-
-          echo "directory_changed=$DIRECTORY_CHANGED" >> $GITHUB_OUTPUT
-          echo "registries_changed=$REGISTRIES_CHANGED" >> $GITHUB_OUTPUT
-
-      - name: Flag missing registries.json update
-        if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'
-        env:
-          GH_TOKEN: ${{ github.token }}
-        run: |
-          gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label "registries: invalid"
-          gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "can you run \`pnpm registry:build\` and commit the json files please?"
-          exit 1
-
-  validate:
-    runs-on: ubuntu-latest
-    name: pnpm validate:registries
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 9.0.6
-          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
-
-      - name: Validate registries
-        run: pnpm --filter=v4 validate:registries

.gitignore

@@ -39,7 +39,3 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
-
-.notes
-.playwright-mcp
-shadcn-workspace

.npmrc

@@ -1,2 +1 @@
 auto-install-peers=true
-link-workspace-packages=true

.prettierignore

@@ -3,6 +3,5 @@ node_modules
 .next
 build
 .contentlayer
+apps/www/pages/api/registry.json
 **/fixtures
-deprecated
-apps/v4/registry/styles/**/*.css

.vscode/settings.json

@@ -3,18 +3,13 @@
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
   ],
-  "tailwindCSS.classFunctions": ["cva", "cn"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ],
   "vitest.debugExclude": [
     "<node_internals>/**",
     "**/node_modules/**",
     "**/fixtures/**"
-  ],
-  "files.exclude": {
-    "deprecated": true
-  },
-  "search.exclude": {
-    "apps/v4/registry/radix-*": true,
-    "apps/v4/public/r/*": true,
-    "packages/shadcn/test/fixtures/*": true
-  }
+  ]
 }

CONTRIBUTING.md

@@ -20,25 +20,28 @@ This repository is structured as follows:
 
 ```
 apps
-└── v4
+└── www
     ├── app
     ├── components
     ├── content
     └── registry
-        └── new-york-v4
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
             ├── example
             └── ui
 packages
-└── shadcn
+└── cli
 ```
 
-| Path                 | Description                              |
-| -------------------- | ---------------------------------------- |
-| `apps/v4/app`        | The Next.js application for the website. |
-| `apps/v4/components` | The React components for the website.    |
-| `apps/v4/content`    | The content for the website.             |
-| `apps/v4/registry`   | The registry for the components.         |
-| `packages/shadcn`    | The `shadcn` package.                    |
+| Path                  | Description                              |
+| --------------------- | ---------------------------------------- |
+| `apps/www/app`        | The Next.js application for the website. |
+| `apps/www/components` | The React components for the website.    |
+| `apps/www/content`    | The content for the website.             |
+| `apps/www/registry`   | The registry for the components.         |
+| `packages/cli`        | The `shadcn-ui` package.                 |
 
 ## Development
 
@@ -79,58 +82,37 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 1. To run the `ui.shadcn.com` website:
 
 ```bash
-pnpm --filter=v4 dev
+pnpm --filter=www dev
 ```
 
-2. To run the `shadcn` package:
+2. To run the `shadcn-ui` package:
 
 ```bash
-pnpm --filter=shadcn dev
+pnpm --filter=shadcn-ui dev
 ```
 
-## Running the CLI Locally
-
-To run the CLI locally, you can follow the workflow:
-
-1. Start by running the dev server:
-
-   ```bash
-   pnpm dev
-   ```
-
-2. In another terminal tab, test the CLI by running:
-
-   ```bash
-   pnpm shadcn
-   ```
-
-   To test the CLI in a specific app, use a command like:
-
-   ```bash
-   pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
-   ```
-
-This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
-
 ## Documentation
 
-The documentation for this project is located in the `v4` workspace. You can run the documentation locally by running the following command:
+The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
 
 ```bash
-pnpm --filter=v4 dev
+pnpm --filter=www dev
 ```
 
-Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/content/docs` directory.
+Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory.
 
 ## Components
 
-We use a registry system for developing components. You can find the source code for the components under `apps/v4/registry`. The components are organized by styles.
+We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.
 
 ```bash
 apps
-└── v4
+└── www
     └── registry
-        └── new-york-v4
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
             ├── example
             └── ui
 ```
@@ -139,7 +121,7 @@ When adding or modifying components, please ensure that:
 
 1. You make the changes for every style.
 2. You update the documentation.
-3. You run `pnpm registry:build` to update the registry.
+3. You run `pnpm build:registry` to update the registry.
 
 ## Commit Convention
 
@@ -178,9 +160,9 @@ If you have a request for a new component, please open a discussion on GitHub. W
 
 ## CLI
 
-The `shadcn` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
+The `shadcn-ui` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
 
-Any changes to the CLI should be made in the `packages/shadcn` directory. If you can, it would be great if you could add tests for your changes.
+Any changes to the CLI should be made in the `packages/cli` directory. If you can, it would be great if you could add tests for your changes.
 
 ## Testing
 

README.md

@@ -1,12 +1,12 @@
 # shadcn/ui
 
-A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. **Use this to build your own component library**.
+Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
 
-![hero](apps/v4/public/opengraph-image.png)
+![hero](apps/www/public/og.jpg)
 
 ## Documentation
 
-Visit https://ui.shadcn.com/docs to view the documentation.
+Visit http://ui.shadcn.com/docs to view the documentation.
 
 ## Contributing
 
@@ -14,4 +14,4 @@ Please read the [contributing guide](/CONTRIBUTING.md).
 
 ## License
 
-Licensed under the [MIT license](./LICENSE.md).
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).

SECURITY.md

@@ -1,9 +0,0 @@
-# Security Policy
-
-If you believe you have found a security vulnerability, we encourage you to let us know right away.
-
-We will investigate all legitimate reports and do our best to quickly fix the problem.
-
-Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. 
-
-To do this, please visit the security tab of the repository and click the [Report a vulnerability](https://github.com/shadcn-ui/ui/security/advisories/new) button.

apps/v4/.env.example

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_V0_URL=https://v0.dev
-NEXT_PUBLIC_APP_URL=http://localhost:4000

apps/v4/.gitignore

@@ -1,48 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-!.env.example
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-
-# generated content
-.contentlayer
-.content-collections
-.source

apps/v4/.prettierignore

@@ -1,8 +0,0 @@
-dist
-node_modules
-.next
-build
-.contentlayer
-registry/__index__.tsx
-content/docs/components/calendar.mdx
-registry/styles/**/*.css

apps/v4/README.md

@@ -1 +0,0 @@
-This is a wip registry for the `shadcn` canary version. It has React 19 and Tailwind v4 components.

apps/v4/app/(app)/(root)/components/appearance-settings.tsx

@@ -1,134 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
-import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
-import { Switch } from "@/examples/radix/ui/switch"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-export function AppearanceSettings() {
-  const [gpuCount, setGpuCount] = React.useState(8)
-
-  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
-    setGpuCount((prevCount) =>
-      Math.max(1, Math.min(99, prevCount + adjustment))
-    )
-  }, [])
-
-  const handleGpuInputChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value, 10)
-      if (!isNaN(value) && value >= 1 && value <= 99) {
-        setGpuCount(value)
-      }
-    },
-    []
-  )
-
-  return (
-    <FieldSet>
-      <FieldGroup>
-        <FieldSet>
-          <FieldLegend>Compute Environment</FieldLegend>
-          <FieldDescription>
-            Select the compute environment for your cluster.
-          </FieldDescription>
-          <RadioGroup defaultValue="kubernetes">
-            <FieldLabel htmlFor="kubernetes-r2h">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Kubernetes</FieldTitle>
-                  <FieldDescription>
-                    Run GPU workloads on a K8s configured cluster. This is the
-                    default.
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="kubernetes"
-                  id="kubernetes-r2h"
-                  aria-label="Kubernetes"
-                />
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="vm-z4k">
-              <Field orientation="horizontal">
-                <FieldContent>
-                  <FieldTitle>Virtual Machine</FieldTitle>
-                  <FieldDescription>
-                    Access a VM configured cluster to run workloads. (Coming
-                    soon)
-                  </FieldDescription>
-                </FieldContent>
-                <RadioGroupItem
-                  value="vm"
-                  id="vm-z4k"
-                  aria-label="Virtual Machine"
-                />
-              </Field>
-            </FieldLabel>
-          </RadioGroup>
-        </FieldSet>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
-            <FieldDescription>You can add more later.</FieldDescription>
-          </FieldContent>
-          <ButtonGroup>
-            <Input
-              id="number-of-gpus-f6l"
-              value={gpuCount}
-              onChange={handleGpuInputChange}
-              size={3}
-              className="h-7 w-14! font-mono"
-              maxLength={3}
-            />
-            <Button
-              variant="outline"
-              size="icon-sm"
-              type="button"
-              aria-label="Decrement"
-              onClick={() => handleGpuAdjustment(-1)}
-              disabled={gpuCount <= 1}
-            >
-              <IconMinus />
-            </Button>
-            <Button
-              variant="outline"
-              size="icon-sm"
-              type="button"
-              aria-label="Increment"
-              onClick={() => handleGpuAdjustment(1)}
-              disabled={gpuCount >= 99}
-            >
-              <IconPlus />
-            </Button>
-          </ButtonGroup>
-        </Field>
-        <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
-            <FieldDescription>
-              Allow the wallpaper to be tinted.
-            </FieldDescription>
-          </FieldContent>
-          <Switch id="tinting" defaultChecked />
-        </Field>
-      </FieldGroup>
-    </FieldSet>
-  )
-}

apps/v4/app/(app)/(root)/components/button-group-demo.tsx

@@ -1,119 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-export function ButtonGroupDemo() {
-  const [label, setLabel] = React.useState("personal")
-
-  return (
-    <ButtonGroup>
-      <ButtonGroup className="hidden sm:flex">
-        <Button variant="outline" size="icon-sm" aria-label="Go Back">
-          <ArrowLeftIcon />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          Archive
-        </Button>
-        <Button variant="outline" size="sm">
-          Report
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          Snooze
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="icon-sm" aria-label="More Options">
-              <MoreHorizontalIcon />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <MailCheckIcon />
-                Mark as Read
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <ArchiveIcon />
-                Archive
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <ClockIcon />
-                Snooze
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CalendarPlusIcon />
-                Add to Calendar
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <ListFilterIcon />
-                Add to List
-              </DropdownMenuItem>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <TagIcon />
-                  Label As...
-                </DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  <DropdownMenuRadioGroup
-                    value={label}
-                    onValueChange={setLabel}
-                  >
-                    <DropdownMenuRadioItem value="personal">
-                      Personal
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="work">
-                      Work
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="other">
-                      Other
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem variant="destructive">
-                <Trash2Icon />
-                Trash
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/(root)/components/button-group-input-group.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/radix/ui/input-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-export function ButtonGroupInputGroup() {
-  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
-  return (
-    <ButtonGroup className="[--radius:9999rem]">
-      <ButtonGroup>
-        <Button variant="outline" size="icon" aria-label="Add">
-          <PlusIcon />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup className="flex-1">
-        <InputGroup>
-          <InputGroupInput
-            placeholder={
-              voiceEnabled ? "Record and send audio..." : "Send a message..."
-            }
-            disabled={voiceEnabled}
-          />
-          <InputGroupAddon align="inline-end">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <InputGroupButton
-                  onClick={() => setVoiceEnabled(!voiceEnabled)}
-                  data-active={voiceEnabled}
-                  className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
-                  aria-pressed={voiceEnabled}
-                  size="icon-xs"
-                  aria-label="Voice Mode"
-                >
-                  <AudioLinesIcon />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>Voice Mode</TooltipContent>
-            </Tooltip>
-          </InputGroupAddon>
-        </InputGroup>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/(root)/components/button-group-nested.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
-
-export function ButtonGroupNested() {
-  return (
-    <ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          1
-        </Button>
-        <Button variant="outline" size="sm">
-          2
-        </Button>
-        <Button variant="outline" size="sm">
-          3
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="icon-sm" aria-label="Previous">
-          <ArrowLeftIcon />
-        </Button>
-        <Button variant="outline" size="icon-sm" aria-label="Next">
-          <ArrowRightIcon />
-        </Button>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/(root)/components/button-group-popover.tsx

@@ -1,44 +0,0 @@
-import { Button } from "@/examples/radix/ui/button"
-import { ButtonGroup } from "@/examples/radix/ui/button-group"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { Separator } from "@/examples/radix/ui/separator"
-import { Textarea } from "@/examples/radix/ui/textarea"
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-export function ButtonGroupPopover() {
-  return (
-    <ButtonGroup>
-      <Button variant="outline" size="sm">
-        <BotIcon /> Copilot
-      </Button>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline" size="icon-sm" aria-label="Open Popover">
-            <ChevronDownIcon />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent align="end" className="gap-0 rounded-xl p-0 text-sm">
-          <div className="px-4 py-3">
-            <div className="text-sm font-medium">Agent Tasks</div>
-          </div>
-          <Separator />
-          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
-            <Textarea
-              placeholder="Describe your task in natural language."
-              className="mb-4 resize-none"
-            />
-            <p className="font-medium">Start a new task with Copilot</p>
-            <p className="text-muted-foreground">
-              Describe your task in natural language. Copilot will work in the
-              background and open a pull request for your review.
-            </p>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx

@@ -1,57 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarImage,
-} from "@/examples/radix/ui/avatar"
-import { Button } from "@/examples/radix/ui/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/examples/radix/ui/empty"
-import { PlusIcon } from "lucide-react"
-
-export function EmptyAvatarGroup() {
-  return (
-    <Empty className="flex-none border py-10">
-      <EmptyHeader>
-        <EmptyMedia>
-          <AvatarGroup className="grayscale">
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/maxleiter.png"
-                alt="@maxleiter"
-              />
-              <AvatarFallback>LR</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/evilrabbit.png"
-                alt="@evilrabbit"
-              />
-              <AvatarFallback>ER</AvatarFallback>
-            </Avatar>
-          </AvatarGroup>
-        </EmptyMedia>
-        <EmptyTitle>No Team Members</EmptyTitle>
-        <EmptyDescription>
-          Invite your team to collaborate on this project.
-        </EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button size="sm">
-          <PlusIcon />
-          Invite Members
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}

apps/v4/app/(app)/(root)/components/empty-input-group.tsx

@@ -1,43 +0,0 @@
-import { SearchIcon } from "lucide-react"
-
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from "@/registry/new-york-v4/ui/empty"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/new-york-v4/ui/input-group"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
-
-export function EmptyInputGroup() {
-  return (
-    <Empty>
-      <EmptyHeader>
-        <EmptyTitle>404 - Not Found</EmptyTitle>
-        <EmptyDescription>
-          The page you&apos;re looking for doesn&apos;t exist. Try searching for
-          what you need below.
-        </EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <InputGroup className="w-3/4">
-          <InputGroupInput placeholder="Try searching for pages..." />
-          <InputGroupAddon>
-            <SearchIcon />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <Kbd>/</Kbd>
-          </InputGroupAddon>
-        </InputGroup>
-        <EmptyDescription>
-          Need help? <a href="#">Contact support</a>
-        </EmptyDescription>
-      </EmptyContent>
-    </Empty>
-  )
-}

apps/v4/app/(app)/(root)/components/field-checkbox.tsx

@@ -1,15 +0,0 @@
-import { Checkbox } from "@/examples/radix/ui/checkbox"
-import { Field, FieldLabel } from "@/examples/radix/ui/field"
-
-export function FieldCheckbox() {
-  return (
-    <FieldLabel htmlFor="checkbox-demo">
-      <Field orientation="horizontal">
-        <Checkbox id="checkbox-demo" defaultChecked />
-        <FieldLabel htmlFor="checkbox-demo" className="line-clamp-1">
-          I agree to the terms and conditions
-        </FieldLabel>
-      </Field>
-    </FieldLabel>
-  )
-}

apps/v4/app/(app)/(root)/components/field-choice-card.tsx

@@ -1,62 +0,0 @@
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-
-export function FieldChoiceCard() {
-  return (
-    <div className="w-full max-w-md">
-      <FieldGroup>
-        <FieldSet>
-          <FieldLabel htmlFor="compute-environment-p8w">
-            Compute Environment
-          </FieldLabel>
-          <FieldDescription>
-            Select the compute environment for your cluster.
-          </FieldDescription>
-          <RadioGroup defaultValue="kubernetes">
-            <FieldLabel htmlFor="kubernetes-r2h">
-              <Field orientation="horizontal">
-                <RadioGroupItem
-                  value="kubernetes"
-                  id="kubernetes-r2h"
-                  aria-label="Kubernetes"
-                />
-                <FieldContent>
-                  <FieldTitle>Kubernetes</FieldTitle>
-                  <FieldDescription>
-                    Run GPU workloads on a K8s configured cluster.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-            <FieldLabel htmlFor="vm-z4k">
-              <Field orientation="horizontal">
-                <RadioGroupItem
-                  value="vm"
-                  id="vm-z4k"
-                  aria-label="Virtual Machine"
-                />
-                <FieldContent>
-                  <FieldTitle>Virtual Machine</FieldTitle>
-                  <FieldDescription>
-                    Access a VM configured cluster to run workloads.
-                  </FieldDescription>
-                </FieldContent>
-              </Field>
-            </FieldLabel>
-          </RadioGroup>
-        </FieldSet>
-      </FieldGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/field-demo.tsx

@@ -1,158 +0,0 @@
-import { Button } from "@/examples/radix/ui/button"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-} from "@/examples/radix/ui/field"
-import { Input } from "@/examples/radix/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/examples/radix/ui/select"
-import { Textarea } from "@/examples/radix/ui/textarea"
-
-export function FieldDemo() {
-  return (
-    <div className="w-full max-w-md rounded-xl border p-6">
-      <form>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Payment Method</FieldLegend>
-            <FieldDescription>
-              All transactions are secure and encrypted
-            </FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="checkout-7j9-card-name-43j">
-                  Name on Card
-                </FieldLabel>
-                <Input
-                  id="checkout-7j9-card-name-43j"
-                  placeholder="John Doe"
-                  required
-                />
-              </Field>
-              <div className="grid grid-cols-3 gap-4">
-                <Field className="col-span-2">
-                  <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
-                    Card Number
-                  </FieldLabel>
-                  <Input
-                    id="checkout-7j9-card-number-uw1"
-                    placeholder="1234 5678 9012 3456"
-                    required
-                  />
-                  <FieldDescription>
-                    Enter your 16-digit number.
-                  </FieldDescription>
-                </Field>
-                <Field className="col-span-1">
-                  <FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
-                  <Input id="checkout-7j9-cvv" placeholder="123" required />
-                </Field>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
-                    Month
-                  </FieldLabel>
-                  <Select defaultValue="">
-                    <SelectTrigger id="checkout-7j9-exp-month-ts6">
-                      <SelectValue placeholder="MM" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="01">01</SelectItem>
-                        <SelectItem value="02">02</SelectItem>
-                        <SelectItem value="03">03</SelectItem>
-                        <SelectItem value="04">04</SelectItem>
-                        <SelectItem value="05">05</SelectItem>
-                        <SelectItem value="06">06</SelectItem>
-                        <SelectItem value="07">07</SelectItem>
-                        <SelectItem value="08">08</SelectItem>
-                        <SelectItem value="09">09</SelectItem>
-                        <SelectItem value="10">10</SelectItem>
-                        <SelectItem value="11">11</SelectItem>
-                        <SelectItem value="12">12</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
-                    Year
-                  </FieldLabel>
-                  <Select defaultValue="">
-                    <SelectTrigger id="checkout-7j9-exp-year-f59">
-                      <SelectValue placeholder="YYYY" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="2024">2024</SelectItem>
-                        <SelectItem value="2025">2025</SelectItem>
-                        <SelectItem value="2026">2026</SelectItem>
-                        <SelectItem value="2027">2027</SelectItem>
-                        <SelectItem value="2028">2028</SelectItem>
-                        <SelectItem value="2029">2029</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend>Billing Address</FieldLegend>
-            <FieldDescription>
-              The billing address associated with your payment method
-            </FieldDescription>
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <Checkbox
-                  id="checkout-7j9-same-as-shipping-wgm"
-                  defaultChecked
-                />
-                <FieldLabel
-                  htmlFor="checkout-7j9-same-as-shipping-wgm"
-                  className="font-normal"
-                >
-                  Same as shipping address
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="checkout-7j9-optional-comments">
-                  Comments
-                </FieldLabel>
-                <Textarea
-                  id="checkout-7j9-optional-comments"
-                  placeholder="Add any additional comments"
-                />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <Field orientation="horizontal">
-            <Button type="submit">Submit</Button>
-            <Button variant="outline" type="button">
-              Cancel
-            </Button>
-          </Field>
-        </FieldGroup>
-      </form>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/field-hear.tsx

@@ -1,72 +0,0 @@
-import { Card, CardContent } from "@/examples/radix/ui/card"
-import { Checkbox } from "@/examples/radix/ui/checkbox"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/radix/ui/field"
-
-const options = [
-  {
-    label: "Social Media",
-    value: "social-media",
-  },
-
-  {
-    label: "Search Engine",
-    value: "search-engine",
-  },
-  {
-    label: "Referral",
-    value: "referral",
-  },
-  {
-    label: "Other",
-    value: "other",
-  },
-]
-
-export function FieldHear() {
-  return (
-    <Card className="py-4 shadow-none">
-      <CardContent className="px-4">
-        <form>
-          <FieldGroup>
-            <FieldSet className="gap-4">
-              <FieldLegend>How did you hear about us?</FieldLegend>
-              <FieldDescription className="line-clamp-1">
-                Select the option that best describes how you heard about us.
-              </FieldDescription>
-              <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
-                {options.map((option) => (
-                  <FieldLabel
-                    htmlFor={option.value}
-                    key={option.value}
-                    className="w-fit!"
-                  >
-                    <Field
-                      orientation="horizontal"
-                      className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
-                    >
-                      <Checkbox
-                        value={option.value}
-                        id={option.value}
-                        defaultChecked={option.value === "social-media"}
-                        className="-ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-[state=checked]:ml-0 data-[state=checked]:translate-x-0"
-                      />
-                      <FieldTitle>{option.label}</FieldTitle>
-                    </Field>
-                  </FieldLabel>
-                ))}
-              </FieldGroup>
-            </FieldSet>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/components/field-slider.tsx

@@ -1,30 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Field, FieldDescription, FieldTitle } from "@/examples/radix/ui/field"
-import { Slider } from "@/examples/radix/ui/slider"
-
-export function FieldSlider() {
-  const [value, setValue] = useState([200, 800])
-  return (
-    <div className="w-full max-w-md">
-      <Field>
-        <FieldTitle>Price Range</FieldTitle>
-        <FieldDescription>
-          Set your budget range ($
-          <span className="font-medium tabular-nums">{value[0]}</span> -{" "}
-          <span className="font-medium tabular-nums">{value[1]}</span>).
-        </FieldDescription>
-        <Slider
-          value={value}
-          onValueChange={setValue}
-          max={1000}
-          min={0}
-          step={10}
-          className="mt-2 w-full"
-          aria-label="Price Range"
-        />
-      </Field>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/index.tsx

@@ -1,52 +0,0 @@
-import { FieldSeparator } from "@/examples/radix/ui/field"
-
-import { AppearanceSettings } from "./appearance-settings"
-import { ButtonGroupDemo } from "./button-group-demo"
-import { ButtonGroupInputGroup } from "./button-group-input-group"
-import { ButtonGroupNested } from "./button-group-nested"
-import { ButtonGroupPopover } from "./button-group-popover"
-import { EmptyAvatarGroup } from "./empty-avatar-group"
-import { FieldCheckbox } from "./field-checkbox"
-import { FieldDemo } from "./field-demo"
-import { FieldHear } from "./field-hear"
-import { FieldSlider } from "./field-slider"
-import { InputGroupButtonExample } from "./input-group-button"
-import { InputGroupDemo } from "./input-group-demo"
-import { ItemDemo } from "./item-demo"
-import { NotionPromptForm } from "./notion-prompt-form"
-import { SpinnerBadge } from "./spinner-badge"
-import { SpinnerEmpty } from "./spinner-empty"
-
-export function RootComponents() {
-  return (
-    <div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <FieldDemo />
-      </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <EmptyAvatarGroup />
-        <SpinnerBadge />
-        <ButtonGroupInputGroup />
-        <FieldSlider />
-        <InputGroupDemo />
-      </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <InputGroupButtonExample />
-        <ItemDemo />
-        <FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
-        <AppearanceSettings />
-      </div>
-      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
-        <NotionPromptForm />
-        <ButtonGroupDemo />
-        <FieldCheckbox />
-        <div className="flex justify-between gap-4">
-          <ButtonGroupNested />
-          <ButtonGroupPopover />
-        </div>
-        <FieldHear />
-        <SpinnerEmpty />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/input-group-button.tsx

@@ -1,67 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/radix/ui/input-group"
-import { Label } from "@/examples/radix/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
-export function InputGroupButtonExample() {
-  const [isFavorite, setIsFavorite] = React.useState(false)
-
-  return (
-    <div className="grid w-full max-w-sm gap-6">
-      <Label htmlFor="input-secure-19" className="sr-only">
-        Input Secure
-      </Label>
-      <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-19" className="pl-0.5!" />
-        <Popover>
-          <PopoverTrigger asChild>
-            <InputGroupAddon>
-              <InputGroupButton
-                variant="secondary"
-                size="icon-xs"
-                aria-label="Info"
-              >
-                <IconInfoCircle />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </PopoverTrigger>
-          <PopoverContent
-            align="start"
-            alignOffset={10}
-            className="flex flex-col gap-1 rounded-xl text-sm"
-          >
-            <p className="font-medium">Your connection is not secure.</p>
-            <p>You should not enter any sensitive information on this site.</p>
-          </PopoverContent>
-        </Popover>
-        <InputGroupAddon className="pl-1! text-muted-foreground">
-          https://
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            onClick={() => setIsFavorite(!isFavorite)}
-            size="icon-xs"
-            aria-label="Favorite"
-          >
-            <IconStar
-              data-favorite={isFavorite}
-              className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
-            />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/input-group-demo.tsx

@@ -1,97 +0,0 @@
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/examples/radix/ui/input-group"
-import { Separator } from "@/examples/radix/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
-
-export function InputGroupDemo() {
-  return (
-    <div className="grid w-full max-w-sm gap-6">
-      <InputGroup>
-        <InputGroupInput placeholder="Search..." />
-        <InputGroupAddon>
-          <Search />
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="example.com" className="pl-1!" />
-        <InputGroupAddon>
-          <InputGroupText>https://</InputGroupText>
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <InputGroupButton
-                className="rounded-full"
-                size="icon-xs"
-                aria-label="Info"
-              >
-                <IconInfoCircle />
-              </InputGroupButton>
-            </TooltipTrigger>
-            <TooltipContent>This is content in a tooltip.</TooltipContent>
-          </Tooltip>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-        <InputGroupAddon align="block-end">
-          <InputGroupButton
-            variant="outline"
-            className="rounded-full"
-            size="icon-xs"
-            aria-label="Add"
-          >
-            <IconPlus />
-          </InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <InputGroupButton variant="ghost">Auto</InputGroupButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side="top" align="start">
-              <DropdownMenuItem>Auto</DropdownMenuItem>
-              <DropdownMenuItem>Agent</DropdownMenuItem>
-              <DropdownMenuItem>Manual</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="h-4!" />
-          <InputGroupButton
-            variant="default"
-            className="rounded-full"
-            size="icon-xs"
-          >
-            <ArrowUpIcon />
-            <span className="sr-only">Send</span>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="@shadcn" />
-        <InputGroupAddon align="inline-end">
-          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
-            <IconCheck className="size-3 text-white" />
-          </div>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/input-group-textarea.tsx

@@ -1,46 +0,0 @@
-import {
-  IconBrandJavascript,
-  IconCopy,
-  IconCornerDownLeft,
-  IconRefresh,
-} from "@tabler/icons-react"
-
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/registry/new-york-v4/ui/input-group"
-
-export function InputGroupTextareaExample() {
-  return (
-    <div className="grid w-full max-w-md gap-4">
-      <InputGroup>
-        <InputGroupTextarea
-          id="textarea-code-32"
-          placeholder="console.log('Hello, world!');"
-          className="min-h-[180px]"
-        />
-        <InputGroupAddon align="block-end" className="border-t">
-          <InputGroupText>Line 1, Column 1</InputGroupText>
-          <InputGroupButton size="sm" className="ml-auto" variant="default">
-            Run <IconCornerDownLeft />
-          </InputGroupButton>
-        </InputGroupAddon>
-        <InputGroupAddon align="block-start" className="border-b">
-          <InputGroupText className="font-mono font-medium">
-            <IconBrandJavascript />
-            script.js
-          </InputGroupText>
-          <InputGroupButton className="ml-auto">
-            <IconRefresh />
-          </InputGroupButton>
-          <InputGroupButton variant="ghost">
-            <IconCopy />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/item-avatar.tsx

@@ -1,78 +0,0 @@
-import { Plus } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/registry/new-york-v4/ui/item"
-
-export function ItemAvatar() {
-  return (
-    <div className="flex w-full max-w-lg flex-col gap-6">
-      <Item variant="outline" className="hidden">
-        <ItemMedia>
-          <Avatar className="size-10">
-            <AvatarImage src="https://github.com/maxleiter.png" />
-            <AvatarFallback>LR</AvatarFallback>
-          </Avatar>
-        </ItemMedia>
-        <ItemContent>
-          <ItemTitle>Max Leiter</ItemTitle>
-          <ItemDescription>Last seen 5 months ago</ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button
-            size="icon-sm"
-            variant="outline"
-            className="rounded-full"
-            aria-label="Invite"
-          >
-            <Plus />
-          </Button>
-        </ItemActions>
-      </Item>
-      <Item variant="outline">
-        <ItemMedia>
-          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
-            <Avatar className="hidden sm:flex">
-              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <Avatar className="hidden sm:flex">
-              <AvatarImage
-                src="https://github.com/maxleiter.png"
-                alt="@maxleiter"
-              />
-              <AvatarFallback>LR</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/evilrabbit.png"
-                alt="@evilrabbit"
-              />
-              <AvatarFallback>ER</AvatarFallback>
-            </Avatar>
-          </div>
-        </ItemMedia>
-        <ItemContent>
-          <ItemTitle>No Team Members</ItemTitle>
-          <ItemDescription>Invite your team to collaborate.</ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button size="sm" variant="outline">
-            Invite
-          </Button>
-        </ItemActions>
-      </Item>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/item-demo.tsx

@@ -1,41 +0,0 @@
-import { Button } from "@/examples/radix/ui/button"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/examples/radix/ui/item"
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-export function ItemDemo() {
-  return (
-    <div className="flex w-full max-w-md flex-col gap-6">
-      <Item variant="outline">
-        <ItemContent>
-          <ItemTitle>Two-factor authentication</ItemTitle>
-          <ItemDescription className="text-pretty xl:hidden 2xl:block">
-            Verify via email or phone number.
-          </ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button size="sm">Enable</Button>
-        </ItemActions>
-      </Item>
-      <Item variant="outline" size="sm" asChild>
-        <a href="#">
-          <ItemMedia>
-            <BadgeCheckIcon className="size-5" />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>Your profile has been verified.</ItemTitle>
-          </ItemContent>
-          <ItemActions>
-            <ChevronRightIcon className="size-4" />
-          </ItemActions>
-        </a>
-      </Item>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx

@@ -1,448 +0,0 @@
-"use client"
-
-import { useMemo, useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
-import { Badge } from "@/examples/radix/ui/badge"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/examples/radix/ui/command"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
-import { Field, FieldLabel } from "@/examples/radix/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/examples/radix/ui/input-group"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/radix/ui/popover"
-import { Switch } from "@/examples/radix/ui/switch"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
-
-const SAMPLE_DATA = {
-  mentionable: [
-    {
-      type: "page",
-      title: "Meeting Notes",
-      image: "📝",
-    },
-    {
-      type: "page",
-      title: "Project Dashboard",
-      image: "📊",
-    },
-    {
-      type: "page",
-      title: "Ideas & Brainstorming",
-      image: "💡",
-    },
-    {
-      type: "page",
-      title: "Calendar & Events",
-      image: "📅",
-    },
-    {
-      type: "page",
-      title: "Documentation",
-      image: "📚",
-    },
-    {
-      type: "page",
-      title: "Goals & Objectives",
-      image: "🎯",
-    },
-    {
-      type: "page",
-      title: "Budget Planning",
-      image: "💰",
-    },
-    {
-      type: "page",
-      title: "Team Directory",
-      image: "👥",
-    },
-    {
-      type: "page",
-      title: "Technical Specs",
-      image: "🔧",
-    },
-    {
-      type: "page",
-      title: "Analytics Report",
-      image: "📈",
-    },
-    {
-      type: "user",
-      title: "shadcn",
-      image: "https://github.com/shadcn.png",
-      workspace: "Workspace",
-    },
-    {
-      type: "user",
-      title: "maxleiter",
-      image: "https://github.com/maxleiter.png",
-      workspace: "Workspace",
-    },
-    {
-      type: "user",
-      title: "evilrabbit",
-      image: "https://github.com/evilrabbit.png",
-      workspace: "Workspace",
-    },
-  ],
-  models: [
-    {
-      name: "Auto",
-    },
-    {
-      name: "Agent Mode",
-      badge: "Beta",
-    },
-    {
-      name: "Plan Mode",
-    },
-  ],
-}
-
-function MentionableIcon({
-  item,
-}: {
-  item: (typeof SAMPLE_DATA.mentionable)[0]
-}) {
-  return item.type === "page" ? (
-    <span className="flex size-4 items-center justify-center">
-      {item.image}
-    </span>
-  ) : (
-    <Avatar className="size-4">
-      <AvatarImage src={item.image} />
-      <AvatarFallback>{item.title[0]}</AvatarFallback>
-    </Avatar>
-  )
-}
-
-export function NotionPromptForm() {
-  const [mentions, setMentions] = useState<string[]>([])
-  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
-  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
-  const [selectedModel, setSelectedModel] = useState<
-    (typeof SAMPLE_DATA.models)[0]
-  >(SAMPLE_DATA.models[0])
-  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
-
-  const grouped = useMemo(() => {
-    return SAMPLE_DATA.mentionable.reduce(
-      (acc, item) => {
-        const isAvailable = !mentions.includes(item.title)
-
-        if (isAvailable) {
-          if (!acc[item.type]) {
-            acc[item.type] = []
-          }
-          acc[item.type].push(item)
-        }
-        return acc
-      },
-      {} as Record<string, typeof SAMPLE_DATA.mentionable>
-    )
-  }, [mentions])
-
-  const hasMentions = mentions.length > 0
-
-  return (
-    <form>
-      <Field>
-        <FieldLabel htmlFor="notion-prompt" className="sr-only">
-          Prompt
-        </FieldLabel>
-        <InputGroup className="rounded-xl">
-          <InputGroupTextarea
-            id="notion-prompt"
-            placeholder="Ask, search, or make anything..."
-          />
-          <InputGroupAddon align="block-start" className="pt-3">
-            <Popover
-              open={mentionPopoverOpen}
-              onOpenChange={setMentionPopoverOpen}
-            >
-              <Tooltip>
-                <TooltipTrigger
-                  asChild
-                  onFocusCapture={(e) => e.stopPropagation()}
-                >
-                  <PopoverTrigger asChild>
-                    <InputGroupButton
-                      variant="outline"
-                      size={!hasMentions ? "sm" : "icon-sm"}
-                      className="transition-transform"
-                    >
-                      <IconAt /> {!hasMentions && "Add context"}
-                    </InputGroupButton>
-                  </PopoverTrigger>
-                </TooltipTrigger>
-                <TooltipContent>Mention a person, page, or date</TooltipContent>
-              </Tooltip>
-              <PopoverContent className="p-0" align="start">
-                <Command>
-                  <CommandInput placeholder="Search pages..." />
-                  <CommandList>
-                    <CommandEmpty>No pages found</CommandEmpty>
-                    {Object.entries(grouped).map(([type, items]) => (
-                      <CommandGroup
-                        key={type}
-                        heading={type === "page" ? "Pages" : "Users"}
-                      >
-                        {items.map((item) => (
-                          <CommandItem
-                            key={item.title}
-                            value={item.title}
-                            onSelect={(currentValue) => {
-                              setMentions((prev) => [...prev, currentValue])
-                              setMentionPopoverOpen(false)
-                            }}
-                            className="rounded-lg"
-                          >
-                            <MentionableIcon item={item} />
-                            {item.title}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    ))}
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
-              {mentions.map((mention) => {
-                const item = SAMPLE_DATA.mentionable.find(
-                  (item) => item.title === mention
-                )
-
-                if (!item) {
-                  return null
-                }
-
-                return (
-                  <InputGroupButton
-                    key={mention}
-                    size="sm"
-                    variant="secondary"
-                    className="rounded-full pl-2!"
-                    onClick={() => {
-                      setMentions((prev) => prev.filter((m) => m !== mention))
-                    }}
-                  >
-                    <MentionableIcon item={item} />
-                    {item.title}
-                    <IconX />
-                  </InputGroupButton>
-                )
-              })}
-            </div>
-          </InputGroupAddon>
-          <InputGroupAddon align="block-end" className="gap-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <InputGroupButton
-                  size="icon-sm"
-                  className="rounded-full"
-                  aria-label="Attach file"
-                >
-                  <IconPaperclip />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>Attach file</TooltipContent>
-            </Tooltip>
-            <DropdownMenu
-              open={modelPopoverOpen}
-              onOpenChange={setModelPopoverOpen}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <InputGroupButton size="sm" className="rounded-full">
-                      {selectedModel.name}
-                    </InputGroupButton>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>Select AI model</TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                className="min-w-48"
-              >
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">
-                    Select Agent Mode
-                  </DropdownMenuLabel>
-                  {SAMPLE_DATA.models.map((model) => (
-                    <DropdownMenuCheckboxItem
-                      key={model.name}
-                      checked={model.name === selectedModel.name}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          setSelectedModel(model)
-                        }
-                      }}
-                      className="pl-2 *:[span:first-child]:right-2 *:[span:first-child]:left-auto"
-                    >
-                      {model.name}
-                      {model.badge && (
-                        <Badge
-                          variant="secondary"
-                          className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
-                        >
-                          {model.badge}
-                        </Badge>
-                      )}
-                    </DropdownMenuCheckboxItem>
-                  ))}
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <DropdownMenu open={scopeMenuOpen} onOpenChange={setScopeMenuOpen}>
-              <DropdownMenuTrigger asChild>
-                <InputGroupButton size="sm" className="rounded-full">
-                  <IconWorld /> All Sources
-                </InputGroupButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent side="top" align="end" className="w-72">
-                <DropdownMenuGroup>
-                  <DropdownMenuItem
-                    asChild
-                    onSelect={(e) => e.preventDefault()}
-                  >
-                    <label htmlFor="web-search">
-                      <IconWorld /> Web Search{" "}
-                      <Switch
-                        id="web-search"
-                        className="ml-auto"
-                        defaultChecked
-                      />
-                    </label>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem
-                    asChild
-                    onSelect={(e) => e.preventDefault()}
-                  >
-                    <label htmlFor="apps">
-                      <IconApps /> Apps and Integrations
-                      <Switch id="apps" className="ml-auto" defaultChecked />
-                    </label>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconCircleDashedPlus /> All Sources I can access
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <Avatar className="size-4">
-                        <AvatarImage src="https://github.com/shadcn.png" />
-                        <AvatarFallback>CN</AvatarFallback>
-                      </Avatar>
-                      shadcn
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent className="w-72 p-0 [--radius:1rem]">
-                      <Command>
-                        <CommandInput
-                          placeholder="Find or use knowledge in..."
-                          autoFocus
-                        />
-                        <CommandList>
-                          <CommandEmpty>No knowledge found</CommandEmpty>
-                          <CommandGroup>
-                            {SAMPLE_DATA.mentionable
-                              .filter((item) => item.type === "user")
-                              .map((user) => (
-                                <CommandItem
-                                  key={user.title}
-                                  value={user.title}
-                                  onSelect={() => {
-                                    // Handle user selection here
-                                    console.log("Selected user:", user.title)
-                                  }}
-                                >
-                                  <Avatar className="size-4">
-                                    <AvatarImage src={user.image} />
-                                    <AvatarFallback>
-                                      {user.title[0]}
-                                    </AvatarFallback>
-                                  </Avatar>
-                                  {user.title}{" "}
-                                  <span className="text-muted-foreground">
-                                    - {user.workspace}
-                                  </span>
-                                </CommandItem>
-                              ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                  <DropdownMenuItem>
-                    <IconBook /> Help Center
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlus /> Connect Apps
-                  </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">
-                    We&apos;ll only search in the sources selected here.
-                  </DropdownMenuLabel>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <InputGroupButton
-              aria-label="Send"
-              className="ml-auto rounded-full"
-              variant="default"
-              size="icon-sm"
-            >
-              <IconArrowUp />
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-      </Field>
-    </form>
-  )
-}

apps/v4/app/(app)/(root)/components/spinner-badge.tsx

@@ -1,21 +0,0 @@
-import { Badge } from "@/examples/radix/ui/badge"
-import { Spinner } from "@/examples/radix/ui/spinner"
-
-export function SpinnerBadge() {
-  return (
-    <div className="flex items-center gap-2">
-      <Badge>
-        <Spinner />
-        Syncing
-      </Badge>
-      <Badge variant="secondary">
-        <Spinner />
-        Updating
-      </Badge>
-      <Badge variant="outline">
-        <Spinner />
-        Loading
-      </Badge>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/components/spinner-empty.tsx

@@ -1,31 +0,0 @@
-import { Button } from "@/examples/radix/ui/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/examples/radix/ui/empty"
-import { Spinner } from "@/examples/radix/ui/spinner"
-
-export function SpinnerEmpty() {
-  return (
-    <Empty className="w-full border md:p-6">
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Spinner />
-        </EmptyMedia>
-        <EmptyTitle>Processing your request</EmptyTitle>
-        <EmptyDescription>
-          Please wait while we process your request. Do not refresh the page.
-        </EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button variant="outline" size="sm">
-          Cancel
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}

apps/v4/app/(app)/(root)/page.tsx

@@ -1,97 +0,0 @@
-import { type Metadata } from "next"
-import Image from "next/image"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ExamplesNav } from "@/components/examples-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { ThemeSelector } from "@/components/theme-selector"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-import { RootComponents } from "./components"
-
-const title = "The Foundation for your Design System"
-const description =
-  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function IndexPage() {
-  return (
-    <div className="flex flex-1 flex-col">
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm" className="h-[31px] rounded-lg">
-            <Link href="/create">New Project</Link>
-          </Button>
-          <Button asChild size="sm" variant="ghost" className="rounded-lg">
-            <Link href="/docs/components">View Components</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <PageNav className="hidden md:flex">
-        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
-        <ThemeSelector className="mr-4 hidden md:flex" />
-      </PageNav>
-      <div className="container-wrapper flex-1 section-soft pb-6">
-        <div className="container overflow-hidden">
-          <section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
-            <Image
-              src="/r/styles/new-york-v4/dashboard-01-light.png"
-              width={1400}
-              height={875}
-              alt="Dashboard"
-              className="block dark:hidden"
-              priority
-            />
-            <Image
-              src="/r/styles/new-york-v4/dashboard-01-dark.png"
-              width={1400}
-              height={875}
-              alt="Dashboard"
-              className="hidden dark:block"
-              priority
-            />
-          </section>
-          <section className="hidden theme-container md:block">
-            <RootComponents />
-          </section>
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/blocks/[...categories]/page.tsx

@@ -1,34 +0,0 @@
-import { getAllBlockIds } from "@/lib/blocks"
-import { registryCategories } from "@/lib/categories"
-import { BlockDisplay } from "@/components/block-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
-
-export const revalidate = false
-export const dynamic = "force-static"
-export const dynamicParams = false
-
-export async function generateStaticParams() {
-  return registryCategories.map((category) => ({
-    categories: [category.slug],
-  }))
-}
-
-export default async function BlocksPage({
-  params,
-}: {
-  params: Promise<{ categories?: string[] }>
-}) {
-  const [{ categories = [] }, activeStyle] = await Promise.all([
-    params,
-    getActiveStyle(),
-  ])
-  const blocks = await getAllBlockIds(["registry:block"], categories)
-
-  return (
-    <div className="flex flex-col gap-12 md:gap-24">
-      {blocks.map((name) => (
-        <BlockDisplay name={name} key={name} styleName={activeStyle.name} />
-      ))}
-    </div>
-  )
-}

apps/v4/app/(app)/blocks/layout.tsx

@@ -1,79 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { BlocksNav } from "@/components/blocks-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Building Blocks for the Web"
-const description =
-  "Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function BlocksLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#blocks">Browse Blocks</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/blocks">Add a block</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <PageNav id="blocks">
-        <BlocksNav />
-        <Button
-          asChild
-          variant="secondary"
-          size="sm"
-          className="mr-7 hidden shadow-none lg:flex"
-        >
-          <Link href="/blocks/sidebar">Browse all blocks</Link>
-        </Button>
-      </PageNav>
-      <div className="container-wrapper flex-1 section-soft md:py-12">
-        <div className="container">{children}</div>
-      </div>
-    </>
-  )
-}

apps/v4/app/(app)/blocks/page.tsx

@@ -1,35 +0,0 @@
-import Link from "next/link"
-
-import { BlockDisplay } from "@/components/block-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-const FEATURED_BLOCKS = [
-  "dashboard-01",
-  "sidebar-07",
-  "sidebar-03",
-  "login-03",
-  "login-04",
-]
-
-export default async function BlocksPage() {
-  const activeStyle = await getActiveStyle()
-
-  return (
-    <div className="flex flex-col gap-12 md:gap-24">
-      {FEATURED_BLOCKS.map((name) => (
-        <BlockDisplay name={name} key={name} styleName={activeStyle.name} />
-      ))}
-      <div className="container-wrapper">
-        <div className="container flex justify-center py-6">
-          <Button asChild variant="outline">
-            <Link href="/blocks/sidebar">Browse more blocks</Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/charts/[type]/page.tsx

@@ -1,96 +0,0 @@
-import * as React from "react"
-import { notFound } from "next/navigation"
-
-import { cn } from "@/lib/utils"
-import {
-  ChartDisplay,
-  getCachedRegistryItem,
-  getChartHighlightedCode,
-} from "@/components/chart-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
-import { charts } from "@/app/(app)/charts/charts"
-
-export const revalidate = false
-export const dynamic = "force-static"
-export const dynamicParams = false
-
-interface ChartPageProps {
-  params: Promise<{
-    type: string
-  }>
-}
-
-const chartTypes = [
-  "area",
-  "bar",
-  "line",
-  "pie",
-  "radar",
-  "radial",
-  "tooltip",
-] as const
-type ChartType = (typeof chartTypes)[number]
-
-export async function generateStaticParams() {
-  return chartTypes.map((type) => ({
-    type,
-  }))
-}
-
-export default async function ChartPage({ params }: ChartPageProps) {
-  const { type } = await params
-
-  if (!chartTypes.includes(type as ChartType)) {
-    return notFound()
-  }
-
-  const chartType = type as ChartType
-  const chartList = charts[chartType]
-  const activeStyle = await getActiveStyle()
-
-  // Prefetch all chart data in parallel for better performance.
-  // Charts are rendered via iframes, so we only need the metadata and highlighted code.
-  const chartDataPromises = chartList.map(async (chart) => {
-    const registryItem = await getCachedRegistryItem(chart.id, activeStyle.name)
-    if (!registryItem) return null
-
-    const highlightedCode = await getChartHighlightedCode(
-      registryItem.files?.[0]?.content ?? ""
-    )
-    if (!highlightedCode) return null
-
-    return {
-      ...registryItem,
-      highlightedCode,
-      fullWidth: chart.fullWidth,
-    }
-  })
-
-  const prefetchedCharts = await Promise.all(chartDataPromises)
-
-  return (
-    <div className="grid flex-1 gap-12 lg:gap-24">
-      <h2 className="sr-only">
-        {type.charAt(0).toUpperCase() + type.slice(1)} Charts
-      </h2>
-      <div className="grid flex-1 scroll-mt-20 items-stretch gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
-        {Array.from({ length: 12 }).map((_, index) => {
-          const chart = prefetchedCharts[index]
-          return chart ? (
-            <ChartDisplay
-              key={chart.name}
-              chart={chart}
-              style={activeStyle.name}
-              className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
-            />
-          ) : (
-            <div
-              key={`empty-${index}`}
-              className="hidden aspect-square w-full rounded-lg border border-dashed xl:block"
-            />
-          )
-        })}
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/charts/charts.tsx

@@ -1,275 +0,0 @@
-import type * as React from "react"
-
-import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
-import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"
-import { ChartAreaGradient } from "@/registry/new-york-v4/charts/chart-area-gradient"
-import { ChartAreaIcons } from "@/registry/new-york-v4/charts/chart-area-icons"
-import { ChartAreaInteractive } from "@/registry/new-york-v4/charts/chart-area-interactive"
-import { ChartAreaLegend } from "@/registry/new-york-v4/charts/chart-area-legend"
-import { ChartAreaLinear } from "@/registry/new-york-v4/charts/chart-area-linear"
-import { ChartAreaStacked } from "@/registry/new-york-v4/charts/chart-area-stacked"
-import { ChartAreaStackedExpand } from "@/registry/new-york-v4/charts/chart-area-stacked-expand"
-import { ChartAreaStep } from "@/registry/new-york-v4/charts/chart-area-step"
-import { ChartBarActive } from "@/registry/new-york-v4/charts/chart-bar-active"
-import { ChartBarDefault } from "@/registry/new-york-v4/charts/chart-bar-default"
-import { ChartBarHorizontal } from "@/registry/new-york-v4/charts/chart-bar-horizontal"
-import { ChartBarInteractive } from "@/registry/new-york-v4/charts/chart-bar-interactive"
-import { ChartBarLabel } from "@/registry/new-york-v4/charts/chart-bar-label"
-import { ChartBarLabelCustom } from "@/registry/new-york-v4/charts/chart-bar-label-custom"
-import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
-import { ChartBarMultiple } from "@/registry/new-york-v4/charts/chart-bar-multiple"
-import { ChartBarNegative } from "@/registry/new-york-v4/charts/chart-bar-negative"
-import { ChartBarStacked } from "@/registry/new-york-v4/charts/chart-bar-stacked"
-import { ChartLineDefault } from "@/registry/new-york-v4/charts/chart-line-default"
-import { ChartLineDots } from "@/registry/new-york-v4/charts/chart-line-dots"
-import { ChartLineDotsColors } from "@/registry/new-york-v4/charts/chart-line-dots-colors"
-import { ChartLineDotsCustom } from "@/registry/new-york-v4/charts/chart-line-dots-custom"
-import { ChartLineInteractive } from "@/registry/new-york-v4/charts/chart-line-interactive"
-import { ChartLineLabel } from "@/registry/new-york-v4/charts/chart-line-label"
-import { ChartLineLabelCustom } from "@/registry/new-york-v4/charts/chart-line-label-custom"
-import { ChartLineLinear } from "@/registry/new-york-v4/charts/chart-line-linear"
-import { ChartLineMultiple } from "@/registry/new-york-v4/charts/chart-line-multiple"
-import { ChartLineStep } from "@/registry/new-york-v4/charts/chart-line-step"
-import { ChartPieDonut } from "@/registry/new-york-v4/charts/chart-pie-donut"
-import { ChartPieDonutActive } from "@/registry/new-york-v4/charts/chart-pie-donut-active"
-import { ChartPieDonutText } from "@/registry/new-york-v4/charts/chart-pie-donut-text"
-import { ChartPieInteractive } from "@/registry/new-york-v4/charts/chart-pie-interactive"
-import { ChartPieLabel } from "@/registry/new-york-v4/charts/chart-pie-label"
-import { ChartPieLabelCustom } from "@/registry/new-york-v4/charts/chart-pie-label-custom"
-import { ChartPieLabelList } from "@/registry/new-york-v4/charts/chart-pie-label-list"
-import { ChartPieLegend } from "@/registry/new-york-v4/charts/chart-pie-legend"
-import { ChartPieSeparatorNone } from "@/registry/new-york-v4/charts/chart-pie-separator-none"
-import { ChartPieSimple } from "@/registry/new-york-v4/charts/chart-pie-simple"
-import { ChartPieStacked } from "@/registry/new-york-v4/charts/chart-pie-stacked"
-import { ChartRadarDefault } from "@/registry/new-york-v4/charts/chart-radar-default"
-import { ChartRadarDots } from "@/registry/new-york-v4/charts/chart-radar-dots"
-import { ChartRadarGridCircle } from "@/registry/new-york-v4/charts/chart-radar-grid-circle"
-import { ChartRadarGridCircleFill } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-fill"
-import { ChartRadarGridCircleNoLines } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines"
-import { ChartRadarGridCustom } from "@/registry/new-york-v4/charts/chart-radar-grid-custom"
-import { ChartRadarGridFill } from "@/registry/new-york-v4/charts/chart-radar-grid-fill"
-import { ChartRadarGridNone } from "@/registry/new-york-v4/charts/chart-radar-grid-none"
-import { ChartRadarIcons } from "@/registry/new-york-v4/charts/chart-radar-icons"
-import { ChartRadarLabelCustom } from "@/registry/new-york-v4/charts/chart-radar-label-custom"
-import { ChartRadarLegend } from "@/registry/new-york-v4/charts/chart-radar-legend"
-import { ChartRadarLinesOnly } from "@/registry/new-york-v4/charts/chart-radar-lines-only"
-import { ChartRadarMultiple } from "@/registry/new-york-v4/charts/chart-radar-multiple"
-import { ChartRadarRadius } from "@/registry/new-york-v4/charts/chart-radar-radius"
-import { ChartRadialGrid } from "@/registry/new-york-v4/charts/chart-radial-grid"
-import { ChartRadialLabel } from "@/registry/new-york-v4/charts/chart-radial-label"
-import { ChartRadialShape } from "@/registry/new-york-v4/charts/chart-radial-shape"
-import { ChartRadialSimple } from "@/registry/new-york-v4/charts/chart-radial-simple"
-import { ChartRadialStacked } from "@/registry/new-york-v4/charts/chart-radial-stacked"
-import { ChartRadialText } from "@/registry/new-york-v4/charts/chart-radial-text"
-import { ChartTooltipAdvanced } from "@/registry/new-york-v4/charts/chart-tooltip-advanced"
-import { ChartTooltipDefault } from "@/registry/new-york-v4/charts/chart-tooltip-default"
-import { ChartTooltipFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-formatter"
-import { ChartTooltipIcons } from "@/registry/new-york-v4/charts/chart-tooltip-icons"
-import { ChartTooltipIndicatorLine } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-line"
-import { ChartTooltipIndicatorNone } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-none"
-import { ChartTooltipLabelCustom } from "@/registry/new-york-v4/charts/chart-tooltip-label-custom"
-import { ChartTooltipLabelFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-label-formatter"
-import { ChartTooltipLabelNone } from "@/registry/new-york-v4/charts/chart-tooltip-label-none"
-
-type ChartComponent = React.ComponentType
-
-interface ChartItem {
-  id: string
-  component: ChartComponent
-  fullWidth?: boolean
-}
-
-interface ChartGroups {
-  area: ChartItem[]
-  bar: ChartItem[]
-  line: ChartItem[]
-  pie: ChartItem[]
-  radar: ChartItem[]
-  radial: ChartItem[]
-  tooltip: ChartItem[]
-}
-
-export const charts: ChartGroups = {
-  area: [
-    {
-      id: "chart-area-interactive",
-      component: ChartAreaInteractive,
-      fullWidth: true,
-    },
-    { id: "chart-area-default", component: ChartAreaDefault },
-    { id: "chart-area-linear", component: ChartAreaLinear },
-    { id: "chart-area-step", component: ChartAreaStep },
-    { id: "chart-area-legend", component: ChartAreaLegend },
-    { id: "chart-area-stacked", component: ChartAreaStacked },
-    { id: "chart-area-stacked-expand", component: ChartAreaStackedExpand },
-    { id: "chart-area-icons", component: ChartAreaIcons },
-    { id: "chart-area-gradient", component: ChartAreaGradient },
-    { id: "chart-area-axes", component: ChartAreaAxes },
-  ],
-  bar: [
-    {
-      id: "chart-bar-interactive",
-      component: ChartBarInteractive,
-      fullWidth: true,
-    },
-    { id: "chart-bar-default", component: ChartBarDefault },
-    { id: "chart-bar-horizontal", component: ChartBarHorizontal },
-    { id: "chart-bar-multiple", component: ChartBarMultiple },
-    { id: "chart-bar-stacked", component: ChartBarStacked },
-    { id: "chart-bar-label", component: ChartBarLabel },
-    { id: "chart-bar-label-custom", component: ChartBarLabelCustom },
-    { id: "chart-bar-mixed", component: ChartBarMixed },
-    { id: "chart-bar-active", component: ChartBarActive },
-    { id: "chart-bar-negative", component: ChartBarNegative },
-  ],
-  line: [
-    {
-      id: "chart-line-interactive",
-      component: ChartLineInteractive,
-      fullWidth: true,
-    },
-    { id: "chart-line-default", component: ChartLineDefault },
-    { id: "chart-line-linear", component: ChartLineLinear },
-    { id: "chart-line-step", component: ChartLineStep },
-    { id: "chart-line-multiple", component: ChartLineMultiple },
-    { id: "chart-line-dots", component: ChartLineDots },
-    { id: "chart-line-dots-custom", component: ChartLineDotsCustom },
-    { id: "chart-line-dots-colors", component: ChartLineDotsColors },
-    { id: "chart-line-label", component: ChartLineLabel },
-    { id: "chart-line-label-custom", component: ChartLineLabelCustom },
-  ],
-  pie: [
-    { id: "chart-pie-simple", component: ChartPieSimple },
-    { id: "chart-pie-separator-none", component: ChartPieSeparatorNone },
-    { id: "chart-pie-label", component: ChartPieLabel },
-    { id: "chart-pie-label-custom", component: ChartPieLabelCustom },
-    { id: "chart-pie-label-list", component: ChartPieLabelList },
-    { id: "chart-pie-legend", component: ChartPieLegend },
-    { id: "chart-pie-donut", component: ChartPieDonut },
-    { id: "chart-pie-donut-active", component: ChartPieDonutActive },
-    { id: "chart-pie-donut-text", component: ChartPieDonutText },
-    { id: "chart-pie-stacked", component: ChartPieStacked },
-    { id: "chart-pie-interactive", component: ChartPieInteractive },
-  ],
-  radar: [
-    { id: "chart-radar-default", component: ChartRadarDefault },
-    { id: "chart-radar-dots", component: ChartRadarDots },
-    { id: "chart-radar-lines-only", component: ChartRadarLinesOnly },
-    { id: "chart-radar-label-custom", component: ChartRadarLabelCustom },
-    { id: "chart-radar-grid-custom", component: ChartRadarGridCustom },
-    { id: "chart-radar-grid-none", component: ChartRadarGridNone },
-    { id: "chart-radar-grid-circle", component: ChartRadarGridCircle },
-    {
-      id: "chart-radar-grid-circle-no-lines",
-      component: ChartRadarGridCircleNoLines,
-    },
-    { id: "chart-radar-grid-circle-fill", component: ChartRadarGridCircleFill },
-    { id: "chart-radar-grid-fill", component: ChartRadarGridFill },
-    { id: "chart-radar-multiple", component: ChartRadarMultiple },
-    { id: "chart-radar-legend", component: ChartRadarLegend },
-    { id: "chart-radar-icons", component: ChartRadarIcons },
-    { id: "chart-radar-radius", component: ChartRadarRadius },
-  ],
-  radial: [
-    { id: "chart-radial-simple", component: ChartRadialSimple },
-    { id: "chart-radial-label", component: ChartRadialLabel },
-    { id: "chart-radial-grid", component: ChartRadialGrid },
-    { id: "chart-radial-text", component: ChartRadialText },
-    { id: "chart-radial-shape", component: ChartRadialShape },
-    { id: "chart-radial-stacked", component: ChartRadialStacked },
-  ],
-  tooltip: [
-    { id: "chart-tooltip-default", component: ChartTooltipDefault },
-    {
-      id: "chart-tooltip-indicator-line",
-      component: ChartTooltipIndicatorLine,
-    },
-    {
-      id: "chart-tooltip-indicator-none",
-      component: ChartTooltipIndicatorNone,
-    },
-    { id: "chart-tooltip-label-custom", component: ChartTooltipLabelCustom },
-    {
-      id: "chart-tooltip-label-formatter",
-      component: ChartTooltipLabelFormatter,
-    },
-    { id: "chart-tooltip-label-none", component: ChartTooltipLabelNone },
-    { id: "chart-tooltip-formatter", component: ChartTooltipFormatter },
-    { id: "chart-tooltip-icons", component: ChartTooltipIcons },
-    { id: "chart-tooltip-advanced", component: ChartTooltipAdvanced },
-  ],
-}
-
-// Export individual components for backward compatibility
-export {
-  ChartAreaDefault,
-  ChartAreaLinear,
-  ChartAreaStep,
-  ChartAreaLegend,
-  ChartAreaStacked,
-  ChartAreaStackedExpand,
-  ChartAreaIcons,
-  ChartAreaGradient,
-  ChartAreaAxes,
-  ChartAreaInteractive,
-  ChartBarDefault,
-  ChartBarHorizontal,
-  ChartBarMultiple,
-  ChartBarStacked,
-  ChartBarLabel,
-  ChartBarLabelCustom,
-  ChartBarMixed,
-  ChartBarActive,
-  ChartBarNegative,
-  ChartBarInteractive,
-  ChartLineDefault,
-  ChartLineLinear,
-  ChartLineStep,
-  ChartLineMultiple,
-  ChartLineDots,
-  ChartLineDotsCustom,
-  ChartLineDotsColors,
-  ChartLineLabel,
-  ChartLineLabelCustom,
-  ChartLineInteractive,
-  ChartPieSimple,
-  ChartPieSeparatorNone,
-  ChartPieLabel,
-  ChartPieLabelCustom,
-  ChartPieLabelList,
-  ChartPieLegend,
-  ChartPieDonut,
-  ChartPieDonutActive,
-  ChartPieDonutText,
-  ChartPieStacked,
-  ChartPieInteractive,
-  ChartRadarDefault,
-  ChartRadarDots,
-  ChartRadarLinesOnly,
-  ChartRadarLabelCustom,
-  ChartRadarGridCustom,
-  ChartRadarGridNone,
-  ChartRadarGridCircle,
-  ChartRadarGridCircleNoLines,
-  ChartRadarGridCircleFill,
-  ChartRadarGridFill,
-  ChartRadarMultiple,
-  ChartRadarLegend,
-  ChartRadarIcons,
-  ChartRadarRadius,
-  ChartRadialSimple,
-  ChartRadialLabel,
-  ChartRadialGrid,
-  ChartRadialText,
-  ChartRadialShape,
-  ChartRadialStacked,
-  ChartTooltipDefault,
-  ChartTooltipIndicatorLine,
-  ChartTooltipIndicatorNone,
-  ChartTooltipLabelCustom,
-  ChartTooltipLabelFormatter,
-  ChartTooltipLabelNone,
-  ChartTooltipFormatter,
-  ChartTooltipIcons,
-  ChartTooltipAdvanced,
-}

apps/v4/app/(app)/charts/layout.tsx

@@ -1,74 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ChartsNav } from "@/components/charts-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { ThemeSelector } from "@/components/theme-selector"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Beautiful Charts & Graphs"
-const description =
-  "A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ChartsLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#charts">Browse Charts</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/components/chart">Documentation</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <PageNav id="charts">
-        <ChartsNav />
-      </PageNav>
-      <div className="container-wrapper flex-1">
-        <div className="container pb-6">
-          <section className="theme-container">{children}</section>
-        </div>
-      </div>
-    </>
-  )
-}

apps/v4/app/(app)/colors/layout.tsx

@@ -1,78 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ColorsNav } from "@/components/colors-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Tailwind Colors in Every Format"
-const description =
-  "The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ColorsLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#colors">Browse Colors</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/theming">Documentation</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <div className="hidden">
-        <div className="container-wrapper">
-          <div className="container flex items-center justify-between gap-8 py-4">
-            <ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
-          </div>
-        </div>
-      </div>
-      <div className="container-wrapper">
-        <div className="container py-6">
-          <section id="colors" className="scroll-mt-20">
-            {children}
-          </section>
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/colors/page.tsx

@@ -1,17 +0,0 @@
-import { getColors } from "@/lib/colors"
-import { ColorPalette } from "@/components/color-palette"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export default function ColorsPage() {
-  const colors = getColors()
-
-  return (
-    <div className="grid gap-8 lg:gap-16 xl:gap-20">
-      {colors.map((colorPalette) => (
-        <ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
-      ))}
-    </div>
-  )
-}

apps/v4/app/(app)/docs/[[...slug]]/page.tsx

@@ -1,197 +0,0 @@
-import Link from "next/link"
-import { notFound } from "next/navigation"
-import { mdxComponents } from "@/mdx-components"
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
-import { findNeighbour } from "fumadocs-core/page-tree"
-
-import { source } from "@/lib/source"
-import { absoluteUrl } from "@/lib/utils"
-import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
-import { DocsCopyPage } from "@/components/docs-copy-page"
-import { DocsTableOfContents } from "@/components/docs-toc"
-import { OpenInV0Cta } from "@/components/open-in-v0-cta"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export const revalidate = false
-export const dynamic = "force-static"
-export const dynamicParams = false
-
-export function generateStaticParams() {
-  return source.generateParams()
-}
-
-export async function generateMetadata(props: {
-  params: Promise<{ slug: string[] }>
-}) {
-  const params = await props.params
-  const page = source.getPage(params.slug)
-
-  if (!page) {
-    notFound()
-  }
-
-  const doc = page.data
-
-  if (!doc.title || !doc.description) {
-    notFound()
-  }
-
-  return {
-    title: doc.title,
-    description: doc.description,
-    openGraph: {
-      title: doc.title,
-      description: doc.description,
-      type: "article",
-      url: absoluteUrl(page.url),
-      images: [
-        {
-          url: `/og?title=${encodeURIComponent(
-            doc.title
-          )}&description=${encodeURIComponent(doc.description)}`,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary_large_image",
-      title: doc.title,
-      description: doc.description,
-      images: [
-        {
-          url: `/og?title=${encodeURIComponent(
-            doc.title
-          )}&description=${encodeURIComponent(doc.description)}`,
-        },
-      ],
-      creator: "@shadcn",
-    },
-  }
-}
-
-export default async function Page(props: {
-  params: Promise<{ slug: string[] }>
-}) {
-  const params = await props.params
-  const page = source.getPage(params.slug)
-  if (!page) {
-    notFound()
-  }
-
-  const doc = page.data
-  const MDX = doc.body
-  const isChangelog = params.slug?.[0] === "changelog"
-  const neighbours = isChangelog
-    ? { previous: null, next: null }
-    : findNeighbour(source.pageTree, page.url)
-  const raw = await page.data.getText("raw")
-
-  return (
-    <div
-      data-slot="docs"
-      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
-    >
-      <div className="flex min-w-0 flex-1 flex-col">
-        <div className="h-(--top-spacing) shrink-0" />
-        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
-          <div className="flex flex-col gap-2">
-            <div className="flex flex-col gap-2">
-              <div className="flex items-center justify-between md:items-start">
-                <h1 className="scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
-                  {doc.title}
-                </h1>
-                <div className="docs-nav flex items-center gap-2">
-                  <div className="hidden sm:block">
-                    <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
-                  </div>
-                  <div className="ml-auto flex gap-2">
-                    {neighbours.previous && (
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        className="extend-touch-target size-8 shadow-none md:size-7"
-                        asChild
-                      >
-                        <Link href={neighbours.previous.url}>
-                          <IconArrowLeft />
-                          <span className="sr-only">Previous</span>
-                        </Link>
-                      </Button>
-                    )}
-                    {neighbours.next && (
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        className="extend-touch-target size-8 shadow-none md:size-7"
-                        asChild
-                      >
-                        <Link href={neighbours.next.url}>
-                          <span className="sr-only">Next</span>
-                          <IconArrowRight />
-                        </Link>
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </div>
-              {doc.description && (
-                <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
-                  {doc.description}
-                </p>
-              )}
-            </div>
-          </div>
-          <div className="w-full flex-1 pb-16 *:data-[slot=alert]:first:mt-0 sm:pb-0">
-            {params.slug &&
-              params.slug[0] === "components" &&
-              params.slug[1] &&
-              params.slug[2] && (
-                <DocsBaseSwitcher
-                  base={params.slug[1]}
-                  component={params.slug[2]}
-                  className="mb-4"
-                />
-              )}
-            <MDX components={mdxComponents} />
-          </div>
-          <div className="hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0">
-            {neighbours.previous && (
-              <Button
-                variant="secondary"
-                size="sm"
-                asChild
-                className="shadow-none"
-              >
-                <Link href={neighbours.previous.url}>
-                  <IconArrowLeft /> {neighbours.previous.name}
-                </Link>
-              </Button>
-            )}
-            {neighbours.next && (
-              <Button
-                variant="secondary"
-                size="sm"
-                className="ml-auto shadow-none"
-                asChild
-              >
-                <Link href={neighbours.next.url}>
-                  {neighbours.next.name} <IconArrowRight />
-                </Link>
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-(--sidebar-width) flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
-        <div className="h-(--top-spacing) shrink-0"></div>
-        {doc.toc?.length ? (
-          <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
-            <DocsTableOfContents toc={doc.toc} />
-          </div>
-        ) : null}
-        <div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
-          <OpenInV0Cta />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/docs/changelog/page.tsx

@@ -1,144 +0,0 @@
-import Link from "next/link"
-import { Button } from "@/examples/radix/ui/button"
-import { mdxComponents } from "@/mdx-components"
-import { IconRss } from "@tabler/icons-react"
-
-import { getChangelogPages, type ChangelogPageData } from "@/lib/changelog"
-import { absoluteUrl } from "@/lib/utils"
-import { OpenInV0Cta } from "@/components/open-in-v0-cta"
-
-export const revalidate = false
-export const dynamic = "force-static"
-
-export function generateMetadata() {
-  return {
-    title: "Changelog",
-    description: "Latest updates and announcements.",
-    openGraph: {
-      title: "Changelog",
-      description: "Latest updates and announcements.",
-      type: "article",
-      url: absoluteUrl("/docs/changelog"),
-      images: [
-        {
-          url: `/og?title=${encodeURIComponent(
-            "Changelog"
-          )}&description=${encodeURIComponent(
-            "Latest updates and announcements."
-          )}`,
-        },
-      ],
-    },
-  }
-}
-
-export default function ChangelogPage() {
-  const pages = getChangelogPages()
-  const latestPages = pages.slice(0, 5)
-  const olderPages = pages.slice(5)
-
-  return (
-    <div
-      data-slot="docs"
-      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
-    >
-      <div className="flex min-w-0 flex-1 flex-col">
-        <div className="h-(--top-spacing) shrink-0" />
-        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center justify-between">
-              <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
-                Changelog
-              </h1>
-              <Button variant="secondary" size="sm" asChild>
-                <a href="/rss.xml" target="_blank" rel="noopener noreferrer">
-                  <IconRss />
-                  RSS
-                </a>
-              </Button>
-            </div>
-            <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
-              Latest updates and announcements.
-            </p>
-          </div>
-          <div className="w-full flex-1 pb-16 sm:pb-0">
-            {latestPages.map((page) => {
-              const data = page.data as ChangelogPageData
-              const MDX = page.data.body
-
-              return (
-                <article key={page.url} className="mb-12 border-b pb-12">
-                  <h2 className="font-heading text-xl font-semibold tracking-tight">
-                    {data.title}
-                  </h2>
-                  <div className="prose-changelog mt-6 *:first:mt-0">
-                    <MDX components={mdxComponents} />
-                  </div>
-                </article>
-              )
-            })}
-            {olderPages.length > 0 && (
-              <div id="more-updates" className="mb-24 scroll-mt-24">
-                <h2 className="font-heading mb-6 text-xl font-semibold tracking-tight">
-                  More Updates
-                </h2>
-                <div className="grid auto-rows-fr gap-3 sm:grid-cols-2">
-                  {olderPages.map((page) => {
-                    const data = page.data as ChangelogPageData
-                    const [date, ...titleParts] = data.title.split(" - ")
-                    const title = titleParts.join(" - ")
-                    return (
-                      <Link
-                        key={page.url}
-                        href={page.url}
-                        className="flex w-full flex-col rounded-xl bg-surface px-4 py-3 text-surface-foreground transition-colors hover:bg-surface/80"
-                      >
-                        <span className="text-xs text-muted-foreground">
-                          {date}
-                        </span>
-                        <span className="text-sm font-medium">{title}</span>
-                      </Link>
-                    )
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
-        <div className="h-(--top-spacing) shrink-0"></div>
-        <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
-          <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
-            <p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
-              On This Page
-            </p>
-            {latestPages.map((page) => {
-              const data = page.data as ChangelogPageData
-              return (
-                <Link
-                  key={page.url}
-                  href={page.url}
-                  className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
-                >
-                  {data.title}
-                </Link>
-              )
-            })}
-            {olderPages.length > 0 && (
-              <a
-                href="#more-updates"
-                className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
-              >
-                More Updates
-              </a>
-            )}
-          </div>
-        </div>
-        <div className="hidden flex-1 flex-col gap-6 px-6 xl:flex">
-          <OpenInV0Cta />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/docs/layout.tsx

@@ -1,25 +0,0 @@
-import { source } from "@/lib/source"
-import { DocsSidebar } from "@/components/docs-sidebar"
-import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
-
-export default function DocsLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div className="container-wrapper flex flex-1 flex-col px-2">
-      <SidebarProvider
-        className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3"
-        style={
-          {
-            "--sidebar-width": "calc(var(--spacing) * 72)",
-          } as React.CSSProperties
-        }
-      >
-        <DocsSidebar tree={source.pageTree} />
-        <div className="h-full w-full">{children}</div>
-      </SidebarProvider>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldSeparator,
-} from "@/registry/new-york-v4/ui/field"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Spinner } from "@/registry/new-york-v4/ui/spinner"
-
-export function UserAuthForm({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  const [isLoading, setIsLoading] = React.useState<boolean>(false)
-
-  async function onSubmit(event: React.SyntheticEvent) {
-    event.preventDefault()
-    setIsLoading(true)
-
-    setTimeout(() => {
-      setIsLoading(false)
-    }, 3000)
-  }
-
-  return (
-    <div className={cn("grid gap-6", className)} {...props}>
-      <form onSubmit={onSubmit}>
-        <FieldGroup>
-          <Field>
-            <FieldLabel className="sr-only" htmlFor="email">
-              Email
-            </FieldLabel>
-            <Input
-              id="email"
-              placeholder="name@example.com"
-              type="email"
-              autoCapitalize="none"
-              autoComplete="email"
-              autoCorrect="off"
-              disabled={isLoading}
-            />
-          </Field>
-          <Field>
-            <Button disabled={isLoading}>
-              {isLoading && <Spinner />}
-              Sign In with Email
-            </Button>
-          </Field>
-        </FieldGroup>
-      </form>
-      <FieldSeparator>Or continue with</FieldSeparator>
-      <Button variant="outline" type="button" disabled={isLoading}>
-        {isLoading ? <Spinner /> : <Icons.gitHub className="mr-2 h-4 w-4" />}{" "}
-        GitHub
-      </Button>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/authentication/page.tsx

@@ -1,92 +0,0 @@
-import { type Metadata } from "next"
-import Image from "next/image"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york-v4/ui/button"
-import { FieldDescription } from "@/registry/new-york-v4/ui/field"
-import { UserAuthForm } from "@/app/(app)/examples/authentication/components/user-auth-form"
-
-export const metadata: Metadata = {
-  title: "Authentication",
-  description: "Authentication forms built using the components.",
-}
-
-export default function AuthenticationPage() {
-  return (
-    <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/authentication-light.png"
-          width={1280}
-          height={843}
-          alt="Authentication"
-          className="block dark:hidden"
-          priority
-        />
-        <Image
-          src="/examples/authentication-dark.png"
-          width={1280}
-          height={843}
-          alt="Authentication"
-          className="hidden dark:block"
-          priority
-        />
-      </div>
-      <div className="relative container hidden flex-1 shrink-0 items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
-        <Link
-          href="/examples/authentication"
-          className={cn(
-            buttonVariants({ variant: "ghost" }),
-            "absolute top-4 right-4 md:top-8 md:right-8"
-          )}
-        >
-          Login
-        </Link>
-        <div className="relative hidden h-full flex-col p-10 text-primary lg:flex dark:border-r">
-          <div className="absolute inset-0 bg-primary/5" />
-          <div className="relative z-20 flex items-center text-lg font-medium">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="mr-2 h-6 w-6"
-            >
-              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-            </svg>
-            Acme Inc
-          </div>
-          <div className="relative z-20 mt-auto">
-            <blockquote className="leading-normal text-balance">
-              &ldquo;This library has saved me countless hours of work and
-              helped me deliver stunning designs to my clients faster than ever
-              before.&rdquo; - Sofia Davis
-            </blockquote>
-          </div>
-        </div>
-        <div className="flex items-center justify-center lg:h-[1000px] lg:p-8">
-          <div className="mx-auto flex w-full flex-col justify-center gap-6 sm:w-[350px]">
-            <div className="flex flex-col gap-2 text-center">
-              <h1 className="text-2xl font-semibold tracking-tight">
-                Create an account
-              </h1>
-              <p className="text-sm text-muted-foreground">
-                Enter your email below to create your account
-              </p>
-            </div>
-            <UserAuthForm />
-            <FieldDescription className="px-6 text-center">
-              By clicking continue, you agree to our{" "}
-              <Link href="/terms">Terms of Service</Link> and{" "}
-              <Link href="/privacy">Privacy Policy</Link>.
-            </FieldDescription>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx

@@ -1,182 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import {
-  IconCamera,
-  IconChartBar,
-  IconDashboard,
-  IconDatabase,
-  IconFileAi,
-  IconFileDescription,
-  IconFileWord,
-  IconFolder,
-  IconHelp,
-  IconInnerShadowTop,
-  IconListDetails,
-  IconReport,
-  IconSearch,
-  IconSettings,
-  IconUsers,
-} from "@tabler/icons-react"
-
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { NavDocuments } from "@/app/(app)/examples/dashboard/components/nav-documents"
-import { NavMain } from "@/app/(app)/examples/dashboard/components/nav-main"
-import { NavSecondary } from "@/app/(app)/examples/dashboard/components/nav-secondary"
-import { NavUser } from "@/app/(app)/examples/dashboard/components/nav-user"
-
-const data = {
-  user: {
-    name: "shadcn",
-    email: "m@example.com",
-    avatar: "/avatars/shadcn.jpg",
-  },
-  navMain: [
-    {
-      title: "Dashboard",
-      url: "#",
-      icon: IconDashboard,
-    },
-    {
-      title: "Lifecycle",
-      url: "#",
-      icon: IconListDetails,
-    },
-    {
-      title: "Analytics",
-      url: "#",
-      icon: IconChartBar,
-    },
-    {
-      title: "Projects",
-      url: "#",
-      icon: IconFolder,
-    },
-    {
-      title: "Team",
-      url: "#",
-      icon: IconUsers,
-    },
-  ],
-  navClouds: [
-    {
-      title: "Capture",
-      icon: IconCamera,
-      isActive: true,
-      url: "#",
-      items: [
-        {
-          title: "Active Proposals",
-          url: "#",
-        },
-        {
-          title: "Archived",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Proposal",
-      icon: IconFileDescription,
-      url: "#",
-      items: [
-        {
-          title: "Active Proposals",
-          url: "#",
-        },
-        {
-          title: "Archived",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Prompts",
-      icon: IconFileAi,
-      url: "#",
-      items: [
-        {
-          title: "Active Proposals",
-          url: "#",
-        },
-        {
-          title: "Archived",
-          url: "#",
-        },
-      ],
-    },
-  ],
-  navSecondary: [
-    {
-      title: "Settings",
-      url: "#",
-      icon: IconSettings,
-    },
-    {
-      title: "Get Help",
-      url: "#",
-      icon: IconHelp,
-    },
-    {
-      title: "Search",
-      url: "#",
-      icon: IconSearch,
-    },
-  ],
-  documents: [
-    {
-      name: "Data Library",
-      url: "#",
-      icon: IconDatabase,
-    },
-    {
-      name: "Reports",
-      url: "#",
-      icon: IconReport,
-    },
-    {
-      name: "Word Assistant",
-      url: "#",
-      icon: IconFileWord,
-    },
-  ],
-}
-
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  return (
-    <Sidebar collapsible="none" className="h-auto border-r" {...props}>
-      <SidebarHeader className="border-b">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className="data-[slot=sidebar-menu-button]:p-1.5!"
-            >
-              <Link href="#">
-                <IconInnerShadowTop className="size-5!" />
-                <span className="text-base font-semibold">Acme Inc.</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
-      <SidebarContent>
-        <NavMain items={data.navMain} />
-        <NavDocuments items={data.documents} />
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
-      </SidebarContent>
-      <SidebarFooter>
-        <NavUser user={data.user} />
-      </SidebarFooter>
-    </Sidebar>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx

@@ -1,286 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-
-export const description = "An interactive area chart"
-
-const chartData = [
-  { date: "2024-04-01", desktop: 222, mobile: 150 },
-  { date: "2024-04-02", desktop: 97, mobile: 180 },
-  { date: "2024-04-03", desktop: 167, mobile: 120 },
-  { date: "2024-04-04", desktop: 242, mobile: 260 },
-  { date: "2024-04-05", desktop: 373, mobile: 290 },
-  { date: "2024-04-06", desktop: 301, mobile: 340 },
-  { date: "2024-04-07", desktop: 245, mobile: 180 },
-  { date: "2024-04-08", desktop: 409, mobile: 320 },
-  { date: "2024-04-09", desktop: 59, mobile: 110 },
-  { date: "2024-04-10", desktop: 261, mobile: 190 },
-  { date: "2024-04-11", desktop: 327, mobile: 350 },
-  { date: "2024-04-12", desktop: 292, mobile: 210 },
-  { date: "2024-04-13", desktop: 342, mobile: 380 },
-  { date: "2024-04-14", desktop: 137, mobile: 220 },
-  { date: "2024-04-15", desktop: 120, mobile: 170 },
-  { date: "2024-04-16", desktop: 138, mobile: 190 },
-  { date: "2024-04-17", desktop: 446, mobile: 360 },
-  { date: "2024-04-18", desktop: 364, mobile: 410 },
-  { date: "2024-04-19", desktop: 243, mobile: 180 },
-  { date: "2024-04-20", desktop: 89, mobile: 150 },
-  { date: "2024-04-21", desktop: 137, mobile: 200 },
-  { date: "2024-04-22", desktop: 224, mobile: 170 },
-  { date: "2024-04-23", desktop: 138, mobile: 230 },
-  { date: "2024-04-24", desktop: 387, mobile: 290 },
-  { date: "2024-04-25", desktop: 215, mobile: 250 },
-  { date: "2024-04-26", desktop: 75, mobile: 130 },
-  { date: "2024-04-27", desktop: 383, mobile: 420 },
-  { date: "2024-04-28", desktop: 122, mobile: 180 },
-  { date: "2024-04-29", desktop: 315, mobile: 240 },
-  { date: "2024-04-30", desktop: 454, mobile: 380 },
-  { date: "2024-05-01", desktop: 165, mobile: 220 },
-  { date: "2024-05-02", desktop: 293, mobile: 310 },
-  { date: "2024-05-03", desktop: 247, mobile: 190 },
-  { date: "2024-05-04", desktop: 385, mobile: 420 },
-  { date: "2024-05-05", desktop: 481, mobile: 390 },
-  { date: "2024-05-06", desktop: 498, mobile: 520 },
-  { date: "2024-05-07", desktop: 388, mobile: 300 },
-  { date: "2024-05-08", desktop: 149, mobile: 210 },
-  { date: "2024-05-09", desktop: 227, mobile: 180 },
-  { date: "2024-05-10", desktop: 293, mobile: 330 },
-  { date: "2024-05-11", desktop: 335, mobile: 270 },
-  { date: "2024-05-12", desktop: 197, mobile: 240 },
-  { date: "2024-05-13", desktop: 197, mobile: 160 },
-  { date: "2024-05-14", desktop: 448, mobile: 490 },
-  { date: "2024-05-15", desktop: 473, mobile: 380 },
-  { date: "2024-05-16", desktop: 338, mobile: 400 },
-  { date: "2024-05-17", desktop: 499, mobile: 420 },
-  { date: "2024-05-18", desktop: 315, mobile: 350 },
-  { date: "2024-05-19", desktop: 235, mobile: 180 },
-  { date: "2024-05-20", desktop: 177, mobile: 230 },
-  { date: "2024-05-21", desktop: 82, mobile: 140 },
-  { date: "2024-05-22", desktop: 81, mobile: 120 },
-  { date: "2024-05-23", desktop: 252, mobile: 290 },
-  { date: "2024-05-24", desktop: 294, mobile: 220 },
-  { date: "2024-05-25", desktop: 201, mobile: 250 },
-  { date: "2024-05-26", desktop: 213, mobile: 170 },
-  { date: "2024-05-27", desktop: 420, mobile: 460 },
-  { date: "2024-05-28", desktop: 233, mobile: 190 },
-  { date: "2024-05-29", desktop: 78, mobile: 130 },
-  { date: "2024-05-30", desktop: 340, mobile: 280 },
-  { date: "2024-05-31", desktop: 178, mobile: 230 },
-  { date: "2024-06-01", desktop: 178, mobile: 200 },
-  { date: "2024-06-02", desktop: 470, mobile: 410 },
-  { date: "2024-06-03", desktop: 103, mobile: 160 },
-  { date: "2024-06-04", desktop: 439, mobile: 380 },
-  { date: "2024-06-05", desktop: 88, mobile: 140 },
-  { date: "2024-06-06", desktop: 294, mobile: 250 },
-  { date: "2024-06-07", desktop: 323, mobile: 370 },
-  { date: "2024-06-08", desktop: 385, mobile: 320 },
-  { date: "2024-06-09", desktop: 438, mobile: 480 },
-  { date: "2024-06-10", desktop: 155, mobile: 200 },
-  { date: "2024-06-11", desktop: 92, mobile: 150 },
-  { date: "2024-06-12", desktop: 492, mobile: 420 },
-  { date: "2024-06-13", desktop: 81, mobile: 130 },
-  { date: "2024-06-14", desktop: 426, mobile: 380 },
-  { date: "2024-06-15", desktop: 307, mobile: 350 },
-  { date: "2024-06-16", desktop: 371, mobile: 310 },
-  { date: "2024-06-17", desktop: 475, mobile: 520 },
-  { date: "2024-06-18", desktop: 107, mobile: 170 },
-  { date: "2024-06-19", desktop: 341, mobile: 290 },
-  { date: "2024-06-20", desktop: 408, mobile: 450 },
-  { date: "2024-06-21", desktop: 169, mobile: 210 },
-  { date: "2024-06-22", desktop: 317, mobile: 270 },
-  { date: "2024-06-23", desktop: 480, mobile: 530 },
-  { date: "2024-06-24", desktop: 132, mobile: 180 },
-  { date: "2024-06-25", desktop: 141, mobile: 190 },
-  { date: "2024-06-26", desktop: 434, mobile: 380 },
-  { date: "2024-06-27", desktop: 448, mobile: 490 },
-  { date: "2024-06-28", desktop: 149, mobile: 200 },
-  { date: "2024-06-29", desktop: 103, mobile: 160 },
-  { date: "2024-06-30", desktop: 446, mobile: 400 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  desktop: {
-    label: "Desktop",
-    color: "var(--primary)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--primary)",
-  },
-} satisfies ChartConfig
-
-export function ChartAreaInteractive() {
-  const isMobile = useIsMobile()
-  const [timeRange, setTimeRange] = React.useState("7d")
-
-  const filteredData = chartData.filter((item) => {
-    const date = new Date(item.date)
-    const referenceDate = new Date("2024-06-30")
-    let daysToSubtract = 90
-    if (timeRange === "30d") {
-      daysToSubtract = 30
-    } else if (timeRange === "7d") {
-      daysToSubtract = 7
-    }
-    const startDate = new Date(referenceDate)
-    startDate.setDate(startDate.getDate() - daysToSubtract)
-    return date >= startDate
-  })
-
-  return (
-    <Card className="@container/card">
-      <CardHeader>
-        <CardTitle>Total Visitors</CardTitle>
-        <CardDescription>
-          <span className="hidden @[540px]/card:block">
-            Total for the last 3 months
-          </span>
-          <span className="@[540px]/card:hidden">Last 3 months</span>
-        </CardDescription>
-        <CardAction>
-          <ToggleGroup
-            type="single"
-            value={timeRange}
-            onValueChange={setTimeRange}
-            variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
-          >
-            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
-            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
-            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
-          </ToggleGroup>
-          <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger
-              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
-              size="sm"
-              aria-label="Select a value"
-            >
-              <SelectValue placeholder="Last 3 months" />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </CardAction>
-      </CardHeader>
-      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart data={filteredData}>
-            <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={1.0}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-desktop)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                <stop
-                  offset="5%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.8}
-                />
-                <stop
-                  offset="95%"
-                  stopColor="var(--color-mobile)"
-                  stopOpacity={0.1}
-                />
-              </linearGradient>
-            </defs>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
-            />
-            <ChartTooltip
-              cursor={false}
-              defaultIndex={isMobile ? -1 : 10}
-              content={
-                <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
-                  indicator="dot"
-                />
-              }
-            />
-            <Area
-              dataKey="mobile"
-              type="natural"
-              fill="url(#fillMobile)"
-              stroke="var(--color-mobile)"
-              stackId="a"
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="url(#fillDesktop)"
-              stroke="var(--color-desktop)"
-              stackId="a"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/data-table.tsx

@@ -1,807 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  closestCenter,
-  DndContext,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type UniqueIdentifier,
-} from "@dnd-kit/core"
-import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
-import {
-  arrayMove,
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import {
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconChevronsLeft,
-  IconChevronsRight,
-  IconCircleCheckFilled,
-  IconDotsVertical,
-  IconGripVertical,
-  IconLayoutColumns,
-  IconLoader,
-  IconPlus,
-  IconTrendingUp,
-} from "@tabler/icons-react"
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type Row,
-  type SortingState,
-  type VisibilityState,
-} from "@tanstack/react-table"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-import { toast } from "sonner"
-import { z } from "zod"
-
-import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/new-york-v4/ui/chart"
-import { Checkbox } from "@/registry/new-york-v4/ui/checkbox"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/new-york-v4/ui/drawer"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/new-york-v4/ui/select"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york-v4/ui/table"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-
-export const schema = z.object({
-  id: z.number(),
-  header: z.string(),
-  type: z.string(),
-  status: z.string(),
-  target: z.string(),
-  limit: z.string(),
-  reviewer: z.string(),
-})
-
-// Create a separate component for the drag handle
-function DragHandle({ id }: { id: number }) {
-  const { attributes, listeners } = useSortable({
-    id,
-  })
-
-  return (
-    <Button
-      {...attributes}
-      {...listeners}
-      variant="ghost"
-      size="icon"
-      className="size-7 text-muted-foreground hover:bg-transparent"
-    >
-      <IconGripVertical className="size-3 text-muted-foreground" />
-      <span className="sr-only">Drag to reorder</span>
-    </Button>
-  )
-}
-
-const columns: ColumnDef<z.infer<typeof schema>>[] = [
-  {
-    id: "drag",
-    header: () => null,
-    cell: ({ row }) => <DragHandle id={row.original.id} />,
-  },
-  {
-    id: "select",
-    header: ({ table }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && "indeterminate")
-          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-        />
-      </div>
-    ),
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={(value) => row.toggleSelected(!!value)}
-          aria-label="Select row"
-        />
-      </div>
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "header",
-    header: "Header",
-    cell: ({ row }) => {
-      return <TableCellViewer item={row.original} />
-    },
-    enableHiding: false,
-  },
-  {
-    accessorKey: "type",
-    header: "Section Type",
-    cell: ({ row }) => (
-      <div className="w-32">
-        <Badge variant="outline" className="px-1.5 text-muted-foreground">
-          {row.original.type}
-        </Badge>
-      </div>
-    ),
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <Badge variant="outline" className="px-1.5 text-muted-foreground">
-        {row.original.status === "Done" ? (
-          <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
-        ) : (
-          <IconLoader />
-        )}
-        {row.original.status}
-      </Badge>
-    ),
-  },
-  {
-    accessorKey: "target",
-    header: () => <div className="w-full text-right">Target</div>,
-    cell: ({ row }) => (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
-            loading: `Saving ${row.original.header}`,
-            success: "Done",
-            error: "Error",
-          })
-        }}
-      >
-        <Label htmlFor={`${row.original.id}-target`} className="sr-only">
-          Target
-        </Label>
-        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
-          defaultValue={row.original.target}
-          id={`${row.original.id}-target`}
-        />
-      </form>
-    ),
-  },
-  {
-    accessorKey: "limit",
-    header: () => <div className="w-full text-right">Limit</div>,
-    cell: ({ row }) => (
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {
-            loading: `Saving ${row.original.header}`,
-            success: "Done",
-            error: "Error",
-          })
-        }}
-      >
-        <Label htmlFor={`${row.original.id}-limit`} className="sr-only">
-          Limit
-        </Label>
-        <Input
-          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
-          defaultValue={row.original.limit}
-          id={`${row.original.id}-limit`}
-        />
-      </form>
-    ),
-  },
-  {
-    accessorKey: "reviewer",
-    header: "Reviewer",
-    cell: ({ row }) => {
-      const isAssigned = row.original.reviewer !== "Assign reviewer"
-
-      if (isAssigned) {
-        return row.original.reviewer
-      }
-
-      return (
-        <>
-          <Label htmlFor={`${row.original.id}-reviewer`} className="sr-only">
-            Reviewer
-          </Label>
-          <Select>
-            <SelectTrigger
-              className="w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate"
-              size="sm"
-              id={`${row.original.id}-reviewer`}
-            >
-              <SelectValue placeholder="Assign reviewer" />
-            </SelectTrigger>
-            <SelectContent align="end">
-              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-              <SelectItem value="Jamik Tashpulatov">
-                Jamik Tashpulatov
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </>
-      )
-    },
-  },
-  {
-    id: "actions",
-    cell: () => (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
-            size="icon"
-          >
-            <IconDotsVertical />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-32">
-          <DropdownMenuItem>Edit</DropdownMenuItem>
-          <DropdownMenuItem>Make a copy</DropdownMenuItem>
-          <DropdownMenuItem>Favorite</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    ),
-  },
-]
-
-function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
-  const { transform, transition, setNodeRef, isDragging } = useSortable({
-    id: row.original.id,
-  })
-
-  return (
-    <TableRow
-      data-state={row.getIsSelected() && "selected"}
-      data-dragging={isDragging}
-      ref={setNodeRef}
-      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
-      style={{
-        transform: CSS.Transform.toString(transform),
-        transition: transition,
-      }}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell key={cell.id}>
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </TableCell>
-      ))}
-    </TableRow>
-  )
-}
-
-export function DataTable({
-  data: initialData,
-}: {
-  data: z.infer<typeof schema>[]
-}) {
-  const [data, setData] = React.useState(() => initialData)
-  const [rowSelection, setRowSelection] = React.useState({})
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [pagination, setPagination] = React.useState({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-  const sortableId = React.useId()
-  const sensors = useSensors(
-    useSensor(MouseSensor, {}),
-    useSensor(TouchSensor, {}),
-    useSensor(KeyboardSensor, {})
-  )
-
-  const dataIds = React.useMemo<UniqueIdentifier[]>(
-    () => data?.map(({ id }) => id) || [],
-    [data]
-  )
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-      pagination,
-    },
-    getRowId: (row) => row.id.toString(),
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  })
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (active && over && active.id !== over.id) {
-      setData((data) => {
-        const oldIndex = dataIds.indexOf(active.id)
-        const newIndex = dataIds.indexOf(over.id)
-        return arrayMove(data, oldIndex, newIndex)
-      })
-    }
-  }
-
-  return (
-    <Tabs
-      defaultValue="outline"
-      className="w-full flex-col justify-start gap-6"
-    >
-      <div className="flex items-center justify-between px-4 lg:px-6">
-        <Label htmlFor="view-selector" className="sr-only">
-          View
-        </Label>
-        <Select defaultValue="outline">
-          <SelectTrigger
-            className="flex w-fit @4xl/main:hidden"
-            size="sm"
-            id="view-selector"
-          >
-            <SelectValue placeholder="Select a view" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="outline">Outline</SelectItem>
-            <SelectItem value="past-performance">Past Performance</SelectItem>
-            <SelectItem value="key-personnel">Key Personnel</SelectItem>
-            <SelectItem value="focus-documents">Focus Documents</SelectItem>
-          </SelectContent>
-        </Select>
-        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
-          <TabsTrigger value="outline">Outline</TabsTrigger>
-          <TabsTrigger value="past-performance">
-            Past Performance <Badge variant="secondary">3</Badge>
-          </TabsTrigger>
-          <TabsTrigger value="key-personnel">
-            Key Personnel <Badge variant="secondary">2</Badge>
-          </TabsTrigger>
-          <TabsTrigger value="focus-documents">Focus Documents</TabsTrigger>
-        </TabsList>
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm">
-                <IconLayoutColumns />
-                <span className="hidden lg:inline">Customize Columns</span>
-                <span className="lg:hidden">Columns</span>
-                <IconChevronDown />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              {table
-                .getAllColumns()
-                .filter(
-                  (column) =>
-                    typeof column.accessorFn !== "undefined" &&
-                    column.getCanHide()
-                )
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  )
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Button variant="outline" size="sm">
-            <IconPlus />
-            <span className="hidden lg:inline">Add Section</span>
-          </Button>
-        </div>
-      </div>
-      <TabsContent
-        value="outline"
-        className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6"
-      >
-        <div className="overflow-hidden rounded-lg border">
-          <DndContext
-            collisionDetection={closestCenter}
-            modifiers={[restrictToVerticalAxis]}
-            onDragEnd={handleDragEnd}
-            sensors={sensors}
-            id={sortableId}
-          >
-            <Table>
-              <TableHeader className="sticky top-0 z-10 bg-muted">
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id} colSpan={header.colSpan}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      )
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody className="**:data-[slot=table-cell]:first:w-8">
-                {table.getRowModel().rows?.length ? (
-                  <SortableContext
-                    items={dataIds}
-                    strategy={verticalListSortingStrategy}
-                  >
-                    {table.getRowModel().rows.map((row) => (
-                      <DraggableRow key={row.id} row={row} />
-                    ))}
-                  </SortableContext>
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={columns.length}
-                      className="h-24 text-center"
-                    >
-                      No results.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </DndContext>
-        </div>
-        <div className="flex items-center justify-between px-4">
-          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
-            {table.getFilteredSelectedRowModel().rows.length} of{" "}
-            {table.getFilteredRowModel().rows.length} row(s) selected.
-          </div>
-          <div className="flex w-full items-center gap-8 lg:w-fit">
-            <div className="hidden items-center gap-2 lg:flex">
-              <Label htmlFor="rows-per-page" className="text-sm font-medium">
-                Rows per page
-              </Label>
-              <Select
-                value={`${table.getState().pagination.pageSize}`}
-                onValueChange={(value) => {
-                  table.setPageSize(Number(value))
-                }}
-              >
-                <SelectTrigger size="sm" className="w-20" id="rows-per-page">
-                  <SelectValue
-                    placeholder={table.getState().pagination.pageSize}
-                  />
-                </SelectTrigger>
-                <SelectContent side="top">
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
-                    <SelectItem key={pageSize} value={`${pageSize}`}>
-                      {pageSize}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex w-fit items-center justify-center text-sm font-medium">
-              Page {table.getState().pagination.pageIndex + 1} of{" "}
-              {table.getPageCount()}
-            </div>
-            <div className="ml-auto flex items-center gap-2 lg:ml-0">
-              <Button
-                variant="outline"
-                className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <span className="sr-only">Go to first page</span>
-                <IconChevronsLeft />
-              </Button>
-              <Button
-                variant="outline"
-                className="size-8"
-                size="icon"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <span className="sr-only">Go to previous page</span>
-                <IconChevronLeft />
-              </Button>
-              <Button
-                variant="outline"
-                className="size-8"
-                size="icon"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-              >
-                <span className="sr-only">Go to next page</span>
-                <IconChevronRight />
-              </Button>
-              <Button
-                variant="outline"
-                className="hidden size-8 lg:flex"
-                size="icon"
-                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                disabled={!table.getCanNextPage()}
-              >
-                <span className="sr-only">Go to last page</span>
-                <IconChevronsRight />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </TabsContent>
-      <TabsContent
-        value="past-performance"
-        className="flex flex-col px-4 lg:px-6"
-      >
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-      <TabsContent value="key-personnel" className="flex flex-col px-4 lg:px-6">
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-      <TabsContent
-        value="focus-documents"
-        className="flex flex-col px-4 lg:px-6"
-      >
-        <div className="aspect-video w-full flex-1 rounded-lg border border-dashed"></div>
-      </TabsContent>
-    </Tabs>
-  )
-}
-
-const chartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const chartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--primary)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--primary)",
-  },
-} satisfies ChartConfig
-
-function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
-  const isMobile = useIsMobile()
-
-  return (
-    <Drawer direction={isMobile ? "bottom" : "right"}>
-      <DrawerTrigger asChild>
-        <Button variant="link" className="w-fit px-0 text-left text-foreground">
-          {item.header}
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="gap-1">
-          <DrawerTitle>{item.header}</DrawerTitle>
-          <DrawerDescription>
-            Showing total visitors for the last 6 months
-          </DrawerDescription>
-        </DrawerHeader>
-        <div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
-          {!isMobile && (
-            <>
-              <ChartContainer config={chartConfig}>
-                <AreaChart
-                  accessibilityLayer
-                  data={chartData}
-                  margin={{
-                    left: 0,
-                    right: 10,
-                  }}
-                >
-                  <CartesianGrid vertical={false} />
-                  <XAxis
-                    dataKey="month"
-                    tickLine={false}
-                    axisLine={false}
-                    tickMargin={8}
-                    tickFormatter={(value) => value.slice(0, 3)}
-                    hide
-                  />
-                  <ChartTooltip
-                    cursor={false}
-                    content={<ChartTooltipContent indicator="dot" />}
-                  />
-                  <Area
-                    dataKey="mobile"
-                    type="natural"
-                    fill="var(--color-mobile)"
-                    fillOpacity={0.6}
-                    stroke="var(--color-mobile)"
-                    stackId="a"
-                  />
-                  <Area
-                    dataKey="desktop"
-                    type="natural"
-                    fill="var(--color-desktop)"
-                    fillOpacity={0.4}
-                    stroke="var(--color-desktop)"
-                    stackId="a"
-                  />
-                </AreaChart>
-              </ChartContainer>
-              <Separator />
-              <div className="grid gap-2">
-                <div className="flex gap-2 leading-none font-medium">
-                  Trending up by 5.2% this month{" "}
-                  <IconTrendingUp className="size-4" />
-                </div>
-                <div className="text-muted-foreground">
-                  Showing total visitors for the last 6 months. This is just
-                  some random text to test the layout. It spans multiple lines
-                  and should wrap around.
-                </div>
-              </div>
-              <Separator />
-            </>
-          )}
-          <form className="flex flex-col gap-4">
-            <div className="flex flex-col gap-3">
-              <Label htmlFor="header">Header</Label>
-              <Input id="header" defaultValue={item.header} />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="type">Type</Label>
-                <Select defaultValue={item.type}>
-                  <SelectTrigger id="type" className="w-full">
-                    <SelectValue placeholder="Select a type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Table of Contents">
-                      Table of Contents
-                    </SelectItem>
-                    <SelectItem value="Executive Summary">
-                      Executive Summary
-                    </SelectItem>
-                    <SelectItem value="Technical Approach">
-                      Technical Approach
-                    </SelectItem>
-                    <SelectItem value="Design">Design</SelectItem>
-                    <SelectItem value="Capabilities">Capabilities</SelectItem>
-                    <SelectItem value="Focus Documents">
-                      Focus Documents
-                    </SelectItem>
-                    <SelectItem value="Narrative">Narrative</SelectItem>
-                    <SelectItem value="Cover Page">Cover Page</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="status">Status</Label>
-                <Select defaultValue={item.status}>
-                  <SelectTrigger id="status" className="w-full">
-                    <SelectValue placeholder="Select a status" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Done">Done</SelectItem>
-                    <SelectItem value="In Progress">In Progress</SelectItem>
-                    <SelectItem value="Not Started">Not Started</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="target">Target</Label>
-                <Input id="target" defaultValue={item.target} />
-              </div>
-              <div className="flex flex-col gap-3">
-                <Label htmlFor="limit">Limit</Label>
-                <Input id="limit" defaultValue={item.limit} />
-              </div>
-            </div>
-            <div className="flex flex-col gap-3">
-              <Label htmlFor="reviewer">Reviewer</Label>
-              <Select defaultValue={item.reviewer}>
-                <SelectTrigger id="reviewer" className="w-full">
-                  <SelectValue placeholder="Select a reviewer" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-                  <SelectItem value="Jamik Tashpulatov">
-                    Jamik Tashpulatov
-                  </SelectItem>
-                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </form>
-        </div>
-        <DrawerFooter>
-          <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Done</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx

@@ -1,92 +0,0 @@
-"use client"
-
-import {
-  IconDots,
-  IconFolder,
-  IconShare3,
-  IconTrash,
-  type Icon,
-} from "@tabler/icons-react"
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavDocuments({
-  items,
-}: {
-  items: {
-    name: string
-    url: string
-    icon: Icon
-  }[]
-}) {
-  const { isMobile } = useSidebar()
-
-  return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Documents</SidebarGroupLabel>
-      <SidebarMenu>
-        {items.map((item) => (
-          <SidebarMenuItem key={item.name}>
-            <SidebarMenuButton asChild>
-              <a href={item.url}>
-                <item.icon />
-                <span>{item.name}</span>
-              </a>
-            </SidebarMenuButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <SidebarMenuAction
-                  showOnHover
-                  className="rounded-sm data-[state=open]:bg-accent"
-                >
-                  <IconDots />
-                  <span className="sr-only">More</span>
-                </SidebarMenuAction>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                className="w-24 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
-              >
-                <DropdownMenuItem>
-                  <IconFolder />
-                  <span>Open</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <IconShare3 />
-                  <span>Share</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive">
-                  <IconTrash />
-                  <span>Delete</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        ))}
-        <SidebarMenuItem>
-          <SidebarMenuButton className="text-sidebar-foreground/70">
-            <IconDots className="text-sidebar-foreground/70" />
-            <span>More</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/nav-main.tsx

@@ -1,40 +0,0 @@
-"use client"
-
-import { type Icon } from "@tabler/icons-react"
-
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavMain({
-  items,
-}: {
-  items: {
-    title: string
-    url: string
-    icon?: Icon
-  }[]
-}) {
-  return (
-    <SidebarGroup>
-      <SidebarGroupContent>
-        <SidebarGroupLabel>Home</SidebarGroupLabel>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton tooltip={item.title}>
-                {item.icon && <item.icon />}
-                <span>{item.title}</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/nav-secondary.tsx

@@ -1,42 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { type Icon } from "@tabler/icons-react"
-
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavSecondary({
-  items,
-  ...props
-}: {
-  items: {
-    title: string
-    url: string
-    icon: Icon
-  }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
-  return (
-    <SidebarGroup {...props}>
-      <SidebarGroupContent>
-        <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild>
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx

@@ -1,110 +0,0 @@
-"use client"
-
-import {
-  IconCreditCard,
-  IconDotsVertical,
-  IconLogout,
-  IconNotification,
-  IconUserCircle,
-} from "@tabler/icons-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/registry/new-york-v4/ui/sidebar"
-
-export function NavUser({
-  user,
-}: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  const { isMobile } = useSidebar()
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <Avatar className="h-8 w-8 rounded-lg grayscale">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {user.email}
-                </span>
-              </div>
-              <IconDotsVertical className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs text-muted-foreground">
-                    {user.email}
-                  </span>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconUserCircle />
-                Account
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconCreditCard />
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconNotification />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <IconLogout />
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx

@@ -1,102 +0,0 @@
-import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
-
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/new-york-v4/ui/card"
-
-export function SectionCards() {
-  return (
-    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Total Revenue</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            $1,250.00
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Trending up this month <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">
-            Visitors for the last 6 months
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>New Customers</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            1,234
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingDown />
-              -20%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Down 20% this period <IconTrendingDown className="size-4" />
-          </div>
-          <div className="text-muted-foreground">
-            Acquisition needs attention
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Active Accounts</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            45,678
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Strong user retention <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">Engagement exceed targets</div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Growth Rate</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            4.5%
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <IconTrendingUp />
-              +4.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Steady performance increase <IconTrendingUp className="size-4" />
-          </div>
-          <div className="text-muted-foreground">Meets growth projections</div>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/dashboard/components/site-header.tsx

@@ -1,19 +0,0 @@
-import { IconCirclePlusFilled } from "@tabler/icons-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export function SiteHeader() {
-  return (
-    <header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/90 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        <h1 className="text-base font-medium">Documents</h1>
-        <div className="ml-auto flex items-center gap-2">
-          <Button size="sm" className="hidden h-7 sm:flex">
-            <IconCirclePlusFilled />
-            <span>Quick Create</span>
-          </Button>
-        </div>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/examples/dashboard/data.json

@@ -1,614 +0,0 @@
-[
-  {
-    "id": 1,
-    "header": "Cover page",
-    "type": "Cover page",
-    "status": "In Process",
-    "target": "18",
-    "limit": "5",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 2,
-    "header": "Table of contents",
-    "type": "Table of contents",
-    "status": "Done",
-    "target": "29",
-    "limit": "24",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 3,
-    "header": "Executive summary",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "10",
-    "limit": "13",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 4,
-    "header": "Technical approach",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "27",
-    "limit": "23",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 5,
-    "header": "Design",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "2",
-    "limit": "16",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 6,
-    "header": "Capabilities",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "20",
-    "limit": "8",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 7,
-    "header": "Integration with existing systems",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "19",
-    "limit": "21",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 8,
-    "header": "Innovation and Advantages",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "25",
-    "limit": "26",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 9,
-    "header": "Overview of EMR's Innovative Solutions",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "7",
-    "limit": "23",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 10,
-    "header": "Advanced Algorithms and Machine Learning",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "30",
-    "limit": "28",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 11,
-    "header": "Adaptive Communication Protocols",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "9",
-    "limit": "31",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 12,
-    "header": "Advantages Over Current Technologies",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "12",
-    "limit": "0",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 13,
-    "header": "Past Performance",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "22",
-    "limit": "33",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 14,
-    "header": "Customer Feedback and Satisfaction Levels",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "15",
-    "limit": "34",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 15,
-    "header": "Implementation Challenges and Solutions",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "3",
-    "limit": "35",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 16,
-    "header": "Security Measures and Data Protection Policies",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "6",
-    "limit": "36",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 17,
-    "header": "Scalability and Future Proofing",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "4",
-    "limit": "37",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 18,
-    "header": "Cost-Benefit Analysis",
-    "type": "Plain language",
-    "status": "Done",
-    "target": "14",
-    "limit": "38",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 19,
-    "header": "User Training and Onboarding Experience",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "17",
-    "limit": "39",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 20,
-    "header": "Future Development Roadmap",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "11",
-    "limit": "40",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 21,
-    "header": "System Architecture Overview",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "24",
-    "limit": "18",
-    "reviewer": "Maya Johnson"
-  },
-  {
-    "id": 22,
-    "header": "Risk Management Plan",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "15",
-    "limit": "22",
-    "reviewer": "Carlos Rodriguez"
-  },
-  {
-    "id": 23,
-    "header": "Compliance Documentation",
-    "type": "Legal",
-    "status": "In Process",
-    "target": "31",
-    "limit": "27",
-    "reviewer": "Sarah Chen"
-  },
-  {
-    "id": 24,
-    "header": "API Documentation",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "8",
-    "limit": "12",
-    "reviewer": "Raj Patel"
-  },
-  {
-    "id": 25,
-    "header": "User Interface Mockups",
-    "type": "Visual",
-    "status": "In Process",
-    "target": "19",
-    "limit": "25",
-    "reviewer": "Leila Ahmadi"
-  },
-  {
-    "id": 26,
-    "header": "Database Schema",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "22",
-    "limit": "20",
-    "reviewer": "Thomas Wilson"
-  },
-  {
-    "id": 27,
-    "header": "Testing Methodology",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "17",
-    "limit": "14",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 28,
-    "header": "Deployment Strategy",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "26",
-    "limit": "30",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 29,
-    "header": "Budget Breakdown",
-    "type": "Financial",
-    "status": "In Process",
-    "target": "13",
-    "limit": "16",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 30,
-    "header": "Market Analysis",
-    "type": "Research",
-    "status": "Done",
-    "target": "29",
-    "limit": "32",
-    "reviewer": "Sophia Martinez"
-  },
-  {
-    "id": 31,
-    "header": "Competitor Comparison",
-    "type": "Research",
-    "status": "In Process",
-    "target": "21",
-    "limit": "19",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 32,
-    "header": "Maintenance Plan",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "16",
-    "limit": "23",
-    "reviewer": "Alex Thompson"
-  },
-  {
-    "id": 33,
-    "header": "User Personas",
-    "type": "Research",
-    "status": "In Process",
-    "target": "27",
-    "limit": "24",
-    "reviewer": "Nina Patel"
-  },
-  {
-    "id": 34,
-    "header": "Accessibility Compliance",
-    "type": "Legal",
-    "status": "Done",
-    "target": "18",
-    "limit": "21",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 35,
-    "header": "Performance Metrics",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "23",
-    "limit": "26",
-    "reviewer": "David Kim"
-  },
-  {
-    "id": 36,
-    "header": "Disaster Recovery Plan",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "14",
-    "limit": "17",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 37,
-    "header": "Third-party Integrations",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "25",
-    "limit": "28",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 38,
-    "header": "User Feedback Summary",
-    "type": "Research",
-    "status": "Done",
-    "target": "20",
-    "limit": "15",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 39,
-    "header": "Localization Strategy",
-    "type": "Narrative",
-    "status": "In Process",
-    "target": "12",
-    "limit": "19",
-    "reviewer": "Maria Garcia"
-  },
-  {
-    "id": 40,
-    "header": "Mobile Compatibility",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "28",
-    "limit": "31",
-    "reviewer": "James Wilson"
-  },
-  {
-    "id": 41,
-    "header": "Data Migration Plan",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "19",
-    "limit": "22",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 42,
-    "header": "Quality Assurance Protocols",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "30",
-    "limit": "33",
-    "reviewer": "Priya Singh"
-  },
-  {
-    "id": 43,
-    "header": "Stakeholder Analysis",
-    "type": "Research",
-    "status": "In Process",
-    "target": "11",
-    "limit": "14",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 44,
-    "header": "Environmental Impact Assessment",
-    "type": "Research",
-    "status": "Done",
-    "target": "24",
-    "limit": "27",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 45,
-    "header": "Intellectual Property Rights",
-    "type": "Legal",
-    "status": "In Process",
-    "target": "17",
-    "limit": "20",
-    "reviewer": "Sarah Johnson"
-  },
-  {
-    "id": 46,
-    "header": "Customer Support Framework",
-    "type": "Narrative",
-    "status": "Done",
-    "target": "22",
-    "limit": "25",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 47,
-    "header": "Version Control Strategy",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "15",
-    "limit": "18",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 48,
-    "header": "Continuous Integration Pipeline",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "26",
-    "limit": "29",
-    "reviewer": "Michael Chen"
-  },
-  {
-    "id": 49,
-    "header": "Regulatory Compliance",
-    "type": "Legal",
-    "status": "In Process",
-    "target": "13",
-    "limit": "16",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 50,
-    "header": "User Authentication System",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "28",
-    "limit": "31",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 51,
-    "header": "Data Analytics Framework",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "21",
-    "limit": "24",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 52,
-    "header": "Cloud Infrastructure",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "16",
-    "limit": "19",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 53,
-    "header": "Network Security Measures",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "29",
-    "limit": "32",
-    "reviewer": "Lisa Wong"
-  },
-  {
-    "id": 54,
-    "header": "Project Timeline",
-    "type": "Planning",
-    "status": "Done",
-    "target": "14",
-    "limit": "17",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 55,
-    "header": "Resource Allocation",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "27",
-    "limit": "30",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 56,
-    "header": "Team Structure and Roles",
-    "type": "Planning",
-    "status": "Done",
-    "target": "20",
-    "limit": "23",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 57,
-    "header": "Communication Protocols",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "15",
-    "limit": "18",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 58,
-    "header": "Success Metrics",
-    "type": "Planning",
-    "status": "Done",
-    "target": "30",
-    "limit": "33",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 59,
-    "header": "Internationalization Support",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "23",
-    "limit": "26",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 60,
-    "header": "Backup and Recovery Procedures",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "18",
-    "limit": "21",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 61,
-    "header": "Monitoring and Alerting System",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "25",
-    "limit": "28",
-    "reviewer": "Daniel Park"
-  },
-  {
-    "id": 62,
-    "header": "Code Review Guidelines",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "12",
-    "limit": "15",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 63,
-    "header": "Documentation Standards",
-    "type": "Technical content",
-    "status": "In Process",
-    "target": "27",
-    "limit": "30",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 64,
-    "header": "Release Management Process",
-    "type": "Planning",
-    "status": "Done",
-    "target": "22",
-    "limit": "25",
-    "reviewer": "Assign reviewer"
-  },
-  {
-    "id": 65,
-    "header": "Feature Prioritization Matrix",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "19",
-    "limit": "22",
-    "reviewer": "Emma Davis"
-  },
-  {
-    "id": 66,
-    "header": "Technical Debt Assessment",
-    "type": "Technical content",
-    "status": "Done",
-    "target": "24",
-    "limit": "27",
-    "reviewer": "Eddie Lake"
-  },
-  {
-    "id": 67,
-    "header": "Capacity Planning",
-    "type": "Planning",
-    "status": "In Process",
-    "target": "21",
-    "limit": "24",
-    "reviewer": "Jamik Tashpulatov"
-  },
-  {
-    "id": 68,
-    "header": "Service Level Agreements",
-    "type": "Legal",
-    "status": "Done",
-    "target": "26",
-    "limit": "29",
-    "reviewer": "Assign reviewer"
-  }
-]

apps/v4/app/(app)/examples/dashboard/page.tsx

@@ -1,63 +0,0 @@
-import Image from "next/image"
-
-import {
-  SidebarInset,
-  SidebarProvider,
-} from "@/registry/new-york-v4/ui/sidebar"
-import { AppSidebar } from "@/app/(app)/examples/dashboard/components/app-sidebar"
-import { ChartAreaInteractive } from "@/app/(app)/examples/dashboard/components/chart-area-interactive"
-import { DataTable } from "@/app/(app)/examples/dashboard/components/data-table"
-import { SectionCards } from "@/app/(app)/examples/dashboard/components/section-cards"
-import { SiteHeader } from "@/app/(app)/examples/dashboard/components/site-header"
-
-import data from "./data.json"
-
-export default function Page() {
-  return (
-    <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/dashboard-light.png"
-          width={1280}
-          height={843}
-          alt="Authentication"
-          className="block dark:hidden"
-          priority
-        />
-        <Image
-          src="/examples/dashboard-dark.png"
-          width={1280}
-          height={843}
-          alt="Authentication"
-          className="hidden dark:block"
-          priority
-        />
-      </div>
-      <SidebarProvider
-        className="hidden md:flex"
-        style={
-          {
-            "--sidebar-width": "calc(var(--spacing) * 64)",
-            "--header-height": "calc(var(--spacing) * 12 + 1px)",
-          } as React.CSSProperties
-        }
-      >
-        <AppSidebar variant="sidebar" />
-        <SidebarInset>
-          <SiteHeader />
-          <div className="flex flex-1 flex-col">
-            <div className="@container/main flex flex-1 flex-col gap-2">
-              <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-                <SectionCards />
-                <div className="px-4 lg:px-6">
-                  <ChartAreaInteractive />
-                </div>
-                <DataTable data={data} />
-              </div>
-            </div>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-    </>
-  )
-}

apps/v4/app/(app)/examples/layout.tsx

@@ -1,80 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ExamplesNav } from "@/components/examples-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { ThemeSelector } from "@/components/theme-selector"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-const title = "The Foundation for your Design System"
-const description =
-  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ExamplesLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <Link href="/docs/installation">Get Started</Link>
-          </Button>
-          <Button asChild size="sm" variant="ghost">
-            <Link href="/docs/components">View Components</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <PageNav id="examples" className="hidden md:flex">
-        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
-        <ThemeSelector className="mr-4 hidden md:flex" />
-      </PageNav>
-      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
-        <div className="container flex flex-1 scroll-mt-20 flex-col theme-container">
-          <div className="flex flex-col overflow-hidden rounded-lg border bg-background bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
-            {children}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

apps/v4/app/(app)/examples/playground/components/preset-save.tsx

@@ -1,45 +0,0 @@
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york-v4/ui/dialog"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-export function PresetSave() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="secondary">Save</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Save preset</DialogTitle>
-          <DialogDescription>
-            This will save the current playground state as a preset which you
-            can access later or share with others.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-6 py-4">
-          <div className="grid gap-3">
-            <Label htmlFor="name">Name</Label>
-            <Input id="name" autoFocus />
-          </div>
-          <div className="grid gap-3">
-            <Label htmlFor="description">Description</Label>
-            <Textarea id="description" />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="submit">Save</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

apps/v4/app/(app)/examples/playground/components/preset-share.tsx

@@ -1,49 +0,0 @@
-import { Copy } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/new-york-v4/ui/popover"
-
-export function PresetShare() {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="secondary">Share</Button>
-      </PopoverTrigger>
-      <PopoverContent align="end" className="flex w-[520px] flex-col gap-4">
-        <div className="flex flex-col gap-1 text-center sm:text-left">
-          <h3 className="text-lg font-semibold">Share preset</h3>
-          <p className="text-sm text-muted-foreground">
-            Anyone who has this link and an OpenAI account will be able to view
-            this.
-          </p>
-        </div>
-        <div className="relative flex-1">
-          <Label htmlFor="link" className="sr-only">
-            Link
-          </Label>
-          <Input
-            id="link"
-            defaultValue="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
-            readOnly
-            className="h-9 pr-10"
-          />
-          <Button
-            type="submit"
-            size="icon"
-            variant="ghost"
-            className="absolute top-1 right-1 size-7"
-          >
-            <span className="sr-only">Copy</span>
-            <Copy className="size-3.5" />
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}

apps/v4/app/(app)/examples/playground/page.tsx

@@ -1,332 +0,0 @@
-import { type Metadata } from "next"
-import Image from "next/image"
-import { RotateCcw } from "lucide-react"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/registry/new-york-v4/ui/hover-card"
-import { Label } from "@/registry/new-york-v4/ui/label"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-import { Textarea } from "@/registry/new-york-v4/ui/textarea"
-
-import { CodeViewer } from "./components/code-viewer"
-import { MaxLengthSelector } from "./components/maxlength-selector"
-import { ModelSelector } from "./components/model-selector"
-import { PresetActions } from "./components/preset-actions"
-import { PresetSave } from "./components/preset-save"
-import { PresetSelector } from "./components/preset-selector"
-import { PresetShare } from "./components/preset-share"
-import { TemperatureSelector } from "./components/temperature-selector"
-import { TopPSelector } from "./components/top-p-selector"
-import { models, types } from "./data/models"
-import { presets } from "./data/presets"
-
-export const metadata: Metadata = {
-  title: "Playground",
-  description: "The OpenAI Playground built using the components.",
-}
-
-export default function PlaygroundPage() {
-  return (
-    <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/playground-light.png"
-          width={1280}
-          height={916}
-          alt="Playground"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/playground-dark.png"
-          width={1280}
-          height={916}
-          alt="Playground"
-          className="hidden dark:block"
-        />
-      </div>
-      <div className="hidden flex-1 flex-col md:flex">
-        <div className="container flex flex-col items-start justify-between gap-2 py-4 sm:flex-row sm:items-center sm:gap-0 md:h-16">
-          <h2 className="pl-0.5 text-lg font-semibold">Playground</h2>
-          <div className="ml-auto flex w-full gap-2 sm:justify-end">
-            <PresetSelector presets={presets} />
-            <PresetSave />
-            <div className="hidden gap-2 md:flex">
-              <CodeViewer />
-              <PresetShare />
-            </div>
-            <PresetActions />
-          </div>
-        </div>
-        <Separator />
-        <Tabs defaultValue="complete" className="flex flex-1 flex-col">
-          <div className="container flex flex-1 flex-col py-6">
-            <div className="grid flex-1 items-stretch gap-6 md:grid-cols-[1fr_200px]">
-              <div className="hidden flex-col gap-6 sm:flex md:order-2">
-                <div className="grid gap-3">
-                  <HoverCard openDelay={200}>
-                    <HoverCardTrigger asChild>
-                      <span className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                        Mode
-                      </span>
-                    </HoverCardTrigger>
-                    <HoverCardContent className="w-[320px] text-sm" side="left">
-                      Choose the interface that best suits your task. You can
-                      provide: a simple prompt to complete, starting and ending
-                      text to insert a completion within, or some text with
-                      instructions to edit it.
-                    </HoverCardContent>
-                  </HoverCard>
-                  <TabsList className="grid w-full grid-cols-3">
-                    <TabsTrigger value="complete">
-                      <span className="sr-only">Complete</span>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                      >
-                        <rect
-                          x="4"
-                          y="3"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="7"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="13"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                      </svg>
-                    </TabsTrigger>
-                    <TabsTrigger value="insert">
-                      <span className="sr-only">Insert</span>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                        className="h-5 w-5"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          clipRule="evenodd"
-                          d="M14.491 7.769a.888.888 0 0 1 .287.648.888.888 0 0 1-.287.648l-3.916 3.667a1.013 1.013 0 0 1-.692.268c-.26 0-.509-.097-.692-.268L5.275 9.065A.886.886 0 0 1 5 8.42a.889.889 0 0 1 .287-.64c.181-.17.427-.267.683-.269.257-.002.504.09.69.258L8.903 9.87V3.917c0-.243.103-.477.287-.649.183-.171.432-.268.692-.268.26 0 .509.097.692.268a.888.888 0 0 1 .287.649V9.87l2.245-2.102c.183-.172.432-.269.692-.269.26 0 .508.097.692.269Z"
-                          fill="currentColor"
-                        ></path>
-                        <rect
-                          x="4"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="13"
-                          y="15"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                      </svg>
-                    </TabsTrigger>
-                    <TabsTrigger value="edit">
-                      <span className="sr-only">Edit</span>
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                        className="h-5 w-5"
-                      >
-                        <rect
-                          x="4"
-                          y="3"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="7"
-                          width="12"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="4"
-                          y="15"
-                          width="4"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <rect
-                          x="8.5"
-                          y="11"
-                          width="3"
-                          height="2"
-                          rx="1"
-                          fill="currentColor"
-                        ></rect>
-                        <path
-                          d="M17.154 11.346a1.182 1.182 0 0 0-1.671 0L11 15.829V17.5h1.671l4.483-4.483a1.182 1.182 0 0 0 0-1.671Z"
-                          fill="currentColor"
-                        ></path>
-                      </svg>
-                    </TabsTrigger>
-                  </TabsList>
-                </div>
-                <ModelSelector types={types} models={models} />
-                <TemperatureSelector defaultValue={[0.56]} />
-                <MaxLengthSelector defaultValue={[256]} />
-                <TopPSelector defaultValue={[0.9]} />
-              </div>
-              <div className="flex flex-1 flex-col *:data-[slot=tab-content]:flex-1 md:order-1">
-                <TabsContent value="complete" className="mt-0 border-0 p-0">
-                  <div className="flex h-full flex-col gap-4">
-                    <Textarea
-                      placeholder="Write a tagline for an ice cream shop"
-                      className="min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px]"
-                    />
-                    <div className="flex items-center gap-2">
-                      <Button>Submit</Button>
-                      <Button variant="secondary">
-                        <span className="sr-only">Show history</span>
-                        <RotateCcw />
-                      </Button>
-                    </div>
-                  </div>
-                </TabsContent>
-                <TabsContent
-                  value="insert"
-                  className="mt-0 flex flex-col gap-4 border-0 p-0"
-                >
-                  <div className="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
-                    <Textarea
-                      placeholder="We're writing to [inset]. Congrats from OpenAI!"
-                      className="h-full min-h-[300px] p-4 lg:min-h-[700px] xl:min-h-[700px]"
-                    />
-                    <div className="rounded-md border bg-muted"></div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Button>Submit</Button>
-                    <Button variant="secondary">
-                      <span className="sr-only">Show history</span>
-                      <RotateCcw />
-                    </Button>
-                  </div>
-                </TabsContent>
-                <TabsContent
-                  value="edit"
-                  className="mt-0 flex flex-col gap-4 border-0 p-0"
-                >
-                  <div className="grid h-full gap-6 lg:grid-cols-2">
-                    <div className="flex flex-col gap-4">
-                      <div className="flex flex-1 flex-col gap-2">
-                        <Label htmlFor="input" className="sr-only">
-                          Input
-                        </Label>
-                        <Textarea
-                          id="input"
-                          placeholder="We is going to the market."
-                          className="flex-1 p-4 lg:min-h-[580px]"
-                        />
-                      </div>
-                      <div className="flex flex-col gap-2">
-                        <Label htmlFor="instructions">Instructions</Label>
-                        <Textarea
-                          id="instructions"
-                          placeholder="Fix the grammar."
-                        />
-                      </div>
-                    </div>
-                    <div className="min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Button>Submit</Button>
-                    <Button variant="secondary">
-                      <span className="sr-only">Show history</span>
-                      <RotateCcw />
-                    </Button>
-                  </div>
-                </TabsContent>
-              </div>
-            </div>
-          </div>
-        </Tabs>
-      </div>
-    </>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx

@@ -1,170 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-import { Input } from "@/examples/base/ui-rtl/input"
-import { RadioGroup, RadioGroupItem } from "@/examples/base/ui-rtl/radio-group"
-import { Switch } from "@/examples/base/ui-rtl/switch"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    computeEnvironment: "بيئة الحوسبة",
-    computeDescription: "اختر بيئة الحوسبة لمجموعتك.",
-    kubernetes: "كوبرنيتس",
-    kubernetesDescription:
-      "تشغيل أحمال عمل GPU على مجموعة مُهيأة بـ K8s. هذا هو الافتراضي.",
-    virtualMachine: "جهاز افتراضي",
-    vmDescription: "الوصول إلى مجموعة VM مُهيأة لتشغيل أحمال العمل. (قريبًا)",
-    numberOfGpus: "عدد وحدات GPU",
-    gpuDescription: "يمكنك إضافة المزيد لاحقًا.",
-    decrement: "إنقاص",
-    increment: "زيادة",
-    wallpaperTinting: "تلوين الخلفية",
-    wallpaperDescription: "السماح بتلوين الخلفية.",
-  },
-  he: {
-    dir: "rtl" as const,
-    computeEnvironment: "סביבת מחשוב",
-    computeDescription: "בחר את סביבת המחשוב לאשכול שלך.",
-    kubernetes: "קוברנטיס",
-    kubernetesDescription:
-      "הפעל עומסי עבודה של GPU באשכול מוגדר K8s. זו ברירת המחדל.",
-    virtualMachine: "מכונה וירטואלית",
-    vmDescription: "גש לאשכול VM מוגדר להפעלת עומסי עבודה. (בקרוב)",
-    numberOfGpus: "מספר GPUs",
-    gpuDescription: "תוכל להוסיף עוד מאוחר יותר.",
-    decrement: "הפחת",
-    increment: "הגדל",
-    wallpaperTinting: "צביעת טפט",
-    wallpaperDescription: "אפשר לטפט להיצבע.",
-  },
-}
-
-export function AppearanceSettings() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [gpuCount, setGpuCount] = React.useState(8)
-
-  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
-    setGpuCount((prevCount) =>
-      Math.max(1, Math.min(99, prevCount + adjustment))
-    )
-  }, [])
-
-  const handleGpuInputChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value, 10)
-      if (!isNaN(value) && value >= 1 && value <= 99) {
-        setGpuCount(value)
-      }
-    },
-    []
-  )
-
-  return (
-    <div dir={t.dir}>
-      <FieldSet>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>{t.computeEnvironment}</FieldLegend>
-            <FieldDescription>{t.computeDescription}</FieldDescription>
-            <RadioGroup defaultValue="kubernetes">
-              <FieldLabel htmlFor="rtl-kubernetes">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>{t.kubernetes}</FieldTitle>
-                    <FieldDescription>
-                      {t.kubernetesDescription}
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="kubernetes"
-                    id="rtl-kubernetes"
-                    aria-label={t.kubernetes}
-                  />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="rtl-vm">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>{t.virtualMachine}</FieldTitle>
-                    <FieldDescription>{t.vmDescription}</FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="vm"
-                    id="rtl-vm"
-                    aria-label={t.virtualMachine}
-                  />
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="rtl-gpu-count">{t.numberOfGpus}</FieldLabel>
-              <FieldDescription>{t.gpuDescription}</FieldDescription>
-            </FieldContent>
-            <ButtonGroup>
-              <Input
-                id="rtl-gpu-count"
-                value={gpuCount}
-                onChange={handleGpuInputChange}
-                size={3}
-                className="h-7 w-14! font-mono"
-                maxLength={3}
-              />
-              <Button
-                variant="outline"
-                size="icon-sm"
-                type="button"
-                aria-label={t.decrement}
-                onClick={() => handleGpuAdjustment(-1)}
-                disabled={gpuCount <= 1}
-              >
-                <IconMinus />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon-sm"
-                type="button"
-                aria-label={t.increment}
-                onClick={() => handleGpuAdjustment(1)}
-                disabled={gpuCount >= 99}
-              >
-                <IconPlus />
-              </Button>
-            </ButtonGroup>
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="rtl-tinting">
-                {t.wallpaperTinting}
-              </FieldLabel>
-              <FieldDescription>{t.wallpaperDescription}</FieldDescription>
-            </FieldContent>
-            <Switch id="rtl-tinting" defaultChecked />
-          </Field>
-        </FieldGroup>
-      </FieldSet>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx

@@ -1,179 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    goBack: "رجوع",
-    archive: "أرشفة",
-    report: "إبلاغ",
-    snooze: "تأجيل",
-    moreOptions: "خيارات أخرى",
-    markAsRead: "تحديد كمقروء",
-    addToCalendar: "إضافة إلى التقويم",
-    addToList: "إضافة إلى القائمة",
-    labelAs: "تصنيف كـ...",
-    personal: "شخصي",
-    work: "عمل",
-    other: "أخرى",
-    trash: "حذف",
-  },
-  he: {
-    dir: "rtl" as const,
-    goBack: "חזור",
-    archive: "ארכיון",
-    report: "דווח",
-    snooze: "נודניק",
-    moreOptions: "אפשרויות נוספות",
-    markAsRead: "סמן כנקרא",
-    addToCalendar: "הוסף ליומן",
-    addToList: "הוסף לרשימה",
-    labelAs: "תייג כ...",
-    personal: "אישי",
-    work: "עבודה",
-    other: "אחר",
-    trash: "מחק",
-  },
-}
-
-export function ButtonGroupDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [label, setLabel] = React.useState("personal")
-
-  return (
-    <div dir={t.dir}>
-      <ButtonGroup>
-        <ButtonGroup className="hidden sm:flex">
-          <Button variant="outline" size="icon-sm" aria-label={t.goBack}>
-            <ArrowLeftIcon className="rtl:rotate-180" />
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline" size="sm">
-            {t.archive}
-          </Button>
-          <Button variant="outline" size="sm">
-            {t.report}
-          </Button>
-        </ButtonGroup>
-        <ButtonGroup>
-          <Button variant="outline" size="sm">
-            {t.snooze}
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  variant="outline"
-                  size="icon-sm"
-                  aria-label={t.moreOptions}
-                />
-              }
-            >
-              <MoreHorizontalIcon />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="start"
-              dir={t.dir}
-              data-lang={lang}
-              className="w-44"
-            >
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <MailCheckIcon />
-                  {t.markAsRead}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <ArchiveIcon />
-                  {t.archive}
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <ClockIcon />
-                  {t.snooze}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <CalendarPlusIcon />
-                  {t.addToCalendar}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <ListFilterIcon />
-                  {t.addToList}
-                </DropdownMenuItem>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <TagIcon />
-                    {t.labelAs}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                    <DropdownMenuSubContent
-                      side="left"
-                      dir={t.dir}
-                      data-lang={lang}
-                    >
-                      <DropdownMenuRadioGroup
-                        value={label}
-                        onValueChange={setLabel}
-                      >
-                        <DropdownMenuRadioItem value="personal">
-                          {t.personal}
-                        </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="work">
-                          {t.work}
-                        </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="other">
-                          {t.other}
-                        </DropdownMenuRadioItem>
-                      </DropdownMenuRadioGroup>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-                </DropdownMenuSub>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem variant="destructive">
-                  <Trash2Icon />
-                  {t.trash}
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </ButtonGroup>
-      </ButtonGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/button-group-input-group.tsx

@@ -1,82 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/base/ui-rtl/input-group"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    add: "إضافة",
-    voicePlaceholder: "سجل وأرسل صوتًا...",
-    messagePlaceholder: "أرسل رسالة...",
-    voiceMode: "الوضع الصوتي",
-  },
-  he: {
-    dir: "rtl" as const,
-    add: "הוסף",
-    voicePlaceholder: "הקלט ושלח אודיו...",
-    messagePlaceholder: "שלח הודעה...",
-    voiceMode: "מצב קולי",
-  },
-}
-
-export function ButtonGroupInputGroup() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
-
-  return (
-    <ButtonGroup dir={t.dir}>
-      <ButtonGroup>
-        <Button variant="outline" size="icon" aria-label={t.add}>
-          <PlusIcon />
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup className="flex-1">
-        <InputGroup>
-          <InputGroupInput
-            placeholder={
-              voiceEnabled ? t.voicePlaceholder : t.messagePlaceholder
-            }
-            disabled={voiceEnabled}
-          />
-          <InputGroupAddon align="inline-end">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <InputGroupButton
-                    onClick={() => setVoiceEnabled(!voiceEnabled)}
-                    data-active={voiceEnabled}
-                    className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
-                    aria-pressed={voiceEnabled}
-                    size="icon-xs"
-                    aria-label={t.voiceMode}
-                  />
-                }
-              >
-                <AudioLinesIcon />
-              </TooltipTrigger>
-              <TooltipContent>{t.voiceMode}</TooltipContent>
-            </Tooltip>
-          </InputGroupAddon>
-        </InputGroup>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    locale: "ar-SA",
-    previous: "السابق",
-    next: "التالي",
-  },
-  he: {
-    dir: "rtl" as const,
-    locale: "he-IL",
-    previous: "הקודם",
-    next: "הבא",
-  },
-}
-
-function formatNumber(value: number, locale: string) {
-  return new Intl.NumberFormat(locale).format(value)
-}
-
-export function ButtonGroupNested() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <ButtonGroup dir={t.dir}>
-      <ButtonGroup>
-        <Button variant="outline" size="sm">
-          {formatNumber(1, t.locale)}
-        </Button>
-        <Button variant="outline" size="sm">
-          {formatNumber(2, t.locale)}
-        </Button>
-        <Button variant="outline" size="sm">
-          {formatNumber(3, t.locale)}
-        </Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button variant="outline" size="icon-sm" aria-label={t.previous}>
-          <ArrowLeftIcon className="rtl:rotate-180" />
-        </Button>
-        <Button variant="outline" size="icon-sm" aria-label={t.next}>
-          <ArrowRightIcon className="rtl:rotate-180" />
-        </Button>
-      </ButtonGroup>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/button-group-popover.tsx

@@ -1,83 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/base/ui-rtl/popover"
-import { Separator } from "@/examples/base/ui-rtl/separator"
-import { Textarea } from "@/examples/base/ui-rtl/textarea"
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    copilot: "المساعد",
-    openPopover: "فتح القائمة",
-    agentTasks: "مهام الوكيل",
-    placeholder: "صف مهمتك بلغة طبيعية.",
-    startTask: "ابدأ مهمة جديدة مع المساعد",
-    description:
-      "صف مهمتك بلغة طبيعية. سيعمل المساعد في الخلفية ويفتح طلب سحب لمراجعتك.",
-  },
-  he: {
-    dir: "rtl" as const,
-    copilot: "עוזר",
-    openPopover: "פתח תפריט",
-    agentTasks: "משימות סוכן",
-    placeholder: "תאר את המשימה שלך בשפה טבעית.",
-    startTask: "התחל משימה חדשה עם העוזר",
-    description:
-      "תאר את המשימה שלך בשפה טבעית. העוזר יעבוד ברקע ויפתח בקשת משיכה לבדיקתך.",
-  },
-}
-
-export function ButtonGroupPopover() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <ButtonGroup dir={t.dir}>
-      <Button variant="outline" size="sm">
-        <BotIcon /> {t.copilot}
-      </Button>
-      <Popover>
-        <PopoverTrigger
-          render={
-            <Button
-              variant="outline"
-              size="icon-sm"
-              aria-label={t.openPopover}
-            />
-          }
-        >
-          <ChevronDownIcon />
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          dir={t.dir}
-          data-lang={lang}
-          className="p-0"
-        >
-          <div className="px-4 py-3">
-            <div className="text-sm font-medium">{t.agentTasks}</div>
-          </div>
-          <Separator />
-          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
-            <Textarea
-              placeholder={t.placeholder}
-              className="mb-4 resize-none"
-            />
-            <p className="font-medium">{t.startTask}</p>
-            <p className="text-muted-foreground">{t.description}</p>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </ButtonGroup>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/empty-avatar-group.tsx

@@ -1,78 +0,0 @@
-"use client"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-import { Button } from "@/examples/base/ui-rtl/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/examples/base/ui-rtl/empty"
-import { PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    title: "لا يوجد أعضاء في الفريق",
-    description: "قم بدعوة فريقك للتعاون في هذا المشروع.",
-    invite: "دعوة أعضاء",
-  },
-  he: {
-    dir: "rtl" as const,
-    title: "אין חברי צוות",
-    description: "הזמן את הצוות שלך לשתף פעולה בפרויקט זה.",
-    invite: "הזמן חברים",
-  },
-}
-
-export function EmptyAvatarGroup() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <Empty className="flex-none border py-10" dir={t.dir}>
-      <EmptyHeader>
-        <EmptyMedia>
-          <AvatarGroup className="grayscale">
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/maxleiter.png"
-                alt="@maxleiter"
-              />
-              <AvatarFallback>LR</AvatarFallback>
-            </Avatar>
-            <Avatar>
-              <AvatarImage
-                src="https://github.com/evilrabbit.png"
-                alt="@evilrabbit"
-              />
-              <AvatarFallback>ER</AvatarFallback>
-            </Avatar>
-          </AvatarGroup>
-        </EmptyMedia>
-        <EmptyTitle>{t.title}</EmptyTitle>
-        <EmptyDescription>{t.description}</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button size="sm">
-          <PlusIcon />
-          {t.invite}
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/field-checkbox.tsx

@@ -1,36 +0,0 @@
-"use client"
-
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    terms: "أوافق على الشروط والأحكام",
-  },
-  he: {
-    dir: "rtl" as const,
-    terms: "אני מסכים לתנאים וההגבלות",
-  },
-}
-
-export function FieldCheckbox() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const { dir, terms } = translations[lang]
-
-  return (
-    <div dir={dir}>
-      <FieldLabel htmlFor="checkbox-demo-rtl">
-        <Field orientation="horizontal">
-          <Checkbox id="checkbox-demo-rtl" defaultChecked />
-          <FieldLabel htmlFor="checkbox-demo-rtl" className="line-clamp-1">
-            {terms}
-          </FieldLabel>
-        </Field>
-      </FieldLabel>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/field-demo.tsx

@@ -1,217 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-} from "@/examples/base/ui-rtl/field"
-import { Input } from "@/examples/base/ui-rtl/input"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/examples/base/ui-rtl/select"
-import { Textarea } from "@/examples/base/ui-rtl/textarea"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    locale: "ar-SA",
-    paymentMethod: "طريقة الدفع",
-    secureEncrypted: "جميع المعاملات آمنة ومشفرة",
-    nameOnCard: "الاسم على البطاقة",
-    namePlaceholder: "أحمد محمد",
-    cardNumber: "رقم البطاقة",
-    cardDescription: "أدخل رقمك المكون من 16 رقمًا.",
-    cvv: "رمز الأمان",
-    month: "الشهر",
-    year: "السنة",
-    billingAddress: "عنوان الفواتير",
-    billingDescription: "عنوان الفواتير المرتبط بطريقة الدفع الخاصة بك",
-    sameAsShipping: "نفس عنوان الشحن",
-    comments: "تعليقات",
-    commentsPlaceholder: "أضف أي تعليقات إضافية",
-    submit: "إرسال",
-    cancel: "إلغاء",
-  },
-  he: {
-    dir: "rtl" as const,
-    locale: "he-IL",
-    paymentMethod: "אמצעי תשלום",
-    secureEncrypted: "כל העסקאות מאובטחות ומוצפנות",
-    nameOnCard: "שם על הכרטיס",
-    namePlaceholder: "ישראל ישראלי",
-    cardNumber: "מספר כרטיס",
-    cardDescription: "הזן את המספר בן 16 הספרות שלך.",
-    cvv: "קוד אבטחה",
-    month: "חודש",
-    year: "שנה",
-    billingAddress: "כתובת לחיוב",
-    billingDescription: "כתובת החיוב המשויכת לאמצעי התשלום שלך",
-    sameAsShipping: "זהה לכתובת המשלוח",
-    comments: "הערות",
-    commentsPlaceholder: "הוסף הערות נוספות",
-    submit: "שלח",
-    cancel: "ביטול",
-  },
-}
-
-function formatCardNumber(locale: string) {
-  const formatter = new Intl.NumberFormat(locale, { useGrouping: false })
-  return `${formatter.format(1234)} ${formatter.format(5678)} ${formatter.format(9012)} ${formatter.format(3456)}`
-}
-
-function formatCvv(locale: string) {
-  return new Intl.NumberFormat(locale, { useGrouping: false }).format(123)
-}
-
-function getMonths(locale: string) {
-  const formatter = new Intl.NumberFormat(locale, {
-    minimumIntegerDigits: 2,
-    useGrouping: false,
-  })
-  return Array.from({ length: 12 }, (_, i) => {
-    const value = String(i + 1).padStart(2, "0")
-    return { label: formatter.format(i + 1), value }
-  })
-}
-
-function getYears(locale: string) {
-  const formatter = new Intl.NumberFormat(locale, { useGrouping: false })
-  return Array.from({ length: 6 }, (_, i) => {
-    const year = 2024 + i
-    return { label: formatter.format(year), value: String(year) }
-  })
-}
-
-export function FieldDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const months = getMonths(t.locale)
-  const years = getYears(t.locale)
-  const cardPlaceholder = formatCardNumber(t.locale)
-  const cvvPlaceholder = formatCvv(t.locale)
-
-  return (
-    <div dir={t.dir} className="w-full max-w-md rounded-lg border p-6">
-      <form>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>{t.paymentMethod}</FieldLegend>
-            <FieldDescription>{t.secureEncrypted}</FieldDescription>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="rtl-card-name">{t.nameOnCard}</FieldLabel>
-                <Input
-                  id="rtl-card-name"
-                  placeholder={t.namePlaceholder}
-                  required
-                />
-              </Field>
-              <div className="grid grid-cols-3 gap-4">
-                <Field className="col-span-2">
-                  <FieldLabel htmlFor="rtl-card-number">
-                    {t.cardNumber}
-                  </FieldLabel>
-                  <Input
-                    id="rtl-card-number"
-                    placeholder={cardPlaceholder}
-                    required
-                  />
-                  <FieldDescription>{t.cardDescription}</FieldDescription>
-                </Field>
-                <Field className="col-span-1">
-                  <FieldLabel htmlFor="rtl-cvv">{t.cvv}</FieldLabel>
-                  <Input id="rtl-cvv" placeholder={cvvPlaceholder} required />
-                </Field>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="rtl-exp-month">{t.month}</FieldLabel>
-                  <Select defaultValue="" items={months}>
-                    <SelectTrigger id="rtl-exp-month">
-                      <SelectValue placeholder="MM" />
-                    </SelectTrigger>
-                    <SelectContent data-lang={lang} dir={t.dir}>
-                      <SelectGroup>
-                        {months.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="rtl-exp-year">{t.year}</FieldLabel>
-                  <Select defaultValue="" items={years}>
-                    <SelectTrigger id="rtl-exp-year">
-                      <SelectValue placeholder="YYYY" />
-                    </SelectTrigger>
-                    <SelectContent data-lang={lang} dir={t.dir}>
-                      <SelectGroup>
-                        {years.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldLegend>{t.billingAddress}</FieldLegend>
-            <FieldDescription>{t.billingDescription}</FieldDescription>
-            <FieldGroup>
-              <Field orientation="horizontal">
-                <Checkbox id="rtl-same-as-shipping" defaultChecked />
-                <FieldLabel
-                  htmlFor="rtl-same-as-shipping"
-                  className="font-normal"
-                >
-                  {t.sameAsShipping}
-                </FieldLabel>
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <FieldSet>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="rtl-comments">{t.comments}</FieldLabel>
-                <Textarea
-                  id="rtl-comments"
-                  placeholder={t.commentsPlaceholder}
-                  className="resize-none"
-                />
-              </Field>
-            </FieldGroup>
-          </FieldSet>
-          <Field orientation="horizontal">
-            <Button type="submit">{t.submit}</Button>
-            <Button variant="outline" type="button">
-              {t.cancel}
-            </Button>
-          </Field>
-        </FieldGroup>
-      </form>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/field-hear.tsx

@@ -1,90 +0,0 @@
-"use client"
-
-import { Card, CardContent } from "@/examples/base/ui-rtl/card"
-import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-  FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    legend: "كيف سمعت عنا؟",
-    description: "اختر الخيار الذي يصف أفضل طريقة سمعت عنا من خلالها.",
-    socialMedia: "التواصل الاجتماعي",
-    searchEngine: "البحث",
-    referral: "إحالة",
-    other: "أخرى",
-  },
-  he: {
-    dir: "rtl" as const,
-    legend: "איך שמעת עלינו?",
-    description: "בחר את האפשרות שמתארת בצורה הטובה ביותר כיצד שמעת עלינו.",
-    socialMedia: "חברתיות",
-    searchEngine: "חיפוש",
-    referral: "הפניה",
-    other: "אחר",
-  },
-}
-
-export function FieldHear() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  const options = [
-    { label: t.socialMedia, value: "social-media" },
-    { label: t.searchEngine, value: "search-engine" },
-    { label: t.referral, value: "referral" },
-    { label: t.other, value: "other" },
-  ]
-
-  return (
-    <div dir={t.dir}>
-      <Card className="border-0 py-4 shadow-none">
-        <CardContent className="px-4">
-          <form>
-            <FieldGroup>
-              <FieldSet className="gap-4">
-                <FieldLegend>{t.legend}</FieldLegend>
-                <FieldDescription className="line-clamp-1">
-                  {t.description}
-                </FieldDescription>
-                <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
-                  {options.map((option) => (
-                    <FieldLabel
-                      htmlFor={`rtl-${option.value}`}
-                      key={option.value}
-                      className="w-fit!"
-                    >
-                      <Field
-                        orientation="horizontal"
-                        className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
-                      >
-                        <Checkbox
-                          value={option.value}
-                          id={`rtl-${option.value}`}
-                          defaultChecked={option.value === "social-media"}
-                          className="-ms-6 translate-x-1 rounded-full transition-all duration-100 ease-linear data-checked:ms-0 data-checked:translate-x-0"
-                        />
-                        <FieldTitle>{option.label}</FieldTitle>
-                      </Field>
-                    </FieldLabel>
-                  ))}
-                </FieldGroup>
-              </FieldSet>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/field-slider.tsx

@@ -1,67 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import {
-  Field,
-  FieldDescription,
-  FieldTitle,
-} from "@/examples/base/ui-rtl/field"
-import { Slider } from "@/examples/base/ui-rtl/slider"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    locale: "ar-SA",
-    title: "نطاق السعر",
-    description: "حدد نطاق ميزانيتك",
-    ariaLabel: "نطاق السعر",
-    currency: "﷼",
-  },
-  he: {
-    dir: "rtl" as const,
-    locale: "he-IL",
-    title: "טווח מחירים",
-    description: "הגדר את טווח התקציב שלך",
-    ariaLabel: "טווח מחירים",
-    currency: "₪",
-  },
-}
-
-function formatNumber(value: number, locale: string) {
-  return new Intl.NumberFormat(locale).format(value)
-}
-
-export function FieldSlider() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [value, setValue] = useState([200, 800])
-
-  return (
-    <Field dir={t.dir}>
-      <FieldTitle>{t.title}</FieldTitle>
-      <FieldDescription>
-        {t.description} ({t.currency}
-        <span className="font-medium tabular-nums">
-          {formatNumber(value[0], t.locale)}
-        </span>{" "}
-        -{" "}
-        <span className="font-medium tabular-nums">
-          {formatNumber(value[1], t.locale)}
-        </span>
-        ).
-      </FieldDescription>
-      <Slider
-        value={value}
-        onValueChange={(value) => setValue(value as [number, number])}
-        max={1000}
-        min={0}
-        step={10}
-        className="mt-2 w-full"
-        aria-label={t.ariaLabel}
-      />
-    </Field>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/index.tsx

@@ -1,92 +0,0 @@
-"use client"
-
-import { DirectionProvider } from "@/examples/base/ui-rtl/direction"
-import { FieldSeparator } from "@/examples/base/ui-rtl/field"
-
-import {
-  LanguageProvider,
-  LanguageSelector,
-  useLanguageContext,
-} from "@/components/language-selector"
-
-import { AppearanceSettings } from "./appearance-settings"
-import { ButtonGroupDemo } from "./button-group-demo"
-import { ButtonGroupInputGroup } from "./button-group-input-group"
-import { ButtonGroupNested } from "./button-group-nested"
-import { ButtonGroupPopover } from "./button-group-popover"
-import { EmptyAvatarGroup } from "./empty-avatar-group"
-import { FieldCheckbox } from "./field-checkbox"
-import { FieldDemo } from "./field-demo"
-import { FieldHear } from "./field-hear"
-import { FieldSlider } from "./field-slider"
-import { InputGroupButtonExample } from "./input-group-button"
-import { InputGroupDemo } from "./input-group-demo"
-import { ItemDemo } from "./item-demo"
-import { NotionPromptForm } from "./notion-prompt-form"
-import { SpinnerBadge } from "./spinner-badge"
-import { SpinnerEmpty } from "./spinner-empty"
-
-function RtlComponentsContent() {
-  const context = useLanguageContext()
-
-  if (!context) {
-    return null
-  }
-
-  const { language } = context
-
-  return (
-    <div
-      className="relative grid gap-8 p-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8"
-      dir="rtl"
-      data-lang={language}
-      data-slot="rtl-components"
-    >
-      <LanguageSelector
-        value={language}
-        onValueChange={context.setLanguage}
-        className="absolute -top-12 right-52 hidden h-8! data-[size=sm]:rounded-lg lg:flex"
-        languages={["ar", "he"]}
-      />
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <FieldDemo />
-      </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <EmptyAvatarGroup />
-        <SpinnerBadge />
-        <ButtonGroupInputGroup />
-        <FieldSlider />
-        <InputGroupDemo />
-      </div>
-      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
-        <InputGroupButtonExample />
-        <ItemDemo />
-        <FieldSeparator className="my-4">
-          {language === "he" ? "הגדרות מראה" : "إعدادات المظهر"}
-        </FieldSeparator>
-        <AppearanceSettings />
-      </div>
-      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
-        <NotionPromptForm />
-        <ButtonGroupDemo />
-        <FieldCheckbox />
-        <div className="flex justify-between gap-4">
-          <ButtonGroupNested />
-          <ButtonGroupPopover />
-        </div>
-        <FieldHear />
-        <SpinnerEmpty />
-      </div>
-    </div>
-  )
-}
-
-export function RtlComponents() {
-  return (
-    <LanguageProvider defaultLanguage="ar">
-      <DirectionProvider direction="rtl">
-        <RtlComponentsContent />
-      </DirectionProvider>
-    </LanguageProvider>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx

@@ -1,97 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/examples/base/ui-rtl/input-group"
-import { Label } from "@/examples/base/ui-rtl/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/examples/base/ui-rtl/popover"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    inputLabel: "السعر",
-    info: "معلومات",
-    priceInfo: "أدخل السعر بالريال السعودي.",
-    priceDescription: "سيتم تحويل السعر تلقائياً.",
-    favorite: "مفضل",
-    currency: "ر.س",
-  },
-  he: {
-    dir: "rtl" as const,
-    inputLabel: "מחיר",
-    info: "מידע",
-    priceInfo: "הזן את המחיר בשקלים.",
-    priceDescription: "המחיר יומר אוטומטית.",
-    favorite: "מועדף",
-    currency: "₪",
-  },
-}
-
-export function InputGroupButtonExample() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-  const [isFavorite, setIsFavorite] = React.useState(false)
-
-  return (
-    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
-      <Label htmlFor="input-secure-rtl" className="sr-only">
-        {t.inputLabel}
-      </Label>
-      <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-rtl" className="pr-0.5!" />
-        <InputGroupAddon>
-          <Popover>
-            <PopoverTrigger
-              render={
-                <InputGroupButton
-                  variant="secondary"
-                  size="icon-xs"
-                  aria-label={t.info}
-                />
-              }
-            >
-              <IconInfoCircle />
-            </PopoverTrigger>
-            <PopoverContent
-              align="end"
-              alignOffset={10}
-              className="flex flex-col gap-1 rounded-xl text-sm"
-              data-lang={lang}
-              dir={t.dir}
-            >
-              <p className="font-medium">{t.priceInfo}</p>
-              <p>{t.priceDescription}</p>
-            </PopoverContent>
-          </Popover>
-        </InputGroupAddon>
-        <InputGroupAddon className="text-muted-foreground">
-          {t.currency}
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            onClick={() => setIsFavorite(!isFavorite)}
-            size="icon-xs"
-            aria-label={t.favorite}
-          >
-            <IconStar
-              data-favorite={isFavorite}
-              className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
-            />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx

@@ -1,140 +0,0 @@
-"use client"
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/examples/base/ui-rtl/input-group"
-import { Separator } from "@/examples/base/ui-rtl/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import {
-  IconCheck,
-  IconChevronDown,
-  IconInfoCircle,
-  IconPlus,
-} from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    search: "بحث...",
-    results: "12 نتيجة",
-    example: "example.com",
-    tooltipContent: "هذا محتوى في تلميح.",
-    askSearchChat: "اسأل، ابحث أو تحدث...",
-    add: "إضافة",
-    auto: "تلقائي",
-    agent: "وكيل",
-    manual: "يدوي",
-    used: "52% مستخدم",
-    send: "إرسال",
-  },
-  he: {
-    dir: "rtl" as const,
-    search: "חיפוש...",
-    results: "12 תוצאות",
-    example: "example.com",
-    tooltipContent: "זה תוכן בטולטיפ.",
-    askSearchChat: "שאל, חפש או שוחח...",
-    add: "הוסף",
-    auto: "אוטומטי",
-    agent: "סוכן",
-    manual: "ידני",
-    used: "52% בשימוש",
-    send: "שלח",
-  },
-}
-
-export function InputGroupDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <div dir={t.dir} className="grid w-full max-w-sm gap-6">
-      <InputGroup>
-        <InputGroupInput placeholder={t.search} />
-        <InputGroupAddon>
-          <Search />
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">{t.results}</InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder={t.example} />
-        <InputGroupAddon align="inline-end">
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <InputGroupButton
-                  className="rounded-full"
-                  size="icon-xs"
-                  aria-label={t.add}
-                />
-              }
-            >
-              <IconInfoCircle />
-            </TooltipTrigger>
-            <TooltipContent>{t.tooltipContent}</TooltipContent>
-          </Tooltip>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupTextarea placeholder={t.askSearchChat} />
-        <InputGroupAddon align="block-end">
-          <InputGroupButton
-            variant="outline"
-            className="rounded-full"
-            size="icon-xs"
-            aria-label={t.add}
-          >
-            <IconPlus />
-          </InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger render={<InputGroupButton variant="ghost" />}>
-              <IconChevronDown />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side="top" align="start">
-              <DropdownMenuItem>{t.auto}</DropdownMenuItem>
-              <DropdownMenuItem>{t.agent}</DropdownMenuItem>
-              <DropdownMenuItem>{t.manual}</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <InputGroupText className="ms-auto">{t.used}</InputGroupText>
-          <Separator orientation="vertical" className="h-4!" />
-          <InputGroupButton
-            variant="default"
-            className="rounded-full"
-            size="icon-xs"
-          >
-            <ArrowUpIcon />
-            <span className="sr-only">{t.send}</span>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="shadcn" />
-        <InputGroupAddon align="inline-end">
-          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
-            <IconCheck className="size-3 text-white" />
-          </div>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/item-demo.tsx

@@ -1,64 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/examples/base/ui-rtl/item"
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    twoFactor: "المصادقة الثنائية",
-    twoFactorDescription: "التحقق عبر البريد الإلكتروني أو رقم الهاتف.",
-    enable: "تفعيل",
-    verified: "تم التحقق من ملفك الشخصي.",
-  },
-  he: {
-    dir: "rtl" as const,
-    twoFactor: "אימות דו-שלבי",
-    twoFactorDescription: "אמת באמצעות אימייל או מספר טלפון.",
-    enable: "הפעל",
-    verified: "הפרופיל שלך אומת.",
-  },
-}
-
-export function ItemDemo() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <div dir={t.dir} className="flex w-full max-w-md flex-col gap-6">
-      <Item variant="outline">
-        <ItemContent>
-          <ItemTitle>{t.twoFactor}</ItemTitle>
-          <ItemDescription className="text-pretty xl:hidden 2xl:block">
-            {t.twoFactorDescription}
-          </ItemDescription>
-        </ItemContent>
-        <ItemActions>
-          <Button size="sm">{t.enable}</Button>
-        </ItemActions>
-      </Item>
-      <Item variant="outline" size="sm">
-        <ItemMedia>
-          <BadgeCheckIcon className="size-5" />
-        </ItemMedia>
-        <ItemContent>
-          <ItemTitle>{t.verified}</ItemTitle>
-        </ItemContent>
-        <ItemActions>
-          <ChevronRightIcon className="size-4 rtl:rotate-180" />
-        </ItemActions>
-      </Item>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx

@@ -1,516 +0,0 @@
-"use client"
-
-import { useMemo, useState } from "react"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/examples/base/ui-rtl/avatar"
-import { Badge } from "@/examples/base/ui-rtl/badge"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/examples/base/ui-rtl/command"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui-rtl/dropdown-menu"
-import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/examples/base/ui-rtl/input-group"
-import { Popover, PopoverContent } from "@/examples/base/ui-rtl/popover"
-import { Switch } from "@/examples/base/ui-rtl/switch"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui-rtl/tooltip"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    prompt: "الأمر",
-    placeholder: "اسأل، ابحث، أو أنشئ أي شيء...",
-    addContext: "أضف سياق",
-    mentionTooltip: "اذكر شخصًا أو صفحة أو تاريخًا",
-    searchPages: "البحث في الصفحات...",
-    noPagesFound: "لم يتم العثور على صفحات",
-    pages: "الصفحات",
-    users: "المستخدمون",
-    attachFile: "إرفاق ملف",
-    selectModel: "اختر نموذج الذكاء الاصطناعي",
-    selectAgentMode: "اختر وضع الوكيل",
-    webSearch: "البحث على الويب",
-    appsIntegrations: "التطبيقات والتكاملات",
-    allSourcesAccess: "جميع المصادر التي يمكنني الوصول إليها",
-    findKnowledge: "ابحث أو استخدم المعرفة في...",
-    noKnowledgeFound: "لم يتم العثور على معرفة",
-    helpCenter: "مركز المساعدة",
-    connectApps: "ربط التطبيقات",
-    searchSourcesNote: "سنبحث فقط في المصادر المحددة هنا.",
-    send: "إرسال",
-    allSources: "جميع المصادر",
-    auto: "تلقائي",
-    agentMode: "وضع الوكيل",
-    planMode: "وضع التخطيط",
-    beta: "تجريبي",
-    workspace: "مساحة العمل",
-    meetingNotes: "ملاحظات الاجتماع",
-    projectDashboard: "لوحة المشروع",
-    ideasBrainstorming: "أفكار وعصف ذهني",
-    calendarEvents: "التقويم والأحداث",
-    documentation: "التوثيق",
-    goalsObjectives: "الأهداف والغايات",
-    budgetPlanning: "تخطيط الميزانية",
-    teamDirectory: "دليل الفريق",
-    technicalSpecs: "المواصفات التقنية",
-    analyticsReport: "تقرير التحليلات",
-  },
-  he: {
-    dir: "rtl" as const,
-    prompt: "פקודה",
-    placeholder: "שאל, חפש, או צור משהו...",
-    addContext: "הוסף הקשר",
-    mentionTooltip: "הזכר אדם, עמוד או תאריך",
-    searchPages: "חפש עמודים...",
-    noPagesFound: "לא נמצאו עמודים",
-    pages: "עמודים",
-    users: "משתמשים",
-    attachFile: "צרף קובץ",
-    selectModel: "בחר מודל AI",
-    selectAgentMode: "בחר מצב סוכן",
-    webSearch: "חיפוש באינטרנט",
-    appsIntegrations: "אפליקציות ואינטגרציות",
-    allSourcesAccess: "כל המקורות שיש לי גישה אליהם",
-    findKnowledge: "מצא או השתמש בידע ב...",
-    noKnowledgeFound: "לא נמצא ידע",
-    helpCenter: "מרכז עזרה",
-    connectApps: "חבר אפליקציות",
-    searchSourcesNote: "נחפש רק במקורות שנבחרו כאן.",
-    send: "שלח",
-    allSources: "כל המקורות",
-    auto: "אוטומטי",
-    agentMode: "מצב סוכן",
-    planMode: "מצב תכנון",
-    beta: "בטא",
-    workspace: "סביבת עבודה",
-    meetingNotes: "הערות פגישה",
-    projectDashboard: "לוח מחוונים לפרויקט",
-    ideasBrainstorming: "רעיונות וסיעור מוחות",
-    calendarEvents: "יומן ואירועים",
-    documentation: "תיעוד",
-    goalsObjectives: "מטרות ויעדים",
-    budgetPlanning: "תכנון תקציב",
-    teamDirectory: "ספריית צוות",
-    technicalSpecs: "מפרט טכני",
-    analyticsReport: "דוח אנליטיקה",
-  },
-}
-
-function MentionableIcon({
-  item,
-}: {
-  item: { type: string; title: string; image: string }
-}) {
-  return item.type === "page" ? (
-    <span className="flex size-4 items-center justify-center">
-      {item.image}
-    </span>
-  ) : (
-    <Avatar className="size-4">
-      <AvatarImage src={item.image} />
-      <AvatarFallback>{item.title[0]}</AvatarFallback>
-    </Avatar>
-  )
-}
-
-export function NotionPromptForm() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  const SAMPLE_DATA = useMemo(
-    () => ({
-      mentionable: [
-        { type: "page", title: t.meetingNotes, image: "📝" },
-        { type: "page", title: t.projectDashboard, image: "📊" },
-        { type: "page", title: t.ideasBrainstorming, image: "💡" },
-        { type: "page", title: t.calendarEvents, image: "📅" },
-        { type: "page", title: t.documentation, image: "📚" },
-        { type: "page", title: t.goalsObjectives, image: "🎯" },
-        { type: "page", title: t.budgetPlanning, image: "💰" },
-        { type: "page", title: t.teamDirectory, image: "👥" },
-        { type: "page", title: t.technicalSpecs, image: "🔧" },
-        { type: "page", title: t.analyticsReport, image: "📈" },
-        {
-          type: "user",
-          title: "shadcn",
-          image: "https://github.com/shadcn.png",
-          workspace: t.workspace,
-        },
-        {
-          type: "user",
-          title: "maxleiter",
-          image: "https://github.com/maxleiter.png",
-          workspace: t.workspace,
-        },
-        {
-          type: "user",
-          title: "evilrabbit",
-          image: "https://github.com/evilrabbit.png",
-          workspace: t.workspace,
-        },
-      ],
-      models: [
-        { name: t.auto },
-        { name: t.agentMode, badge: t.beta },
-        { name: t.planMode },
-      ],
-    }),
-    [t]
-  )
-
-  const [mentions, setMentions] = useState<string[]>([])
-  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
-  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
-  const [selectedModel, setSelectedModel] = useState<
-    (typeof SAMPLE_DATA.models)[0]
-  >(SAMPLE_DATA.models[0])
-  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
-
-  const grouped = useMemo(() => {
-    return SAMPLE_DATA.mentionable.reduce(
-      (acc, item) => {
-        const isAvailable = !mentions.includes(item.title)
-
-        if (isAvailable) {
-          if (!acc[item.type]) {
-            acc[item.type] = []
-          }
-          acc[item.type].push(item)
-        }
-        return acc
-      },
-      {} as Record<string, typeof SAMPLE_DATA.mentionable>
-    )
-  }, [mentions, SAMPLE_DATA])
-
-  const hasMentions = mentions.length > 0
-
-  return (
-    <div dir={t.dir}>
-      <form>
-        <Field>
-          <FieldLabel htmlFor="rtl-notion-prompt" className="sr-only">
-            {t.prompt}
-          </FieldLabel>
-          <InputGroup>
-            <InputGroupTextarea
-              id="rtl-notion-prompt"
-              placeholder={t.placeholder}
-            />
-            <InputGroupAddon align="block-start">
-              <Popover
-                open={mentionPopoverOpen}
-                onOpenChange={setMentionPopoverOpen}
-              >
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <InputGroupButton
-                        variant="outline"
-                        size={!hasMentions ? "sm" : "icon-sm"}
-                        className="rounded-full transition-transform"
-                      />
-                    }
-                    onFocusCapture={(e) => e.stopPropagation()}
-                  >
-                    <IconAt /> {!hasMentions && t.addContext}
-                  </TooltipTrigger>
-                  <TooltipContent>{t.mentionTooltip}</TooltipContent>
-                </Tooltip>
-                <PopoverContent className="p-0" align="start" dir={t.dir}>
-                  <Command>
-                    <CommandInput placeholder={t.searchPages} />
-                    <CommandList>
-                      <CommandEmpty>{t.noPagesFound}</CommandEmpty>
-                      {Object.entries(grouped).map(([type, items]) => (
-                        <CommandGroup
-                          key={type}
-                          heading={type === "page" ? t.pages : t.users}
-                        >
-                          {items.map((item) => (
-                            <CommandItem
-                              key={item.title}
-                              value={item.title}
-                              onSelect={(currentValue) => {
-                                setMentions((prev) => [...prev, currentValue])
-                                setMentionPopoverOpen(false)
-                              }}
-                            >
-                              <MentionableIcon item={item} />
-                              {item.title}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      ))}
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
-                {mentions.map((mention) => {
-                  const item = SAMPLE_DATA.mentionable.find(
-                    (item) => item.title === mention
-                  )
-
-                  if (!item) {
-                    return null
-                  }
-
-                  return (
-                    <InputGroupButton
-                      key={mention}
-                      size="sm"
-                      variant="secondary"
-                      className="rounded-full pr-2!"
-                      onClick={() => {
-                        setMentions((prev) => prev.filter((m) => m !== mention))
-                      }}
-                    >
-                      <MentionableIcon item={item} />
-                      {item.title}
-                      <IconX />
-                    </InputGroupButton>
-                  )
-                })}
-              </div>
-            </InputGroupAddon>
-            <InputGroupAddon align="block-end" className="gap-1">
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <InputGroupButton
-                      size="icon-sm"
-                      className="rounded-full"
-                      aria-label={t.attachFile}
-                    />
-                  }
-                >
-                  <IconPaperclip />
-                </TooltipTrigger>
-                <TooltipContent>{t.attachFile}</TooltipContent>
-              </Tooltip>
-              <DropdownMenu
-                open={modelPopoverOpen}
-                onOpenChange={setModelPopoverOpen}
-              >
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <InputGroupButton size="sm" className="rounded-full" />
-                    }
-                  >
-                    {selectedModel.name}
-                  </TooltipTrigger>
-                  <TooltipContent>{t.selectModel}</TooltipContent>
-                </Tooltip>
-                <DropdownMenuContent
-                  side="top"
-                  align="start"
-                  className="w-48"
-                  dir={t.dir}
-                >
-                  <DropdownMenuGroup className="w-48">
-                    <DropdownMenuLabel className="text-xs text-muted-foreground">
-                      {t.selectAgentMode}
-                    </DropdownMenuLabel>
-                    {SAMPLE_DATA.models.map((model) => (
-                      <DropdownMenuCheckboxItem
-                        key={model.name}
-                        checked={model.name === selectedModel.name}
-                        onCheckedChange={(checked) => {
-                          if (checked) {
-                            setSelectedModel(model)
-                          }
-                        }}
-                        className="pr-2 *:[span:first-child]:right-auto *:[span:first-child]:left-2"
-                      >
-                        {model.name}
-                        {model.badge && (
-                          <Badge
-                            variant="secondary"
-                            className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
-                          >
-                            {model.badge}
-                          </Badge>
-                        )}
-                      </DropdownMenuCheckboxItem>
-                    ))}
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <DropdownMenu
-                open={scopeMenuOpen}
-                onOpenChange={setScopeMenuOpen}
-              >
-                <DropdownMenuTrigger
-                  render={
-                    <InputGroupButton size="sm" className="rounded-full" />
-                  }
-                >
-                  <IconWorld /> {t.allSources}
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  side="top"
-                  align="end"
-                  className="w-72"
-                  dir={t.dir}
-                >
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem
-                      render={
-                        <label htmlFor="rtl-web-search">
-                          <IconWorld /> {t.webSearch}{" "}
-                          <Switch
-                            id="rtl-web-search"
-                            className="ms-auto"
-                            defaultChecked
-                            size="sm"
-                          />
-                        </label>
-                      }
-                      onSelect={(e) => e.preventDefault()}
-                    ></DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem
-                      render={
-                        <label htmlFor="rtl-apps">
-                          <IconApps /> {t.appsIntegrations}
-                          <Switch
-                            id="rtl-apps"
-                            className="ms-auto"
-                            defaultChecked
-                            size="sm"
-                          />
-                        </label>
-                      }
-                      onSelect={(e) => e.preventDefault()}
-                    ></DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconCircleDashedPlus /> {t.allSourcesAccess}
-                    </DropdownMenuItem>
-                    <DropdownMenuSub>
-                      <DropdownMenuSubTrigger>
-                        <Avatar className="size-4">
-                          <AvatarImage src="https://github.com/shadcn.png" />
-                          <AvatarFallback>CN</AvatarFallback>
-                        </Avatar>
-                        shadcn
-                      </DropdownMenuSubTrigger>
-                      <DropdownMenuSubContent
-                        className="w-72 rounded-lg p-0"
-                        dir={t.dir}
-                        side="left"
-                      >
-                        <Command>
-                          <CommandInput
-                            placeholder={t.findKnowledge}
-                            autoFocus
-                          />
-                          <CommandList>
-                            <CommandEmpty>{t.noKnowledgeFound}</CommandEmpty>
-                            <CommandGroup>
-                              {SAMPLE_DATA.mentionable
-                                .filter((item) => item.type === "user")
-                                .map((user) => (
-                                  <CommandItem
-                                    key={user.title}
-                                    value={user.title}
-                                    onSelect={() => {
-                                      console.log("Selected user:", user.title)
-                                    }}
-                                  >
-                                    <Avatar className="size-4">
-                                      <AvatarImage src={user.image} />
-                                      <AvatarFallback>
-                                        {user.title[0]}
-                                      </AvatarFallback>
-                                    </Avatar>
-                                    {user.title}{" "}
-                                    <span className="text-muted-foreground">
-                                      -{" "}
-                                      {
-                                        (user as { workspace?: string })
-                                          .workspace
-                                      }
-                                    </span>
-                                  </CommandItem>
-                                ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuSub>
-                    <DropdownMenuItem>
-                      <IconBook /> {t.helpCenter}
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem>
-                      <IconPlus /> {t.connectApps}
-                    </DropdownMenuItem>
-                    <DropdownMenuLabel className="text-xs text-muted-foreground">
-                      {t.searchSourcesNote}
-                    </DropdownMenuLabel>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <InputGroupButton
-                aria-label={t.send}
-                className="ms-auto rounded-full"
-                variant="default"
-                size="icon-sm"
-              >
-                <IconArrowUp />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-      </form>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/spinner-badge.tsx

@@ -1,44 +0,0 @@
-"use client"
-
-import { Badge } from "@/examples/base/ui-rtl/badge"
-import { Spinner } from "@/examples/base/ui-rtl/spinner"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    syncing: "جارٍ المزامنة",
-    updating: "جارٍ التحديث",
-    loading: "جارٍ التحميل",
-  },
-  he: {
-    dir: "rtl" as const,
-    syncing: "מסנכרן",
-    updating: "מעדכן",
-    loading: "טוען",
-  },
-}
-
-export function SpinnerBadge() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <div dir={t.dir} className="flex items-center gap-2">
-      <Badge>
-        <Spinner />
-        {t.syncing}
-      </Badge>
-      <Badge variant="secondary">
-        <Spinner />
-        {t.updating}
-      </Badge>
-      <Badge variant="outline">
-        <Spinner />
-        {t.loading}
-      </Badge>
-    </div>
-  )
-}

apps/v4/app/(app)/examples/rtl/components/spinner-empty.tsx

@@ -1,52 +0,0 @@
-"use client"
-
-import { Button } from "@/examples/base/ui-rtl/button"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/examples/base/ui-rtl/empty"
-import { Spinner } from "@/examples/base/ui-rtl/spinner"
-
-import { useLanguageContext } from "@/components/language-selector"
-
-const translations = {
-  ar: {
-    dir: "rtl" as const,
-    title: "جارٍ معالجة طلبك",
-    description: "يرجى الانتظار بينما نعالج طلبك. لا تقم بتحديث الصفحة.",
-    cancel: "إلغاء",
-  },
-  he: {
-    dir: "rtl" as const,
-    title: "מעבד את הבקשה שלך",
-    description: "אנא המתן בזמן שאנו מעבדים את בקשתך. אל תרענן את הדף.",
-    cancel: "ביטול",
-  },
-}
-
-export function SpinnerEmpty() {
-  const context = useLanguageContext()
-  const lang = context?.language === "he" ? "he" : "ar"
-  const t = translations[lang]
-
-  return (
-    <Empty className="w-full border md:p-6" dir={t.dir}>
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Spinner />
-        </EmptyMedia>
-        <EmptyTitle>{t.title}</EmptyTitle>
-        <EmptyDescription>{t.description}</EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button variant="outline" size="sm">
-          {t.cancel}
-        </Button>
-      </EmptyContent>
-    </Empty>
-  )
-}

apps/v4/app/(app)/examples/rtl/page.tsx

@@ -1,14 +0,0 @@
-import { type Metadata } from "next"
-
-import { RtlComponents } from "./components"
-
-export const metadata: Metadata = {
-  title: "RTL",
-  description: "RTL example page with right-to-left language support.",
-}
-
-export function RtlPage() {
-  return <RtlComponents />
-}
-
-export default RtlPage

apps/v4/app/(app)/examples/tasks/components/data-table.tsx

@@ -1,131 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  flexRender,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-  type ColumnDef,
-  type ColumnFiltersState,
-  type SortingState,
-  type VisibilityState,
-} from "@tanstack/react-table"
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/new-york-v4/ui/table"
-
-import { DataTablePagination } from "./data-table-pagination"
-import { DataTableToolbar } from "./data-table-toolbar"
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-}: DataTableProps<TData, TValue>) {
-  const [rowSelection, setRowSelection] = React.useState({})
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [sorting, setSorting] = React.useState<SortingState>([])
-
-  const table = useReactTable({
-    data,
-    columns,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection,
-      columnFilters,
-    },
-    initialState: {
-      pagination: {
-        pageSize: 25,
-      },
-    },
-    enableRowSelection: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-  })
-
-  return (
-    <div className="flex flex-col gap-4">
-      <DataTableToolbar table={table} />
-      <div className="overflow-hidden rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id} colSpan={header.colSpan}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map((row) => (
-                <TableRow
-                  key={row.id}
-                  data-state={row.getIsSelected() && "selected"}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-      <DataTablePagination table={table} />
-    </div>
-  )
-}

apps/v4/app/(app)/examples/tasks/components/user-nav.tsx

@@ -1,62 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/new-york-v4/ui/avatar"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuTrigger,
-} from "@/registry/new-york-v4/ui/dropdown-menu"
-
-export function UserNav() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-          <Avatar className="h-9 w-9">
-            <AvatarImage src="/avatars/03.png" alt="@shadcn" />
-            <AvatarFallback>SC</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="end" forceMount>
-        <DropdownMenuLabel className="font-normal">
-          <div className="flex flex-col space-y-1">
-            <p className="text-sm leading-none font-medium">shadcn</p>
-            <p className="text-xs leading-none text-muted-foreground">
-              m@example.com
-            </p>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            Profile
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Billing
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Settings
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>New Team</DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Log out
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

apps/v4/app/(app)/examples/tasks/page.tsx

@@ -1,67 +0,0 @@
-import { promises as fs } from "fs"
-import path from "path"
-import { type Metadata } from "next"
-import Image from "next/image"
-import { z } from "zod"
-
-import { columns } from "./components/columns"
-import { DataTable } from "./components/data-table"
-import { UserNav } from "./components/user-nav"
-import { taskSchema } from "./data/schema"
-
-export const metadata: Metadata = {
-  title: "Tasks",
-  description: "A task and issue tracker build using Tanstack Table.",
-}
-
-// Simulate a database read for tasks.
-async function getTasks() {
-  const data = await fs.readFile(
-    path.join(process.cwd(), "app/(app)/examples/tasks/data/tasks.json")
-  )
-
-  const tasks = JSON.parse(data.toString())
-
-  return z.array(taskSchema).parse(tasks)
-}
-
-export default async function TaskPage() {
-  const tasks = await getTasks()
-
-  return (
-    <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/tasks-light.png"
-          width={1280}
-          height={998}
-          alt="Playground"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/tasks-dark.png"
-          width={1280}
-          height={998}
-          alt="Playground"
-          className="hidden dark:block"
-        />
-      </div>
-      <div className="hidden h-full flex-1 flex-col gap-8 p-8 md:flex">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex flex-col gap-1">
-            <h2 className="text-2xl font-semibold tracking-tight">
-              Welcome back!
-            </h2>
-            <p className="text-muted-foreground">
-              Here&apos;s a list of your tasks for this month.
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <UserNav />
-          </div>
-        </div>
-        <DataTable data={tasks} columns={columns} />
-      </div>
-    </>
-  )
-}

apps/v4/app/(app)/layout.tsx

@@ -1,15 +0,0 @@
-import { SiteFooter } from "@/components/site-footer"
-import { SiteHeader } from "@/components/site-header"
-
-export default function AppLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      data-slot="layout"
-      className="relative z-10 flex min-h-svh flex-col bg-background"
-    >
-      <SiteHeader />
-      <main className="flex flex-1 flex-col">{children}</main>
-      <SiteFooter />
-    </div>
-  )
-}

apps/v4/app/(app)/llm/[[...slug]]/route.ts

@@ -1,51 +0,0 @@
-import { notFound } from "next/navigation"
-import { NextResponse, type NextRequest } from "next/server"
-
-import { processMdxForLLMs } from "@/lib/llm"
-import { source } from "@/lib/source"
-import { getActiveStyle, type Style } from "@/registry/_legacy-styles"
-
-export const revalidate = false
-
-function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: string) {
-  // Detect base from URL: /docs/components/base/... or /docs/components/radix/...
-  if (slug && slug[0] === "components" && slug[1]) {
-    if (slug[1] === "base") {
-      return "base-nova"
-    }
-    if (slug[1] === "radix") {
-      return "new-york-v4"
-    }
-  }
-  return fallbackStyle
-}
-
-export async function GET(
-  _req: NextRequest,
-  { params }: { params: Promise<{ slug?: string[] }> }
-) {
-  const [{ slug }, activeStyle] = await Promise.all([params, getActiveStyle()])
-
-  const page = source.getPage(slug)
-
-  if (!page) {
-    notFound()
-  }
-
-  const effectiveStyle = getStyleFromSlug(slug, activeStyle.name)
-
-  const processedContent = processMdxForLLMs(
-    await page.data.getText("raw"),
-    effectiveStyle as Style["name"]
-  )
-
-  return new NextResponse(processedContent, {
-    headers: {
-      "Content-Type": "text/markdown; charset=utf-8",
-    },
-  })
-}
-
-export function generateStaticParams() {
-  return source.generateParams()
-}

apps/v4/app/(app)/themes/layout.tsx

@@ -1,64 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Pick a Color. Make it yours."
-const description =
-  "Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ThemesLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#themes">Browse Themes</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/theming">Documentation</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      {children}
-    </div>
-  )
-}

apps/v4/app/(app)/themes/page.tsx

@@ -1,22 +0,0 @@
-import { CardsDemo } from "@/components/cards"
-import { ThemeCustomizer } from "@/components/theme-customizer"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export default function ThemesPage() {
-  return (
-    <>
-      <div id="themes" className="container-wrapper scroll-mt-20">
-        <div className="container flex items-center justify-between gap-8 px-6 py-4 md:px-8">
-          <ThemeCustomizer />
-        </div>
-      </div>
-      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
-        <div className="container flex flex-1 flex-col theme-container">
-          <CardsDemo />
-        </div>
-      </div>
-    </>
-  )
-}

apps/v4/app/(create)/components/accent-picker.tsx

@@ -1,104 +0,0 @@
-"use client"
-
-import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
-import { LockButton } from "@/app/(create)/components/lock-button"
-import {
-  Picker,
-  PickerContent,
-  PickerGroup,
-  PickerRadioGroup,
-  PickerRadioItem,
-  PickerTrigger,
-} from "@/app/(create)/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-export function MenuAccentPicker({
-  isMobile,
-  anchorRef,
-}: {
-  isMobile: boolean
-  anchorRef: React.RefObject<HTMLDivElement | null>
-}) {
-  const [params, setParams] = useDesignSystemSearchParams()
-
-  const currentAccent = MENU_ACCENTS.find(
-    (accent) => accent.value === params.menuAccent
-  )
-
-  return (
-    <div className="group/picker relative pr-3 md:pr-0">
-      <Picker>
-        <PickerTrigger>
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-xs text-muted-foreground">Menu Accent</div>
-            <div className="text-sm font-medium text-foreground">
-              {currentAccent?.label}
-            </div>
-          </div>
-          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="128"
-              height="128"
-              viewBox="0 0 24 24"
-              fill="none"
-              className="size-4 text-foreground"
-            >
-              <path
-                d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                data-accent={currentAccent?.value}
-                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
-              ></path>
-              <path
-                d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                data-accent={currentAccent?.value}
-                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
-              ></path>
-            </svg>
-          </div>
-        </PickerTrigger>
-        <PickerContent
-          anchor={isMobile ? anchorRef : undefined}
-          side={isMobile ? "top" : "right"}
-          align={isMobile ? "center" : "start"}
-        >
-          <PickerRadioGroup
-            value={currentAccent?.value}
-            onValueChange={(value) => {
-              setParams({ menuAccent: value as MenuAccentValue })
-            }}
-          >
-            <PickerGroup>
-              {MENU_ACCENTS.map((accent) => (
-                <PickerRadioItem
-                  key={accent.value}
-                  value={accent.value}
-                  closeOnClick={isMobile}
-                  disabled={
-                    accent.value === "bold" &&
-                    (params.menuColor === "default-translucent" ||
-                      params.menuColor === "inverted-translucent")
-                  }
-                >
-                  {accent.label}
-                </PickerRadioItem>
-              ))}
-            </PickerGroup>
-          </PickerRadioGroup>
-        </PickerContent>
-      </Picker>
-      <LockButton
-        param="menuAccent"
-        className="absolute top-1/2 right-8 -translate-y-1/2"
-      />
-    </div>
-  )
-}