@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/checkbox/Checkbox.astro

@@ -1,159 +1,159 @@
----
-/**
- * @component Checkbox
- * @title Checkbox
- * @description An accessible control for toggling between checked and unchecked states. Built on native HTML checkbox.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=46-976
- *
- * @preview
- *
- * <div class="flex flex-col gap-6 not-content">
- * <div class="flex items-center gap-3">
- *   <Checkbox id="terms" />
- *   <Label for="terms">Accept terms and conditions</Label>
- * </div>
- *
- * <Field orientation="horizontal" class="max-w-sm">
- *   <Checkbox id="terms-2" checked />
- *   <FieldContent>
- *     <FieldLabel for="terms-2">Accept terms and conditions</FieldLabel>
- *     <FieldDescription>
- *       By clicking this checkbox, you agree to the terms and conditions.
- *     </FieldDescription>
- *   </FieldContent>
- * </Field>
- *
- * <div class="group flex items-center gap-3">
- *   <Checkbox id="toggle" disabled />
- *   <Label for="toggle" class="group-has-disabled:opacity-50">Enable notifications</Label>
- * </div>
- *
- * <Label
- *   class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-primary/30 has-[:checked]:bg-primary/5 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 [&_[data-slot=checkbox]]:mt-0.5"
- * >
- *   <Checkbox id="toggle-2" checked />
- *   <div class="grid gap-1.5 font-normal">
- *     <p class="text-sm leading-5 font-medium">Enable notifications</p>
- *     <p class="text-muted-foreground text-sm">
- *       You can enable or disable notifications at any time.
- *     </p>
- *   </div>
- * </Label>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Checkbox } from '@bejamas/ui/components/checkbox';
- * import { Label } from '@bejamas/ui/components/label';
- * ---
- *
- * <div class="flex items-center gap-3">
- *   <Checkbox id="terms" />
- *   <Label for="terms">Accept terms and conditions</Label>
- * </div>
- * ```
- *
- * @examples
- *
- * ### Sizes
- *
- * <div class="flex items-center gap-6">
- *   <Checkbox id="size-default" checked />
- *   <Checkbox id="size-lg" size="lg" checked />
- * </div>
- *
- * ### Indeterminate
- *
- * <Checkbox id="indeterminate-example" indeterminate />
- */
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"input"> {
-  class?: string;
-  id?: string;
-  name?: string;
-  size?: "default" | "lg";
-  indeterminate?: boolean;
-}
-
-const {
-  class: className = "",
-  id = "",
-  name = id,
-  size = "default",
-  indeterminate = false,
-  ...props
-} = Astro.props as Props;
-
-const checkboxVariants = cva(
-  "peer appearance-none shrink-0 rounded-sm border border-input shadow-xs outline-none transition-colors checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary dark:bg-input/30 dark:checked:bg-primary dark:checked:border-primary dark:indeterminate:bg-primary dark:indeterminate:border-primary focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:border-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:checked:border-primary disabled:cursor-not-allowed disabled:bg-muted disabled:border-input group-has-disabled/field:opacity-50 relative after:absolute after:-inset-x-3 after:-inset-y-2",
-  {
-    variants: {
-      size: {
-        default: "size-4",
-        lg: "size-5",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  },
-);
-
-const indicatorVariants = cva(
-  "pointer-events-none absolute inset-0 grid place-content-center transition-opacity peer-disabled:text-muted-foreground text-primary-foreground",
-  {
-    variants: {
-      size: {
-        default: "[&>svg]:size-3",
-        lg: "[&>svg]:size-4",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  },
-);
-
-// Icon geometry matches Figma exactly per size (viewBox = native px, stroke-width 1.5)
-// rather than scaling a single 24px icon, which rendered the stroke ~33% thinner than Figma.
-const iconViewBox = size === "lg" ? "0 0 16 16" : "0 0 12 12";
-const checkPath = size === "lg" ? "M13.3333 4L6 11.3333L2.66667 8" : "M10 3L4.5 8.5L2 6";
-const dashPath = size === "lg" ? "M3.33333 8H12.6667" : "M2.5 6H9.5";
----
-
-<label data-slot="checkbox" class="inline-flex items-center gap-2 cursor-pointer">
-  <span class="relative inline-flex items-center justify-center">
-    <input
-      id={id}
-      name={name}
-      type="checkbox"
-      data-indeterminate={indeterminate ? "" : undefined}
-      class={cn(checkboxVariants({ size }), className)}
-      {...props}
-    />
-    <span
-      data-slot="checkbox-indicator"
-      class={cn(indicatorVariants({ size }), "opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0")}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconViewBox}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={checkPath}/></svg>
-    </span>
-    <span
-      data-slot="checkbox-indeterminate-indicator"
-      class={cn(indicatorVariants({ size }), "opacity-0 peer-indeterminate:opacity-100")}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconViewBox}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={dashPath}/></svg>
-    </span>
-  </span>
-  <slot />
-</label>
-
-<script>
-  document.querySelectorAll("input[data-indeterminate]").forEach((el) => {
-    (el as HTMLInputElement).indeterminate = true;
-  });
-</script>
+---
+/**
+ * @component Checkbox
+ * @title Checkbox
+ * @description An accessible control for toggling between checked and unchecked states. Built on native HTML checkbox.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=46-976
+ *
+ * @preview
+ *
+ * <div class="flex flex-col gap-6 not-content">
+ * <div class="flex items-center gap-3">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms and conditions</Label>
+ * </div>
+ *
+ * <Field orientation="horizontal" class="max-w-sm">
+ *   <Checkbox id="terms-2" checked />
+ *   <FieldContent>
+ *     <FieldLabel for="terms-2">Accept terms and conditions</FieldLabel>
+ *     <FieldDescription>
+ *       By clicking this checkbox, you agree to the terms and conditions.
+ *     </FieldDescription>
+ *   </FieldContent>
+ * </Field>
+ *
+ * <div class="group flex items-center gap-3">
+ *   <Checkbox id="notifications-checkbox-disabled" disabled />
+ *   <Label for="notifications-checkbox-disabled" class="group-has-disabled:opacity-50">Enable notifications</Label>
+ * </div>
+ *
+ * <Label
+ *   class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-primary/30 has-[:checked]:bg-primary/5 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 [&_[data-slot=checkbox]]:mt-0.5"
+ * >
+ *   <Checkbox id="toggle-2" checked />
+ *   <div class="grid gap-1.5 font-normal">
+ *     <p class="text-sm leading-5 font-medium">Enable notifications</p>
+ *     <p class="text-muted-foreground text-sm">
+ *       You can enable or disable notifications at any time.
+ *     </p>
+ *   </div>
+ * </Label>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Checkbox } from '@bejamas/ui/components/checkbox';
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <div class="flex items-center gap-3">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms and conditions</Label>
+ * </div>
+ * ```
+ *
+ * @examples
+ *
+ * ### Sizes
+ *
+ * <div class="flex items-center gap-6">
+ *   <Checkbox id="size-default" checked />
+ *   <Checkbox id="size-lg" size="lg" checked />
+ * </div>
+ *
+ * ### Indeterminate
+ *
+ * <Checkbox id="indeterminate-example" indeterminate />
+ */
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"input"> {
+  class?: string;
+  id?: string;
+  name?: string;
+  size?: "default" | "lg";
+  indeterminate?: boolean;
+}
+
+const {
+  class: className = "",
+  id = "",
+  name = id,
+  size = "default",
+  indeterminate = false,
+  ...props
+} = Astro.props as Props;
+
+const checkboxVariants = cva(
+  "peer appearance-none shrink-0 rounded-sm border border-input shadow-xs outline-none transition-colors checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary dark:bg-input/30 dark:checked:bg-primary dark:checked:border-primary dark:indeterminate:bg-primary dark:indeterminate:border-primary focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:border-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:checked:border-primary disabled:cursor-not-allowed disabled:bg-muted disabled:border-input group-has-disabled/field:opacity-50 relative after:absolute after:-inset-x-3 after:-inset-y-2",
+  {
+    variants: {
+      size: {
+        default: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+const indicatorVariants = cva(
+  "pointer-events-none absolute inset-0 grid place-content-center transition-opacity peer-disabled:text-muted-foreground text-primary-foreground",
+  {
+    variants: {
+      size: {
+        default: "[&>svg]:size-3",
+        lg: "[&>svg]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+// Icon geometry matches Figma exactly per size (viewBox = native px, stroke-width 1.5)
+// rather than scaling a single 24px icon, which rendered the stroke ~33% thinner than Figma.
+const iconViewBox = size === "lg" ? "0 0 16 16" : "0 0 12 12";
+const checkPath = size === "lg" ? "M13.3333 4L6 11.3333L2.66667 8" : "M10 3L4.5 8.5L2 6";
+const dashPath = size === "lg" ? "M3.33333 8H12.6667" : "M2.5 6H9.5";
+---
+
+<label data-slot="checkbox" class="inline-flex items-center gap-2 cursor-pointer">
+  <span class="relative inline-flex items-center justify-center">
+    <input
+      id={id}
+      name={name}
+      type="checkbox"
+      data-indeterminate={indeterminate ? "" : undefined}
+      class={cn(checkboxVariants({ size }), className)}
+      {...props}
+    />
+    <span
+      data-slot="checkbox-indicator"
+      class={cn(indicatorVariants({ size }), "opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0")}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconViewBox}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={checkPath}/></svg>
+    </span>
+    <span
+      data-slot="checkbox-indeterminate-indicator"
+      class={cn(indicatorVariants({ size }), "opacity-0 peer-indeterminate:opacity-100")}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconViewBox}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={dashPath}/></svg>
+    </span>
+  </span>
+  <slot />
+</label>
+
+<script>
+  document.querySelectorAll("input[data-indeterminate]").forEach((el) => {
+    (el as HTMLInputElement).indeterminate = true;
+  });
+</script>