@zentauri-ui/zentauri-components 1.7.0 → 1.7.1

package/src/design-system/checkbox.ts

@@ -0,0 +1,47 @@
+export const zuiCheckboxRootBase =
+  "group inline-flex w-fit items-start gap-2.5 text-sm font-medium text-[color:var(--zui-checkbox-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-checkbox-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiCheckboxControlBase =
+  "grid shrink-0 place-items-center rounded-md border-2 border-[color:var(--zui-checkbox-border,#0000004d)] bg-[var(--zui-checkbox-bg,transparent)] text-[color:var(--zui-checkbox-fg,oklch(44.6%_0.043_257.281))] transition-[background-color,border-color,color,box-shadow] peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--zui-checkbox-ring-focus,oklch(44.6%_0.043_257.281_/_0.7))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[var(--zui-checkbox-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-checkbox-border-dark,#ffffff4d)] dark:text-[color:var(--zui-checkbox-fg-dark,oklch(92.9%_0.013_255.508))] dark:peer-focus-visible:ring-[var(--zui-checkbox-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.7))] dark:peer-focus-visible:ring-offset-[var(--zui-checkbox-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] group-data-[disabled=true]:cursor-not-allowed";
+
+export const zuiCheckboxIndicatorBase =
+  "pointer-events-none opacity-0 transition-opacity duration-150 stroke-white group-data-[state=checked]:opacity-100 group-data-[state=indeterminate]:opacity-100";
+
+export const zuiCheckboxSizes = {
+  sm: {
+    root: "text-xs",
+    control: "mt-0.5 size-4 rounded-[0.35rem]",
+    indicator: "size-3",
+  },
+  md: {
+    root: "text-sm",
+    control: "mt-0.5 size-5",
+    indicator: "size-3.5",
+  },
+  lg: {
+    root: "text-base",
+    control: "mt-0.5 size-6",
+    indicator: "size-4",
+  },
+} as const;
+
+export const zuiCheckboxAppearances = {
+  default:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-default-border-checked,oklch(44.6%_0.043_257.281))] group-data-[state=checked]:bg-[var(--zui-checkbox-default-bg-checked,oklch(44.6%_0.043_257.281))] group-data-[state=checked]:text-[color:var(--zui-checkbox-default-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-default-border-checked,oklch(44.6%_0.043_257.281))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-default-bg-checked,oklch(44.6%_0.043_257.281))] group-data-[state=indeterminate]:text-[color:var(--zui-checkbox-default-fg-checked,#ffffff)]",
+  success:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-success-border-checked,oklch(59.6%_0.145_163.225))] group-data-[state=checked]:bg-[var(--zui-checkbox-success-bg-checked,oklch(59.6%_0.145_163.225))] group-data-[state=checked]:text-[color:var(--zui-checkbox-success-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-success-border-checked,oklch(59.6%_0.145_163.225))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-success-bg-checked,oklch(59.6%_0.145_163.225))]",
+  warning:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-warning-border-checked,oklch(68.1%_0.162_75.834))] group-data-[state=checked]:bg-[var(--zui-checkbox-warning-bg-checked,oklch(68.1%_0.162_75.834))] group-data-[state=checked]:text-[color:var(--zui-checkbox-warning-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-warning-border-checked,oklch(68.1%_0.162_75.834))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-warning-bg-checked,oklch(68.1%_0.162_75.834))]",
+  error:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-error-border-checked,oklch(58.6%_0.253_17.585))] group-data-[state=checked]:bg-[var(--zui-checkbox-error-bg-checked,oklch(58.6%_0.253_17.585))] group-data-[state=checked]:text-[color:var(--zui-checkbox-error-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-error-border-checked,oklch(58.6%_0.253_17.585))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-error-bg-checked,oklch(58.6%_0.253_17.585))]",
+  info:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-info-border-checked,oklch(54.6%_0.245_262.881))] group-data-[state=checked]:bg-[var(--zui-checkbox-info-bg-checked,oklch(54.6%_0.245_262.881))] group-data-[state=checked]:text-[color:var(--zui-checkbox-info-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-info-border-checked,oklch(54.6%_0.245_262.881))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-info-bg-checked,oklch(54.6%_0.245_262.881))]",
+  violet:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-violet-border-checked,oklch(54.1%_0.281_293.009))] group-data-[state=checked]:bg-[var(--zui-checkbox-violet-bg-checked,oklch(54.1%_0.281_293.009))] group-data-[state=checked]:text-[color:var(--zui-checkbox-violet-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-violet-border-checked,oklch(54.1%_0.281_293.009))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-violet-bg-checked,oklch(54.1%_0.281_293.009))]",
+  amber:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-amber-border-checked,oklch(66.6%_0.179_58.318))] group-data-[state=checked]:bg-[var(--zui-checkbox-amber-bg-checked,oklch(66.6%_0.179_58.318))] group-data-[state=checked]:text-[color:var(--zui-checkbox-amber-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-amber-border-checked,oklch(66.6%_0.179_58.318))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-amber-bg-checked,oklch(66.6%_0.179_58.318))]",
+  pink:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-pink-border-checked,oklch(59.2%_0.249_0.584))] group-data-[state=checked]:bg-[var(--zui-checkbox-pink-bg-checked,oklch(59.2%_0.249_0.584))] group-data-[state=checked]:text-[color:var(--zui-checkbox-pink-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-pink-border-checked,oklch(59.2%_0.249_0.584))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-pink-bg-checked,oklch(59.2%_0.249_0.584))]",
+  indigo:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-indigo-border-checked,oklch(51.1%_0.262_276.966))] group-data-[state=checked]:bg-[var(--zui-checkbox-indigo-bg-checked,oklch(51.1%_0.262_276.966))] group-data-[state=checked]:text-[color:var(--zui-checkbox-indigo-fg-checked,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-indigo-border-checked,oklch(51.1%_0.262_276.966))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-indigo-bg-checked,oklch(51.1%_0.262_276.966))]",
+} as const;

package/src/design-system/index.ts

@@ -5,6 +5,7 @@ export * from "./badge";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
+export * from "./checkbox";
 export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
@@ -15,6 +16,7 @@ export * from "./inputs";
 export * from "./modal";
 export * from "./pagination";
 export * from "./progress";
+export * from "./radio-group";
 export * from "./select";
 export * from "./skeleton";
 export * from "./slider";

package/src/design-system/radio-group.ts

@@ -0,0 +1,54 @@
+export const zuiRadioGroupRootBase = "grid gap-2";
+
+export const zuiRadioGroupItemBase =
+  "group inline-flex w-fit items-start gap-2.5 text-sm font-medium text-[color:var(--zui-radio-label-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-radio-label-fg-dark,oklch(98.4%_0.003_247.858))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+
+export const zuiRadioGroupControlBase =
+  "grid shrink-0 place-items-center rounded-full border-2 border-[color:var(--zui-radio-border,#0000004d)] bg-[var(--zui-radio-bg,transparent)] transition-[background-color,border-color,box-shadow] peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--zui-radio-ring-focus,oklch(44.6%_0.043_257.281_/_0.7))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[var(--zui-radio-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-radio-border-dark,#ffffff4d)] dark:peer-focus-visible:ring-[var(--zui-radio-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.7))] dark:peer-focus-visible:ring-offset-[var(--zui-radio-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] group-data-[disabled=true]:cursor-not-allowed";
+
+export const zuiRadioGroupIndicatorBase =
+  "pointer-events-none block rounded-full opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100";
+
+export const zuiRadioGroupSizes = {
+  sm: {
+    item: "text-xs",
+    control: "mt-0.5 size-4",
+    indicator: "size-1.5",
+  },
+  md: {
+    item: "text-sm",
+    control: "mt-0.5 size-5",
+    indicator: "size-2",
+  },
+  lg: {
+    item: "text-base",
+    control: "mt-0.5 size-6",
+    indicator: "size-2.5",
+  },
+} as const;
+
+export const zuiRadioGroupAppearances = {
+  default:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-default-border-checked,oklch(44.6%_0.043_257.281))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-default-indicator-bg,oklch(44.6%_0.043_257.281))]",
+  success:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-success-border-checked,oklch(59.6%_0.145_163.225))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-success-indicator-bg,oklch(59.6%_0.145_163.225))]",
+  warning:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-warning-border-checked,oklch(68.1%_0.162_75.834))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-warning-indicator-bg,oklch(68.1%_0.162_75.834))]",
+  error:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-error-border-checked,oklch(58.6%_0.253_17.585))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-error-indicator-bg,oklch(58.6%_0.253_17.585))]",
+  info:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-info-border-checked,oklch(54.6%_0.245_262.881))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-info-indicator-bg,oklch(54.6%_0.245_262.881))]",
+  violet:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-violet-border-checked,oklch(54.1%_0.281_293.009))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-violet-indicator-bg,oklch(54.1%_0.281_293.009))]",
+  amber:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-amber-border-checked,oklch(66.6%_0.179_58.318))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-amber-indicator-bg,oklch(66.6%_0.179_58.318))]",
+  pink:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-pink-border-checked,oklch(59.2%_0.249_0.584))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-pink-indicator-bg,oklch(59.2%_0.249_0.584))]",
+  indigo:
+    "group-data-[state=checked]:border-[color:var(--zui-radio-indigo-border-checked,oklch(51.1%_0.262_276.966))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-indigo-indicator-bg,oklch(51.1%_0.262_276.966))]",
+} as const;
+
+export const zuiRadioGroupOrientations = {
+  vertical: "grid gap-2",
+  horizontal: "flex flex-wrap gap-x-5 gap-y-2",
+} as const;

package/src/ui/checkbox/animated/animations.ts

@@ -0,0 +1,12 @@
+export const checkboxAnimationPresets = {
+  draw: {
+    initial: { pathLength: 0, opacity: 0 },
+    animate: { pathLength: 1, opacity: 1 },
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  spring: {
+    initial: { scale: 0.7, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 30 },
+  },
+} as const;

package/src/ui/checkbox/animated/checkbox-animated.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import { checkboxAnimationPresets } from "./animations";
+import type { CheckboxAnimatedProps } from "./types";
+import type { CheckboxState } from "../types";
+import {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "../variants";
+
+function resolveCheckboxState(
+  checked: boolean,
+  indeterminate: boolean | undefined,
+): CheckboxState {
+  if (indeterminate) {
+    return "indeterminate";
+  }
+  return checked ? "checked" : "unchecked";
+}
+
+export function CheckboxAnimated(props: CheckboxAnimatedProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    appearance,
+    size,
+    checked,
+    defaultChecked = false,
+    indeterminate,
+    onCheckedChange,
+    disabled,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    animation = "draw",
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const isControlled = checked !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const resolvedChecked = isControlled ? Boolean(checked) : uncontrolled;
+  const state = resolveCheckboxState(resolvedChecked, indeterminate);
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+  const motionPreset = checkboxAnimationPresets[animation];
+  const svgMotionProps = animation === "spring" ? motionPreset : undefined;
+  const pathMotionProps = animation === "draw" ? motionPreset : undefined;
+
+  const setChecked = useCallback(
+    (next: boolean) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onCheckedChange?.(next);
+    },
+    [isControlled, onCheckedChange],
+  );
+
+  return (
+    <label
+      className={cn(checkboxRootVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={state}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="checkbox"
+        data-slot="checkbox"
+        className="peer sr-only"
+        checked={resolvedChecked}
+        disabled={disabled}
+        aria-checked={indeterminate ? "mixed" : resolvedChecked}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : "Checkbox")}
+        onChange={(event) => setChecked(event.currentTarget.checked)}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          checkboxControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="checkbox-control"
+      >
+        {state !== "unchecked" && (
+          <motion.svg
+            key={state}
+            viewBox="0 0 16 16"
+            fill="none"
+            className={cn(
+              checkboxIndicatorVariants({ size }),
+              "opacity-100",
+              indicatorClassName,
+            )}
+            initial={svgMotionProps?.initial}
+            animate={svgMotionProps?.animate}
+            transition={svgMotionProps?.transition}
+          >
+            {state === "indeterminate" ? (
+              <motion.path
+                d="M3.5 8H12.5"
+                strokeWidth="2.4"
+                strokeLinecap="round"
+                initial={pathMotionProps?.initial}
+                animate={pathMotionProps?.animate}
+                transition={pathMotionProps?.transition}
+              />
+            ) : (
+              <motion.path
+                d="M3.2 8.4L6.5 11.5L12.8 4.5"
+                strokeWidth="2.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                initial={pathMotionProps?.initial}
+                animate={pathMotionProps?.animate}
+                transition={pathMotionProps?.transition}
+              />
+            )}
+          </motion.svg>
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="checkbox-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+CheckboxAnimated.displayName = "Checkbox";

package/src/ui/checkbox/animated/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+export { CheckboxAnimated } from "./checkbox-animated";
+export type {
+  CheckboxAnimatedProps,
+  CheckboxAnimation,
+  CheckboxAnimationPresets,
+} from "./types";
+export { checkboxAnimationPresets } from "./animations";

package/src/ui/checkbox/animated/types.ts

@@ -0,0 +1,9 @@
+import type { CheckboxProps } from "../types";
+import type { checkboxAnimationPresets } from "./animations";
+
+export type CheckboxAnimation = keyof typeof checkboxAnimationPresets;
+export type CheckboxAnimationPresets = typeof checkboxAnimationPresets;
+
+export type CheckboxAnimatedProps = CheckboxProps & {
+  animation?: CheckboxAnimation;
+};

package/src/ui/checkbox/checkbox-base.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { CheckboxProps, CheckboxState } from "./types";
+import {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "./variants";
+
+function resolveCheckboxState(
+  checked: boolean,
+  indeterminate: boolean | undefined,
+): CheckboxState {
+  if (indeterminate) {
+    return "indeterminate";
+  }
+  return checked ? "checked" : "unchecked";
+}
+
+export function CheckboxBase(props: CheckboxProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    appearance,
+    size,
+    checked,
+    defaultChecked = false,
+    indeterminate,
+    onCheckedChange,
+    disabled,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const isControlled = checked !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+  const resolvedChecked = isControlled ? Boolean(checked) : uncontrolled;
+  const state = resolveCheckboxState(resolvedChecked, indeterminate);
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+
+  const setChecked = useCallback(
+    (next: boolean) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onCheckedChange?.(next);
+    },
+    [isControlled, onCheckedChange],
+  );
+
+  return (
+    <label
+      className={cn(checkboxRootVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={state}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="checkbox"
+        data-slot="checkbox"
+        className="peer sr-only"
+        checked={resolvedChecked}
+        disabled={disabled}
+        aria-checked={indeterminate ? "mixed" : resolvedChecked}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : "Checkbox")}
+        onChange={(event) => setChecked(event.currentTarget.checked)}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          checkboxControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="checkbox-control"
+      >
+        {state === "indeterminate" ? (
+          <svg
+            viewBox="0 0 16 16"
+            fill="none"
+            className={cn(
+              checkboxIndicatorVariants({ size }),
+              indicatorClassName,
+            )}
+          >
+            <path
+              d="M3.5 8H12.5"
+              strokeWidth="2.4"
+              strokeLinecap="round"
+            />
+          </svg>
+        ) : (
+          <svg
+            viewBox="0 0 16 16"
+            fill="none"
+            className={cn(
+              checkboxIndicatorVariants({ size }),
+              indicatorClassName,
+            )}
+          >
+            <path
+              d="M3.2 8.4L6.5 11.5L12.8 4.5"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="checkbox-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+CheckboxBase.displayName = "Checkbox";

package/src/ui/checkbox/checkbox.test.tsx

@@ -0,0 +1,53 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("should expose displayName", () => {
+    expect(Checkbox.displayName).toBe("Checkbox");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<Checkbox aria-label="Accept" />);
+    expect(document.querySelector('[data-slot="checkbox"]')).toBeTruthy();
+  });
+
+  it("should use accessible label content", () => {
+    render(<Checkbox>Accept terms</Checkbox>);
+    expect(
+      screen.getByRole("checkbox", { name: "Accept terms" }),
+    ).toBeInTheDocument();
+  });
+
+  it("should call onCheckedChange when toggled", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(
+      <Checkbox defaultChecked={false} onCheckedChange={onCheckedChange}>
+        Marketing emails
+      </Checkbox>,
+    );
+
+    await user.click(screen.getByRole("checkbox", { name: "Marketing emails" }));
+    expect(onCheckedChange).toHaveBeenLastCalledWith(true);
+  });
+
+  it("should expose mixed state when indeterminate", () => {
+    render(
+      <Checkbox indeterminate aria-label="Select partial group" />,
+    );
+    expect(screen.getByRole("checkbox")).toHaveAttribute(
+      "aria-checked",
+      "mixed",
+    );
+  });
+
+  it("should forward ref to the input", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<Checkbox ref={ref} aria-label="Remember me" />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("checkbox");
+  });
+});

package/src/ui/checkbox/checkbox.tsx

@@ -0,0 +1,8 @@
+import { CheckboxBase } from "./checkbox-base";
+import type { CheckboxProps } from "./types";
+
+export function Checkbox(props: CheckboxProps) {
+  return <CheckboxBase {...props} />;
+}
+
+Checkbox.displayName = "Checkbox";

package/src/ui/checkbox/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export { Checkbox } from "./checkbox";
+export type {
+  CheckboxControlVariantProps,
+  CheckboxIndicatorVariantProps,
+  CheckboxProps,
+  CheckboxRootVariantProps,
+  CheckboxState,
+} from "./types";
+export {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "./variants";

package/src/ui/checkbox/types.ts

@@ -0,0 +1,40 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type {
+  checkboxControlVariants,
+  checkboxIndicatorVariants,
+  checkboxRootVariants,
+} from "./variants";
+
+export type CheckboxState = "checked" | "unchecked" | "indeterminate";
+
+export type CheckboxRootVariantProps = VariantProps<typeof checkboxRootVariants>;
+export type CheckboxControlVariantProps = VariantProps<
+  typeof checkboxControlVariants
+>;
+export type CheckboxIndicatorVariantProps = VariantProps<
+  typeof checkboxIndicatorVariants
+>;
+
+export type CheckboxProps = CheckboxRootVariantProps &
+  CheckboxControlVariantProps &
+  Omit<
+    ComponentPropsWithRef<"input">,
+    | "type"
+    | "size"
+    | "checked"
+    | "defaultChecked"
+    | "onChange"
+    | "children"
+  > & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    children?: ReactNode;
+    label?: ReactNode;
+    rootClassName?: string;
+    controlClassName?: string;
+    indicatorClassName?: string;
+  };

package/src/ui/checkbox/variants.ts

@@ -0,0 +1,50 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiCheckboxAppearances,
+  zuiCheckboxControlBase,
+  zuiCheckboxIndicatorBase,
+  zuiCheckboxRootBase,
+  zuiCheckboxSizes,
+} from "../../design-system/checkbox";
+
+export const checkboxRootVariants = cva(zuiCheckboxRootBase, {
+  variants: {
+    size: {
+      sm: zuiCheckboxSizes.sm.root,
+      md: zuiCheckboxSizes.md.root,
+      lg: zuiCheckboxSizes.lg.root,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const checkboxControlVariants = cva(zuiCheckboxControlBase, {
+  variants: {
+    appearance: zuiCheckboxAppearances,
+    size: {
+      sm: zuiCheckboxSizes.sm.control,
+      md: zuiCheckboxSizes.md.control,
+      lg: zuiCheckboxSizes.lg.control,
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const checkboxIndicatorVariants = cva(zuiCheckboxIndicatorBase, {
+  variants: {
+    size: {
+      sm: zuiCheckboxSizes.sm.indicator,
+      md: zuiCheckboxSizes.md.indicator,
+      lg: zuiCheckboxSizes.lg.indicator,
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

package/src/ui/radio-group/animated/animations.ts

@@ -0,0 +1,12 @@
+export const radioGroupAnimationPresets = {
+  pop: {
+    initial: { scale: 0.35, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 28 },
+  },
+  fade: {
+    initial: { scale: 0.85, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+} as const;

package/src/ui/radio-group/animated/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { RadioGroupAnimated, RadioGroupItemAnimated } from "./radio-group-animated";
+export type {
+  RadioGroupAnimatedProps,
+  RadioGroupAnimation,
+  RadioGroupAnimationPresets,
+  RadioGroupItemAnimatedProps,
+} from "./types";
+export { radioGroupAnimationPresets } from "./animations";