{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-19",
  "type": "registry:component",
  "title": "Switch 19",
  "description": "Switch 19. A toggle control that allows users to switch between two states, typically on or off.",
  "dependencies": [],
  "registryDependencies": [
    "switch"
  ],
  "files": [
    {
      "path": "components/watermelon/switch-19.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Switch } from '@/components/base-ui/switch';\n\nconst Switch19 = () => {\n  const id = useId();\n  const [enabled, setEnabled] = useState(true);\n\n  return (\n    <div className=\"flex min-w-64 items-center justify-between gap-6 rounded-xl bg-muted/55 px-4 py-3 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_2px_5px_rgba(0,0,0,0.05)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08)]\">\n      <label htmlFor={id} className=\"cursor-pointer text-left\">\n        <span className=\"block text-sm font-medium text-foreground\">Auto sync</span>\n        <span className=\"block text-xs text-muted-foreground\">\n          {enabled ? 'Changes sync instantly' : 'Manual updates only'}\n        </span>\n      </label>\n      <Switch\n        id={id}\n        checked={enabled}\n        onCheckedChange={setEnabled}\n        aria-describedby={`${id}-status`}\n      />\n      <span id={`${id}-status`} className=\"sr-only\" aria-live=\"polite\">\n        Auto sync is {enabled ? 'enabled' : 'disabled'}\n      </span>\n    </div>\n  );\n};\n\nexport default Switch19;\n"
    }
  ]
}