{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "files": [
    {
      "path": "ui/checkbox/Checkbox.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/checkbox/Checkbox.astro directly.\n/**\n * @component Checkbox\n * @title Checkbox\n * @description An accessible control for toggling between checked and unchecked states. Built on native HTML checkbox.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2525-5683&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <div class=\"flex flex-col gap-6 not-content\">\n * <div class=\"flex items-center gap-3\">\n *   <Checkbox id=\"terms\" />\n *   <Label for=\"terms\">Accept terms and conditions</Label>\n * </div>\n *\n * <div class=\"flex items-start gap-3\">\n *   <Checkbox id=\"terms-2\" defaultChecked />\n *   <div class=\"grid gap-2\">\n *     <Label for=\"terms-2\">Accept terms and conditions</Label>\n *     <p class=\"text-muted-foreground text-sm\">\n *       By clicking this checkbox, you agree to the terms and conditions.\n *     </p>\n *   </div>\n * </div>\n *\n * <div class=\"flex items-center gap-3\">\n *   <Checkbox id=\"toggle\" disabled />\n *   <Label for=\"toggle\">Enable notifications</Label>\n * </div>\n *\n * <Label\n *   class=\"hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50 dark:has-[:checked]:border-blue-900 dark:has-[:checked]:bg-blue-950\"\n * >\n *   <Checkbox\n *     id=\"toggle-2\"\n *     defaultChecked\n *     class=\"checked:border-blue-600 checked:bg-blue-600 dark:checked:border-blue-700 dark:checked:bg-blue-700\"\n *   />\n *   <div class=\"grid gap-1.5 font-normal\">\n *     <p class=\"text-sm leading-none font-medium\">Enable notifications</p>\n *     <p class=\"text-muted-foreground text-sm\">\n *       You can enable or disable notifications at any time.\n *     </p>\n *   </div>\n * </Label>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Checkbox } from '@bejamas/ui/components/checkbox';\n * import { Label } from '@bejamas/ui/components/label';\n * ---\n *\n * <div class=\"flex items-center gap-3\">\n *   <Checkbox id=\"terms\" />\n *   <Label for=\"terms\">Accept terms and conditions</Label>\n * </div>\n * ```\n */\n\nconst { class: className = \"\", id = \"\", name = id, ...props } = Astro.props;\n\nimport { cn } from \"@/lib/utils\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\nconst baseWrapper =\n  \"peer appearance-none size-4 shrink-0 rounded-[4px] border border-input shadow-xs outline-none transition-colors checked:bg-primary checked:border-primary dark:bg-input/30 dark:checked:bg-primary dark:checked:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:checked:border-primary disabled:cursor-not-allowed disabled:opacity-50 group-has-disabled/field:opacity-50 relative after:absolute after:-inset-x-3 after:-inset-y-2\";\n---\n\n<label class=\"inline-flex items-center gap-2 cursor-pointer\">\n  <span class=\"relative inline-flex items-center justify-center\">\n    <input\n      id={id}\n      name={name}\n      type=\"checkbox\"\n      class={cn(\"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3\", baseWrapper, className)}\n      {...props}\n    />\n    <span\n      data-slot=\"checkbox-indicator\"\n      class=\"[&>svg]:size-3.5 pointer-events-none absolute inset-0 grid place-content-center transition-opacity opacity-0 peer-checked:opacity-100 text-primary-foreground\"\n    >\n      <SemanticIcon name=\"check\" class=\"size-3.5\" />\n    </span>\n  </span>\n  <slot />\n</label>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/checkbox/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/checkbox/index.ts directly.\nexport { default as Checkbox } from \"./Checkbox.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}