feat: Add comprehensive visual effects panel to builder

- Add Wand2 icon import
- Import Slider and Label components
- Add Effects section in right sidebar with:
  * Backdrop blur (8 levels: sm to 3xl)
  * Drop shadow (6 levels: sm to 2xl)
  * Opacity slider (0-100% in 5% steps)
  * Rotate slider (-180° to 180° in 15° steps)
  * Scale slider (0.5x to 2x in 0.1x steps)
  * Grayscale filter (0-100% in 10% steps)
  * Sepia filter (0-100% in 10% steps)
  * Hue rotate filter (0-360° in 30° steps)
  * Mix blend modes (16 modes: multiply, screen, overlay, etc.)
- Update renderProps() to apply effects to generated code
  * Class-based effects (blur, shadow, blend mode)
  * Inline styles for numeric effects (opacity, transform, filter)
- Add live preview in SortableItem component
  * Real-time visual feedback as effects are adjusted
  * Effects applied to canvas preview
- All effects visible in both editor and exported code

.github/workflows/ci.yml

@@ -85,6 +85,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build UI package
+        run: cd pkg/ui && pnpm run build
+
       - name: Run type checking
         run: |
           cd app && pnpm run typecheck

.github/workflows/deploy-gh-pages.yml

@@ -4,6 +4,12 @@ on:
   push:
     branches: [main]
   workflow_dispatch:
+    inputs:
+      capture_screenshots:
+        description: 'Capture component screenshots (slow, optional)'
+        required: false
+        type: boolean
+        default: false
 
 permissions:
   contents: read
@@ -17,6 +23,7 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
+    timeout-minutes: 10
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -48,6 +55,16 @@ jobs:
         run: |
           pnpm install --frozen-lockfile
 
+      - name: Build @hanzo/ui package
+        run: |
+          cd pkg/ui && pnpm build
+
+      - name: Capture screenshots (optional)
+        if: github.event.inputs.capture_screenshots == 'true'
+        working-directory: ./app
+        run: pnpm capture:registry
+        timeout-minutes: 5
+
       - name: Build documentation
         working-directory: ./app
         run: |
@@ -57,6 +74,7 @@ jobs:
           NODE_ENV: production
           GITHUB_ACTIONS: true
           NEXT_PUBLIC_APP_URL: https://ui.hanzo.ai
+          SKIP_SCREENSHOTS: true
 
       - name: Setup Pages
         uses: actions/configure-pages@v4

.github/workflows/publish-on-tag.yml

@@ -3,12 +3,7 @@ name: Publish on Tag
 on:
   push:
     tags:
-      - 'v*'                 # Publish all packages
-      - '@hanzo/ui-*'        # Publish @hanzo/ui only
-      - '@hanzo/auth-*'      # Publish @hanzo/auth only
-      - '@hanzo/commerce-*'  # Publish @hanzo/commerce only
-      - '@hanzo/brand-*'     # Publish @hanzo/brand only
-      - '@hanzo/react-*'     # Publish @hanzo/react only
+      - 'v*'  # Match @hanzo/ui version (e.g., v5.1.1)
 
 jobs:
   test:
@@ -68,48 +63,13 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Get tag name
-        id: get_tag
-        run: echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
-
-      - name: Determine packages to publish
-        id: determine_packages
+      - name: Build all packages
         run: |
-          TAG="${{ steps.get_tag.outputs.TAG }}"
-          PACKAGES=""
-
-          # Package-specific tags
-          if [[ $TAG == @hanzo/ui-* ]]; then
-            PACKAGES="ui"
-          elif [[ $TAG == @hanzo/auth-* ]]; then
-            PACKAGES="auth"
-          elif [[ $TAG == @hanzo/commerce-* ]]; then
-            PACKAGES="commerce"
-          elif [[ $TAG == @hanzo/brand-* ]]; then
-            PACKAGES="brand"
-          elif [[ $TAG == @hanzo/react-* ]]; then
-            PACKAGES="react"
-          elif [[ $TAG == v* ]]; then
-            # General version tags publish all packages
-            PACKAGES="ui auth commerce brand react"
-          fi
-
-          echo "PACKAGES=$PACKAGES" >> $GITHUB_OUTPUT
-          echo "Publishing packages: $PACKAGES"
-
-      - name: Build packages to publish
-        run: |
-          PACKAGES="${{ steps.determine_packages.outputs.PACKAGES }}"
-
-          if [ -z "$PACKAGES" ]; then
-            echo "No packages to publish for tag ${{ steps.get_tag.outputs.TAG }}"
-            exit 0
-          fi
-
-          for package in $PACKAGES; do
-            echo "Building $package..."
-            cd "pkg/$package" && pnpm build && cd ../..
-          done
+          cd pkg/ui && pnpm build && cd ../..
+          cd pkg/auth && pnpm build && cd ../..
+          cd pkg/commerce && pnpm build && cd ../..
+          cd pkg/brand && pnpm build && cd ../..
+          cd pkg/react && pnpm build && cd ../..
 
       - name: Configure npm authentication
         env:
@@ -118,42 +78,76 @@ jobs:
           npm config set //registry.npmjs.org/:_authToken $NODE_AUTH_TOKEN
           npm whoami
 
-      - name: Build and publish packages
+      - name: Check and publish packages
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
         run: |
-          PACKAGES="${{ steps.determine_packages.outputs.PACKAGES }}"
+          echo "Checking all packages for unpublished versions..."
 
-          if [ -z "$PACKAGES" ]; then
-            echo "No packages to publish"
-            exit 0
-          fi
+          PUBLISHED_COUNT=0
+          SKIPPED_COUNT=0
+          PUBLISHED_PACKAGES=""
 
-          for package in $PACKAGES; do
-            echo "Publishing $package..."
+          for package in ui auth commerce brand react; do
             cd "pkg/$package"
 
-            # Get current version from package.json
             CURRENT_VERSION=$(node -p "require('./package.json').version")
             PACKAGE_NAME=$(node -p "require('./package.json').name")
 
+            echo ""
+            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+            echo "📦 Checking $PACKAGE_NAME@$CURRENT_VERSION"
+            echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
             # Check if this version already exists on npm
             if npm view "$PACKAGE_NAME@$CURRENT_VERSION" version 2>/dev/null; then
-              echo "⚠️  $PACKAGE_NAME@$CURRENT_VERSION already published, skipping..."
+              echo "⏭️  Already published - skipping"
+              SKIPPED_COUNT=$((SKIPPED_COUNT + 1))
             else
-              echo "✅ Publishing $PACKAGE_NAME@$CURRENT_VERSION..."
+              echo "🚀 Publishing to npm..."
               npm publish --access public
-              echo "✨ Successfully published $PACKAGE_NAME@$CURRENT_VERSION"
+              echo "✅ Successfully published $PACKAGE_NAME@$CURRENT_VERSION"
+              PUBLISHED_COUNT=$((PUBLISHED_COUNT + 1))
+              PUBLISHED_PACKAGES="$PUBLISHED_PACKAGES\n- $PACKAGE_NAME@$CURRENT_VERSION"
             fi
 
             cd ../..
           done
 
+          echo ""
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+          echo "📊 Publishing Summary"
+          echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+          echo "✅ Published: $PUBLISHED_COUNT package(s)"
+          echo "⏭️  Skipped: $SKIPPED_COUNT package(s)"
+
+          if [ $PUBLISHED_COUNT -gt 0 ]; then
+            echo ""
+            echo -e "Published packages:$PUBLISHED_PACKAGES"
+          fi
+
+          # Save for GitHub release notes
+          echo "PUBLISHED_COUNT=$PUBLISHED_COUNT" >> $GITHUB_ENV
+          echo "PUBLISHED_PACKAGES<<EOF" >> $GITHUB_ENV
+          echo -e "$PUBLISHED_PACKAGES" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+
       - name: Create GitHub Release
-        if: startsWith(github.ref, 'refs/tags/v')
+        if: ${{ env.PUBLISHED_COUNT > 0 }}
         uses: softprops/action-gh-release@v1
         with:
           generate_release_notes: true
+          body: |
+            ## 📦 NPM Packages Published
+
+            ${{ env.PUBLISHED_PACKAGES }}
+
+            ### Installation
+
+            ```bash
+            # Install latest versions
+            npm install @hanzo/ui @hanzo/auth @hanzo/commerce @hanzo/brand @hanzo/react
+            ```
           files: |
             CHANGELOG.md
         env:

.github/workflows/test.yml

@@ -54,5 +54,5 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: playwright-report
-          path: playwright-report/
+          path: tests/reports/playwright-report/
           retention-days: 30

.gitignore

@@ -56,4 +56,19 @@ QWEN.md
 
 .playwright-mcp
 app/out
+app/.source
 
+# test artifacts
+tests/reports/
+tests/artifacts/
+
+# Note: Block screenshots are pre-generated and committed
+# They cannot be generated in CI (requires display/browser)
+# app/public/r/styles/*/ -- REMOVED to allow committing screenshots
+
+
+# Test artifacts
+test-results/
+playwright-report/
+*BADGE_INSPECTION*.md
+*BADGE_INSPECTION*.txt

PUBLISH_GUIDE.md

@@ -14,56 +14,42 @@ All packages updated to support **React 19.2.0**:
 
 ### 1. Automatic Publishing (Tag-based)
 
-#### Publish All Packages
-
-When you push a git tag starting with `v`, all packages will be automatically published:
+When you push a git tag starting with `v` (typically matching @hanzo/ui version), the workflow automatically checks all packages and publishes any with new versions:
 
 ```bash
-# Publish all packages with version 5.2.0
-git tag v5.2.0
-git push origin v5.2.0
+# Tag with @hanzo/ui version (workflow checks all packages)
+git tag v5.1.1
+git push origin v5.1.1
 ```
 
 **What happens:**
-- Tests run (pkg/ui and pkg/react)
-- All 5 packages build
-- Each package checks if its current version already exists on npm
-- Only unpublished versions are published
-- GitHub release created
+1. Tests run (pkg/ui and pkg/react)
+2. All 5 packages build
+3. **Automatic version detection:**
+   - Checks each package's current version in package.json
+   - Queries npm to see if that version already exists
+   - Only publishes packages with new versions not on npm
+4. GitHub release created (only if packages were published)
 
-#### Publish Individual Package
+**Example workflow output:**
+```
+📦 Checking @hanzo/ui@5.1.1
+⏭️  Already published - skipping
 
-To publish a single package, use package-specific tags:
+📦 Checking @hanzo/auth@2.5.5
+🚀 Publishing to npm...
+✅ Successfully published @hanzo/auth@2.5.5
 
-```bash
-# Publish only @hanzo/ui with its current package.json version
-git tag @hanzo/ui-v5.1.2
-git push origin @hanzo/ui-v5.1.2
-
-# Publish only @hanzo/auth
-git tag @hanzo/auth-v2.0.1
-git push origin @hanzo/auth-v2.0.1
-
-# Publish only @hanzo/commerce
-git tag @hanzo/commerce-v3.1.0
-git push origin @hanzo/commerce-v3.1.0
-
-# Publish only @hanzo/brand
-git tag @hanzo/brand-v1.5.0
-git push origin @hanzo/brand-v1.5.0
-
-# Publish only @hanzo/react
-git tag @hanzo/react-v1.0.1
-git push origin @hanzo/react-v1.0.1
+📊 Publishing Summary
+✅ Published: 1 package(s)
+⏭️  Skipped: 4 package(s)
 ```
 
-**Supported tag patterns:**
-- `v*` - Publish all packages
-- `@hanzo/ui-*` - Publish @hanzo/ui only
-- `@hanzo/auth-*` - Publish @hanzo/auth only
-- `@hanzo/commerce-*` - Publish @hanzo/commerce only
-- `@hanzo/brand-*` - Publish @hanzo/brand only
-- `@hanzo/react-*` - Publish @hanzo/react only
+This approach means you:
+- Only need to tag once (with @hanzo/ui version)
+- Don't need to track which packages need publishing
+- Can bump any package version and it auto-publishes on next tag
+- Similar to python-sdk monorepo publishing
 
 **Workflow:** `.github/workflows/publish-on-tag.yml`
 

app/.eslintrc.json.bak

@@ -0,0 +1,40 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "ignorePatterns": [
+    "__registry__/**",
+    ".source/**",
+    ".next/**",
+    "out/**",
+    "build/**",
+    "dist/**",
+    ".turbo/**",
+    "node_modules/**"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-empty-object-type": "warn",
+    "@typescript-eslint/ban-ts-comment": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-require-imports": "warn",
+    "@typescript-eslint/no-this-alias": "warn",
+    "@typescript-eslint/triple-slash-reference": "warn",
+    "@typescript-eslint/ban-types": "off",
+    "react/no-unescaped-entities": "warn",
+    "react/jsx-no-comment-textnodes": "warn",
+    "react/no-find-dom-node": "warn",
+    "prefer-const": "warn"
+  }
+}

app/IDENTITY_README.md

@@ -0,0 +1,254 @@
+# Hanzo Identity Registration System
+
+A decentralized identity registration system for Hanzo, Lux, and Zoo networks.
+
+## Overview
+
+The identity system allows users to claim unique identities across multiple blockchain networks with a tiered pricing structure based on name length.
+
+## Features
+
+- **Multi-Network Support**: Register identities on Hanzo, Lux, and Zoo (mainnet and testnet)
+- **Tiered Pricing**: 
+  - Single character (1): 100,000 AI
+  - Two characters (2): 10,000 AI
+  - Three characters (3): 1,000 AI
+  - Four characters (4): 100 AI
+  - Five or more (5+): 10 AI
+- **Referral System**: 50% discount with valid referrer
+- **Web3 Wallet Integration**: RainbowKit for seamless wallet connection
+- **Real-time Validation**: Check name availability and format validation
+- **Responsive UI**: Modern, accessible interface built with Radix UI
+
+## Project Structure
+
+```
+/Users/z/work/hanzo/ui/app/
+├── app/(app)/identity/page.tsx      # Identity registration page
+├── components/web3-provider.tsx      # Web3/Wagmi provider wrapper
+├── lib/
+│   ├── wagmi.ts                      # Wagmi config with custom networks
+│   └── contracts.ts                  # Contract ABIs and addresses
+└── .env.example                      # Environment variable template
+```
+
+## Smart Contracts
+
+Located in `/Users/z/work/lux/standard/src/`:
+
+- **HanzoRegistry.sol**: Core identity registration contract
+  - Manages identity claims
+  - Handles staking requirements
+  - Supports delegation and referrals
+  - Implements reward distribution
+
+- **AIToken.sol**: ERC20 governance token
+  - Staking and vesting functionality
+  - Voting power for governance
+  - Deflationary burn mechanism
+
+- **AIFaucet.sol**: Token distribution faucet
+  - 100 AI tokens per authenticated user
+  - 24-hour cooldown period
+  - Daily limits and rate limiting
+
+## Setup
+
+### 1. Install Dependencies
+
+```bash
+cd /Users/z/work/hanzo/ui/app
+pnpm install
+```
+
+### 2. Configure Environment
+
+Copy `.env.example` to `.env.local`:
+
+```bash
+cp .env.example .env.local
+```
+
+Get a WalletConnect Project ID from https://cloud.walletconnect.com/ and update:
+
+```
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here
+```
+
+### 3. Deploy Contracts
+
+Deploy the smart contracts to your target networks:
+
+```bash
+cd /Users/z/work/lux/standard
+
+# For Hanzo Mainnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://rpc.hanzo.ai \
+  --broadcast
+
+# For Hanzo Testnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://testnet-rpc.hanzo.ai \
+  --broadcast
+
+# For Lux Mainnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://api.lux.network/ext/bc/C/rpc \
+  --broadcast
+
+# For Zoo Mainnet
+forge script script/DeployIdentitySystem.s.sol:DeployIdentitySystem \
+  --rpc-url https://rpc.zoo.network \
+  --broadcast
+```
+
+### 4. Update Contract Addresses
+
+After deployment, update the contract addresses in `lib/contracts.ts`:
+
+```typescript
+export const CONTRACT_ADDRESSES: Record<number, { registry: `0x${string}`; token: `0x${string}` }> = {
+  36963: { // Hanzo Mainnet
+    registry: '0xYourRegistryAddress',
+    token: '0xYourTokenAddress',
+  },
+  // ... update other networks
+}
+```
+
+### 5. Run Development Server
+
+```bash
+pnpm dev
+```
+
+Visit `http://localhost:3333/identity` to access the identity registration page.
+
+## Networks
+
+| Network | Chain ID | RPC URL | Explorer |
+|---------|----------|---------|----------|
+| Hanzo Mainnet | 36963 | https://rpc.hanzo.ai | https://explorer.hanzo.ai |
+| Hanzo Testnet | 36962 | https://testnet-rpc.hanzo.ai | https://testnet-explorer.hanzo.ai |
+| Lux Mainnet | 96369 | https://api.lux.network/ext/bc/C/rpc | https://explorer.lux.network |
+| Lux Testnet | 96368 | https://testnet-api.lux.network/ext/bc/C/rpc | https://testnet-explorer.lux.network |
+| Zoo Mainnet | 200200 | https://rpc.zoo.network | https://explorer.zoo.network |
+| Zoo Testnet | 200201 | https://testnet-rpc.zoo.network | https://testnet-explorer.zoo.network |
+
+## Identity Format
+
+Identities follow the format: `@username.network/profile/type/name`
+
+- **Username**: Letters, numbers, dots, and underscores
+- **Network**: Automatically determined by connected chain
+  - `.hanzo` or `.ai` for Hanzo mainnet
+  - `.hanzo-testnet` for Hanzo testnet
+  - `.lux` for Lux mainnet
+  - `.lux-testnet` for Lux testnet
+  - `.zoo` for Zoo mainnet
+  - `.zoo-testnet` for Zoo testnet
+- **Profile**: Optional profile path (default: `/profile`)
+
+## Faucet Integration
+
+Users can get AI tokens from the faucet to register identities:
+
+- **Location**: `/faucet` page
+- **Amount**: 100 AI tokens per authenticated user
+- **Cooldown**: 24 hours between drips
+- **Networks**: Hanzo mainnet and testnet only
+
+Configuration in `/Users/z/work/hanzo/faucet/config.json`
+
+## Tech Stack
+
+- **Framework**: Next.js 16 (App Router)
+- **Styling**: Tailwind CSS 4
+- **UI Components**: Radix UI primitives
+- **Web3**: Wagmi, Viem, RainbowKit
+- **State Management**: TanStack Query
+- **Smart Contracts**: Solidity, Foundry
+- **Networks**: Hanzo, Lux, Zoo (mainnet + testnet)
+
+## Development
+
+### Testing Locally
+
+1. Use a testnet for development (Hanzo Testnet recommended)
+2. Connect your wallet to the testnet
+3. Get test AI tokens from the faucet
+4. Test identity registration flow
+
+### Building for Production
+
+```bash
+pnpm build
+```
+
+### Type Checking
+
+```bash
+pnpm typecheck
+```
+
+### Linting
+
+```bash
+pnpm lint
+pnpm lint:fix
+```
+
+## Contract Deployment Scripts
+
+Located in `/Users/z/work/lux/standard/script/`:
+
+- `DeployIdentitySystem.s.sol`: Deploys complete identity system
+  - Deploys AIToken with treasury allocation
+  - Deploys HanzoNft for identity binding
+  - Deploys HanzoRegistry with UUPS proxy
+  - Deploys AIFaucet with 100 AI drip amount
+  - Configures initial permissions and transfers
+
+## Security Considerations
+
+- All contracts use OpenZeppelin's upgradeable patterns
+- Registry uses UUPS proxy for upgradeability
+- Access control with Ownable2Step for safe ownership transfer
+- Pausable functionality for emergency stops
+- Rate limiting on faucet to prevent abuse
+- Input validation for identity names
+- Proper allowance checks before token transfers
+
+## Troubleshooting
+
+### "Insufficient balance" error
+- Get AI tokens from the faucet at `/faucet`
+- Ensure you're connected to the correct network
+
+### "Name already taken" error
+- Try a different identity name
+- Check if the name is available on your current network
+
+### "Invalid format" error
+- Use only letters, numbers, dots, and underscores
+- No spaces or special characters allowed
+
+### Contract not deployed
+- Ensure contracts are deployed to your connected network
+- Update contract addresses in `lib/contracts.ts`
+- Check RPC URL is correct for your network
+
+## Contributing
+
+When adding new features:
+
+1. Update contracts in `/Users/z/work/lux/standard/src/`
+2. Update ABIs in `lib/contracts.ts`
+3. Update UI in `app/(app)/identity/page.tsx`
+4. Add tests for new functionality
+5. Update this README with new features
+
+## License
+
+MIT

app/LLM.md

@@ -359,3 +359,193 @@ These are auto-installed when user adds the component.
 - **MDX components** are defined in `mdx-components.tsx`, not auto-imported
 - **Blocks are different** from components - they're full-page sections, not installable via CLI
 - **GitHub Pages deployment** requires building pkg/ui package first (workflow handles this)
+
+## LLM API Route (Added 2025-11-05)
+
+The `/llm` API route serves MDX documentation optimized for LLM consumption by replacing `<ComponentPreview>` tags with actual component source code.
+
+### Files Created
+
+**`/lib/llm.ts`**:
+- `processMdxForLLMs(content, style)` - Transforms MDX for LLMs
+- Finds `<ComponentPreview name="..." />` tags in MDX
+- Replaces with actual component source code in markdown code blocks
+- Rewrites import paths from `@/registry/${style}/` to `@/components/`
+- Removes `export default` in favor of named exports
+
+**`/app/(app)/llm/[[...slug]]/route.ts`**:
+- API route handler using Next.js catch-all routing
+- `GET` handler that processes MDX files via `processMdxForLLMs()`
+- Returns Content-Type: `text/markdown; charset=utf-8`
+- Supports static generation via `generateStaticParams()`
+- Uses `revalidate = false` for static export
+
+### Key Adaptations from shadcn/ui
+
+1. **Dynamic Style Support**: Changed from hardcoded `@/registry/new-york-v4/` to dynamic `@/registry/${style}/`
+2. **Multi-Style System**: Works with both "default" and "new-york" themes
+3. **Active Style Detection**: Uses `getActiveStyle()` to determine current theme
+
+### Usage
+
+Access documentation via:
+```bash
+# Get LLM-optimized docs for a component
+curl http://localhost:3003/llm/docs/components/button
+
+# Returns MDX with inline source code instead of component previews
+```
+
+## Deviation Report: shadcn/ui v4 vs Hanzo UI
+
+### Directory Structure Comparison
+
+**Copied from shadcn/ui v4**:
+- ✅ `/blocks` - Block showcase page with filtering and search
+- ✅ `/charts` - Chart component demonstrations  
+- ✅ `/colors` - Tailwind color palette reference
+- ✅ `/docs` - Component documentation
+- ✅ `/examples` - Component usage examples
+- ✅ `/llm` - LLM-optimized API endpoint
+- ✅ `/themes` - Theme customization page
+
+**Hanzo-Specific Features** (not in shadcn):
+- 🆕 `/ai` - AI assistant integration page
+- 🆕 `/builder` - Visual page builder with drag-drop
+- 🆕 `/components` - Component category pages
+- 🆕 `/compose` - Composition editor
+- 🆕 `/health` - System health check
+- 🆕 `/mcp` - Model Context Protocol integration
+- 🆕 `/sink` - Kitchen sink / testing page
+- 🆕 `/theme-generator` - Interactive theme generator
+
+### Key Implementation Differences
+
+#### 1. Path Handling
+- **shadcn**: Hardcoded `@/registry/new-york-v4/` paths
+- **Hanzo**: Dynamic `@/registry/${style}/` supporting multiple themes
+
+#### 2. Style System
+- **shadcn**: Primary style is "new-york-v4"
+- **Hanzo**: Primary style is "default", with "new-york" as alternative
+- **Impact**: All copied files had paths adapted: `new-york-v4` → `default`
+
+#### 3. Branding
+- **shadcn**: GitHub logo, shadcn branding
+- **Hanzo**: Hanzo logo (OpenInHButton), Hanzo branding
+- **Files Modified**: 
+  - `components/open-in-hanzo-button.tsx` → `components/open-in-h-button.tsx`
+  - Hanzo logo (H icon) replaces GitHub logo
+
+#### 4. Registry Structure
+- **shadcn**: `Index[name]` - flat structure
+- **Hanzo**: `Index[style][name]` - nested by style
+- **Impact**: Required updates to registry accessor functions
+
+#### 5. Component Count
+- **shadcn v4**: ~58 core components
+- **Hanzo**: 149 components (115 implemented, 34 stubs)
+- **Unique to Hanzo**: 3D components, AI components, animation components, specialized navigation
+
+### Files Requiring Ongoing Sync
+
+When shadcn/ui v4 updates these, Hanzo should review for updates:
+
+1. **Layout Files**:
+   - `app/(app)/blocks/layout.tsx`
+   - `app/(app)/colors/layout.tsx`
+   - `app/(app)/themes/layout.tsx`
+
+2. **Page Files**:
+   - `app/(app)/blocks/page.tsx`
+   - `app/(app)/colors/page.tsx`  
+   - `app/(app)/themes/page.tsx`
+   - `app/(app)/llm/[[...slug]]/route.ts`
+
+3. **Supporting Components**:
+   - `components/blocks-nav.tsx`
+   - `components/colors-nav.tsx`
+   - `components/theme-customizer.tsx`
+   - `lib/llm.ts`
+
+4. **Registry Functions**:
+   - `lib/registry.ts` - Any changes to registry access patterns
+   - `lib/blocks.ts` - Block metadata handling
+
+### Known Issues Requiring Fixes
+
+Per user feedback: "don't suppress errors just do shit right or cover up things"
+
+**1. getActiveStyle Export Error** ✅ FIXED (2025-11-05):
+- **Was**: Server logs showed "Export getActiveStyle doesn't exist in target module"
+- **Root Cause**: Turbopack had issues with `async function getActiveStyle()` in `force-static` pages. The async nature conflicted with Turbopack's static analysis in force-static mode.
+- **Fix**: Made `getActiveStyle()` synchronous by removing `async` keyword
+  - Updated `registry/styles.ts` line 14: removed `async` from function declaration
+  - Updated `app/(app)/blocks/page.tsx`: removed `async` from function and `await` from call
+  - Updated `app/(app)/llm/[[...slug]]/route.ts`: split Promise.all, called getActiveStyle() synchronously
+- **Result**: ✅ NO MORE EXPORT ERRORS - Pages load cleanly with HTTP 200, no server errors
+- **Note**: Function doesn't actually need to be async since it just returns styles[0]
+
+**2. Client Component Boundary Warnings** ⚠️ LOW PRIORITY:
+- **Symptom**: "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with 'use server'"
+- **Locations**: Multiple components in blocks, themes, colors pages (7 warnings with digest `638247047`)
+- **Status**: WARNINGS ONLY - Not breaking, pages render correctly with HTTP 200
+- **Impact**: No user-facing issues, functionality fully intact
+- **Note**: These warnings also appear in shadcn/ui v4, suggesting they may be framework-level issues
+- **Action**: Can investigate if desired, but not critical since pages work perfectly
+
+**3. Tabs Hydration Issues** ✅ FIXED:
+- **Was**: Tabs component had hydration errors due to SSR/client mismatch
+- **Fix**: Updated `registry/default/ui/tabs.tsx` with proper refs and display names
+- **Status**: ✅ RESOLVED
+
+**4. macOS Dock Demo SSR Error** ✅ FIXED (2025-11-06):
+- **Was**: Build error "Event handlers cannot be passed to Client Component props" on `/view/new-york/macos-dock-demo`
+- **Root Cause**: `macos-dock-demo` component has onClick event handlers on DockItem components. During static prerendering with `force-static`, Next.js tries to serialize props but can't serialize functions.
+- **Fix**: Added component to skip list in `generateStaticParams()` in `app/(view)/view/[name]/page.tsx`
+  - Components with event handlers that can't be serialized are excluded from static generation
+  - They can still be accessed dynamically at runtime
+- **Result**: ✅ Build completes successfully, no SSR errors
+- **Note**: Component works perfectly in dev mode and at runtime, just skips static prerendering
+
+### Testing Coverage
+
+**Pages Tested**:
+- ✅ `/blocks` - All 5 featured blocks display correctly
+- ✅ `/colors` - Full Tailwind palette with copy functionality
+- ✅ `/themes` - Theme customizer with live preview
+- ✅ `/llm` - API endpoint compiles and serves MDX
+
+**Components Tested**:
+- ✅ `<BlockDisplay>` - Renders blocks correctly
+- ✅ `<BlocksNav>` - Navigation with search/filter
+- ✅ `<ColorsNav>` - Color palette navigation
+- ✅ `<OpenInHButton>` - Hanzo-branded button with logo
+- ✅ `<Tabs>` - No hydration errors
+
+### Maintenance Strategy
+
+**When to Sync with shadcn/ui v4**:
+1. Major version updates (v4.x → v4.y)
+2. New features in /blocks, /themes, /colors pages
+3. Security patches or bug fixes
+4. New component additions to showcase pages
+
+**How to Sync**:
+1. Compare shadcn v4 file with Hanzo version
+2. Identify changes in logic (not just branding)
+3. Apply logic changes while preserving:
+   - Hanzo branding (OpenInHButton, logos)
+   - Path adaptations (new-york-v4 → default)
+   - Registry structure differences (Index[style][name])
+4. Test thoroughly before deploying
+5. Document changes in CLAUDE.md
+
+### Future Work
+
+**Improvements Needed**:
+1. Fix getActiveStyle export error properly (not suppress)
+2. Resolve Client Component boundary warnings  
+3. Add comprehensive test suite for copied pages
+4. Set up automated diff checking against shadcn v4
+5. Document all customizations in component headers

app/__registry__/.autogenerated

@@ -1 +0,0 @@
-// The content of this directory is autogenerated by the registry server.

app/__registry__/README.md

@@ -1 +0,0 @@
-> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - hanzo

app/__registry__/default/block/invoice-manager-01.tsx

@@ -1,18 +0,0 @@
-"use client"
-
-import { InvoiceManager } from "@hanzo/ui/billing"
-
-export const description =
-  "A complete invoice management interface with list/card views, filtering, sorting, pagination, and PDF download functionality. Features responsive design with mobile-optimized layouts."
-
-export const iframeHeight = "900px"
-
-export const containerClassName = "w-full"
-
-export default function InvoiceManagerDemo() {
-  return (
-    <div className="container mx-auto py-8">
-      <InvoiceManager defaultView="table" pageSize={10} />
-    </div>
-  )
-}

app/__registry__/default/block/login-01.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-02.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-03.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-04.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/login-05.tsx

@@ -1,16 +1,16 @@
 "use client"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/default/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/registry/new-york/ui/card"
-import { Input } from "@/registry/new-york/ui/input"
-import { Label } from "@/registry/new-york/ui/label"
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
 
 export default function Page() {
   return (

app/__registry__/default/block/payment-settings-01.tsx

@@ -1,83 +0,0 @@
-"use client"
-
-import { PaymentMethodManager, type PaymentMethod } from "@hanzo/ui/billing"
-
-export const description =
-  "Payment method management interface for adding, removing, and setting default payment methods."
-
-export const iframeHeight = "800px"
-
-export const containerClassName = "w-full"
-
-// Demo payment methods for showcase
-const demoPaymentMethods: PaymentMethod[] = [
-  {
-    id: "pm_1",
-    type: "card",
-    is_default: true,
-    created_at: "2024-01-15T10:30:00Z",
-    card: {
-      brand: "visa",
-      last4: "4242",
-      exp_month: 12,
-      exp_year: 2025,
-      funding: "credit",
-    },
-    billing_details: {
-      name: "John Doe",
-      address: {
-        line1: "123 Main St",
-        city: "San Francisco",
-        state: "CA",
-        postal_code: "94102",
-        country: "US",
-      },
-    },
-  },
-  {
-    id: "pm_2",
-    type: "card",
-    is_default: false,
-    created_at: "2024-02-20T14:15:00Z",
-    card: {
-      brand: "mastercard",
-      last4: "5555",
-      exp_month: 8,
-      exp_year: 2026,
-      funding: "debit",
-    },
-    billing_details: {
-      name: "John Doe",
-    },
-  },
-  {
-    id: "pm_3",
-    type: "paypal",
-    is_default: false,
-    created_at: "2024-03-10T09:00:00Z",
-    paypal: {
-      email: "john.doe@example.com",
-    },
-  },
-]
-
-export default function PaymentSettings01() {
-  return (
-    <div className="mx-auto max-w-4xl p-6">
-      <PaymentMethodManager
-        // Use demo mode (no API endpoint)
-        initialMethods={demoPaymentMethods}
-        // Callbacks for demo
-        onMethodAdded={(method) => {
-          console.log("Payment method added:", method)
-        }}
-        onMethodRemoved={(id) => {
-          console.log("Payment method removed:", id)
-        }}
-        onDefaultChanged={(id) => {
-          console.log("Default payment method changed to:", id)
-        }}
-      />
-    </div>
-  )
-}

app/__registry__/default/block/signup-02.tsx

@@ -13,7 +13,10 @@ import {
 } from "@/registry/default/ui/field"
 import { Input } from "@/registry/default/ui/input"
 
-function SignupForm({ className, ...props }: React.ComponentProps<"form">) {
+function SignupForm({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"form">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/signup-03.tsx

@@ -38,7 +38,7 @@ export default function SignupPage() {
 export function SignupForm({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentPropsWithoutRef<"div">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/signup-04.tsx

@@ -25,7 +25,7 @@ export default function SignupPage() {
 export function SignupForm({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentPropsWithoutRef<"div">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/signup-05.tsx

@@ -26,7 +26,7 @@ export default function SignupPage() {
 export function SignupForm({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentPropsWithoutRef<"div">) {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const formData = new FormData(e.currentTarget)

app/__registry__/default/block/subscription-portal-01.tsx

@@ -1,212 +0,0 @@
-"use client"
-
-import {
-  SubscriptionPortal,
-  type RetentionOffer,
-  type Subscription,
-  type SubscriptionHistory,
-  type SubscriptionPlan,
-} from "@hanzo/ui/billing"
-
-export const description =
-  "A comprehensive subscription management portal with plan upgrades, usage tracking, and subscription history."
-
-export const iframeHeight = "1000px"
-
-export const containerClassName = "w-full"
-
-// Demo subscription plans
-const demoPlans: SubscriptionPlan[] = [
-  {
-    id: "free",
-    name: "Free",
-    description: "Perfect for getting started",
-    price: 0,
-    billingPeriod: "monthly",
-    features: [
-      "Up to 3 projects",
-      "Basic analytics",
-      "Community support",
-      "5 team members",
-    ],
-    limits: {
-      projects: 3,
-      storage: 1, // GB
-      apiCalls: 1000,
-    },
-  },
-  {
-    id: "pro",
-    name: "Pro",
-    description: "For professional developers",
-    price: 29,
-    billingPeriod: "monthly",
-    features: [
-      "Unlimited projects",
-      "Advanced analytics",
-      "Priority support",
-      "Unlimited team members",
-      "Custom integrations",
-      "Advanced security",
-    ],
-    limits: {
-      projects: "unlimited",
-      storage: 100, // GB
-      apiCalls: "unlimited",
-    },
-    highlighted: true,
-    badge: "Popular",
-  },
-  {
-    id: "enterprise",
-    name: "Enterprise",
-    description: "For large teams and organizations",
-    price: 99,
-    billingPeriod: "monthly",
-    features: [
-      "Everything in Pro",
-      "Dedicated support",
-      "SLA guarantee",
-      "Custom integrations",
-      "On-premise deployment",
-      "Training & onboarding",
-      "Advanced compliance",
-    ],
-    limits: {
-      projects: "unlimited",
-      storage: "unlimited",
-      apiCalls: "unlimited",
-    },
-  },
-]
-
-// Demo current subscription
-const demoSubscription: Subscription = {
-  id: "sub_1",
-  customerId: "cus_1",
-  planId: "pro",
-  plan: demoPlans[1], // Pro plan
-  status: "active",
-  currentPeriodStart: new Date("2024-10-01"),
-  currentPeriodEnd: new Date("2024-11-01"),
-  cancelAtPeriodEnd: false,
-  usage: [
-    {
-      name: "Projects",
-      current: 12,
-      limit: "unlimited",
-    },
-    {
-      name: "Storage",
-      current: 45,
-      limit: 100,
-      unit: "GB",
-    },
-    {
-      name: "API Calls",
-      current: 45000,
-      limit: "unlimited",
-      unit: "calls",
-    },
-  ],
-  upcomingInvoice: {
-    amount: 29,
-    date: new Date("2024-11-01"),
-  },
-}
-
-// Demo retention offers
-const demoRetentionOffers: RetentionOffer[] = [
-  {
-    id: "offer_1",
-    title: "3 Months at 50% Off",
-    description: "Stay with us and get 50% off for the next 3 months",
-    discount: 50,
-    features: [
-      "Keep all Pro features",
-      "No contract required",
-      "Cancel anytime",
-    ],
-  },
-  {
-    id: "offer_2",
-    title: "Free Extra Storage",
-    description: "Get an additional 50GB storage for free for 6 months",
-    features: [
-      "150GB total storage",
-      "All Pro features included",
-      "Priority support",
-    ],
-  },
-]
-
-// Demo subscription history
-const demoHistory: SubscriptionHistory[] = [
-  {
-    id: "hist_1",
-    subscriptionId: "sub_1",
-    event: "upgraded",
-    fromPlan: "Free",
-    toPlan: "Pro",
-    timestamp: new Date("2024-10-01"),
-    amount: 29,
-  },
-  {
-    id: "hist_2",
-    subscriptionId: "sub_1",
-    event: "created",
-    toPlan: "Free",
-    timestamp: new Date("2024-09-15"),
-    amount: 0,
-  },
-]
-
-export default function SubscriptionPortal01() {
-  // Demo handlers
-  const handleUpgrade = async (planId: string) => {
-    console.log("Upgrading to plan:", planId)
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  const handleDowngrade = async (planId: string) => {
-    console.log("Downgrading to plan:", planId)
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  const handleCancel = async (reason: string, feedback?: string) => {
-    console.log("Canceling subscription:", { reason, feedback })
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  const handleAcceptOffer = async (offerId: string) => {
-    console.log("Accepting retention offer:", offerId)
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl p-6">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">
-          Subscription Management
-        </h1>
-        <p className="text-muted-foreground mt-2">
-          Manage your subscription, view usage, and explore available plans
-        </p>
-      </div>
-
-      <SubscriptionPortal
-        subscription={demoSubscription}
-        availablePlans={demoPlans}
-        retentionOffers={demoRetentionOffers}
-        subscriptionHistory={demoHistory}
-        onUpgrade={handleUpgrade}
-        onDowngrade={handleDowngrade}
-        onCancel={handleCancel}
-        onAcceptOffer={handleAcceptOffer}
-        showHistory={true}
-        defaultView="overview"
-      />
-    </div>
-  )
-}

app/__registry__/default/example/accordion-demo.tsx

@@ -1,33 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/registry/default/ui/accordion"
-
-export default function AccordionDemo() {
-  return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that matches the other
-          components&apos; aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It&apos;s animated by default, but you can disable it if you
-          prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}

app/__registry__/default/example/alert-demo.tsx

@@ -1,19 +0,0 @@
-import { Terminal } from "lucide-react"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/default/ui/alert"
-
-export default function AlertDemo() {
-  return (
-    <Alert>
-      <Terminal className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the cli.
-      </AlertDescription>
-    </Alert>
-  )
-}

app/__registry__/default/example/alert-destructive.tsx

@@ -1,19 +0,0 @@
-import { AlertCircle } from "lucide-react"
-
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/registry/default/ui/alert"
-
-export default function AlertDestructive() {
-  return (
-    <Alert variant="destructive">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  )
-}

app/__registry__/default/example/alert-dialog-demo.tsx

@@ -1,35 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/default/ui/alert-dialog"
-import { Button } from "@/registry/default/ui/button"
-
-export default function AlertDialogDemo() {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">Show Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}

app/__registry__/default/example/aspect-ratio-demo.tsx

@@ -1,16 +0,0 @@
-import Image from "next/image"
-
-import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
-
-export default function AspectRatioDemo() {
-  return (
-    <AspectRatio ratio={16 / 9} className="bg-muted">
-      <Image
-        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-        alt="Photo by Drew Beamer"
-        fill
-        className="rounded-md object-cover"
-      />
-    </AspectRatio>
-  )
-}

app/__registry__/default/example/avatar-demo.tsx

@@ -1,14 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-
-export default function AvatarDemo() {
-  return (
-    <Avatar>
-      <AvatarImage src="https://github.com/hanzoai.png" alt="@hanzoai" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  )
-}

app/__registry__/default/example/badge-demo.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeDemo() {
-  return <Badge>Badge</Badge>
-}

app/__registry__/default/example/badge-destructive.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeDestructive() {
-  return <Badge variant="destructive">Destructive</Badge>
-}

app/__registry__/default/example/badge-outline.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeOutline() {
-  return <Badge variant="outline">Outline</Badge>
-}

app/__registry__/default/example/badge-secondary.tsx

@@ -1,5 +0,0 @@
-import { Badge } from "@/registry/default/ui/badge"
-
-export default function BadgeSecondary() {
-  return <Badge variant="secondary">Secondary</Badge>
-}

app/__registry__/default/example/breadcrumb-demo.tsx

@@ -1,49 +0,0 @@
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function BreadcrumbDemo() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              <BreadcrumbEllipsis className="h-4 w-4" />
-              <span className="sr-only">Toggle menu</span>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-dropdown.tsx

@@ -1,50 +0,0 @@
-import { ChevronDown, Slash } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function BreadcrumbWithDropdown() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
-              Components
-              <ChevronDown className="h-4 w-4" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-              <DropdownMenuItem>Documentation</DropdownMenuItem>
-              <DropdownMenuItem>Themes</DropdownMenuItem>
-              <DropdownMenuItem>GitHub</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-ellipsis.tsx

@@ -1,39 +0,0 @@
-import Link from "next/link"
-
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-
-export default function BreadcrumbCollapsed() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/">Home</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbEllipsis />
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink asChild>
-            <Link href="/docs/components">Components</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-link.tsx

@@ -1,34 +0,0 @@
-import Link from "next/link"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-
-export default function BreadcrumbWithCustomSeparator() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink>
-            <Link href="/">Home</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink>
-            <Link href="/components">Components</Link>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-responsive.tsx

@@ -1,133 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-
-import { useMediaQuery } from "@/hooks/use-media-query"
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-const items = [
-  { href: "#", label: "Home" },
-  { href: "#", label: "Documentation" },
-  { href: "#", label: "Building Your Application" },
-  { href: "#", label: "Data Fetching" },
-  { label: "Caching and Revalidating" },
-]
-
-const ITEMS_TO_DISPLAY = 3
-
-export default function BreadcrumbResponsive() {
-  const [open, setOpen] = React.useState(false)
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        {items.length > ITEMS_TO_DISPLAY ? (
-          <>
-            <BreadcrumbItem>
-              {isDesktop ? (
-                <DropdownMenu open={open} onOpenChange={setOpen}>
-                  <DropdownMenuTrigger
-                    className="flex items-center gap-1"
-                    aria-label="Toggle menu"
-                  >
-                    <BreadcrumbEllipsis className="h-4 w-4" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start">
-                    {items.slice(1, -2).map((item, index) => (
-                      <DropdownMenuItem key={index}>
-                        <Link href={item.href ? item.href : "#"}>
-                          {item.label}
-                        </Link>
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : (
-                <Drawer open={open} onOpenChange={setOpen}>
-                  <DrawerTrigger aria-label="Toggle Menu">
-                    <BreadcrumbEllipsis className="h-4 w-4" />
-                  </DrawerTrigger>
-                  <DrawerContent>
-                    <DrawerHeader className="text-left">
-                      <DrawerTitle>Navigate to</DrawerTitle>
-                      <DrawerDescription>
-                        Select a page to navigate to.
-                      </DrawerDescription>
-                    </DrawerHeader>
-                    <div className="grid gap-1 px-4">
-                      {items.slice(1, -2).map((item, index) => (
-                        <Link
-                          key={index}
-                          href={item.href ? item.href : "#"}
-                          className="py-1 text-sm"
-                        >
-                          {item.label}
-                        </Link>
-                      ))}
-                    </div>
-                    <DrawerFooter className="pt-4">
-                      <DrawerClose asChild>
-                        <Button variant="outline">Close</Button>
-                      </DrawerClose>
-                    </DrawerFooter>
-                  </DrawerContent>
-                </Drawer>
-              )}
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-          </>
-        ) : null}
-        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
-          <BreadcrumbItem key={index}>
-            {item.href ? (
-              <>
-                <BreadcrumbLink
-                  asChild
-                  className="max-w-20 truncate md:max-w-none"
-                >
-                  <Link href={item.href}>{item.label}</Link>
-                </BreadcrumbLink>
-                <BreadcrumbSeparator />
-              </>
-            ) : (
-              <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
-                {item.label}
-              </BreadcrumbPage>
-            )}
-          </BreadcrumbItem>
-        ))}
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/breadcrumb-separator.tsx

@@ -1,34 +0,0 @@
-import { Slash } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/registry/default/ui/breadcrumb"
-
-export default function BreadcrumbWithCustomSeparator() {
-  return (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <Slash />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  )
-}

app/__registry__/default/example/button-as-child.tsx

@@ -1,11 +0,0 @@
-import Link from "next/link"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonAsChild() {
-  return (
-    <Button asChild>
-      <Link href="/login">Login</Link>
-    </Button>
-  )
-}

app/__registry__/default/example/button-demo.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonDemo() {
-  return <Button>Button</Button>
-}

app/__registry__/default/example/button-destructive.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonDestructive() {
-  return <Button variant="destructive">Destructive</Button>
-}

app/__registry__/default/example/button-ghost.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonGhost() {
-  return <Button variant="ghost">Ghost</Button>
-}

app/__registry__/default/example/button-icon.tsx

@@ -1,11 +0,0 @@
-import { ChevronRight } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonIcon() {
-  return (
-    <Button variant="outline" size="icon">
-      <ChevronRight className="h-4 w-4" />
-    </Button>
-  )
-}

app/__registry__/default/example/button-link.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonLink() {
-  return <Button variant="link">Link</Button>
-}

app/__registry__/default/example/button-loading.tsx

@@ -1,12 +0,0 @@
-import { Loader2 } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonLoading() {
-  return (
-    <Button disabled>
-      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-      Please wait
-    </Button>
-  )
-}

app/__registry__/default/example/button-outline.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonOutline() {
-  return <Button variant="outline">Outline</Button>
-}

app/__registry__/default/example/button-secondary.tsx

@@ -1,5 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonSecondary() {
-  return <Button variant="secondary">Secondary</Button>
-}

app/__registry__/default/example/button-with-icon.tsx

@@ -1,11 +0,0 @@
-import { Mail } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-
-export default function ButtonWithIcon() {
-  return (
-    <Button>
-      <Mail className="mr-2 h-4 w-4" /> Login with Email
-    </Button>
-  )
-}

app/__registry__/default/example/calendar-demo.tsx

@@ -1,18 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Calendar } from "@/registry/default/ui/calendar"
-
-export default function CalendarDemo() {
-  const [date, setDate] = React.useState<Date | undefined>(new Date())
-
-  return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
-    />
-  )
-}

app/__registry__/default/example/calendar-form.tsx

@@ -1,101 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const FormSchema = z.object({
-  dob: z.date({
-    required_error: "A date of birth is required.",
-  }),
-})
-
-export default function CalendarForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? (
-                        format(field.value, "PPP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date) =>
-                      date > new Date() || date < new Date("1900-01-01")
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                Your date of birth is used to calculate your age.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/card-demo.tsx

@@ -1,78 +0,0 @@
-import { BellRing, Check } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Switch } from "@/registry/default/ui/switch"
-
-const notifications = [
-  {
-    title: "Your call has been confirmed.",
-    description: "1 hour ago",
-  },
-  {
-    title: "You have a new message!",
-    description: "1 hour ago",
-  },
-  {
-    title: "Your subscription is expiring soon!",
-    description: "2 hours ago",
-  },
-]
-
-type CardProps = React.ComponentProps<typeof Card>
-
-export default function CardDemo({ className, ...props }: CardProps) {
-  return (
-    <Card className={cn("w-[380px]", className)} {...props}>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className=" flex items-center space-x-4 rounded-md border p-4">
-          <BellRing />
-          <div className="flex-1 space-y-1">
-            <p className="text-sm font-medium leading-none">
-              Push Notifications
-            </p>
-            <p className="text-sm text-muted-foreground">
-              Send notifications to device.
-            </p>
-          </div>
-          <Switch />
-        </div>
-        <div>
-          {notifications.map((notification, index) => (
-            <div
-              key={index}
-              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
-            >
-              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
-              <div className="space-y-1">
-                <p className="text-sm font-medium leading-none">
-                  {notification.title}
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {notification.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">
-          <Check className="mr-2 h-4 w-4" /> Mark all as read
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

app/__registry__/default/example/card-with-form.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/default/ui/card"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export default function CardWithForm() {
-  return (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </div>
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="framework">Framework</Label>
-              <Select>
-                <SelectTrigger id="framework">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent position="popper">
-                  <SelectItem value="next">Next.js</SelectItem>
-                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                  <SelectItem value="astro">Astro</SelectItem>
-                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
-      </CardFooter>
-    </Card>
-  )
-}

app/__registry__/default/example/carousel-api.tsx

@@ -1,54 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  type CarouselApi,
-} from "@/registry/default/ui/carousel"
-
-export default function CarouselDApiDemo() {
-  const [api, setApi] = React.useState<CarouselApi>()
-  const [current, setCurrent] = React.useState(0)
-  const [count, setCount] = React.useState(0)
-
-  React.useEffect(() => {
-    if (!api) {
-      return
-    }
-
-    setCount(api.scrollSnapList().length)
-    setCurrent(api.selectedScrollSnap() + 1)
-
-    api.on("select", () => {
-      console.log("current")
-      setCurrent(api.selectedScrollSnap() + 1)
-    })
-  }, [api])
-
-  return (
-    <div>
-      <Carousel setApi={setApi} className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-      <div className="py-2 text-center text-sm text-muted-foreground">
-        Slide {current} of {count}
-      </div>
-    </div>
-  )
-}

app/__registry__/default/example/carousel-demo.tsx

@@ -1,32 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/registry/default/ui/carousel"
-
-export default function CarouselDemo() {
-  return (
-    <Carousel className="w-full max-w-xs">
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index}>
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  )
-}

app/__registry__/default/example/carousel-orientation.tsx

@@ -1,38 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/registry/default/ui/carousel"
-
-export default function CarouselOrientation() {
-  return (
-    <Carousel
-      opts={{
-        align: "start",
-      }}
-      orientation="vertical"
-      className="w-full max-w-xs"
-    >
-      <CarouselContent className="-mt-1 h-[200px]">
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index} className="pt-1 md:basis-1/2">
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex items-center justify-center p-6">
-                  <span className="text-3xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  )
-}

app/__registry__/default/example/carousel-plugin.tsx

@@ -1,42 +0,0 @@
-import * as React from "react"
-import Autoplay from "embla-carousel-autoplay"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/registry/default/ui/carousel"
-
-export default function CarouselPlugin() {
-  const plugin = React.useRef(
-    Autoplay({ delay: 2000, stopOnInteraction: true })
-  )
-
-  return (
-    <Carousel
-      plugins={[plugin.current]}
-      className="w-full max-w-xs"
-      onMouseEnter={plugin.current.stop}
-      onMouseLeave={plugin.current.reset}
-    >
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index}>
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  )
-}

app/__registry__/default/example/carousel-size.tsx

@@ -1,37 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/registry/default/ui/carousel"
-
-export default function CarouselSize() {
-  return (
-    <Carousel
-      opts={{
-        align: "start",
-      }}
-      className="w-full max-w-sm"
-    >
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-3xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  )
-}

app/__registry__/default/example/carousel-spacing.tsx

@@ -1,32 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/registry/default/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/registry/default/ui/carousel"
-
-export default function CarouselSpacing() {
-  return (
-    <Carousel className="w-full max-w-sm">
-      <CarouselContent className="-ml-1">
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-2xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  )
-}

app/__registry__/default/example/checkbox-demo.tsx

@@ -1,17 +0,0 @@
-"use client"
-
-import { Checkbox } from "@/registry/default/ui/checkbox"
-
-export default function CheckboxDemo() {
-  return (
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms" />
-      <label
-        htmlFor="terms"
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
-  )
-}

app/__registry__/default/example/checkbox-disabled.tsx

@@ -1,15 +0,0 @@
-import { Checkbox } from "@/registry/default/ui/checkbox"
-
-export default function CheckboxDisabled() {
-  return (
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms2" disabled />
-      <label
-        htmlFor="terms2"
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
-  )
-}

app/__registry__/default/example/checkbox-form-multiple.tsx

@@ -1,127 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/registry/default/ui/button"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const items = [
-  {
-    id: "recents",
-    label: "Recents",
-  },
-  {
-    id: "home",
-    label: "Home",
-  },
-  {
-    id: "applications",
-    label: "Applications",
-  },
-  {
-    id: "desktop",
-    label: "Desktop",
-  },
-  {
-    id: "downloads",
-    label: "Downloads",
-  },
-  {
-    id: "documents",
-    label: "Documents",
-  },
-] as const
-
-const FormSchema = z.object({
-  items: z.array(z.string()).refine((value) => value.some((item) => item), {
-    message: "You have to select at least one item.",
-  }),
-})
-
-export default function CheckboxReactHookFormMultiple() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      items: ["recents", "home"],
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="items"
-          render={() => (
-            <FormItem>
-              <div className="mb-4">
-                <FormLabel className="text-base">Sidebar</FormLabel>
-                <FormDescription>
-                  Select the items you want to display in the sidebar.
-                </FormDescription>
-              </div>
-              {items.map((item) => (
-                <FormField
-                  key={item.id}
-                  control={form.control}
-                  name="items"
-                  render={({ field }) => {
-                    return (
-                      <FormItem
-                        key={item.id}
-                        className="flex flex-row items-start space-x-3 space-y-0"
-                      >
-                        <FormControl>
-                          <Checkbox
-                            checked={field.value?.includes(item.id)}
-                            onCheckedChange={(checked) => {
-                              return checked
-                                ? field.onChange([...field.value, item.id])
-                                : field.onChange(
-                                    field.value?.filter(
-                                      (value) => value !== item.id
-                                    )
-                                  )
-                            }}
-                          />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          {item.label}
-                        </FormLabel>
-                      </FormItem>
-                    )
-                  }}
-                />
-              ))}
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/checkbox-form-single.tsx

@@ -1,73 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/registry/default/ui/button"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/registry/default/ui/form"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const FormSchema = z.object({
-  mobile: z.boolean().default(false).optional(),
-})
-
-export default function CheckboxReactHookFormSingle() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      mobile: true,
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="mobile"
-          render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-              <FormControl>
-                <Checkbox
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-              <div className="space-y-1 leading-none">
-                <FormLabel>
-                  Use different settings for my mobile devices
-                </FormLabel>
-                <FormDescription>
-                  You can manage your mobile notifications in the{" "}
-                  <Link href="/examples/forms">mobile settings</Link> page.
-                </FormDescription>
-              </div>
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/checkbox-with-text.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import { Checkbox } from "@/registry/default/ui/checkbox"
-
-export default function CheckboxWithText() {
-  return (
-    <div className="items-top flex space-x-2">
-      <Checkbox id="terms1" />
-      <div className="grid gap-1.5 leading-none">
-        <label
-          htmlFor="terms1"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Accept terms and conditions
-        </label>
-        <p className="text-sm text-muted-foreground">
-          You agree to our Terms of Service and Privacy Policy.
-        </p>
-      </div>
-    </div>
-  )
-}

app/__registry__/default/example/collapsible-demo.tsx

@@ -1,46 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronsUpDown, Plus, X } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/registry/default/ui/collapsible"
-
-export default function CollapsibleDemo() {
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="w-[350px] space-y-2"
-    >
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">
-          @peduarte starred 3 repositories
-        </h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm" className="w-9 p-0">
-            <ChevronsUpDown className="h-4 w-4" />
-            <span className="sr-only">Toggle</span>
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <div className="rounded-md border px-4 py-3 font-mono text-sm">
-        @radix-ui/primitives
-      </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @radix-ui/colors
-        </div>
-        <div className="rounded-md border px-4 py-3 font-mono text-sm">
-          @stitches/react
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  )
-}

app/__registry__/default/example/combobox-demo.tsx

@@ -1,91 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Check, ChevronsUpDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/registry/default/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-const frameworks = [
-  {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
-  },
-]
-
-export default function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {value
-            ? frameworks.find((framework) => framework.value === value)?.label
-            : "Select framework..."}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder="Search framework..." />
-          <CommandEmpty>No framework found.</CommandEmpty>
-          <CommandGroup>
-            {frameworks.map((framework) => (
-              <CommandItem
-                key={framework.value}
-                value={framework.value}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? "" : currentValue)
-                  setOpen(false)
-                }}
-              >
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    value === framework.value ? "opacity-100" : "opacity-0"
-                  )}
-                />
-                {framework.label}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}

app/__registry__/default/example/combobox-dropdown-menu.tsx

@@ -1,111 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Calendar, MoreHorizontal, Tags, Trash, User } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-const labels = [
-  "feature",
-  "bug",
-  "enhancement",
-  "documentation",
-  "design",
-  "question",
-  "maintenance",
-]
-
-export default function ComboboxDropdownMenu() {
-  const [label, setLabel] = React.useState("feature")
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
-      <p className="text-sm font-medium leading-none">
-        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
-          {label}
-        </span>
-        <span className="text-muted-foreground">Create a new project</span>
-      </p>
-      <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <MoreHorizontal />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[200px]">
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DropdownMenuGroup>
-            <DropdownMenuItem>
-              <User className="mr-2 h-4 w-4" />
-              Assign to...
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <Calendar className="mr-2 h-4 w-4" />
-              Set due date...
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>
-                <Tags className="mr-2 h-4 w-4" />
-                Apply label
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="p-0">
-                <Command>
-                  <CommandInput
-                    placeholder="Filter label..."
-                    autoFocus={true}
-                  />
-                  <CommandList>
-                    <CommandEmpty>No label found.</CommandEmpty>
-                    <CommandGroup>
-                      {labels.map((label) => (
-                        <CommandItem
-                          key={label}
-                          value={label}
-                          onSelect={(value) => {
-                            setLabel(value)
-                            setOpen(false)
-                          }}
-                        >
-                          {label}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-red-600">
-              <Trash className="mr-2 h-4 w-4" />
-              Delete
-              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}

app/__registry__/default/example/combobox-form.tsx

@@ -1,135 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Check, ChevronsUpDown } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/registry/default/ui/command"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const languages = [
-  { label: "English", value: "en" },
-  { label: "French", value: "fr" },
-  { label: "German", value: "de" },
-  { label: "Spanish", value: "es" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Russian", value: "ru" },
-  { label: "Japanese", value: "ja" },
-  { label: "Korean", value: "ko" },
-  { label: "Chinese", value: "zh" },
-] as const
-
-const FormSchema = z.object({
-  language: z.string({
-    required_error: "Please select a language.",
-  }),
-})
-
-export default function ComboboxForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="language"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Language</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value
-                        ? languages.find(
-                            (language) => language.value === field.value
-                          )?.label
-                        : "Select language"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search language..." />
-                    <CommandEmpty>No language found.</CommandEmpty>
-                    <CommandGroup>
-                      {languages.map((language) => (
-                        <CommandItem
-                          value={language.label}
-                          key={language.value}
-                          onSelect={() => {
-                            form.setValue("language", language.value)
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              language.value === field.value
-                                ? "opacity-100"
-                                : "opacity-0"
-                            )}
-                          />
-                          {language.label}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                This is the language that will be used in the dashboard.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/combobox-popover.tsx

@@ -1,125 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ArrowUpCircle,
-  CheckCircle2,
-  Circle,
-  HelpCircle,
-  LucideIcon,
-  XCircle,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-type Status = {
-  value: string
-  label: string
-  icon: LucideIcon
-}
-
-const statuses: Status[] = [
-  {
-    value: "backlog",
-    label: "Backlog",
-    icon: HelpCircle,
-  },
-  {
-    value: "todo",
-    label: "Todo",
-    icon: Circle,
-  },
-  {
-    value: "in progress",
-    label: "In Progress",
-    icon: ArrowUpCircle,
-  },
-  {
-    value: "done",
-    label: "Done",
-    icon: CheckCircle2,
-  },
-  {
-    value: "canceled",
-    label: "Canceled",
-    icon: XCircle,
-  },
-]
-
-export default function ComboboxPopover() {
-  const [open, setOpen] = React.useState(false)
-  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
-    null
-  )
-
-  return (
-    <div className="flex items-center space-x-4">
-      <p className="text-sm text-muted-foreground">Status</p>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            size="sm"
-            className="w-[150px] justify-start"
-          >
-            {selectedStatus ? (
-              <>
-                <selectedStatus.icon className="mr-2 h-4 w-4 shrink-0" />
-                {selectedStatus.label}
-              </>
-            ) : (
-              <>+ Set status</>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0" side="right" align="start">
-          <Command>
-            <CommandInput placeholder="Change status..." />
-            <CommandList>
-              <CommandEmpty>No results found.</CommandEmpty>
-              <CommandGroup>
-                {statuses.map((status) => (
-                  <CommandItem
-                    key={status.value}
-                    value={status.value}
-                    onSelect={(value) => {
-                      setSelectedStatus(
-                        statuses.find((priority) => priority.value === value) ||
-                          null
-                      )
-                      setOpen(false)
-                    }}
-                  >
-                    <status.icon
-                      className={cn(
-                        "mr-2 h-4 w-4",
-                        status.value === selectedStatus?.value
-                          ? "opacity-100"
-                          : "opacity-40"
-                      )}
-                    />
-                    <span>{status.label}</span>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}

app/__registry__/default/example/combobox-responsive.tsx

@@ -1,123 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { useMediaQuery } from "@/hooks/use-media-query"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/default/ui/command"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-type Status = {
-  value: string
-  label: string
-}
-
-const statuses: Status[] = [
-  {
-    value: "backlog",
-    label: "Backlog",
-  },
-  {
-    value: "todo",
-    label: "Todo",
-  },
-  {
-    value: "in progress",
-    label: "In Progress",
-  },
-  {
-    value: "done",
-    label: "Done",
-  },
-  {
-    value: "canceled",
-    label: "Canceled",
-  },
-]
-
-export default function ComboBoxResponsive() {
-  const [open, setOpen] = React.useState(false)
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(
-    null
-  )
-
-  if (isDesktop) {
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button variant="outline" className="w-[150px] justify-start">
-            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[200px] p-0" align="start">
-          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
-        </PopoverContent>
-      </Popover>
-    )
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>
-        <Button variant="outline" className="w-[150px] justify-start">
-          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-        </Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mt-4 border-t">
-          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-function StatusList({
-  setOpen,
-  setSelectedStatus,
-}: {
-  setOpen: (open: boolean) => void
-  setSelectedStatus: (status: Status | null) => void
-}) {
-  return (
-    <Command>
-      <CommandInput placeholder="Filter status..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup>
-          {statuses.map((status) => (
-            <CommandItem
-              key={status.value}
-              value={status.value}
-              onSelect={(value) => {
-                setSelectedStatus(
-                  statuses.find((priority) => priority.value === value) || null
-                )
-                setOpen(false)
-              }}
-            >
-              {status.label}
-            </CommandItem>
-          ))}
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}

app/__registry__/default/example/command-demo.tsx

@@ -1,62 +0,0 @@
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/default/ui/command"
-
-export default function CommandDemo() {
-  return (
-    <Command className="rounded-lg border shadow-md">
-      <CommandInput placeholder="Type a command or search..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Suggestions">
-          <CommandItem>
-            <Calendar className="mr-2 h-4 w-4" />
-            <span>Calendar</span>
-          </CommandItem>
-          <CommandItem>
-            <Smile className="mr-2 h-4 w-4" />
-            <span>Search Emoji</span>
-          </CommandItem>
-          <CommandItem>
-            <Calculator className="mr-2 h-4 w-4" />
-            <span>Calculator</span>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Settings">
-          <CommandItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
-            <CommandShortcut>⌘P</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
-            <CommandShortcut>⌘B</CommandShortcut>
-          </CommandItem>
-          <CommandItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <CommandShortcut>⌘S</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}

app/__registry__/default/example/command-dialog.tsx

@@ -1,87 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
-
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from "@/registry/default/ui/command"
-
-export default function CommandDialogDemo() {
-  const [open, setOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  return (
-    <>
-      <p className="text-sm text-muted-foreground">
-        Press{" "}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <Calendar className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <Smile className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <Calculator className="mr-2 h-4 w-4" />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <User className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <CreditCard className="mr-2 h-4 w-4" />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <Settings className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </>
-  )
-}

app/__registry__/default/example/context-menu-demo.tsx

@@ -1,67 +0,0 @@
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "@/registry/default/ui/context-menu"
-
-export default function ContextMenuDemo() {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-        Right click here
-      </ContextMenuTrigger>
-      <ContextMenuContent className="w-64">
-        <ContextMenuItem inset>
-          Back
-          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem inset disabled>
-          Forward
-          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuItem inset>
-          Reload
-          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-        </ContextMenuItem>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-          <ContextMenuSubContent className="w-48">
-            <ContextMenuItem>
-              Save Page As...
-              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-            <ContextMenuItem>Name Window...</ContextMenuItem>
-            <ContextMenuSeparator />
-            <ContextMenuItem>Developer Tools</ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-        <ContextMenuSeparator />
-        <ContextMenuCheckboxItem checked>
-          Show Bookmarks Bar
-          <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-        <ContextMenuSeparator />
-        <ContextMenuRadioGroup value="pedro">
-          <ContextMenuLabel inset>People</ContextMenuLabel>
-          <ContextMenuSeparator />
-          <ContextMenuRadioItem value="pedro">
-            Pedro Duarte
-          </ContextMenuRadioItem>
-          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenu>
-  )
-}

app/__registry__/default/example/data-table-demo.tsx

@@ -1,312 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  SortingState,
-  useReactTable,
-  VisibilityState,
-} from "@tanstack/react-table"
-import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import { Checkbox } from "@/registry/default/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-import { Input } from "@/registry/default/ui/input"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/registry/default/ui/table"
-
-const data: Payment[] = [
-  {
-    id: "m5gr84i9",
-    amount: 316,
-    status: "success",
-    email: "ken99@yahoo.com",
-  },
-  {
-    id: "3u1reuv4",
-    amount: 242,
-    status: "success",
-    email: "Abe45@gmail.com",
-  },
-  {
-    id: "derv1ws0",
-    amount: 837,
-    status: "processing",
-    email: "Monserrat44@gmail.com",
-  },
-  {
-    id: "5kma53ae",
-    amount: 874,
-    status: "success",
-    email: "Silas22@gmail.com",
-  },
-  {
-    id: "bhqecj4p",
-    amount: 721,
-    status: "failed",
-    email: "carmella@hotmail.com",
-  },
-]
-
-export type Payment = {
-  id: string
-  amount: number
-  status: "pending" | "processing" | "success" | "failed"
-  email: string
-}
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ row }) => (
-      <div className="capitalize">{row.getValue("status")}</div>
-    ),
-  },
-  {
-    accessorKey: "email",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Email
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      )
-    },
-    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
-  },
-  {
-    accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }) => {
-      const amount = parseFloat(row.getValue("amount"))
-
-      // Format the amount as a dollar amount
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount)
-
-      return <div className="text-right font-medium">{formatted}</div>
-    },
-  },
-  {
-    id: "actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      const payment = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(payment.id)}
-            >
-              Copy payment ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>View customer</DropdownMenuItem>
-            <DropdownMenuItem>View payment details</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
-
-export default function DataTableDemo() {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  })
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4">
-        <Input
-          placeholder="Filter emails..."
-          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
-          onChange={(event) =>
-            table.getColumn("email")?.setFilterValue(event.target.value)
-          }
-          className="max-w-sm"
-        />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="ml-auto">
-              Columns <ChevronDown className="ml-2 h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {table
-              .getAllColumns()
-              .filter((column) => column.getCanHide())
-              .map((column) => {
-                return (
-                  <DropdownMenuCheckboxItem
-                    key={column.id}
-                    className="capitalize"
-                    checked={column.getIsVisible()}
-                    onCheckedChange={(value) =>
-                      column.toggleVisibility(!!value)
-                    }
-                  >
-                    {column.id}
-                  </DropdownMenuCheckboxItem>
-                )
-              })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <TableHead key={header.id}>
-                      {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>
-      <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="flex-1 text-sm text-muted-foreground">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-        <div className="space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

app/__registry__/default/example/date-picker-demo.tsx

@@ -1,43 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-export default function DatePickerDemo() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          initialFocus
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}

app/__registry__/default/example/date-picker-form.tsx

@@ -1,101 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const FormSchema = z.object({
-  dob: z.date({
-    required_error: "A date of birth is required.",
-  }),
-})
-
-export default function DatePickerForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="dob"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Date of birth</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "w-[240px] pl-3 text-left font-normal",
-                        !field.value && "text-muted-foreground"
-                      )}
-                    >
-                      {field.value ? (
-                        format(field.value, "PPP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
-                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="start">
-                  <Calendar
-                    mode="single"
-                    selected={field.value}
-                    onSelect={field.onChange}
-                    disabled={(date) =>
-                      date > new Date() || date < new Date("1900-01-01")
-                    }
-                    initialFocus
-                  />
-                </PopoverContent>
-              </Popover>
-              <FormDescription>
-                Your date of birth is used to calculate your age.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/date-picker-with-presets.tsx

@@ -1,62 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/default/ui/select"
-
-export default function DatePickerWithPresets() {
-  const [date, setDate] = React.useState<Date>()
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn(
-            "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4" />
-          {date ? format(date, "PPP") : <span>Pick a date</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
-        <Select
-          onValueChange={(value) =>
-            setDate(addDays(new Date(), parseInt(value)))
-          }
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select" />
-          </SelectTrigger>
-          <SelectContent position="popper">
-            <SelectItem value="0">Today</SelectItem>
-            <SelectItem value="1">Tomorrow</SelectItem>
-            <SelectItem value="3">In 3 days</SelectItem>
-            <SelectItem value="7">In a week</SelectItem>
-          </SelectContent>
-        </Select>
-        <div className="rounded-md border">
-          <Calendar mode="single" selected={date} onSelect={setDate} />
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}

app/__registry__/default/example/date-picker-with-range.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
-import { DateRange } from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/registry/default/ui/button"
-import { Calendar } from "@/registry/default/ui/calendar"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/default/ui/popover"
-
-export default function DatePickerWithRange({
-  className,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(2022, 0, 20),
-    to: addDays(new Date(2022, 0, 20), 20),
-  })
-
-  return (
-    <div className={cn("grid gap-2", className)}>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            variant={"outline"}
-            className={cn(
-              "w-[300px] justify-start text-left font-normal",
-              !date && "text-muted-foreground"
-            )}
-          >
-            <CalendarIcon className="mr-2 h-4 w-4" />
-            {date?.from ? (
-              date.to ? (
-                <>
-                  {format(date.from, "LLL dd, y")} -{" "}
-                  {format(date.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(date.from, "LLL dd, y")
-              )
-            ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <Calendar
-            initialFocus
-            mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
-            numberOfMonths={2}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}

app/__registry__/default/example/dialog-close-button.tsx

@@ -1,56 +0,0 @@
-import { Copy } from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/default/ui/dialog"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function DialogCloseButton() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Share</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Share link</DialogTitle>
-          <DialogDescription>
-            Anyone who has this link will be able to view this.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-center space-x-2">
-          <div className="grid flex-1 gap-2">
-            <Label htmlFor="link" className="sr-only">
-              Link
-            </Label>
-            <Input
-              id="link"
-              defaultValue="https://ui.hanzo.ai/docs/installation"
-              readOnly
-            />
-          </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <Copy className="h-4 w-4" />
-          </Button>
-        </div>
-        <DialogFooter className="sm:justify-start">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

app/__registry__/default/example/dialog-demo.tsx

@@ -1,55 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/default/ui/dialog"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function DialogDemo() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
-              Name
-            </Label>
-            <Input
-              id="name"
-              defaultValue="Pedro Duarte"
-              className="col-span-3"
-            />
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
-              Username
-            </Label>
-            <Input
-              id="username"
-              defaultValue="@peduarte"
-              className="col-span-3"
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

app/__registry__/default/example/drawer-demo.tsx

@@ -1,134 +0,0 @@
-import * as React from "react"
-import { Minus, Plus } from "lucide-react"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-
-const data = [
-  {
-    goal: 400,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 239,
-  },
-  {
-    goal: 300,
-  },
-  {
-    goal: 200,
-  },
-  {
-    goal: 278,
-  },
-  {
-    goal: 189,
-  },
-  {
-    goal: 349,
-  },
-]
-
-export default function DrawerDemo() {
-  const [goal, setGoal] = React.useState(350)
-
-  function onClick(adjustment: number) {
-    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
-  }
-
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Move Goal</DrawerTitle>
-            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-          </DrawerHeader>
-          <div className="p-4 pb-0">
-            <div className="flex items-center justify-center space-x-2">
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(-10)}
-                disabled={goal <= 200}
-              >
-                <Minus className="h-4 w-4" />
-                <span className="sr-only">Decrease</span>
-              </Button>
-              <div className="flex-1 text-center">
-                <div className="text-7xl font-bold tracking-tighter">
-                  {goal}
-                </div>
-                <div className="text-[0.70rem] uppercase text-muted-foreground">
-                  Calories/day
-                </div>
-              </div>
-              <Button
-                variant="outline"
-                size="icon"
-                className="h-8 w-8 shrink-0 rounded-full"
-                onClick={() => onClick(10)}
-                disabled={goal >= 400}
-              >
-                <Plus className="h-4 w-4" />
-                <span className="sr-only">Increase</span>
-              </Button>
-            </div>
-            <div className="mt-3 h-[120px]">
-              <ResponsiveContainer width="100%" height="100%">
-                <BarChart data={data}>
-                  <Bar
-                    dataKey="goal"
-                    style={
-                      {
-                        fill: "hsl(var(--foreground))",
-                        opacity: 0.9,
-                      } as React.CSSProperties
-                    }
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-          <DrawerFooter>
-            <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}

app/__registry__/default/example/drawer-dialog.tsx

@@ -1,87 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-import { useMediaQuery } from "@/hooks/use-media-query"
-import { Button } from "@/registry/default/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/default/ui/dialog"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/default/ui/drawer"
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function DrawerDialogDemo() {
-  const [open, setOpen] = React.useState(false)
-  const isDesktop = useMediaQuery("(min-width: 768px)")
-
-  if (isDesktop) {
-    return (
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <Button variant="outline">Edit Profile</Button>
-        </DialogTrigger>
-        <DialogContent className="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>Edit profile</DialogTitle>
-            <DialogDescription>
-              Make changes to your profile here. Click save when you're done.
-            </DialogDescription>
-          </DialogHeader>
-          <ProfileForm />
-        </DialogContent>
-      </Dialog>
-    )
-  }
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader className="text-left">
-          <DrawerTitle>Edit profile</DrawerTitle>
-          <DrawerDescription>
-            Make changes to your profile here. Click save when you're done.
-          </DrawerDescription>
-        </DrawerHeader>
-        <ProfileForm className="px-4" />
-        <DrawerFooter className="pt-2">
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
-}
-
-function ProfileForm({ className }: React.ComponentProps<"form">) {
-  return (
-    <form className={cn("grid items-start gap-4", className)}>
-      <div className="grid gap-2">
-        <Label htmlFor="email">Email</Label>
-        <Input type="email" id="email" defaultValue="hanzo@example.com" />
-      </div>
-      <div className="grid gap-2">
-        <Label htmlFor="username">Username</Label>
-        <Input id="username" defaultValue="@hanzoai" />
-      </div>
-      <Button type="submit">Save changes</Button>
-    </form>
-  )
-}

app/__registry__/default/example/dropdown-menu-checkboxes.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-type Checked = DropdownMenuCheckboxItemProps["checked"]
-
-export default function DropdownMenuCheckboxes() {
-  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
-  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
-  const [showPanel, setShowPanel] = React.useState<Checked>(false)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem
-          checked={showStatusBar}
-          onCheckedChange={setShowStatusBar}
-        >
-          Status Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={showActivityBar}
-          onCheckedChange={setShowActivityBar}
-          disabled
-        >
-          Activity Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          checked={showPanel}
-          onCheckedChange={setShowPanel}
-        >
-          Panel
-        </DropdownMenuCheckboxItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

app/__registry__/default/example/dropdown-menu-demo.tsx

@@ -1,122 +0,0 @@
-import {
-  Cloud,
-  CreditCard,
-  Github,
-  Keyboard,
-  LifeBuoy,
-  LogOut,
-  Mail,
-  MessageSquare,
-  Plus,
-  PlusCircle,
-  Settings,
-  User,
-  UserPlus,
-  Users,
-} from "lucide-react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function DropdownMenuDemo() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
-            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
-            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
-            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <Keyboard className="mr-2 h-4 w-4" />
-            <span>Keyboard shortcuts</span>
-            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <Users className="mr-2 h-4 w-4" />
-            <span>Team</span>
-          </DropdownMenuItem>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <UserPlus className="mr-2 h-4 w-4" />
-              <span>Invite users</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>
-                  <Mail className="mr-2 h-4 w-4" />
-                  <span>Email</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <MessageSquare className="mr-2 h-4 w-4" />
-                  <span>Message</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <PlusCircle className="mr-2 h-4 w-4" />
-                  <span>More...</span>
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuItem>
-            <Plus className="mr-2 h-4 w-4" />
-            <span>New Team</span>
-            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Github className="mr-2 h-4 w-4" />
-          <span>GitHub</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <LifeBuoy className="mr-2 h-4 w-4" />
-          <span>Support</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem disabled>
-          <Cloud className="mr-2 h-4 w-4" />
-          <span>API</span>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <LogOut className="mr-2 h-4 w-4" />
-          <span>Log out</span>
-          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

app/__registry__/default/example/dropdown-menu-radio-group.tsx

@@ -1,35 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/default/ui/dropdown-menu"
-
-export default function DropdownMenuRadioGroupDemo() {
-  const [position, setPosition] = React.useState("bottom")
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

app/__registry__/default/example/hover-card-demo.tsx

@@ -1,43 +0,0 @@
-import { CalendarDays } from "lucide-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/default/ui/avatar"
-import { Button } from "@/registry/default/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/registry/default/ui/hover-card"
-
-export default function HoverCardDemo() {
-  return (
-    <HoverCard>
-      <HoverCardTrigger asChild>
-        <Button variant="link">@nextjs</Button>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex justify-between space-x-4">
-          <Avatar>
-            <AvatarImage src="https://github.com/vercel.png" />
-            <AvatarFallback>VC</AvatarFallback>
-          </Avatar>
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">
-              The React Framework – created and maintained by @vercel.
-            </p>
-            <div className="flex items-center pt-2">
-              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
-              <span className="text-xs text-muted-foreground">
-                Joined December 2021
-              </span>
-            </div>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  )
-}

app/__registry__/default/example/input-demo.tsx

@@ -1,5 +0,0 @@
-import { Input } from "@/registry/default/ui/input"
-
-export default function InputDemo() {
-  return <Input type="email" placeholder="Email" />
-}

app/__registry__/default/example/input-disabled.tsx

@@ -1,5 +0,0 @@
-import { Input } from "@/registry/default/ui/input"
-
-export default function InputDisabled() {
-  return <Input disabled type="email" placeholder="Email" />
-}

app/__registry__/default/example/input-file.tsx

@@ -1,11 +0,0 @@
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function InputFile() {
-  return (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="picture">Picture</Label>
-      <Input id="picture" type="file" />
-    </div>
-  )
-}

app/__registry__/default/example/input-form.tsx

@@ -1,68 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import { Input } from "@/registry/default/ui/input"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const FormSchema = z.object({
-  username: z.string().min(2, {
-    message: "Username must be at least 2 characters.",
-  }),
-})
-
-export default function InputForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      username: "",
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="hanzo" {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/input-otp-controlled.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/registry/default/ui/input-otp"
-
-export default function InputOTPControlled() {
-  const [value, setValue] = React.useState("")
-
-  return (
-    <div className="space-y-2">
-      <InputOTP
-        maxLength={6}
-        value={value}
-        onChange={(value) => setValue(value)}
-      >
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-      <div className="text-center text-sm">
-        {value === "" ? (
-          <>Enter your one-time password.</>
-        ) : (
-          <>You entered: {value}</>
-        )}
-      </div>
-    </div>
-  )
-}

app/__registry__/default/example/input-otp-demo.tsx

@@ -1,24 +0,0 @@
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/registry/default/ui/input-otp"
-
-export default function InputOTPDemo() {
-  return (
-    <InputOTP maxLength={6}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  )
-}

app/__registry__/default/example/input-otp-form.tsx

@@ -1,82 +0,0 @@
-"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-import { Button } from "@/registry/default/ui/button"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/registry/default/ui/form"
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/registry/default/ui/input-otp"
-import { toast } from "@/registry/default/ui/use-toast"
-
-const FormSchema = z.object({
-  pin: z.string().min(6, {
-    message: "Your one-time password must be 6 characters.",
-  }),
-})
-
-export default function InputOTPForm() {
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      pin: "",
-    },
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    })
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField
-          control={form.control}
-          name="pin"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>One-Time Password</FormLabel>
-              <FormControl>
-                <InputOTP maxLength={6} {...field}>
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormControl>
-              <FormDescription>
-                Please enter the one-time password sent to your phone.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}

app/__registry__/default/example/input-otp-pattern.tsx

@@ -1,22 +0,0 @@
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/registry/default/ui/input-otp"
-
-export default function InputOTPPattern() {
-  return (
-    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  )
-}

app/__registry__/default/example/input-otp-separator.tsx

@@ -1,29 +0,0 @@
-import React from "react"
-
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/registry/default/ui/input-otp"
-
-export default function InputOTPWithSeparator() {
-  return (
-    <InputOTP maxLength={6}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-      </InputOTPGroup>
-      <InputOTPSeparator />
-      <InputOTPGroup>
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  )
-}

app/__registry__/default/example/input-with-button.tsx

@@ -1,11 +0,0 @@
-import { Button } from "@/registry/default/ui/button"
-import { Input } from "@/registry/default/ui/input"
-
-export default function InputWithButton() {
-  return (
-    <div className="flex w-full max-w-sm items-center space-x-2">
-      <Input type="email" placeholder="Email" />
-      <Button type="submit">Subscribe</Button>
-    </div>
-  )
-}

app/__registry__/default/example/input-with-label.tsx

@@ -1,11 +0,0 @@
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function InputWithLabel() {
-  return (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email">Email</Label>
-      <Input type="email" id="email" placeholder="Email" />
-    </div>
-  )
-}

app/__registry__/default/example/input-with-text.tsx

@@ -1,12 +0,0 @@
-import { Input } from "@/registry/default/ui/input"
-import { Label } from "@/registry/default/ui/label"
-
-export default function InputWithText() {
-  return (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email-2">Email</Label>
-      <Input type="email" id="email-2" placeholder="Email" />
-      <p className="text-sm text-muted-foreground">Enter your email address.</p>
-    </div>
-  )
-}