{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "design-system",
  "type": "registry:block",
  "dependencies": [
    "lucide-react",
    "sonner"
  ],
  "registryDependencies": [
    "accordion",
    "avatar",
    "badge",
    "button",
    "card",
    "checkbox",
    "input",
    "label",
    "progress",
    "radio-group",
    "select",
    "separator",
    "skeleton",
    "slider",
    "sonner",
    "switch",
    "tabs",
    "textarea"
  ],
  "files": [
    {
      "path": "registry/new-york/design-system/components/footer.tsx",
      "content": "export function Footer() {\n  return (\n    <footer className=\"border-t py-8 mt-12\">\n      <div className=\"container px-8 text-center text-sm text-muted-foreground\">\n        Built with React, Radix UI, and Tailwind CSS\n      </div>\n    </footer>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/components/header.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { ThemeToggle } from \"@/components/theme-toggle\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { \n  Bell, \n  Settings, \n  Moon\n} from \"lucide-react\";\n\nexport function Header() {\n  return (\n    <header className=\"sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n      <div className=\"container flex h-16 items-center justify-between px-8\">\n        <div className=\"flex items-center gap-6\">\n          <a href=\"/\" className=\"text-xl font-semibold hover:text-foreground/80 transition-colors\">\n              Design System\n            </a>\n          <nav aria-label=\"Main navigation\" className=\"hidden md:flex items-center gap-6\">\n            <a href=\"#tokens\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n              Design Tokens\n            </a>\n            <a href=\"#components\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n              Components\n            </a>\n            <a href=\"#forms\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n              Forms\n            </a>\n            <a href=\"#feedback\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n              Feedback\n            </a>\n          </nav>\n        </div>\n        <div className=\"flex items-center gap-3\">\n            <ThemeToggle /> \n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Notifications\">\n            <Bell className=\"size-4\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">\n            <Settings className=\"size-4\" />\n          </Button>\n          <Avatar>\n            <AvatarImage src=\"https://github.com/shadcn.png\" />\n            <AvatarFallback>JK</AvatarFallback>\n          </Avatar>\n        </div>\n      </div>\n    </header>\n  );\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/components/palettes.tsx",
      "content": "\"use client\"\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport function TailwindColorPalettes() {\n  // Helper to generate color scale from 50-950\n  const generateColorScale = (colorName: string) => {\n    const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];\n    return scales.map(scale => ({\n      scale,\n      var: `--${colorName}-${scale}`,\n      style: { backgroundColor: `var(--${colorName}-${scale})` }\n    }));\n  };\n\n  // Neutral/Gray color families\n  const neutralColors = {\n    slate: generateColorScale('slate'),\n    gray: generateColorScale('gray'),\n    zinc: generateColorScale('zinc'),\n    neutral: generateColorScale('neutral'),\n    stone: generateColorScale('stone'),\n  };\n\n  // Color families\n  const colorFamilies = {\n    red: generateColorScale('red'),\n    orange: generateColorScale('orange'),\n    amber: generateColorScale('amber'),\n    yellow: generateColorScale('yellow'),\n    green: generateColorScale('green'),\n    emerald: generateColorScale('emerald'),\n    teal: generateColorScale('teal'),\n    cyan: generateColorScale('cyan'),\n    sky: generateColorScale('sky'),\n    blue: generateColorScale('blue'),\n    indigo: generateColorScale('indigo'),\n    violet: generateColorScale('violet'),\n    purple: generateColorScale('purple'),\n    fuchsia: generateColorScale('fuchsia'),\n    pink: generateColorScale('pink'),\n    rose: generateColorScale('rose'),\n  };\n\n  const ColorScaleRow = ({ name, colors }: { name: string; colors: Array<{ scale: number; var: string; style: any }> }) => (\n    <div className=\"space-y-2\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"text-sm font-medium capitalize w-20\">{name}</span>\n        <div className=\"flex-1 grid grid-cols-11 gap-1\">\n          {colors.map((color) => (\n            <div\n              key={color.scale}\n              className=\"group relative\"\n            >\n              <div\n                className=\"h-10 rounded border cursor-pointer transition-transform hover:scale-110 hover:z-10\"\n                style={color.style}\n                title={`${name}-${color.scale}`}\n              />\n              <div className=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none\">\n                <span className=\"text-xs font-mono bg-black/75 text-white px-1 rounded\">\n                  {color.scale}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <section className=\"space-y-6\">\n      <div>\n        <h3 className=\"text-2xl mb-2\">Tailwind Color Palettes</h3>\n        <p className=\"text-muted-foreground\">Complete default Tailwind CSS color system from 50-950</p>\n      </div>\n\n      <Tabs defaultValue=\"neutrals\" className=\"w-full\">\n        <TabsList className=\"grid w-full max-w-md grid-cols-2\">\n          <TabsTrigger value=\"neutrals\">Neutrals & Grays</TabsTrigger>\n          <TabsTrigger value=\"colors\">Colors</TabsTrigger>\n        </TabsList>\n\n        {/* Neutrals Tab */}\n        <TabsContent value=\"neutrals\" className=\"mt-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Neutral Color Scales</CardTitle>\n              <CardDescription>\n                Five neutral color palettes optimized for different use cases. Each scale ranges from 50 (lightest) to 950 (darkest).\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              {Object.entries(neutralColors).map(([name, colors]) => (\n                <ColorScaleRow key={name} name={name} colors={colors} />\n              ))}\n              \n              <div className=\"mt-6 p-4 bg-muted rounded-lg space-y-2\">\n                <h4 className=\"text-sm font-semibold\">Usage Guide</h4>\n                <ul className=\"text-sm text-muted-foreground space-y-1\">\n                  <li><strong>Slate:</strong> Cool gray with subtle blue undertones</li>\n                  <li><strong>Gray:</strong> True gray, perfectly neutral</li>\n                  <li><strong>Zinc:</strong> Modern gray with slight cool tone</li>\n                  <li><strong>Neutral:</strong> Warm gray with balanced warmth</li>\n                  <li><strong>Stone:</strong> Warm gray with earthy undertones</li>\n                </ul>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        {/* Colors Tab */}\n        <TabsContent value=\"colors\" className=\"mt-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Full Color Spectrum</CardTitle>\n              <CardDescription>\n                Complete Tailwind color palette with all hues. Perfect for UI elements, data visualization, and brand colors.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              {Object.entries(colorFamilies).map(([name, colors]) => (\n                <ColorScaleRow key={name} name={name} colors={colors} />\n              ))}\n              \n              <div className=\"mt-6 grid md:grid-cols-2 gap-4\">\n                <div className=\"p-4 bg-muted rounded-lg space-y-2\">\n                  <h4 className=\"text-sm font-semibold\">Color Temperature</h4>\n                  <ul className=\"text-sm text-muted-foreground space-y-1\">\n                    <li><strong>Warm:</strong> Red, Orange, Amber, Yellow</li>\n                    <li><strong>Cool:</strong> Sky, Blue, Indigo, Violet</li>\n                    <li><strong>Balanced:</strong> Green, Teal, Cyan, Purple</li>\n                  </ul>\n                </div>\n                \n                <div className=\"p-4 bg-muted rounded-lg space-y-2\">\n                  <h4 className=\"text-sm font-semibold\">Common Uses</h4>\n                  <ul className=\"text-sm text-muted-foreground space-y-1\">\n                    <li><strong>Success:</strong> Green, Emerald</li>\n                    <li><strong>Warning:</strong> Amber, Yellow, Orange</li>\n                    <li><strong>Error:</strong> Red, Rose</li>\n                    <li><strong>Info:</strong> Blue, Sky, Cyan</li>\n                  </ul>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n\n      {/* Quick Reference Card */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Scale Reference</CardTitle>\n          <CardDescription>Understanding the color scale system</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4\">\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">50-200</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Very light tints for backgrounds and subtle accents\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">300-400</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Light colors for borders, disabled states, and secondary elements\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">500-600</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Base colors for primary UI elements, buttons, and links\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">700-950</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Dark shades for text, headings, and high-contrast elements\n              </p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/components/tokens.tsx",
      "content": "\"use client\"\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport function DesignTokens() {\n  const colorTokens = [\n    { name: \"Background\", var: \"--background\", class: \"bg-background\" },\n    { name: \"Foreground\", var: \"--foreground\", class: \"bg-foreground\" },\n    { name: \"Primary\", var: \"--primary\", class: \"bg-primary\" },\n    { name: \"Primary Foreground\", var: \"--primary-foreground\", class: \"bg-primary-foreground\" },\n    { name: \"Secondary\", var: \"--secondary\", class: \"bg-secondary\" },\n    { name: \"Secondary Foreground\", var: \"--secondary-foreground\", class: \"bg-secondary-foreground\" },\n    { name: \"Muted\", var: \"--muted\", class: \"bg-muted\" },\n    { name: \"Muted Foreground\", var: \"--muted-foreground\", class: \"bg-muted-foreground\" },\n    { name: \"Accent\", var: \"--accent\", class: \"bg-accent\" },\n    { name: \"Accent Foreground\", var: \"--accent-foreground\", class: \"bg-accent-foreground\" },\n    { name: \"Destructive\", var: \"--destructive\", class: \"bg-destructive\" },\n    { name: \"Destructive Foreground\", var: \"--destructive-foreground\", class: \"bg-destructive-foreground\" },\n  ];\n\n  const utilityColors = [\n    { name: \"Success\", var: \"--success\", class: \"bg-[var(--success)]\" },\n    { name: \"Warning\", var: \"--warning\", class: \"bg-[var(--warning)]\" },\n    { name: \"Info\", var: \"--info\", class: \"bg-[var(--info)]\" },\n  ];\n\n  const chartColors = [\n    { name: \"Chart 1\", var: \"--chart-1\", class: \"bg-chart-1\" },\n    { name: \"Chart 2\", var: \"--chart-2\", class: \"bg-chart-2\" },\n    { name: \"Chart 3\", var: \"--chart-3\", class: \"bg-chart-3\" },\n    { name: \"Chart 4\", var: \"--chart-4\", class: \"bg-chart-4\" },\n    { name: \"Chart 5\", var: \"--chart-5\", class: \"bg-chart-5\" },\n  ];\n\n  const typographyScale = [\n    { name: \"xs\", size: \"0.75rem\", var: \"--text-xs\", class: \"text-xs\" },\n    { name: \"sm\", size: \"0.875rem\", var: \"--text-sm\", class: \"text-sm\" },\n    { name: \"base\", size: \"1rem\", var: \"--text-base\", class: \"text-base\" },\n    { name: \"lg\", size: \"1.125rem\", var: \"--text-lg\", class: \"text-lg\" },\n    { name: \"xl\", size: \"1.25rem\", var: \"--text-xl\", class: \"text-xl\" },\n    { name: \"2xl\", size: \"1.5rem\", var: \"--text-2xl\", class: \"text-2xl\" },\n    { name: \"3xl\", size: \"1.875rem\", var: \"--text-3xl\", class: \"text-3xl\" },\n    { name: \"4xl\", size: \"2.25rem\", var: \"--text-4xl\", class: \"text-4xl\" },\n    { name: \"5xl\", size: \"3rem\", var: \"--text-5xl\", class: \"text-5xl\" },\n    { name: \"6xl\", size: \"3.75rem\", var: \"--text-6xl\", class: \"text-6xl\" },\n  ];\n\n  const fontWeights = [\n    { name: \"Light\", weight: \"300\", var: \"--font-weight-light\", class: \"font-light\" },\n    { name: \"Normal\", weight: \"400\", var: \"--font-weight-normal\", class: \"font-normal\" },\n    { name: \"Medium\", weight: \"500\", var: \"--font-weight-medium\", class: \"font-medium\" },\n    { name: \"Semibold\", weight: \"600\", var: \"--font-weight-semibold\", class: \"font-semibold\" },\n    { name: \"Bold\", weight: \"700\", var: \"--font-weight-bold\", class: \"font-bold\" },\n  ];\n\n  const spacingScale = [\n    { name: \"0\", value: \"0\", var: \"--spacing-0\" },\n    { name: \"1\", value: \"0.25rem\", var: \"--spacing-1\" },\n    { name: \"2\", value: \"0.5rem\", var: \"--spacing-2\" },\n    { name: \"3\", value: \"0.75rem\", var: \"--spacing-3\" },\n    { name: \"4\", value: \"1rem\", var: \"--spacing-4\" },\n    { name: \"5\", value: \"1.25rem\", var: \"--spacing-5\" },\n    { name: \"6\", value: \"1.5rem\", var: \"--spacing-6\" },\n    { name: \"8\", value: \"2rem\", var: \"--spacing-8\" },\n    { name: \"10\", value: \"2.5rem\", var: \"--spacing-10\" },\n    { name: \"12\", value: \"3rem\", var: \"--spacing-12\" },\n    { name: \"16\", value: \"4rem\", var: \"--spacing-16\" },\n    { name: \"20\", value: \"5rem\", var: \"--spacing-20\" },\n    { name: \"24\", value: \"6rem\", var: \"--spacing-24\" },\n  ];\n\n  const radiusScale = [\n    { name: \"xs\", value: \"0.25rem\", var: \"--radius-xs\" },\n    { name: \"sm\", value: \"0.375rem\", var: \"--radius-sm\" },\n    { name: \"md\", value: \"0.5rem\", var: \"--radius-md\" },\n    { name: \"lg\", value: \"0.625rem\", var: \"--radius-lg\" },\n    { name: \"xl\", value: \"0.75rem\", var: \"--radius-xl\" },\n    { name: \"2xl\", value: \"1rem\", var: \"--radius-2xl\" },\n    { name: \"3xl\", value: \"1.5rem\", var: \"--radius-3xl\" },\n    { name: \"full\", value: \"9999px\", var: \"--radius-full\" },\n  ];\n\n  return (\n    <section id=\"tokens\" className=\"space-y-6\">\n      <div>\n        <h3 className=\"text-2xl mb-2\">Design Tokens</h3>\n        <p className=\"text-muted-foreground\">Complete color palette, typography, and spacing system</p>\n      </div>\n\n      {/* Color System */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Color System</CardTitle>\n          <CardDescription>Semantic color tokens for consistent theming</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Base & Semantic Colors</h4>\n            <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3\">\n              {colorTokens.map((token) => (\n                <div key={token.var} className=\"space-y-2\">\n                  <div className={`h-16 rounded-lg border ${token.class}`}></div>\n                  <div className=\"space-y-0.5\">\n                    <p className=\"text-sm font-medium\">{token.name}</p>\n                    <p className=\"text-xs text-muted-foreground font-mono\">{token.var}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Separator />\n\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Utility Colors</h4>\n            <div className=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n              {utilityColors.map((token) => (\n                <div key={token.var} className=\"space-y-2\">\n                  <div className={`h-16 rounded-lg border ${token.class}`}></div>\n                  <div className=\"space-y-0.5\">\n                    <p className=\"text-sm font-medium\">{token.name}</p>\n                    <p className=\"text-xs text-muted-foreground font-mono\">{token.var}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Separator />\n\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Chart Colors</h4>\n            <div className=\"grid grid-cols-2 md:grid-cols-5 gap-3\">\n              {chartColors.map((token) => (\n                <div key={token.var} className=\"space-y-2\">\n                  <div className={`h-16 rounded-lg border ${token.class}`}></div>\n                  <div className=\"space-y-0.5\">\n                    <p className=\"text-sm font-medium\">{token.name}</p>\n                    <p className=\"text-xs text-muted-foreground font-mono\">{token.var}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Typography */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Typography</CardTitle>\n          <CardDescription>Font sizes, weights, and spacing for text hierarchy</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Type Scale</h4>\n            <div className=\"space-y-3\">\n              {typographyScale.map((type) => (\n                <div \n                  key={type.var} \n                  className=\"flex items-baseline justify-between py-2 border-b last:border-b-0\"\n                >\n                  <div className=\"flex items-baseline gap-4\">\n                    <Badge variant=\"outline\" className=\"font-mono text-xs w-16 justify-center\">\n                      {type.name}\n                    </Badge>\n                    <span className={type.class}>The quick brown fox jumps over the lazy dog</span>\n                  </div>\n                  <span className=\"text-xs text-muted-foreground font-mono ml-4\">{type.size}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Separator />\n\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Font Weights</h4>\n            <div className=\"space-y-2\">\n              {fontWeights.map((weight) => (\n                <div \n                  key={weight.var} \n                  className=\"flex items-center justify-between py-2\"\n                >\n                  <div className=\"flex items-center gap-4\">\n                    <Badge variant=\"outline\" className=\"font-mono text-xs w-24 justify-center\">\n                      {weight.name}\n                    </Badge>\n                    <span className={`text-lg ${weight.class}`}>\n                      The quick brown fox jumps over the lazy dog\n                    </span>\n                  </div>\n                  <span className=\"text-xs text-muted-foreground font-mono\">{weight.weight}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Spacing & Layout */}\n      <div className=\"grid md:grid-cols-2 gap-6\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Spacing Scale</CardTitle>\n            <CardDescription>Consistent spacing tokens for layout</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-3\">\n              {spacingScale.map((space) => (\n                <div key={space.var} className=\"flex items-center gap-4\">\n                  <Badge variant=\"outline\" className=\"font-mono text-xs w-12 justify-center shrink-0\">\n                    {space.name}\n                  </Badge>\n                  <div \n                    className=\"h-8 bg-primary rounded\"\n                    style={{ width: space.value }}\n                  ></div>\n                  <span className=\"text-xs text-muted-foreground font-mono ml-auto\">\n                    {space.value}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Border Radius</CardTitle>\n            <CardDescription>Rounded corner variations</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-3\">\n              {radiusScale.map((radius) => (\n                <div key={radius.var} className=\"flex items-center gap-4\">\n                  <Badge variant=\"outline\" className=\"font-mono text-xs w-12 justify-center shrink-0\">\n                    {radius.name}\n                  </Badge>\n                  <div \n                    className=\"h-16 w-16 bg-primary border-2 border-primary-foreground shrink-0\"\n                    style={{ borderRadius: radius.value }}\n                  ></div>\n                  <span className=\"text-xs text-muted-foreground font-mono ml-auto\">\n                    {radius.value}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Shadows */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Elevation & Shadows</CardTitle>\n          <CardDescription>Shadow tokens for depth and hierarchy</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6\">\n            {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (\n              <div key={size} className=\"space-y-3\">\n                <div \n                  className=\"h-24 bg-card rounded-lg border flex items-center justify-center\"\n                  style={{ boxShadow: `var(--shadow-${size})` }}\n                >\n                  <span className=\"text-sm font-medium\">{size}</span>\n                </div>\n                <p className=\"text-xs text-muted-foreground font-mono text-center\">\n                  --shadow-{size}\n                </p>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  );\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/design-system.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\";\nimport { Header } from \"./components/header\"\nimport { Footer } from \"./components/footer\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { \n  Bell, \n  Search, \n  Plus, \n  Trash2, \n  Edit, \n  Settings, \n  User, \n  Download,\n  ChevronRight,\n  Star,\n  Heart,\n  Share2,\n  MoreVertical\n} from \"lucide-react\";\nimport { DesignTokens } from \"./components/tokens\";\nimport { TailwindColorPalettes } from \"./components/palettes\";\n\nexport function DesignSystem() {\n  const [switchChecked, setSwitchChecked] = useState(false);\n  const [checkboxChecked, setCheckboxChecked] = useState(false);\n  const [progress, setProgress] = useState(33);\n  const [sliderValue, setSliderValue] = useState([50]);\n\n  return (\n    <div className=\"min-h-screen bg-background\">\n    {/* <Toaster /> */}\n\n    {/* Header */}\n      <Header />\n\n    {/* Main Content */}\n      <main className=\"container py-12 px-8\">\n        <div className=\"max-w-5xl mx-auto space-y-12\">\n\n          {/* Hero Section */}\n          <header className=\"space-y-4\">\n            <Badge variant=\"secondary\">Component Library</Badge>\n            <h1 className=\"text-4xl tracking-tight\">Modern UI Primitives</h1>\n            <p className=\"text-xl text-muted-foreground max-w-3xl\">\n              A comprehensive collection of accessible, customizable, and production-ready React components built with Radix UI and Tailwind CSS.\n            </p>\n          </header>\n\n          <Separator />\n          {/* Design Tokens Section */}\n          <DesignTokens />\n          <Separator />\n          {/* Tailwind Color Palettes Section */}\n          <TailwindColorPalettes />\n\n        </div>\n      </main>\n    {/* Footer */}\n      <Footer />\n\n    </div>\n  );\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/primitives/components/design-tokens.tsx",
      "content": "import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui\";\nimport { Badge } from \"@/components/ui\";\nimport { Separator } from \"@/components/ui\";\n\nexport function DesignTokens() {\n  const colorTokens = [\n    { name: \"Background\", var: \"--background\", class: \"bg-background\" },\n    { name: \"Foreground\", var: \"--foreground\", class: \"bg-foreground\" },\n    { name: \"Primary\", var: \"--primary\", class: \"bg-primary\" },\n    { name: \"Primary Foreground\", var: \"--primary-foreground\", class: \"bg-primary-foreground\" },\n    { name: \"Secondary\", var: \"--secondary\", class: \"bg-secondary\" },\n    { name: \"Secondary Foreground\", var: \"--secondary-foreground\", class: \"bg-secondary-foreground\" },\n    { name: \"Muted\", var: \"--muted\", class: \"bg-muted\" },\n    { name: \"Muted Foreground\", var: \"--muted-foreground\", class: \"bg-muted-foreground\" },\n    { name: \"Accent\", var: \"--accent\", class: \"bg-accent\" },\n    { name: \"Accent Foreground\", var: \"--accent-foreground\", class: \"bg-accent-foreground\" },\n    { name: \"Destructive\", var: \"--destructive\", class: \"bg-destructive\" },\n    { name: \"Destructive Foreground\", var: \"--destructive-foreground\", class: \"bg-destructive-foreground\" },\n  ];\n\n  const utilityColors = [\n    { name: \"Success\", var: \"--success\", class: \"bg-[var(--success)]\" },\n    { name: \"Warning\", var: \"--warning\", class: \"bg-[var(--warning)]\" },\n    { name: \"Info\", var: \"--info\", class: \"bg-[var(--info)]\" },\n  ];\n\n  const chartColors = [\n    { name: \"Chart 1\", var: \"--chart-1\", class: \"bg-chart-1\" },\n    { name: \"Chart 2\", var: \"--chart-2\", class: \"bg-chart-2\" },\n    { name: \"Chart 3\", var: \"--chart-3\", class: \"bg-chart-3\" },\n    { name: \"Chart 4\", var: \"--chart-4\", class: \"bg-chart-4\" },\n    { name: \"Chart 5\", var: \"--chart-5\", class: \"bg-chart-5\" },\n  ];\n\n  const typographyScale = [\n    { name: \"xs\", size: \"0.75rem\", var: \"--text-xs\", class: \"text-xs\" },\n    { name: \"sm\", size: \"0.875rem\", var: \"--text-sm\", class: \"text-sm\" },\n    { name: \"base\", size: \"1rem\", var: \"--text-base\", class: \"text-base\" },\n    { name: \"lg\", size: \"1.125rem\", var: \"--text-lg\", class: \"text-lg\" },\n    { name: \"xl\", size: \"1.25rem\", var: \"--text-xl\", class: \"text-xl\" },\n    { name: \"2xl\", size: \"1.5rem\", var: \"--text-2xl\", class: \"text-2xl\" },\n    { name: \"3xl\", size: \"1.875rem\", var: \"--text-3xl\", class: \"text-3xl\" },\n    { name: \"4xl\", size: \"2.25rem\", var: \"--text-4xl\", class: \"text-4xl\" },\n    { name: \"5xl\", size: \"3rem\", var: \"--text-5xl\", class: \"text-5xl\" },\n    { name: \"6xl\", size: \"3.75rem\", var: \"--text-6xl\", class: \"text-6xl\" },\n  ];\n\n  const fontWeights = [\n    { name: \"Light\", weight: \"300\", var: \"--font-weight-light\", class: \"font-light\" },\n    { name: \"Normal\", weight: \"400\", var: \"--font-weight-normal\", class: \"font-normal\" },\n    { name: \"Medium\", weight: \"500\", var: \"--font-weight-medium\", class: \"font-medium\" },\n    { name: \"Semibold\", weight: \"600\", var: \"--font-weight-semibold\", class: \"font-semibold\" },\n    { name: \"Bold\", weight: \"700\", var: \"--font-weight-bold\", class: \"font-bold\" },\n  ];\n\n  const spacingScale = [\n    { name: \"0\", value: \"0\", var: \"--spacing-0\" },\n    { name: \"1\", value: \"0.25rem\", var: \"--spacing-1\" },\n    { name: \"2\", value: \"0.5rem\", var: \"--spacing-2\" },\n    { name: \"3\", value: \"0.75rem\", var: \"--spacing-3\" },\n    { name: \"4\", value: \"1rem\", var: \"--spacing-4\" },\n    { name: \"5\", value: \"1.25rem\", var: \"--spacing-5\" },\n    { name: \"6\", value: \"1.5rem\", var: \"--spacing-6\" },\n    { name: \"8\", value: \"2rem\", var: \"--spacing-8\" },\n    { name: \"10\", value: \"2.5rem\", var: \"--spacing-10\" },\n    { name: \"12\", value: \"3rem\", var: \"--spacing-12\" },\n    { name: \"16\", value: \"4rem\", var: \"--spacing-16\" },\n    { name: \"20\", value: \"5rem\", var: \"--spacing-20\" },\n    { name: \"24\", value: \"6rem\", var: \"--spacing-24\" },\n  ];\n\n  const radiusScale = [\n    { name: \"xs\", value: \"0.25rem\", var: \"--radius-xs\" },\n    { name: \"sm\", value: \"0.375rem\", var: \"--radius-sm\" },\n    { name: \"md\", value: \"0.5rem\", var: \"--radius-md\" },\n    { name: \"lg\", value: \"0.625rem\", var: \"--radius-lg\" },\n    { name: \"xl\", value: \"0.75rem\", var: \"--radius-xl\" },\n    { name: \"2xl\", value: \"1rem\", var: \"--radius-2xl\" },\n    { name: \"3xl\", value: \"1.5rem\", var: \"--radius-3xl\" },\n    { name: \"full\", value: \"9999px\", var: \"--radius-full\" },\n  ];\n\n  return (\n    <section id=\"tokens\" className=\"space-y-6\">\n      <div>\n        <h3 className=\"text-2xl mb-2\">Design Tokens</h3>\n        <p className=\"text-muted-foreground\">Complete color palette, typography, and spacing system</p>\n      </div>\n\n      {/* Color System */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Color System</CardTitle>\n          <CardDescription>Semantic color tokens for consistent theming</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Base & Semantic Colors</h4>\n            <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3\">\n              {colorTokens.map((token) => (\n                <div key={token.var} className=\"space-y-2\">\n                  <div className={`h-16 rounded-lg border ${token.class}`}></div>\n                  <div className=\"space-y-0.5\">\n                    <p className=\"text-sm font-medium\">{token.name}</p>\n                    <p className=\"text-xs text-muted-foreground font-mono\">{token.var}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Separator />\n\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Utility Colors</h4>\n            <div className=\"grid grid-cols-2 md:grid-cols-3 gap-3\">\n              {utilityColors.map((token) => (\n                <div key={token.var} className=\"space-y-2\">\n                  <div className={`h-16 rounded-lg border ${token.class}`}></div>\n                  <div className=\"space-y-0.5\">\n                    <p className=\"text-sm font-medium\">{token.name}</p>\n                    <p className=\"text-xs text-muted-foreground font-mono\">{token.var}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Separator />\n\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Chart Colors</h4>\n            <div className=\"grid grid-cols-2 md:grid-cols-5 gap-3\">\n              {chartColors.map((token) => (\n                <div key={token.var} className=\"space-y-2\">\n                  <div className={`h-16 rounded-lg border ${token.class}`}></div>\n                  <div className=\"space-y-0.5\">\n                    <p className=\"text-sm font-medium\">{token.name}</p>\n                    <p className=\"text-xs text-muted-foreground font-mono\">{token.var}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Typography */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Typography</CardTitle>\n          <CardDescription>Font sizes, weights, and spacing for text hierarchy</CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Type Scale</h4>\n            <div className=\"space-y-3\">\n              {typographyScale.map((type) => (\n                <div \n                  key={type.var} \n                  className=\"flex items-baseline justify-between py-2 border-b last:border-b-0\"\n                >\n                  <div className=\"flex items-baseline gap-4\">\n                    <Badge variant=\"outline\" className=\"font-mono text-xs w-16 justify-center\">\n                      {type.name}\n                    </Badge>\n                    <span className={type.class}>The quick brown fox jumps over the lazy dog</span>\n                  </div>\n                  <span className=\"text-xs text-muted-foreground font-mono ml-4\">{type.size}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Separator />\n\n          <div>\n            <h4 className=\"text-sm font-semibold mb-3\">Font Weights</h4>\n            <div className=\"space-y-2\">\n              {fontWeights.map((weight) => (\n                <div \n                  key={weight.var} \n                  className=\"flex items-center justify-between py-2\"\n                >\n                  <div className=\"flex items-center gap-4\">\n                    <Badge variant=\"outline\" className=\"font-mono text-xs w-24 justify-center\">\n                      {weight.name}\n                    </Badge>\n                    <span className={`text-lg ${weight.class}`}>\n                      The quick brown fox jumps over the lazy dog\n                    </span>\n                  </div>\n                  <span className=\"text-xs text-muted-foreground font-mono\">{weight.weight}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Spacing & Layout */}\n      <div className=\"grid md:grid-cols-2 gap-6\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Spacing Scale</CardTitle>\n            <CardDescription>Consistent spacing tokens for layout</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-3\">\n              {spacingScale.map((space) => (\n                <div key={space.var} className=\"flex items-center gap-4\">\n                  <Badge variant=\"outline\" className=\"font-mono text-xs w-12 justify-center shrink-0\">\n                    {space.name}\n                  </Badge>\n                  <div \n                    className=\"h-8 bg-primary rounded\"\n                    style={{ width: space.value }}\n                  ></div>\n                  <span className=\"text-xs text-muted-foreground font-mono ml-auto\">\n                    {space.value}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Border Radius</CardTitle>\n            <CardDescription>Rounded corner variations</CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-3\">\n              {radiusScale.map((radius) => (\n                <div key={radius.var} className=\"flex items-center gap-4\">\n                  <Badge variant=\"outline\" className=\"font-mono text-xs w-12 justify-center shrink-0\">\n                    {radius.name}\n                  </Badge>\n                  <div \n                    className=\"h-16 w-16 bg-primary border-2 border-primary-foreground shrink-0\"\n                    style={{ borderRadius: radius.value }}\n                  ></div>\n                  <span className=\"text-xs text-muted-foreground font-mono ml-auto\">\n                    {radius.value}\n                  </span>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Shadows */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Elevation & Shadows</CardTitle>\n          <CardDescription>Shadow tokens for depth and hierarchy</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6\">\n            {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (\n              <div key={size} className=\"space-y-3\">\n                <div \n                  className=\"h-24 bg-card rounded-lg border flex items-center justify-center\"\n                  style={{ boxShadow: `var(--shadow-${size})` }}\n                >\n                  <span className=\"text-sm font-medium\">{size}</span>\n                </div>\n                <p className=\"text-xs text-muted-foreground font-mono text-center\">\n                  --shadow-{size}\n                </p>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/primitives/components/tailwind-color-palettes.tsx",
      "content": "import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui\";\n\nexport function TailwindColorPalettes() {\n  // Helper to generate color scale from 50-950\n  const generateColorScale = (colorName: string) => {\n    const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];\n    return scales.map(scale => ({\n      scale,\n      var: `--${colorName}-${scale}`,\n      style: { backgroundColor: `var(--${colorName}-${scale})` }\n    }));\n  };\n\n  // Neutral/Gray color families\n  const neutralColors = {\n    slate: generateColorScale('slate'),\n    gray: generateColorScale('gray'),\n    zinc: generateColorScale('zinc'),\n    neutral: generateColorScale('neutral'),\n    stone: generateColorScale('stone'),\n  };\n\n  // Color families\n  const colorFamilies = {\n    red: generateColorScale('red'),\n    orange: generateColorScale('orange'),\n    amber: generateColorScale('amber'),\n    yellow: generateColorScale('yellow'),\n    green: generateColorScale('green'),\n    emerald: generateColorScale('emerald'),\n    teal: generateColorScale('teal'),\n    cyan: generateColorScale('cyan'),\n    sky: generateColorScale('sky'),\n    blue: generateColorScale('blue'),\n    indigo: generateColorScale('indigo'),\n    violet: generateColorScale('violet'),\n    purple: generateColorScale('purple'),\n    fuchsia: generateColorScale('fuchsia'),\n    pink: generateColorScale('pink'),\n    rose: generateColorScale('rose'),\n  };\n\n  const ColorScaleRow = ({ name, colors }: { name: string; colors: Array<{ scale: number; var: string; style: React.CSSProperties }> }) => (\n    <div className=\"space-y-2\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"text-sm font-medium capitalize w-20\">{name}</span>\n        <div className=\"flex-1 grid grid-cols-11 gap-1\">\n          {colors.map((color) => (\n            <div\n              key={color.scale}\n              className=\"group relative\"\n            >\n              <div\n                className=\"h-10 rounded border cursor-pointer transition-transform hover:scale-110 hover:z-10\"\n                style={color.style}\n                title={`${name}-${color.scale}`}\n              />\n              <div className=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none\">\n                <span className=\"text-xs font-mono bg-black/75 text-white px-1 rounded\">\n                  {color.scale}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <section className=\"space-y-6\">\n      <div>\n        <h3 className=\"text-2xl mb-2\">Tailwind Color Palettes</h3>\n        <p className=\"text-muted-foreground\">Complete default Tailwind CSS color system from 50-950</p>\n      </div>\n\n      <Tabs defaultValue=\"neutrals\" className=\"w-full\">\n        <TabsList className=\"grid w-full max-w-md grid-cols-2\">\n          <TabsTrigger value=\"neutrals\">Neutrals & Grays</TabsTrigger>\n          <TabsTrigger value=\"colors\">Colors</TabsTrigger>\n        </TabsList>\n\n        {/* Neutrals Tab */}\n        <TabsContent value=\"neutrals\" className=\"mt-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Neutral Color Scales</CardTitle>\n              <CardDescription>\n                Five neutral color palettes optimized for different use cases. Each scale ranges from 50 (lightest) to 950 (darkest).\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              {Object.entries(neutralColors).map(([name, colors]) => (\n                <ColorScaleRow key={name} name={name} colors={colors} />\n              ))}\n              \n              <div className=\"mt-6 p-4 bg-muted rounded-lg space-y-2\">\n                <h4 className=\"text-sm font-semibold\">Usage Guide</h4>\n                <ul className=\"text-sm text-muted-foreground space-y-1\">\n                  <li><strong>Slate:</strong> Cool gray with subtle blue undertones</li>\n                  <li><strong>Gray:</strong> True gray, perfectly neutral</li>\n                  <li><strong>Zinc:</strong> Modern gray with slight cool tone</li>\n                  <li><strong>Neutral:</strong> Warm gray with balanced warmth</li>\n                  <li><strong>Stone:</strong> Warm gray with earthy undertones</li>\n                </ul>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        {/* Colors Tab */}\n        <TabsContent value=\"colors\" className=\"mt-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Full Color Spectrum</CardTitle>\n              <CardDescription>\n                Complete Tailwind color palette with all hues. Perfect for UI elements, data visualization, and brand colors.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              {Object.entries(colorFamilies).map(([name, colors]) => (\n                <ColorScaleRow key={name} name={name} colors={colors} />\n              ))}\n              \n              <div className=\"mt-6 grid md:grid-cols-2 gap-4\">\n                <div className=\"p-4 bg-muted rounded-lg space-y-2\">\n                  <h4 className=\"text-sm font-semibold\">Color Temperature</h4>\n                  <ul className=\"text-sm text-muted-foreground space-y-1\">\n                    <li><strong>Warm:</strong> Red, Orange, Amber, Yellow</li>\n                    <li><strong>Cool:</strong> Sky, Blue, Indigo, Violet</li>\n                    <li><strong>Balanced:</strong> Green, Teal, Cyan, Purple</li>\n                  </ul>\n                </div>\n                \n                <div className=\"p-4 bg-muted rounded-lg space-y-2\">\n                  <h4 className=\"text-sm font-semibold\">Common Uses</h4>\n                  <ul className=\"text-sm text-muted-foreground space-y-1\">\n                    <li><strong>Success:</strong> Green, Emerald</li>\n                    <li><strong>Warning:</strong> Amber, Yellow, Orange</li>\n                    <li><strong>Error:</strong> Red, Rose</li>\n                    <li><strong>Info:</strong> Blue, Sky, Cyan</li>\n                  </ul>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n\n      {/* Quick Reference Card */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Scale Reference</CardTitle>\n          <CardDescription>Understanding the color scale system</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4\">\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">50-200</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Very light tints for backgrounds and subtle accents\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">300-400</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Light colors for borders, disabled states, and secondary elements\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">500-600</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Base colors for primary UI elements, buttons, and links\n              </p>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"font-mono text-sm font-semibold\">700-950</div>\n              <p className=\"text-sm text-muted-foreground\">\n                Dark shades for text, headings, and high-contrast elements\n              </p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/design-system/primitives/primitives.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui\";\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from \"@/components/ui\";\nimport { Badge } from \"@/components/ui\";\nimport { Switch } from \"@/components/ui\";\nimport { Checkbox } from \"@/components/ui\";\nimport { Label } from \"@/components/ui\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui\";\nimport { Progress } from \"@/components/ui\";\nimport { Slider } from \"@/components/ui\";\nimport { Textarea } from \"@/components/ui\";\nimport { Separator } from \"@/components/ui\";\nimport { Skeleton } from \"@/components/ui\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui\";\nimport { \n  Bell, \n  Search, \n  Plus, \n  Trash2, \n  Edit, \n  Settings, \n  User, \n  Download,\n  ChevronRight,\n  Star,\n  Heart,\n  Share2,\n  MoreVertical\n} from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { Toaster } from \"@/components/ui\";\nimport { DesignTokens } from \"./components/design-tokens\";\nimport { TailwindColorPalettes } from \"./components/tailwind-color-palettes\";\nimport { ThemeToggle } from \"@/components/theme-toggle-01\";\n\nexport function Primitives() {\n  const [switchChecked, setSwitchChecked] = useState(false);\n  const [checkboxChecked, setCheckboxChecked] = useState(false);\n  const [progress, setProgress] = useState(33);\n  const [sliderValue, setSliderValue] = useState([50]);\n\n  return (\n    <div className=\"min-h-screen bg-background\">\n      <Toaster />\n      \n      {/* Header */}\n      <header className=\"sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60\">\n        <div className=\"container flex h-16 items-center justify-between px-8\">\n          <div className=\"flex items-center gap-6\">\n            <h1 className=\"text-xl font-semibold\">UI Primitives</h1>\n            <nav className=\"hidden md:flex items-center gap-6\">\n              <a href=\"#tokens\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n                Design Tokens\n              </a>\n              <a href=\"#components\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n                Components\n              </a>\n              <a href=\"#forms\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n                Forms\n              </a>\n              <a href=\"#feedback\" className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\">\n                Feedback\n              </a>\n            </nav>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <ThemeToggle />\n            <Button variant=\"ghost\" size=\"icon\">\n              <Bell className=\"size-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon\">\n              <Settings className=\"size-4\" />\n            </Button>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" />\n              <AvatarFallback>JD</AvatarFallback>\n            </Avatar>\n          </div>\n        </div>\n      </header>\n\n      {/* Main Content */}\n      <main className=\"container py-12 px-8\">\n        <div className=\"max-w-7xl mx-auto space-y-12\">\n          \n          {/* Hero Section */}\n          <div className=\"space-y-4\">\n            <Badge variant=\"secondary\">Updated Components</Badge>\n            <h2 className=\"text-4xl tracking-tight\">Modern UI Primitives</h2>\n            <p className=\"text-xl text-muted-foreground max-w-3xl\">\n              A comprehensive collection of accessible, customizable, and production-ready React components built with Radix UI and Tailwind CSS.\n            </p>\n          </div>\n\n          <Separator />\n\n          {/* Design Tokens Section */}\n          <DesignTokens />\n\n          <Separator />\n\n          {/* Tailwind Color Palettes Section */}\n          <TailwindColorPalettes />\n\n          <Separator />\n\n          {/* Buttons Section */}\n          <section id=\"components\" className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-2xl mb-2\">Buttons</h3>\n              <p className=\"text-muted-foreground\">Multiple variants and sizes for every use case</p>\n            </div>\n            \n            <Card>\n              <CardHeader>\n                <CardTitle>Button Variants</CardTitle>\n                <CardDescription>Different button styles for different contexts</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-6\">\n                <div className=\"flex flex-wrap gap-3\">\n                  <Button>Default</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"destructive\">Destructive</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"ghost\">Ghost</Button>\n                  <Button variant=\"link\">Link</Button>\n                </div>\n                \n                <Separator />\n                \n                <div>\n                  <p className=\"text-sm text-muted-foreground mb-3\">Button Sizes</p>\n                  <div className=\"flex flex-wrap items-center gap-3\">\n                    <Button size=\"sm\">Small</Button>\n                    <Button size=\"default\">Default</Button>\n                    <Button size=\"lg\">Large</Button>\n                    <Button size=\"icon\">\n                      <Plus className=\"size-4\" />\n                    </Button>\n                  </div>\n                </div>\n\n                <Separator />\n\n                <div>\n                  <p className=\"text-sm text-muted-foreground mb-3\">With Icons</p>\n                  <div className=\"flex flex-wrap gap-3\">\n                    <Button>\n                      <Download />\n                      Download\n                    </Button>\n                    <Button variant=\"secondary\">\n                      <Search />\n                      Search\n                    </Button>\n                    <Button variant=\"outline\">\n                      <Share2 />\n                      Share\n                    </Button>\n                    <Button variant=\"destructive\">\n                      <Trash2 />\n                      Delete\n                    </Button>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </section>\n\n          {/* Forms Section */}\n          <section id=\"forms\" className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-2xl mb-2\">Form Elements</h3>\n              <p className=\"text-muted-foreground\">Input fields, selects, and other form controls</p>\n            </div>\n\n            <div className=\"grid md:grid-cols-2 gap-6\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Text Inputs</CardTitle>\n                  <CardDescription>Standard input fields with validation states</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"email\">Email</Label>\n                    <Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />\n                  </div>\n                  \n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"search\">Search</Label>\n                    <div className=\"relative\">\n                      <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground\" />\n                      <Input id=\"search\" placeholder=\"Search...\" className=\"pl-9\" />\n                    </div>\n                  </div>\n\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"message\">Message</Label>\n                    <Textarea id=\"message\" placeholder=\"Type your message here...\" rows={3} />\n                  </div>\n                </CardContent>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <CardTitle>Selection Controls</CardTitle>\n                  <CardDescription>Dropdowns, checkboxes, and radio buttons</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"country\">Country</Label>\n                    <Select>\n                      <SelectTrigger id=\"country\">\n                        <SelectValue placeholder=\"Select a country\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"us\">United States</SelectItem>\n                        <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                        <SelectItem value=\"ca\">Canada</SelectItem>\n                        <SelectItem value=\"au\">Australia</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n\n                  <Separator />\n\n                  <div className=\"space-y-3\">\n                    <Label>Preferences</Label>\n                    <div className=\"flex items-center space-x-2\">\n                      <Checkbox \n                        id=\"terms\" \n                        checked={checkboxChecked}\n                        onCheckedChange={(checked) => setCheckboxChecked(checked as boolean)}\n                      />\n                      <Label htmlFor=\"terms\" className=\"text-sm font-normal cursor-pointer\">\n                        Accept terms and conditions\n                      </Label>\n                    </div>\n                    <div className=\"flex items-center justify-between\">\n                      <Label htmlFor=\"notifications\" className=\"text-sm font-normal\">\n                        Enable notifications\n                      </Label>\n                      <Switch \n                        id=\"notifications\"\n                        checked={switchChecked}\n                        onCheckedChange={setSwitchChecked}\n                      />\n                    </div>\n                  </div>\n\n                  <Separator />\n\n                  <div className=\"space-y-3\">\n                    <Label>Account Type</Label>\n                    <RadioGroup defaultValue=\"personal\">\n                      <div className=\"flex items-center space-x-2\">\n                        <RadioGroupItem value=\"personal\" id=\"personal\" />\n                        <Label htmlFor=\"personal\" className=\"text-sm font-normal cursor-pointer\">\n                          Personal\n                        </Label>\n                      </div>\n                      <div className=\"flex items-center space-x-2\">\n                        <RadioGroupItem value=\"business\" id=\"business\" />\n                        <Label htmlFor=\"business\" className=\"text-sm font-normal cursor-pointer\">\n                          Business\n                        </Label>\n                      </div>\n                    </RadioGroup>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </section>\n\n          {/* Feedback Section */}\n          <section id=\"feedback\" className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-2xl mb-2\">Feedback & Status</h3>\n              <p className=\"text-muted-foreground\">Badges, progress bars, and notifications</p>\n            </div>\n\n            <div className=\"grid md:grid-cols-2 gap-6\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Badges</CardTitle>\n                  <CardDescription>Status indicators and labels</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Badge>Default</Badge>\n                    <Badge variant=\"secondary\">Secondary</Badge>\n                    <Badge variant=\"destructive\">Destructive</Badge>\n                    <Badge variant=\"outline\">Outline</Badge>\n                  </div>\n                  \n                  <Separator />\n                  \n                  <div className=\"flex flex-wrap gap-2\">\n                    <Badge>\n                      <Star className=\"size-3\" />\n                      Featured\n                    </Badge>\n                    <Badge variant=\"secondary\">\n                      <Heart className=\"size-3 fill-current\" />\n                      Liked\n                    </Badge>\n                    <Badge variant=\"outline\">\n                      New\n                    </Badge>\n                  </div>\n                </CardContent>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <CardTitle>Progress Indicators</CardTitle>\n                  <CardDescription>Show task completion and loading states</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"space-y-2\">\n                    <div className=\"flex items-center justify-between\">\n                      <Label className=\"text-sm\">Upload Progress</Label>\n                      <span className=\"text-sm text-muted-foreground\">{progress}%</span>\n                    </div>\n                    <Progress value={progress} />\n                    <div className=\"flex gap-2\">\n                      <Button size=\"sm\" onClick={() => setProgress(Math.min(100, progress + 10))}>\n                        Increase\n                      </Button>\n                      <Button size=\"sm\" variant=\"outline\" onClick={() => setProgress(Math.max(0, progress - 10))}>\n                        Decrease\n                      </Button>\n                    </div>\n                  </div>\n\n                  <Separator />\n\n                  <div className=\"space-y-2\">\n                    <Label className=\"text-sm\">Volume: {sliderValue[0]}%</Label>\n                    <Slider \n                      value={sliderValue} \n                      onValueChange={setSliderValue}\n                      max={100}\n                      step={1}\n                    />\n                  </div>\n\n                  <Separator />\n\n                  <div>\n                    <Button \n                      onClick={() => toast.success(\"Component updated successfully!\")}\n                      variant=\"outline\"\n                      className=\"w-full\"\n                    >\n                      Show Toast Notification\n                    </Button>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </section>\n\n          {/* Tabs & Accordion */}\n          <section className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-2xl mb-2\">Content Organization</h3>\n              <p className=\"text-muted-foreground\">Tabs and accordions for structured content</p>\n            </div>\n\n            <Tabs defaultValue=\"overview\" className=\"w-full\">\n              <TabsList className=\"grid w-full max-w-md grid-cols-3\">\n                <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n                <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n                <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n              </TabsList>\n              \n              <TabsContent value=\"overview\" className=\"mt-6\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Overview</CardTitle>\n                    <CardDescription>Get a quick summary of your account</CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"space-y-4\">\n                    <div className=\"grid grid-cols-3 gap-4\">\n                      <div className=\"space-y-1\">\n                        <p className=\"text-sm text-muted-foreground\">Total Users</p>\n                        <p className=\"text-2xl\">1,234</p>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <p className=\"text-sm text-muted-foreground\">Active Now</p>\n                        <p className=\"text-2xl\">89</p>\n                      </div>\n                      <div className=\"space-y-1\">\n                        <p className=\"text-sm text-muted-foreground\">Revenue</p>\n                        <p className=\"text-2xl\">$45.2k</p>\n                      </div>\n                    </div>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n              \n              <TabsContent value=\"analytics\" className=\"mt-6\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Analytics</CardTitle>\n                    <CardDescription>Detailed metrics and insights</CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <p className=\"text-muted-foreground\">Analytics content would go here...</p>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n              \n              <TabsContent value=\"settings\" className=\"mt-6\">\n                <Card>\n                  <CardHeader>\n                    <CardTitle>Settings</CardTitle>\n                    <CardDescription>Manage your account preferences</CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <p className=\"text-muted-foreground\">Settings content would go here...</p>\n                  </CardContent>\n                </Card>\n              </TabsContent>\n            </Tabs>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Accordion</CardTitle>\n                <CardDescription>Collapsible content sections</CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Accordion type=\"single\" collapsible className=\"w-full\">\n                  <AccordionItem value=\"item-1\">\n                    <AccordionTrigger>What are UI primitives?</AccordionTrigger>\n                    <AccordionContent>\n                      UI primitives are the fundamental building blocks of a user interface. They are low-level, reusable components like buttons, inputs, and cards that can be combined to create more complex interfaces.\n                    </AccordionContent>\n                  </AccordionItem>\n                  <AccordionItem value=\"item-2\">\n                    <AccordionTrigger>Why use component libraries?</AccordionTrigger>\n                    <AccordionContent>\n                      Component libraries provide consistent, accessible, and well-tested UI components that speed up development and ensure a cohesive user experience across your application.\n                    </AccordionContent>\n                  </AccordionItem>\n                  <AccordionItem value=\"item-3\">\n                    <AccordionTrigger>Are these components accessible?</AccordionTrigger>\n                    <AccordionContent>\n                      Yes! These components are built on Radix UI primitives, which follow WAI-ARIA standards and provide excellent keyboard navigation and screen reader support out of the box.\n                    </AccordionContent>\n                  </AccordionItem>\n                </Accordion>\n              </CardContent>\n            </Card>\n          </section>\n\n          {/* Loading States */}\n          <section className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-2xl mb-2\">Loading States</h3>\n              <p className=\"text-muted-foreground\">Skeleton loaders for better perceived performance</p>\n            </div>\n\n            <Card>\n              <CardHeader>\n                <CardTitle>Skeleton Components</CardTitle>\n                <CardDescription>Placeholder content while data loads</CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-4\">\n                <div className=\"flex items-center space-x-4\">\n                  <Skeleton className=\"size-12 rounded-full\" />\n                  <div className=\"space-y-2 flex-1\">\n                    <Skeleton className=\"h-4 w-1/2\" />\n                    <Skeleton className=\"h-4 w-3/4\" />\n                  </div>\n                </div>\n                <Separator />\n                <div className=\"space-y-2\">\n                  <Skeleton className=\"h-4 w-full\" />\n                  <Skeleton className=\"h-4 w-full\" />\n                  <Skeleton className=\"h-4 w-2/3\" />\n                </div>\n              </CardContent>\n            </Card>\n          </section>\n\n          {/* Complex Example */}\n          <section className=\"space-y-6\">\n            <div>\n              <h3 className=\"text-2xl mb-2\">Complete Example</h3>\n              <p className=\"text-muted-foreground\">A real-world card using multiple components</p>\n            </div>\n\n            <div className=\"grid md:grid-cols-2 gap-6\">\n              <Card>\n                <CardHeader>\n                  <div className=\"flex items-start justify-between\">\n                    <Avatar className=\"size-10\">\n                      <AvatarImage src=\"https://github.com/vercel.png\" />\n                      <AvatarFallback>VC</AvatarFallback>\n                    </Avatar>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <MoreVertical className=\"size-4\" />\n                    </Button>\n                  </div>\n                  <CardTitle>Project Alpha</CardTitle>\n                  <CardDescription>Last updated 2 hours ago</CardDescription>\n                  <div className=\"flex gap-2 mt-2\">\n                    <Badge variant=\"secondary\">React</Badge>\n                    <Badge variant=\"outline\">TypeScript</Badge>\n                  </div>\n                </CardHeader>\n                <CardContent>\n                  <p className=\"text-sm text-muted-foreground mb-4\">\n                    A modern web application built with the latest technologies. Features include real-time updates, responsive design, and comprehensive testing.\n                  </p>\n                  <div className=\"space-y-2\">\n                    <div className=\"flex items-center justify-between text-sm\">\n                      <span className=\"text-muted-foreground\">Progress</span>\n                      <span>75%</span>\n                    </div>\n                    <Progress value={75} />\n                  </div>\n                </CardContent>\n                <CardFooter className=\"gap-2\">\n                  <Button className=\"flex-1\">\n                    <Edit />\n                    Edit\n                  </Button>\n                  <Button variant=\"outline\" className=\"flex-1\">\n                    <Share2 />\n                    Share\n                  </Button>\n                </CardFooter>\n              </Card>\n\n              <Card>\n                <CardHeader>\n                  <CardTitle>Quick Actions</CardTitle>\n                  <CardDescription>Common tasks and shortcuts</CardDescription>\n                  <CardAction>\n                    <Button variant=\"ghost\" size=\"sm\">\n                      View All\n                      <ChevronRight />\n                    </Button>\n                  </CardAction>\n                </CardHeader>\n                <CardContent className=\"space-y-3\">\n                  <Button variant=\"outline\" className=\"w-full justify-start\">\n                    <User />\n                    Manage Profile\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full justify-start\">\n                    <Settings />\n                    Settings\n                  </Button>\n                  <Button variant=\"outline\" className=\"w-full justify-start\">\n                    <Download />\n                    Export Data\n                  </Button>\n                  <Separator />\n                  <Button variant=\"destructive\" className=\"w-full justify-start\">\n                    <Trash2 />\n                    Delete Account\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </section>\n\n        </div>\n      </main>\n\n      {/* Footer */}\n      <footer className=\"border-t py-8 mt-12\">\n        <div className=\"container px-8 text-center text-sm text-muted-foreground\">\n          Built with React, Radix UI, and Tailwind CSS\n        </div>\n      </footer>\n    </div>\n  );\n}",
      "type": "registry:component"
    }
  ]
}