{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-130",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/toggle.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-130.tsx",
      "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Component() {\n  const [theme, setTheme] = useState<string>(\"light\");\n\n  return (\n    <div>\n      <Toggle\n        aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n        className=\"group size-9 data-[state=on]:bg-transparent data-[state=on]:hover:bg-muted\"\n        onPressedChange={() =>\n          setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n        }\n        pressed={theme === \"dark\"}\n        variant=\"outline\"\n      >\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\n        <MoonIcon\n          aria-hidden=\"true\"\n          className=\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\"\n          size={16}\n        />\n        <SunIcon\n          aria-hidden=\"true\"\n          className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\"\n          size={16}\n        />\n      </Toggle>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "style": 2,
    "tags": [
      "button",
      "toggle",
      "darkmode"
    ]
  }
}