{"name":"checkbox","type":"registry:ui","files":[{"path":"checkbox.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui-components/react/checkbox\"\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui-components/react/checkbox-group\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst checkboxVariants = cva(\n  \"inline-flex shrink-0 cursor-pointer appearance-none items-center justify-center rounded-[var(--hui-radius-1)] border border-[var(--hui-color-border-base-secondary)] bg-[var(--hui-color-background-base-primary)] outline-none motion-safe:[transition:background-color_var(--hui-duration-fast)_var(--hui-ease-out),border-color_var(--hui-duration-fast)_var(--hui-ease-out),transform_var(--hui-duration-press)_var(--hui-ease-out)] not-data-disabled:hover:border-[var(--hui-color-border-base-focus)] not-data-disabled:hover:bg-[var(--hui-color-background-base-primary-hover)] not-data-disabled:not-data-readonly:active:scale-[var(--hui-scale-pressed-strong)] focus-visible:[outline:var(--hui-focus-ring)] focus-visible:outline-offset-[var(--hui-focus-ring-offset-accent)] data-checked:border-0 data-checked:bg-[var(--hui-color-background-accent-emphasis)] data-checked:hover:bg-[var(--hui-color-background-accent-emphasis-hover)] data-indeterminate:border-0 data-indeterminate:bg-[var(--hui-color-background-neutral-tertiary)] data-indeterminate:hover:bg-[var(--hui-color-background-neutral-secondary)] data-readonly:cursor-default data-readonly:opacity-70 data-invalid:border-[var(--hui-color-border-danger-primary)] data-invalid:data-checked:bg-[var(--hui-color-background-danger-primary)] data-invalid:data-indeterminate:bg-[var(--hui-color-background-danger-primary)] aria-invalid:border-[var(--hui-color-border-danger-primary)] aria-invalid:data-checked:bg-[var(--hui-color-background-danger-primary)] aria-invalid:data-indeterminate:bg-[var(--hui-color-background-danger-primary)] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:data-checked:border-0 data-disabled:data-checked:bg-[var(--hui-color-background-accent-emphasis)] data-disabled:data-checked:hover:bg-[var(--hui-color-background-accent-emphasis)] data-disabled:data-indeterminate:border-0 data-disabled:data-indeterminate:bg-[var(--hui-color-background-neutral-tertiary)] data-disabled:data-indeterminate:hover:bg-[var(--hui-color-background-neutral-tertiary)]\",\n  {\n    variants: {\n      size: {\n        large:\n          \"size-[var(--hui-space-5)] min-h-[var(--hui-space-5)] min-w-[var(--hui-space-5)]\",\n        small:\n          \"size-[var(--hui-space-4)] min-h-[var(--hui-space-4)] min-w-[var(--hui-space-4)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"large\",\n    },\n  }\n)\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props &\n  VariantProps<typeof checkboxVariants>\n\nfunction Checkbox({ className, size, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(checkboxVariants({ size }), className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex size-full items-center justify-center text-[var(--hui-color-foreground-accent-emphasis)] motion-safe:[transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out),transform_var(--hui-duration-fast)_var(--hui-ease-out)] data-ending-style:scale-80 data-ending-style:opacity-0 data-starting-style:scale-80 data-starting-style:opacity-0 data-unchecked:opacity-0 [&_svg]:size-full\"\n        render={(props, state) => (\n          <span {...props}>\n            {state.indeterminate ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M5.252 12h13.496\" />\n              </svg>\n            ) : (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n              </svg>\n            )}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  )\n}\n\nconst checkboxGroupVariants = cva(\n  \"flex flex-col gap-[var(--hui-space-3)]\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col\",\n        horizontal: \"flex-row flex-wrap\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\ntype CheckboxGroupProps = Omit<CheckboxGroupPrimitive.Props, \"orientation\"> &\n  VariantProps<typeof checkboxGroupVariants>\n\nfunction CheckboxGroup({\n  className,\n  orientation,\n  ...props\n}: CheckboxGroupProps) {\n  return (\n    <CheckboxGroupPrimitive\n      data-slot=\"checkbox-group\"\n      className={cn(checkboxGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Checkbox, CheckboxGroup, checkboxVariants, checkboxGroupVariants }\n","target":"components/ui/checkbox.tsx"}],"dependencies":["@base-ui-components/react","class-variance-authority"]}