@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Calendar/calendar.variants.ts

@@ -1,64 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-/**
- * Structural slots for `<Calendar>`.
- *
- * Theme identity: every class is a bare neutral / brand token-backed
- * Tailwind class. The `dashforgePreset()` CSS-variable swap auto-inverts
- * the neutral palette, so there are NO `dark:` variants here (a `dark:` on
- * a neutral class would double-invert — see `_shared/themeIdentity.test.ts`).
- */
-export const calendarVariants = tv({
-  slots: {
-    root: 'inline-flex w-fit flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 select-none',
-    header: 'flex items-center justify-between gap-1',
-    navButton:
-      'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[1rem] text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-40',
-    monthLabel: 'flex-1 text-center text-sm font-semibold text-neutral-900',
-    grid: 'flex flex-col gap-1 focus:outline-none',
-    weekdayRow: 'grid grid-cols-7 gap-1',
-    weekday:
-      'flex h-8 items-center justify-center text-xs font-semibold text-neutral-500',
-    weekRow: 'grid grid-cols-7 gap-1',
-  },
-  variants: {
-    disabled: {
-      true: { root: 'opacity-60' },
-    },
-  },
-  defaultVariants: {
-    disabled: false,
-  },
-});
-
-/**
- * Per-day-cell recipe. Each of the 42 grid cells is rendered with its own
- * state (`siblingMonth` / `today` / `selected` / `disabled`).
- */
-export const calendarDayVariants = tv({
-  base: 'flex h-9 w-9 items-center justify-center rounded-md text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
-  variants: {
-    siblingMonth: {
-      true: 'text-neutral-400',
-    },
-    today: {
-      true: 'font-bold ring-1 ring-inset ring-primary-400',
-    },
-    selected: {
-      true: 'bg-primary-600 text-white hover:bg-primary-600',
-    },
-    disabled: {
-      true: 'cursor-default text-neutral-300 opacity-60 hover:bg-transparent',
-    },
-  },
-  compoundVariants: [
-    // A selected cell drops the "today" ring — the solid fill is enough.
-    { selected: true, today: true, class: 'ring-0' },
-  ],
-  defaultVariants: {
-    siblingMonth: false,
-    today: false,
-    selected: false,
-    disabled: false,
-  },
-});

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,146 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
-import { RbacProvider } from '@dashforge/rbac';
-import type { RbacPolicy, Subject } from '@dashforge/rbac';
-import { DashFormProvider } from '@dashforge/forms';
-import { Checkbox } from './Checkbox.js';
-
-const READ_ONLY: RbacPolicy = {
-  roles: [
-    {
-      name: 'viewer',
-      permissions: [{ resource: 'doc', action: 'update', effect: 'deny' }],
-    },
-  ],
-};
-const viewer: Subject = { id: 'v', roles: ['viewer'] };
-
-function withForm(children: React.ReactNode, defaultValues: Record<string, unknown> = {}) {
-  return <DashFormProvider defaultValues={defaultValues}>{children}</DashFormProvider>;
-}
-
-describe('Checkbox — standalone (no DashFormProvider)', () => {
-  it('renders the Radix root button + label association', () => {
-    const { getByText, getByRole } = render(<Checkbox name="terms" label="Accept" />);
-    expect(getByText('Accept')).toBeTruthy();
-    expect(getByRole('checkbox')).toBeTruthy();
-  });
-
-  it('fires onCheckedChange callback when toggled', () => {
-    const onCheckedChange = vi.fn();
-    const { getByRole } = render(
-      <Checkbox name="terms" label="Accept" onCheckedChange={onCheckedChange} />
-    );
-    fireEvent.click(getByRole('checkbox'));
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-  });
-
-  it('respects defaultChecked', () => {
-    const { getByRole } = render(<Checkbox name="x" defaultChecked label="X" />);
-    expect(getByRole('checkbox').getAttribute('data-state')).toBe('checked');
-  });
-
-  it('applies size variants', () => {
-    const { container, rerender } = render(<Checkbox name="x" size="sm" label="X" />);
-    expect(container.querySelector('button[role="checkbox"]')?.className).toContain('h-4');
-    rerender(<Checkbox name="x" size="lg" label="X" />);
-    expect(container.querySelector('button[role="checkbox"]')?.className).toContain('h-6');
-  });
-
-  it('shows helperText when explicitly supplied', () => {
-    const { getByText } = render(
-      <Checkbox name="x" label="X" helperText="Hint" />
-    );
-    expect(getByText('Hint')).toBeTruthy();
-  });
-
-  it('shows danger styling on error=true', () => {
-    const { container } = render(<Checkbox name="x" label="X" error helperText="bad" />);
-    const control = container.querySelector('button[role="checkbox"]');
-    expect(control?.className).toContain('border-danger-500');
-  });
-});
-
-describe('Checkbox — override (sx + slotProps)', () => {
-  it('sx is applied to the root wrapper', () => {
-    const { container } = render(<Checkbox name="x" label="X" sx="ml-8" />);
-    expect((container.firstChild as HTMLElement).className).toContain('ml-8');
-  });
-
-  it('slotProps.control adds classes to the Radix root', () => {
-    const { container } = render(
-      <Checkbox
-        name="x"
-        label="X"
-        slotProps={{ control: { className: 'ring-4 ring-purple-500' } }}
-      />
-    );
-    expect(container.querySelector('button[role="checkbox"]')?.className).toContain(
-      'ring-purple-500'
-    );
-  });
-
-  it('slotProps.label adds classes to the label element', () => {
-    const { getByText } = render(
-      <Checkbox name="x" label="Hi" slotProps={{ label: { className: 'uppercase' } }} />
-    );
-    expect((getByText('Hi') as HTMLLabelElement).className).toContain('uppercase');
-  });
-});
-
-describe('Checkbox — RBAC', () => {
-  it('hides when access denies with onUnauthorized=hide', () => {
-    const { queryByRole } = render(
-      <RbacProvider policy={READ_ONLY} subject={viewer}>
-        <Checkbox
-          name="x"
-          label="X"
-          access={{ resource: 'doc', action: 'update', onUnauthorized: 'hide' }}
-        />
-      </RbacProvider>
-    );
-    expect(queryByRole('checkbox')).toBeNull();
-  });
-
-  it('disables when access denies with onUnauthorized=disable', () => {
-    const { getByRole } = render(
-      <RbacProvider policy={READ_ONLY} subject={viewer}>
-        <Checkbox
-          name="x"
-          label="X"
-          access={{ resource: 'doc', action: 'update', onUnauthorized: 'disable' }}
-        />
-      </RbacProvider>
-    );
-    expect((getByRole('checkbox') as HTMLButtonElement).disabled).toBe(true);
-  });
-});
-
-describe('Checkbox — DashFormProvider integration', () => {
-  it('renders without crashing inside DashFormProvider', () => {
-    const { getByRole } = render(withForm(<Checkbox name="terms" label="Accept" />));
-    expect(getByRole('checkbox')).toBeTruthy();
-  });
-
-  it('respects explicit `checked` prop (controlled mode wins over bridge)', () => {
-    // The explicit `checked` prop takes precedence over `bridge.getValue`.
-    // Defaults propagation through RHF/Engine is covered by the
-    // @dashforge/forms own test suite (DashFormProvider.* tests); here we
-    // only verify the Checkbox honours the override path correctly.
-    const { getByRole } = render(
-      withForm(<Checkbox name="terms" label="Accept" checked />, { terms: false })
-    );
-    expect(getByRole('checkbox').getAttribute('data-state')).toBe('checked');
-  });
-
-  it('flips checked state on click (bridge.setValue + onChange)', () => {
-    const { getByRole } = render(
-      withForm(<Checkbox name="terms" label="Accept" />, { terms: false })
-    );
-    const cb = getByRole('checkbox');
-    expect(cb.getAttribute('data-state')).toBe('unchecked');
-    fireEvent.click(cb);
-    expect(cb.getAttribute('data-state')).toBe('checked');
-  });
-});

package/src/components/Checkbox/Checkbox.tsx

@@ -1,286 +0,0 @@
-import { useContext, useEffect, useId, useRef } from 'react';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
-import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
-import { useDashFieldMeta } from '@dashforge/forms';
-import { cn } from '../../utils/cn.js';
-import { useAccessState } from '../../hooks/useAccessState.js';
-import { resolveValidationState } from '../_shared/resolveValidationState.js';
-import { checkboxVariants } from './checkbox.variants.js';
-import type { CheckboxProps } from './checkbox.types.js';
-
-/**
- * Inline checkmark SVG used by `Radix.Indicator` when fully checked.
- * Stroke uses `currentColor` so the parent's `text-white` propagates.
- *
- * @internal
- */
-function CheckIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 16 16"
-      fill="none"
-      className={className}
-    >
-      <path
-        d="M3 8.5l3 3 7-7"
-        stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/**
- * Inline dash SVG used by `Radix.Indicator` when the checkbox is in
- * the `indeterminate` tri-state ("some, but not all, children
- * selected" — the canonical "select all" partial state).
- *
- * Pre-0.2.2-beta the indicator rendered the CheckIcon for BOTH
- * checked and indeterminate (Radix mounts the Indicator for either
- * state). We now discriminate via the `data-state` attribute Radix
- * sets on the Indicator element itself — see the parent `Indicator`
- * rendering below for the CSS toggle.
- *
- * @internal
- */
-function DashIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 16 16"
-      fill="none"
-      className={className}
-    >
-      <path
-        d="M3 8h10"
-        stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-/**
- * Dashforge TW Checkbox — bridge-integrated form control.
- *
- * Renders through Radix `Checkbox.Root` + `Checkbox.Indicator`, styled
- * with the `checkboxVariants` TV recipe. Behaviour at the bridge level
- * is a direct port of `@dashforge/ui/Checkbox` (MUI):
- *
- *  - When mounted inside `DashFormProvider`, registers with the bridge
- *    (`bridge.register`), reads `bridge.getValue` for the checked
- *    state, writes `bridge.setValue` on change, fires
- *    `registration.onChange` / `onBlur` for RHF.
- *  - When mounted outside, behaves as a plain uncontrolled checkbox.
- *  - `visibleWhen` predicates the engine state; `false` → returns null.
- *  - `useAccessState(access)` resolves RBAC; `visible: false` → null.
- *  - `unregister`-on-unmount is StrictMode-safe (queueMicrotask +
- *    `isMountedRef`, mirrors the MUI-side pattern).
- *  - Error gating: bridge error shows only after `touched` or after
- *    the form has been submitted (`submitCount > 0`).
- *
- * Renderer differences vs MUI:
- *
- *  - No `FormControlLabel` wrapper — uses a native `<label htmlFor>`
- *    bound via `useId()`. The label click toggles via HTML semantics.
- *  - The Radix root is a `<button>`, so it's keyboard-accessible by
- *    default (Space toggles).
- *  - Slot overrides are class-based (`slotProps={{ control: { className } }}`)
- *    rather than MUI slot components.
- */
-export function Checkbox(props: CheckboxProps) {
-  const {
-    name,
-    rules,
-    visibleWhen,
-    label,
-    helperText,
-    error,
-    access,
-    size,
-    disabled,
-    checked,
-    defaultChecked,
-    onCheckedChange,
-    sx,
-    slotProps,
-  } = props;
-
-  // ───── Hooks (always called, unconditional) ─────
-  const bridge = useContext(DashFormContext) as DashFormBridge | null;
-  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
-  // Per-field granular subscription. We READ from `fieldMeta.value`
-  // (reactive snapshot) rather than `bridge.getValue(name)` (eager
-  // read with no subscription).
-  const fieldMeta = useDashFieldMeta(name);
-  const accessState = useAccessState(access);
-
-  const controlId = useId();
-
-  // StrictMode-safe unregister-on-unmount — mirrors MUI Checkbox.tsx
-  // (the bridge identity changes on every keystroke, so we MUST NOT
-  // re-run cleanup on deps changes — empty deps + ref pattern).
-  const unregisterRef = useRef({ bridge, name });
-  unregisterRef.current = { bridge, name };
-  const isMountedRef = useRef(false);
-   
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      const { bridge: cap, name: capName } = unregisterRef.current;
-      queueMicrotask(() => {
-        if (!isMountedRef.current) cap?.unregister?.(capName);
-      });
-    };
-  }, []);
-
-  // ───── Early returns ─────
-  if (!isVisible) return null;
-  if (!accessState.visible) return null;
-
-  // ───── Effective disabled (OR logic: explicit OR RBAC) ─────
-  const effectiveDisabled =
-    Boolean(disabled) || accessState.disabled || accessState.readonly;
-
-  // ───── Form mode vs Standalone ─────
-  const isFormMode = Boolean(bridge?.register);
-
-  let resolvedChecked: boolean | 'indeterminate' = checked ?? defaultChecked ?? false;
-  let resolvedError = error;
-  let resolvedHelperText: typeof helperText = helperText;
-  let registration: FieldRegistration | null = null;
-
-  if (isFormMode && bridge) {
-    registration = bridge.register(name, rules);
-    const validation = resolveValidationState(name, bridge, error, helperText);
-    resolvedError = validation.error;
-    resolvedHelperText = validation.helperText;
-    // Reactive snapshot from useDashFieldMeta — re-renders on per-field
-    // state change, unlike bridge.getValue (eager read, no subscription).
-    resolvedChecked =
-      checked !== undefined ? checked : Boolean(fieldMeta.value);
-  }
-
-  // ───── Handlers ─────
-  const handleCheckedChange = (next: boolean | 'indeterminate') => {
-    const nextBool = next === true; // indeterminate treated as unchecked at the bridge level
-
-    if (isFormMode && bridge) {
-      // Update bridge value FIRST so subsequent reads see the new state.
-      bridge.setValue?.(name, nextBool);
-
-      // Synthesise a minimal RHF-compatible event for registration.onChange.
-      const syntheticEvent = {
-        target: { name, checked: nextBool, value: nextBool },
-        type: 'change',
-      };
-      void registration?.onChange?.(syntheticEvent);
-    }
-
-    onCheckedChange?.(nextBool);
-  };
-
-  const handleBlur = () => {
-    if (!isFormMode || !bridge) return;
-    const currentChecked = bridge.getValue(name) === true;
-    const syntheticEvent = {
-      target: { name, checked: currentChecked, value: currentChecked },
-      type: 'blur',
-    };
-    registration?.onBlur?.(syntheticEvent);
-  };
-
-  // ───── Render ─────
-  const v = checkboxVariants({ size, error: resolvedError });
-
-  // Radix Checkbox: pass `checked` (controlled) OR `defaultChecked`
-  // (uncontrolled), never both. In bridge mode the truth lives in the
-  // bridge — always controlled. Standalone: respect whichever prop the
-  // consumer supplied.
-  const radixStateProps: {
-    checked?: boolean | 'indeterminate';
-    defaultChecked?: boolean;
-  } = isFormMode
-    ? { checked: resolvedChecked }
-    : checked !== undefined
-      ? { checked }
-      : { defaultChecked: defaultChecked ?? false };
-
-  return (
-    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
-      <RadixCheckbox.Root
-        id={controlId}
-        name={name}
-        {...radixStateProps}
-        disabled={effectiveDisabled}
-        onCheckedChange={handleCheckedChange}
-        onBlur={handleBlur}
-        ref={registration?.ref as React.Ref<HTMLButtonElement> | undefined}
-        className={cn(v.control(), slotProps?.control?.className)}
-      >
-        {/*
-         * Radix.Indicator natively mounts only when `data-state` is
-         * `checked` or `indeterminate` — i.e. it tracks Radix's
-         * internal state directly, no React state dependency.
-         *
-         * The previous implementation used `forceMount` + a React
-         * conditional `{resolvedChecked === true ? <CheckIcon /> : null}`,
-         * which broke standalone uncontrolled mode: Radix would flip
-         * its internal `data-state` on click (turning the control blue
-         * via `data-[state=checked]:bg-primary-500`) but the React
-         * snapshot for `resolvedChecked` stayed stale, so the
-         * `<CheckIcon />` never mounted. Result: blue box with no
-         * tick after user interaction.
-         *
-         * Dropping forceMount + the conditional defers the mount
-         * decision to Radix (the single source of truth in all three
-         * modes — controlled, uncontrolled, bridge). Indicator mounts
-         * exactly when the checkbox is checked OR indeterminate.
-         *
-         * Per-state glyph (Sprint 2 P4): when Indicator is mounted we
-         * render BOTH glyphs and toggle visibility via the Indicator's
-         * own `data-state` attribute. The `group` class on Indicator
-         * lets the SVG children target the parent's state with
-         * `group-data-[state=checked]:hidden` / `…:indeterminate:hidden`.
-         * No React state required — Radix's data-state attribute is
-         * the single source of truth.
-         */}
-        <RadixCheckbox.Indicator
-          className={cn(v.indicator(), 'group', slotProps?.indicator?.className)}
-        >
-          <CheckIcon className="h-full w-full group-data-[state=indeterminate]:hidden" />
-          <DashIcon className="h-full w-full group-data-[state=checked]:hidden" />
-        </RadixCheckbox.Indicator>
-      </RadixCheckbox.Root>
-
-      <div className="flex flex-col">
-        {label && (
-          <label
-            htmlFor={controlId}
-            className={cn(v.label(), slotProps?.label?.className)}
-          >
-            {label}
-          </label>
-        )}
-        {resolvedHelperText && (
-          <p
-            className={cn(
-              resolvedError ? v.errorText() : v.helperText(),
-              resolvedError
-                ? slotProps?.errorText?.className
-                : slotProps?.helperText?.className
-            )}
-          >
-            {resolvedHelperText}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/Checkbox/checkbox.types.ts

@@ -1,88 +0,0 @@
-import type { ReactNode } from 'react';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { Engine } from '@dashforge/ui-core';
-import type { CheckboxVariants } from './checkbox.variants.js';
-
-/**
- * Per-slot className overrides for `<Checkbox>`. Shape mirrors the
- * MUI-side `slotProps` convention: object-per-slot with a `className`
- * key, so future extensions (style, aria-*, data-*) are additive.
- */
-export interface CheckboxSlotProps {
-  root?: { className?: string };
-  control?: { className?: string };
-  indicator?: { className?: string };
-  label?: { className?: string };
-  helperText?: { className?: string };
-  errorText?: { className?: string };
-}
-
-/**
- * Props for the Dashforge TW `<Checkbox>` component.
- *
- * Behaves identically to `@dashforge/ui/Checkbox` (MUI) at the bridge
- * level — same `name` / `rules` / `visibleWhen` / `access` semantics,
- * same validation gating (touched OR submitCount > 0). The visual
- * surface is rendered via Radix Checkbox + Tailwind classes.
- *
- * Note: the `error` prop here is the **public** form-validation
- * semaphore (boolean override); it threads into the variant via
- * `checkboxVariants({ error })` internally. The variant axis name and
- * the prop name happen to coincide — same meaning.
- */
-export interface CheckboxProps
-  extends Pick<CheckboxVariants, 'size'> {
-  /** Bridge field name (required when used inside `DashFormProvider`). */
-  name: string;
-
-  /** Visible label rendered next to the control. Click also toggles the box. */
-  label?: ReactNode;
-
-  /** Forwarded to the bridge as RHF rules — opaque to this component. */
-  rules?: unknown;
-
-  /**
-   * Engine predicate. When provided, the component renders only when
-   * the predicate returns truthy against the current engine state.
-   */
-  visibleWhen?: (engine: Engine) => boolean;
-
-  /** Initial / controlled checked state. */
-  checked?: boolean;
-
-  /** Default checked when used uncontrolled. */
-  defaultChecked?: boolean;
-
-  /** Disabled — combined with RBAC disabled via OR. */
-  disabled?: boolean;
-
-  /**
-   * Forces helper text below the control. When the bridge surfaces an
-   * error and `helperText` is undefined, the bridge's error message
-   * shows up here (gated by `touched || submitCount > 0`).
-   */
-  helperText?: ReactNode;
-
-  /**
-   * Explicit error flag. When `true`, the control renders with the
-   * danger ring + the error-text slot is used for `helperText`.
-   * Overrides the bridge's auto-detected error.
-   */
-  error?: boolean;
-
-  /** RBAC requirement. */
-  access?: AccessRequirement;
-
-  /** Root-level Tailwind override. Wins over variant classes via `cn()`. */
-  sx?: string;
-
-  /** Per-slot overrides — see `CheckboxSlotProps`. */
-  slotProps?: CheckboxSlotProps;
-
-  /**
-   * Called when the user toggles the control. When inside a
-   * `DashFormProvider`, the bridge update happens first, then this
-   * callback fires with the new checked state.
-   */
-  onCheckedChange?: (checked: boolean) => void;
-}

package/src/components/Checkbox/checkbox.variants.ts

@@ -1,68 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Checkbox>` with slots.
- *
- * Slots:
- *   - `root`        — outer flex wrapper enclosing the control + label
- *   - `control`     — the visible square (Radix `Checkbox.Root`)
- *   - `indicator`   — checkmark SVG container (Radix `Checkbox.Indicator`)
- *   - `label`       — text label associated with the control
- *   - `helperText`  — descriptive line below
- *   - `errorText`   — error message line (semantic counterpart of helperText)
- *
- * Variants:
- *   - `size`  : sm / md / lg (drives control box dimensions + label text size)
- *   - `error` : bool — swaps borders + helper-text color to danger tones
- */
-export const checkboxVariants = tv({
-  slots: {
-    root: 'inline-flex items-start gap-2',
-    control: [
-      'inline-flex items-center justify-center shrink-0',
-      // bg-neutral-50 inverts — dark-mode aware via the dashforge preset.
-      'rounded border bg-neutral-50',
-      'border-neutral-300',
-      'transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500',
-      // Radix data-state hooks
-      'data-[state=checked]:bg-primary-500 data-[state=checked]:border-primary-500',
-      'data-[state=indeterminate]:bg-primary-500 data-[state=indeterminate]:border-primary-500',
-      'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
-    ],
-    indicator: 'flex items-center justify-center text-white',
-    label: 'select-none cursor-pointer text-neutral-900',
-    helperText: 'text-sm text-neutral-600 mt-1',
-    errorText: 'text-sm text-danger-600 mt-1',
-  },
-  variants: {
-    size: {
-      sm: {
-        control: 'h-4 w-4',
-        label: 'text-sm',
-        indicator: 'h-3 w-3',
-      },
-      md: {
-        control: 'h-5 w-5',
-        label: 'text-base',
-        indicator: 'h-3.5 w-3.5',
-      },
-      lg: {
-        control: 'h-6 w-6',
-        label: 'text-lg',
-        indicator: 'h-4 w-4',
-      },
-    },
-    error: {
-      true: {
-        control: 'border-danger-500 focus-visible:ring-danger-500',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    error: false,
-  },
-});
-
-export type CheckboxVariants = VariantProps<typeof checkboxVariants>;