{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-switch",
  "title": "Liquid Switch",
  "description": "A liquid-glass switch wrapper built on top of the default switch component.",
  "dependencies": [
    "@paper-design/shaders-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@glasscn/utils",
    "@glasscn/switch"
  ],
  "files": [
    {
      "path": "components/ui/glasscn/liquid-switch.tsx",
      "content": "\"use client\";\n\nimport { LiquidMetal, type LiquidMetalProps } from \"@paper-design/shaders-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { Switch, type SwitchProps } from \"@/components/ui/switch\";\nimport { cn } from \"@/lib/utils\";\n\ntype ShaderProps = Omit<LiquidMetalProps, \"className\" | \"style\" | \"shape\">;\n\nconst liquidSwitchWrapperVariants = cva(\"relative inline-flex shrink-0 isolate rounded-full\", {\n  variants: { size: { sm: \"h-4 w-7\", default: \"h-5 w-11\" } },\n  defaultVariants: { size: \"default\" },\n});\n\ntype LiquidSwitchProps = Omit<SwitchProps, \"className\"> &\n  VariantProps<typeof liquidSwitchWrapperVariants> &\n  Partial<ShaderProps> & { className?: string };\n\nfunction LiquidSwitch({\n  className,\n  size = \"default\",\n  speed = 0.45,\n  repetition = 3,\n  softness = 0.6,\n  shiftRed = 0.2,\n  shiftBlue = 0.15,\n  distortion = 0.08,\n  contour = 0.2,\n  angle = 35,\n  scale = 5,\n  offsetX = 0.15,\n  offsetY = -0.1,\n  ...props\n}: LiquidSwitchProps) {\n  return (\n    <span className={cn(liquidSwitchWrapperVariants({ size }), className)}>\n      <Switch\n        size={size}\n        className={cn(\n          \"peer/liquid-switch absolute inset-0 z-10 border-transparent bg-transparent shadow-none data-checked:border-transparent data-checked:bg-transparent data-unchecked:border-transparent data-unchecked:bg-transparent\",\n          \"data-[size=default]:size-full data-[size=sm]:size-full\",\n          \"[&_[data-slot=switch-thumb]]:bg-foreground\",\n        )}\n        {...props}\n      />\n      <LiquidMetal\n        className=\"pointer-events-none absolute inset-0 rounded-full opacity-70 transition-opacity duration-300 peer-data-checked/liquid-switch:opacity-100\"\n        shape=\"none\"\n        speed={speed}\n        repetition={repetition}\n        softness={softness}\n        shiftRed={shiftRed}\n        shiftBlue={shiftBlue}\n        distortion={distortion}\n        contour={contour}\n        angle={angle}\n        scale={scale}\n        offsetX={offsetX}\n        offsetY={offsetY}\n      />\n      <span className=\"pointer-events-none absolute inset-px rounded-full shadow-[inset_0_1px_0_rgba(255,255,255,0.8),inset_0_-1px_2px_rgba(17,12,8,0.08)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_2px_rgba(0,0,0,0.3)]\" />\n      <span className=\"bg-background pointer-events-none absolute inset-[3px] rounded-full shadow-[inset_0_1px_0_rgba(255,255,255,0.55)] transition-colors duration-300 peer-data-checked/liquid-switch:bg-emerald-500 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] dark:peer-data-checked/liquid-switch:bg-emerald-500\" />\n      <span className=\"bg-foreground/[0.02] pointer-events-none absolute inset-[3px] rounded-full transition-colors duration-300 peer-data-checked/liquid-switch:bg-transparent dark:bg-white/[0.02] dark:peer-data-checked/liquid-switch:bg-transparent\" />\n      <span className=\"pointer-events-none absolute inset-[3px] rounded-full opacity-0 transition-opacity duration-300 peer-data-checked/liquid-switch:opacity-100 peer-data-checked/liquid-switch:shadow-[inset_0_1px_0_rgba(255,255,255,0.2),inset_0_-6px_12px_rgba(5,46,22,0.16)] dark:peer-data-checked/liquid-switch:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-6px_12px_rgba(0,0,0,0.2)]\" />\n    </span>\n  );\n}\n\nexport { LiquidSwitch };\nexport type { LiquidSwitchProps };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}