{
  "name": "angle-slider-themes-demo",
  "type": "registry:example",
  "registryDependencies": [
    "angle-slider"
  ],
  "files": [
    {
      "path": "examples/angle-slider-themes-demo.tsx",
      "type": "registry:example",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  AngleSlider,\n  AngleSliderRange,\n  AngleSliderThumb,\n  AngleSliderTrack,\n  AngleSliderValue,\n} from \"@/registry/bases/base/ui/angle-slider\";\n\nconst themes = [\n  {\n    name: \"Default\",\n    value: 60,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-muted-foreground/20\",\n    rangeClass: \"stroke-primary\",\n    thumbClass: \"border-primary bg-background ring-primary/50\",\n    textClass: \"text-foreground\",\n  },\n  {\n    name: \"Success\",\n    value: 120,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-green-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-green-900\",\n    rangeClass: \"stroke-green-500\",\n    thumbClass:\n      \"border-green-500 bg-green-50 ring-green-500/50 dark:bg-green-950\",\n    textClass: \"text-green-700 dark:text-green-300\",\n  },\n  {\n    name: \"Warning\",\n    value: 180,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-yellow-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-yellow-900\",\n    rangeClass: \"stroke-yellow-500\",\n    thumbClass:\n      \"border-yellow-500 bg-yellow-50 ring-yellow-500/50 dark:bg-yellow-950\",\n    textClass: \"text-yellow-700 dark:text-yellow-300\",\n  },\n  {\n    name: \"Destructive\",\n    value: 240,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-red-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-red-900\",\n    rangeClass: \"stroke-red-500\",\n    thumbClass: \"border-red-500 bg-red-50 ring-red-500/50 dark:bg-red-950\",\n    textClass: \"text-red-700 dark:text-red-300\",\n  },\n  {\n    name: \"Purple\",\n    value: 300,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-purple-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-purple-900\",\n    rangeClass: \"stroke-purple-500\",\n    thumbClass:\n      \"border-purple-500 bg-purple-50 ring-purple-500/50 dark:bg-purple-950\",\n    textClass: \"text-purple-700 dark:text-purple-300\",\n  },\n  {\n    name: \"Orange\",\n    value: 45,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-orange-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-orange-900\",\n    rangeClass: \"stroke-orange-500\",\n    thumbClass:\n      \"border-orange-500 bg-orange-50 ring-orange-500/50 dark:bg-orange-950\",\n    textClass: \"text-orange-700 dark:text-orange-300\",\n  },\n  {\n    name: \"Blue\",\n    value: 90,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-blue-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-blue-900\",\n    rangeClass: \"stroke-blue-500\",\n    thumbClass: \"border-blue-500 bg-blue-50 ring-blue-500/50 dark:bg-blue-950\",\n    textClass: \"text-blue-700 dark:text-blue-300\",\n  },\n  {\n    name: \"Pink\",\n    value: 270,\n    trackClass:\n      \"[&>[data-slot='angle-slider-track-rail']]:stroke-pink-200 dark:[&>[data-slot='angle-slider-track-rail']]:stroke-pink-900\",\n    rangeClass: \"stroke-pink-500\",\n    thumbClass: \"border-pink-500 bg-pink-50 ring-pink-500/50 dark:bg-pink-950\",\n    textClass: \"text-pink-700 dark:text-pink-300\",\n  },\n];\n\nexport default function AngleSliderThemesDemo() {\n  return (\n    <>\n      <div className=\"hidden grid-cols-4 gap-4 sm:grid\">\n        {themes.map((theme) => (\n          <AngleSliderCard key={theme.name} theme={theme} />\n        ))}\n      </div>\n      <div className=\"grid grid-cols-2 gap-4 sm:hidden\">\n        {themes.slice(0, 4).map((theme) => (\n          <AngleSliderCard key={theme.name} theme={theme} />\n        ))}\n      </div>\n    </>\n  );\n}\n\ninterface AngleSliderCardProps {\n  theme: (typeof themes)[0];\n}\n\nfunction AngleSliderCard({ theme }: AngleSliderCardProps) {\n  return (\n    <div className=\"flex flex-col items-center gap-1\">\n      <AngleSlider\n        defaultValue={[theme.value]}\n        max={360}\n        min={0}\n        step={1}\n        size={60}\n      >\n        <AngleSliderTrack className={theme.trackClass}>\n          <AngleSliderRange className={theme.rangeClass} />\n        </AngleSliderTrack>\n        <AngleSliderThumb className={theme.thumbClass} />\n        <AngleSliderValue\n          className={cn(\"font-semibold text-sm\", theme.textClass)}\n        />\n      </AngleSlider>\n      <div className=\"flex flex-col items-center gap-1 text-center\">\n        <h4 className=\"font-medium text-sm\">{theme.name}</h4>\n        <p className=\"text-muted-foreground text-xs\">{theme.value}°</p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}