{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-toggle",
  "title": "Notification toggle",
  "description": "Steeze's SMS notification switch: a pale knob on a grey track when off, a charcoal knob on lilac when on, adapted from React Native to a keyboard-accessible web control.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/items/notification-toggle/notification-toggle.tsx",
      "content": "\"use client\";\n\nimport type { InputHTMLAttributes, Ref } from \"react\";\nimport { useReducedMotionConfig } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface NotificationToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"size\" | \"role\"> {\n  ref?: Ref<HTMLInputElement>;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\n/** Steeze's native SMS switch, adapted for the web. Supply an accessible name. */\nexport function NotificationToggle({\n  ref,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  disabled,\n  className,\n  style,\n  ...props\n}: NotificationToggleProps) {\n  const reduceMotion = useReducedMotionConfig();\n\n  return (\n    <label\n      className={cn(\n        \"relative inline-flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        className,\n      )}\n      style={style}\n    >\n      <input\n        {...props}\n        ref={ref}\n        type=\"checkbox\"\n        role=\"switch\"\n        className=\"peer sr-only\"\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onChange={(event) => onCheckedChange?.(event.target.checked)}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none inline-flex h-[31px] w-[51px] items-center rounded-full bg-switch-track-off p-0.5 transition-colors duration-200 motion-reduce:transition-none\",\n          \"peer-checked:bg-switch-track-on peer-checked:[&>span]:translate-x-5 peer-checked:[&>span]:bg-switch-thumb-on\",\n          \"peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-ring\",\n          reduceMotion && \"transition-none\",\n        )}\n      >\n        <span\n          className={cn(\n            \"block size-[27px] shrink-0 rounded-full bg-switch-thumb-off transition-[translate,background-color] duration-200 ease-out motion-reduce:transition-none\",\n            reduceMotion && \"transition-none\",\n          )}\n        />\n      </span>\n    </label>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "kind": "primitive",
    "whenToUse": "Use for notification preferences and other settings that apply immediately. Pass checked and onCheckedChange for caller-owned state, or defaultChecked for an uncontrolled switch. Supply aria-label or aria-labelledby.",
    "origin": {
      "project": "Steeze",
      "path": "app_steeze: app/(root)/notification-preferences.tsx (SMS Notifications Switch)"
    },
    "credits": [
      {
        "name": "React Native Switch: the mobile app's native control, re-created for the web",
        "url": "https://github.com/facebook/react-native",
        "license": "MIT"
      }
    ]
  },
  "type": "registry:ui"
}