{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "A control that allows users to toggle between checked and unchecked states.",
  "dependencies": [
    "react-native-reanimated"
  ],
  "registryDependencies": [
    "@tetra-ui/icons",
    "@tetra-ui/input"
  ],
  "files": [
    {
      "path": "ui/checkbox.tsx",
      "content": "import { useEffect } from \"react\";\nimport { Text, type View } from \"react-native\";\nimport Animated, {\n  interpolateColor,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from \"react-native-reanimated\";\nimport { useCSSVariable } from \"uniwind\";\nimport { cn } from \"../lib/utils\";\nimport { CheckIcon } from \"./icons\";\nimport { InputPressable } from \"./input\";\n\n// Constants\nconst ANIMATION_DURATION = 180;\n\n// Types\nexport type CheckboxProps = Omit<\n  React.ComponentProps<typeof View>,\n  \"children\"\n> & {\n  checked?: boolean;\n  invalid?: boolean;\n};\n\nexport type CheckboxInputProps = Omit<\n  React.ComponentProps<typeof InputPressable>,\n  \"children\"\n> & {\n  checked?: boolean;\n  invalid?: boolean;\n  children: React.ReactNode;\n};\n\n// Components\nexport const Checkbox = ({\n  className,\n  checked,\n  invalid,\n  ...props\n}: CheckboxProps) => {\n  const primaryColor = useCSSVariable(\"--color-primary\") as string;\n\n  const checkedSharedValue = useSharedValue(checked ? 1 : 0);\n\n  useEffect(() => {\n    checkedSharedValue.value = withTiming(checked ? 1 : 0, {\n      duration: ANIMATION_DURATION,\n    });\n  }, [checked, checkedSharedValue]);\n\n  const animatedStyle = useAnimatedStyle(() => {\n    const backgroundColor = interpolateColor(\n      checkedSharedValue.value,\n      [0, 1],\n      [\"transparent\", primaryColor]\n    );\n\n    return {\n      backgroundColor,\n    };\n  });\n\n  return (\n    <Animated.View\n      {...props}\n      accessibilityState={{ checked }}\n      className={cn(\n        \"size-6 shrink-0 items-center justify-center rounded-lg border border-input shadow-xs dark:bg-input/30\",\n        checked && \"border-primary\",\n        invalid && \"border-destructive\",\n        className\n      )}\n      style={animatedStyle}\n    >\n      {checked ? (\n        <CheckIcon className=\"size-4 text-primary-foreground\" />\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport const CheckboxInput = ({\n  className,\n  checked,\n  invalid,\n  children,\n  ...props\n}: CheckboxInputProps) => {\n  return (\n    <InputPressable {...props} className={cn(className)} invalid={invalid}>\n      <Checkbox checked={checked} invalid={invalid} />\n      <Text className=\"text-base text-foreground\">{children}</Text>\n    </InputPressable>\n  );\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}