{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "UI Checkbox",
  "description": "A checkbox whose checked/unchecked state is a pure function of the timeline; the box fill, border, and checkmark draw are keyframed presets.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn-ui/checkbox/index.tsx",
      "content": "\"use client\";\n\nimport { type RemocnTheme, useRemocnTheme } from \"@/lib/remocn-ui\";\n\nexport type CheckboxState = \"unchecked\" | \"checked\";\n\ntype CheckboxSize = \"sm\" | \"default\" | \"lg\";\n\nexport interface CheckboxProps {\n  state?: CheckboxState;\n  style?: CheckboxStyle;\n  label?: string;\n  size?: CheckboxSize;\n  theme?: Partial<RemocnTheme>;\n  primary?: string;\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n}\n\nfunction justify(align: \"start\" | \"center\" | \"end\"): string {\n  return align === \"start\"\n    ? \"flex-start\"\n    : align === \"end\"\n      ? \"flex-end\"\n      : \"center\";\n}\n\nconst CHECK_PATH_LENGTH = 14;\n\nconst SIZE_STYLES: Record<\n  CheckboxSize,\n  { box: number; fontSize: number; gap: number }\n> = {\n  sm: { box: 16, fontSize: 13, gap: 8 },\n  default: { box: 20, fontSize: 15, gap: 10 },\n  lg: { box: 24, fontSize: 17, gap: 12 },\n};\n\nexport interface CheckboxStyle {\n  boxBackground: string;\n  boxBorderColor: string;\n  checkOpacity: number;\n  checkScale: number;\n  checkDraw: number;\n}\n\nexport interface CheckboxStyleContext {\n  uncheckedBg: string;\n  checkedBg: string;\n  uncheckedBorder: string;\n  checkedBorder: string;\n  checkColor: string;\n}\n\nexport function checkboxStyleContext(theme: RemocnTheme): CheckboxStyleContext {\n  return {\n    uncheckedBg: theme.background,\n    checkedBg: theme.primary,\n    uncheckedBorder: theme.border,\n    checkedBorder: theme.primary,\n    checkColor: theme.primaryForeground,\n  };\n}\n\nexport function checkboxStyle(\n  state: CheckboxState,\n  ctx: CheckboxStyleContext,\n): CheckboxStyle {\n  switch (state) {\n    case \"checked\":\n      return {\n        boxBackground: ctx.checkedBg,\n        boxBorderColor: ctx.checkedBorder,\n        checkOpacity: 1,\n        checkScale: 1,\n        checkDraw: 1,\n      };\n    default:\n      return {\n        boxBackground: ctx.uncheckedBg,\n        boxBorderColor: ctx.uncheckedBorder,\n        checkOpacity: 0,\n        checkScale: 0.6,\n        checkDraw: 0,\n      };\n  }\n}\n\nexport function Checkbox({\n  state = \"unchecked\",\n  style,\n  label,\n  size = \"default\",\n  theme: themeOverride,\n  primary,\n  align = \"center\",\n  className,\n}: CheckboxProps) {\n  const theme = useRemocnTheme(\n    { ...themeOverride, ...(primary ? { primary } : {}) },\n    \"light\",\n  );\n\n  const sizeStyle = SIZE_STYLES[size];\n  const ctx = checkboxStyleContext(theme);\n  const v = style ?? checkboxStyle(state, ctx);\n  const boxSize = sizeStyle.box;\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: justify(align),\n        background: \"transparent\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <span\n        className={className}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: sizeStyle.gap,\n        }}\n      >\n        {}\n        <span\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            width: boxSize,\n            height: boxSize,\n            borderRadius: Math.round(boxSize * 0.28),\n            border: `1px solid ${v.boxBorderColor}`,\n            background: v.boxBackground,\n          }}\n        >\n          <svg\n            width={boxSize}\n            height={boxSize}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            style={{\n              opacity: v.checkOpacity,\n              transform: `scale(${v.checkScale})`,\n            }}\n          >\n            <path\n              d=\"M5 12.5l4.5 4.5L19 7\"\n              stroke={ctx.checkColor}\n              strokeWidth=\"2.6\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              pathLength={CHECK_PATH_LENGTH}\n              strokeDasharray={CHECK_PATH_LENGTH}\n              strokeDashoffset={CHECK_PATH_LENGTH * (1 - v.checkDraw)}\n            />\n          </svg>\n        </span>\n        {label !== undefined && (\n          <span\n            style={{\n              fontSize: sizeStyle.fontSize,\n              fontWeight: 500,\n              letterSpacing: \"-0.01em\",\n              color: theme.foreground,\n            }}\n          >\n            {label}\n          </span>\n        )}\n      </span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/checkbox.tsx"
    },
    {
      "path": "registry/remocn-ui/checkbox/use-checkbox-transition.ts",
      "content": "\"use client\";\n\nimport {\n  type CheckboxState,\n  type CheckboxStyle,\n  checkboxStyle,\n  checkboxStyleContext,\n} from \"@/components/remocn/checkbox\";\nimport {\n  easings,\n  mixOklch,\n  type RemocnTheme,\n  type Step,\n  useRemocnTheme,\n  useStateTransition,\n} from \"@/lib/remocn-ui\";\n\nexport const DEFAULT_DURATION = 10;\n\nexport function tweenCheckboxStyle(\n  a: CheckboxStyle,\n  b: CheckboxStyle,\n  t: number,\n): CheckboxStyle {\n  return {\n    boxBackground: mixOklch(a.boxBackground, b.boxBackground, t),\n    boxBorderColor: mixOklch(a.boxBorderColor, b.boxBorderColor, t),\n    checkOpacity: a.checkOpacity + (b.checkOpacity - a.checkOpacity) * t,\n    checkScale: a.checkScale + (b.checkScale - a.checkScale) * t,\n    checkDraw: a.checkDraw + (b.checkDraw - a.checkDraw) * t,\n  };\n}\n\nexport interface CheckboxTransitionOptions {\n  theme?: Partial<RemocnTheme>;\n  mode?: \"light\" | \"dark\";\n  primary?: string;\n  speed?: number;\n  defaultDuration?: number;\n}\n\nexport function useCheckboxTransition(\n  steps: Step<CheckboxState>[],\n  opts: CheckboxTransitionOptions = {},\n): CheckboxStyle {\n  const {\n    theme: themeOverride,\n    mode,\n    primary,\n    speed = 1,\n    defaultDuration = DEFAULT_DURATION,\n  } = opts;\n  const theme = useRemocnTheme(\n    { ...themeOverride, ...(primary ? { primary } : {}) },\n    mode,\n  );\n  const ctx = checkboxStyleContext(theme);\n  const { from, to, progress } = useStateTransition(\n    steps,\n    \"unchecked\",\n    speed,\n    defaultDuration,\n  );\n  const t = easings.out(progress);\n  return tweenCheckboxStyle(\n    checkboxStyle(from, ctx),\n    checkboxStyle(to, ctx),\n    t,\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/use-checkbox-transition.ts"
    }
  ],
  "type": "registry:component"
}