@dashforge/tw 1.1.0 → 1.2.0

package/src/components/Card/card.types.ts

@@ -1,132 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import type { ClassValue } from 'tailwind-variants';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { BoxProps } from '../Box/box.types.js';
-
-/**
- * `<Card>` — opinionated surface preset over `<Box>`.
- *
- * Architectural note: `<Box>` already implements the full surface
- * vocabulary (variant × color, elevation, rounded, spacing). `<Card>`
- * exists for **two reasons** on top of Box:
- *
- *   1. **MUI mental model** — devs migrating from `@mui/material/Card`
- *      reach for `<Card>` reflexively. Having the component (as a
- *      thin Box alias with card-shaped defaults) removes adoption
- *      friction without duplicating the surface system.
- *   2. **Restricted variant axis** — Card excludes `'soft'` and
- *      `'solid'` from Box's 5 variants. A "solid card" is semantically
- *      a banner; a "soft card" is a callout (use `<Alert>`). Restricting
- *      to `'outlined' | 'elevated' | 'plain'` is opinionated typing
- *      that catches misuse at compile time.
- *
- * Card inherits `access` + `visibleWhen` from Box (Sprint 4.4 surface
- * alignment) automatically — no per-component wiring needed.
- *
- * Defaults set by Card (override at the call site):
- *   - `variant='outlined'`  → soft border + bg tint (most card-like)
- *   - `rounded='lg'`        → 8px radius
- *   - `elevation={1}`       → faint shadow for visual weight
- *   - `p={0}`               → no inner padding (use `<CardContent>`)
- */
-export interface CardProps
-  extends Omit<BoxProps, 'variant'> {
-  /**
-   * Restricted variant — only the three card-appropriate Box variants.
-   * - `'outlined'` (default) — bordered surface with subtle tint.
-   * - `'elevated'` — surface with shadow, no border.
-   * - `'plain'` — bare surface (background + radius), no border, no
-   *   shadow. Use when wrapping content that already provides chrome.
-   *
-   * @default 'outlined'
-   */
-  variant?: 'outlined' | 'elevated' | 'plain';
-}
-
-/**
- * `<CardContent>` — padded inner section of a Card.
- *
- * A semantic alias for `<Box p={4}>` (or the equivalent spacing
- * step). Reads better in starter-kit code than the equivalent Box
- * call — the consumer expresses "this is the content area of the
- * card" rather than "this is a box with padding-4 inside a card".
- *
- * No surface props — CardContent inherits its background from the
- * parent Card. The only configurable axis is the padding step.
- */
-export interface CardContentProps {
-  /**
-   * Inner padding token step (same scale as `<Box p>`).
-   * @default 4
-   */
-  p?: BoxProps['p'];
-
-  /** Content of the section. */
-  children: ReactNode;
-
-  /** Standard React `className` — appended to the root via `cn()`. */
-  className?: string;
-
-  /** Root-element class shortcut (string or clsx-compatible value). */
-  sx?: ClassValue;
-}
-
-/**
- * `<CardActionArea>` — clickable wrapper inside (or around) a Card.
- *
- * The single value-add over a raw `<Box>` wrapper: focus ring +
- * hover state + Radix Slot polymorphism so the wrapper can become a
- * router `<Link>` without nesting `<a>` inside `<button>` (a11y
- * violation).
- *
- * Use cases:
- *   - "Card-as-CTA" patterns where the whole card surface should be
- *     clickable (e.g. "Open dashboard" tile)
- *   - Card-shaped router links in dashboards / navigation grids
- *   - Selectable cards in galleries (with `selected` + `onClick`)
- *
- * Always renders as `<button>` (or the asChild element) — focusable,
- * keyboard-accessible by default. `aria-pressed` when `selected=true`
- * for the toggle pattern (filter card / option card).
- */
-export interface CardActionAreaProps
-  extends Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'color'> {
-  /** The card body / content to wrap. */
-  children: ReactNode;
-
-  /**
-   * Render-as-child via Radix Slot. The CardActionArea styles paint
-   * onto the immediate child element (typically a router `<Link>`).
-   * No `<button>` DOM emitted.
-   */
-  asChild?: boolean;
-
-  /**
-   * Selected state — for toggle / option-card patterns. Adds
-   * `aria-pressed="true"` and a primary-toned focus ring even when
-   * not focused.
-   */
-  selected?: boolean;
-
-  /**
-   * RBAC requirement — controls clickability via the centralized
-   * `@dashforge/rbac` policy engine.
-   *   - `onUnauthorized: 'hide'`     → action area does not render
-   *   - `onUnauthorized: 'disable'`  → clicks suppressed + dimmed
-   *   - `onUnauthorized: 'readonly'` → mapped to disabled
-   */
-  access?: AccessRequirement;
-
-  /**
-   * Engine-reactive visibility predicate — Sprint 4.4 alignment.
-   * When the predicate returns `false`, the action area renders `null`.
-   */
-  visibleWhen?: (engine: Engine) => boolean;
-
-  /** Root-element class shortcut. */
-  sx?: ClassValue;
-
-  /** Standard React className — appended via `cn()`. */
-  className?: string;
-}

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;
-}