@dashforge/tw 0.1.0-beta

package/src/components/Snackbar/snackbar.variants.ts

@@ -0,0 +1,72 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<Snackbar>` (stacked toast surface).
+ *
+ * Slots:
+ *   - `container`   — fixed-position outer stack
+ *   - `item`        — single snackbar surface
+ *   - `icon`        — leading severity icon
+ *   - `message`     — main text
+ *   - `action`      — optional action button
+ *   - `closeButton` — trailing `×` button
+ */
+export const snackbarVariants = tv({
+  slots: {
+    container: [
+      'fixed z-50 flex flex-col gap-2 p-4 pointer-events-none',
+      'max-w-[min(28rem,calc(100vw-2rem))]',
+    ],
+    item: [
+      'pointer-events-auto',
+      'flex items-start gap-3 px-4 py-3 w-full',
+      'rounded-lg border shadow-lg',
+      'text-sm bg-neutral-50 text-neutral-900',
+      // Subtle enter transition — opacity + translate, kept short so a
+      // burst of snackbars feels snappy.
+      'transition-all duration-200',
+      'data-[state=entered]:opacity-100 data-[state=exited]:opacity-0',
+    ],
+    icon: 'shrink-0 mt-0.5 w-5 h-5 inline-flex items-center justify-center',
+    message: 'flex-1 min-w-0 leading-relaxed',
+    action: [
+      'shrink-0 inline-flex items-center justify-center px-2 h-7',
+      'rounded-md text-xs font-medium',
+      'text-primary-700 hover:bg-primary-100',
+      'outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+      'transition-colors',
+    ],
+    closeButton: [
+      'shrink-0 inline-flex items-center justify-center w-6 h-6',
+      'rounded-md text-neutral-500 hover:bg-neutral-200 hover:text-neutral-900',
+      'outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
+      'transition-colors',
+    ],
+  },
+  variants: {
+    position: {
+      'top-left': { container: 'top-0 left-0 items-start' },
+      'top-center': {
+        container: 'top-0 left-1/2 -translate-x-1/2 items-center',
+      },
+      'top-right': { container: 'top-0 right-0 items-end' },
+      'bottom-left': { container: 'bottom-0 left-0 items-start' },
+      'bottom-center': {
+        container: 'bottom-0 left-1/2 -translate-x-1/2 items-center',
+      },
+      'bottom-right': { container: 'bottom-0 right-0 items-end' },
+    },
+    severity: {
+      info: { item: 'border-primary-200', icon: 'text-primary-600' },
+      success: { item: 'border-success-200', icon: 'text-success-600' },
+      warning: { item: 'border-warning-200', icon: 'text-warning-600' },
+      danger: { item: 'border-danger-200', icon: 'text-danger-600' },
+    },
+  },
+  defaultVariants: {
+    position: 'bottom-right',
+    severity: 'info',
+  },
+});
+
+export type SnackbarVariants = VariantProps<typeof snackbarVariants>;

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,131 @@
+// @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 { Switch } from './Switch.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('Switch — standalone', () => {
+  it('renders the Radix root with role="switch"', () => {
+    const { getByRole } = render(<Switch name="notif" label="Notifications" />);
+    expect(getByRole('switch')).toBeTruthy();
+  });
+
+  it('label is associated with the control via htmlFor', () => {
+    const { getByText, getByRole } = render(<Switch name="x" label="On" />);
+    const label = getByText('On') as HTMLLabelElement;
+    const ctrl = getByRole('switch');
+    expect(label.htmlFor).toBe(ctrl.id);
+  });
+
+  it('fires onCheckedChange', () => {
+    const fn = vi.fn();
+    const { getByRole } = render(<Switch name="x" onCheckedChange={fn} />);
+    fireEvent.click(getByRole('switch'));
+    expect(fn).toHaveBeenCalledWith(true);
+  });
+
+  it('respects defaultChecked when uncontrolled', () => {
+    const { getByRole } = render(<Switch name="x" defaultChecked label="X" />);
+    expect(getByRole('switch').getAttribute('data-state')).toBe('checked');
+  });
+
+  it('thumb sits in unchecked position by default', () => {
+    const { container } = render(<Switch name="x" label="X" />);
+    const thumb = container.querySelector('[data-state]')?.children[0];
+    expect(thumb?.className).toContain('data-[state=unchecked]:translate-x-0');
+  });
+
+  it('size variants change control + thumb dimensions', () => {
+    const { container, rerender } = render(<Switch name="x" size="sm" label="X" />);
+    expect(container.querySelector('button[role="switch"]')?.className).toContain('h-4');
+    rerender(<Switch name="x" size="lg" label="X" />);
+    expect(container.querySelector('button[role="switch"]')?.className).toContain('h-7');
+  });
+
+  it('shows danger styling on error=true', () => {
+    const { container } = render(<Switch name="x" error label="X" helperText="bad" />);
+    const ctrl = container.querySelector('button[role="switch"]');
+    expect(ctrl?.className).toContain('bg-danger-200');
+  });
+});
+
+describe('Switch — override (sx + slotProps)', () => {
+  it('sx applies to root', () => {
+    const { container } = render(<Switch name="x" sx="ml-8" />);
+    expect((container.firstChild as HTMLElement).className).toContain('ml-8');
+  });
+
+  it('slotProps.thumb decorates the thumb', () => {
+    const { container } = render(
+      <Switch name="x" slotProps={{ thumb: { className: 'ring-2 ring-purple-500' } }} />
+    );
+    const thumb = container.querySelector('button[role="switch"]')?.children[0];
+    expect(thumb?.className).toContain('ring-purple-500');
+  });
+});
+
+describe('Switch — RBAC', () => {
+  it('hides when access denies with onUnauthorized=hide', () => {
+    const { queryByRole } = render(
+      <RbacProvider policy={READ_ONLY} subject={viewer}>
+        <Switch
+          name="x"
+          label="X"
+          access={{ resource: 'doc', action: 'update', onUnauthorized: 'hide' }}
+        />
+      </RbacProvider>
+    );
+    expect(queryByRole('switch')).toBeNull();
+  });
+
+  it('disables when access denies with onUnauthorized=disable', () => {
+    const { getByRole } = render(
+      <RbacProvider policy={READ_ONLY} subject={viewer}>
+        <Switch
+          name="x"
+          label="X"
+          access={{ resource: 'doc', action: 'update', onUnauthorized: 'disable' }}
+        />
+      </RbacProvider>
+    );
+    expect((getByRole('switch') as HTMLButtonElement).disabled).toBe(true);
+  });
+});
+
+describe('Switch — DashFormProvider integration', () => {
+  it('renders inside DashFormProvider', () => {
+    const { getByRole } = render(withForm(<Switch name="newsletter" label="Subscribe" />));
+    expect(getByRole('switch')).toBeTruthy();
+  });
+
+  it('flips state on click (bridge.setValue + onChange)', () => {
+    const { getByRole } = render(withForm(<Switch name="x" />, { x: false }));
+    const sw = getByRole('switch');
+    expect(sw.getAttribute('data-state')).toBe('unchecked');
+    fireEvent.click(sw);
+    expect(sw.getAttribute('data-state')).toBe('checked');
+  });
+
+  it('respects explicit `checked` (controlled wins over bridge)', () => {
+    const { getByRole } = render(
+      withForm(<Switch name="x" checked />, { x: false })
+    );
+    expect(getByRole('switch').getAttribute('data-state')).toBe('checked');
+  });
+});

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,158 @@
+import { useContext, useEffect, useId, useRef } from 'react';
+import * as RadixSwitch from '@radix-ui/react-switch';
+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 { switchVariants } from './switch.variants.js';
+import type { SwitchProps } from './switch.types.js';
+
+/**
+ * Dashforge TW Switch — bridge-integrated toggle.
+ *
+ * Implementation mirrors `<Checkbox>` (same 8-step bridge integration
+ * pattern, same StrictMode-safe unregister, same controlled-vs-
+ * uncontrolled Radix props logic) — the only differences are:
+ *
+ *  - Renders Radix `Switch.Root` + `Switch.Thumb` instead of `Checkbox`.
+ *  - No indicator icon (the thumb position is the visual state).
+ *  - Variants drive both control track dimensions AND the thumb
+ *    translate-x distance so the knob lands flush at each end.
+ */
+export function Switch(props: SwitchProps) {
+  const {
+    name,
+    rules,
+    visibleWhen,
+    label,
+    helperText,
+    error,
+    access,
+    size,
+    disabled,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    sx,
+    slotProps,
+  } = props;
+
+  const bridge = useContext(DashFormContext) as DashFormBridge | null;
+  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
+  // Reactive snapshot — see Checkbox.tsx for the same rationale.
+  const fieldMeta = useDashFieldMeta(name);
+  const accessState = useAccessState(access);
+
+  const controlId = useId();
+
+  // StrictMode-safe unregister-on-unmount
+  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);
+      });
+    };
+  }, []);
+
+  if (!isVisible) return null;
+  if (!accessState.visible) return null;
+
+  const effectiveDisabled =
+    Boolean(disabled) || accessState.disabled || accessState.readonly;
+
+  const isFormMode = Boolean(bridge?.register);
+
+  let resolvedChecked = 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;
+    resolvedChecked =
+      checked !== undefined ? checked : Boolean(fieldMeta.value);
+  }
+
+  const handleCheckedChange = (next: boolean) => {
+    if (isFormMode && bridge) {
+      bridge.setValue?.(name, next);
+      const syntheticEvent = {
+        target: { name, checked: next, value: next },
+        type: 'change',
+      };
+      void registration?.onChange?.(syntheticEvent);
+    }
+    onCheckedChange?.(next);
+  };
+
+  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);
+  };
+
+  const v = switchVariants({ size, error: resolvedError });
+
+  // Controlled vs uncontrolled (same logic as Checkbox).
+  const radixStateProps: { checked?: boolean; defaultChecked?: boolean } = isFormMode
+    ? { checked: resolvedChecked }
+    : checked !== undefined
+      ? { checked }
+      : { defaultChecked: defaultChecked ?? false };
+
+  return (
+    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
+      <RadixSwitch.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)}
+      >
+        <RadixSwitch.Thumb className={cn(v.thumb(), slotProps?.thumb?.className)} />
+      </RadixSwitch.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/Switch/switch.types.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { Engine } from '@dashforge/ui-core';
+import type { SwitchVariants } from './switch.variants.js';
+
+export interface SwitchSlotProps {
+  root?: { className?: string };
+  control?: { className?: string };
+  thumb?: { className?: string };
+  label?: { className?: string };
+  helperText?: { className?: string };
+  errorText?: { className?: string };
+}
+
+/**
+ * Props for the Dashforge TW `<Switch>` component.
+ *
+ * Mirrors the bridge contract of `@dashforge/ui/Switch` (MUI). Same
+ * `name` / `rules` / `visibleWhen` / `access` semantics, same
+ * validation gating. Renders through Radix `Switch.Root` + `Switch.Thumb`.
+ */
+export interface SwitchProps extends Pick<SwitchVariants, 'size'> {
+  name: string;
+  label?: ReactNode;
+  rules?: unknown;
+  visibleWhen?: (engine: Engine) => boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  helperText?: ReactNode;
+  error?: boolean;
+  access?: AccessRequirement;
+  sx?: string;
+  slotProps?: SwitchSlotProps;
+  onCheckedChange?: (checked: boolean) => void;
+}

package/src/components/Switch/switch.variants.ts

@@ -0,0 +1,65 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<Switch>` with slots.
+ *
+ * Slots:
+ *   - `root`       — outer flex wrapper (control + label)
+ *   - `control`    — the visible track (Radix `Switch.Root`)
+ *   - `thumb`      — the moving knob (Radix `Switch.Thumb`); animated
+ *                    via translate-x on data-state="checked"
+ *   - `label`      — text next to the control
+ *   - `helperText` / `errorText` — informational lines below
+ */
+export const switchVariants = tv({
+  slots: {
+    root: 'inline-flex items-start gap-3',
+    control: [
+      'relative inline-flex shrink-0 cursor-pointer items-center',
+      'rounded-full border-2 border-transparent',
+      'transition-colors',
+      'bg-neutral-300',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500',
+      'data-[state=checked]:bg-primary-500',
+      'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ],
+    thumb: [
+      'pointer-events-none inline-block rounded-full bg-white shadow ring-0',
+      'transition-transform',
+      'data-[state=unchecked]:translate-x-0',
+    ],
+    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-7',
+        thumb: 'h-3 w-3 data-[state=checked]:translate-x-3',
+        label: 'text-sm',
+      },
+      md: {
+        control: 'h-6 w-11',
+        thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',
+        label: 'text-base',
+      },
+      lg: {
+        control: 'h-7 w-14',
+        thumb: 'h-6 w-6 data-[state=checked]:translate-x-7',
+        label: 'text-lg',
+      },
+    },
+    error: {
+      true: {
+        control: 'bg-danger-200 data-[state=checked]:bg-danger-500 focus-visible:ring-danger-500',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    error: false,
+  },
+});
+
+export type SwitchVariants = VariantProps<typeof switchVariants>;

package/src/components/TextField/TextField.test.tsx

@@ -0,0 +1,194 @@
+// @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 { TextField } from './TextField.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('TextField — standalone', () => {
+  it('renders an <input type="text"> by default', () => {
+    const { getByRole } = render(<TextField name="email" label="Email" />);
+    const input = getByRole('textbox') as HTMLInputElement;
+    expect(input.type).toBe('text');
+  });
+
+  it('label is wired via htmlFor to the input id', () => {
+    const { getByText, getByRole } = render(<TextField name="x" label="My label" />);
+    const label = getByText('My label').closest('label') as HTMLLabelElement;
+    expect(label.htmlFor).toBe((getByRole('textbox') as HTMLInputElement).id);
+  });
+
+  it('renders the required asterisk and sets the native required attr', () => {
+    const { getByText, getByRole } = render(
+      <TextField name="x" label="X" required />
+    );
+    expect(getByText('*')).toBeTruthy();
+    expect((getByRole('textbox') as HTMLInputElement).required).toBe(true);
+  });
+
+  it('forwards type="password" / "email" / etc.', () => {
+    const { getByLabelText } = render(<TextField name="p" label="P" type="password" />);
+    expect((getByLabelText('P') as HTMLInputElement).type).toBe('password');
+  });
+
+  it('renders helperText below the input', () => {
+    const { getByText } = render(<TextField name="x" label="X" helperText="Hint" />);
+    expect(getByText('Hint')).toBeTruthy();
+  });
+
+  it('aria-describedby links to the helper text id when present', () => {
+    const { getByRole, getByText } = render(
+      <TextField name="x" label="X" helperText="Hint" />
+    );
+    const input = getByRole('textbox') as HTMLInputElement;
+    const helperId = input.getAttribute('aria-describedby');
+    expect(helperId).toBeTruthy();
+    expect(getByText('Hint').id).toBe(helperId);
+  });
+});
+
+describe('TextField — variants', () => {
+  it('size lg uses h-12 + text-lg', () => {
+    const { container } = render(<TextField name="x" label="X" size="lg" />);
+    const wrap = container.querySelector('div[class*="rounded-md"]');
+    expect(wrap?.className).toContain('h-12');
+    expect(container.querySelector('input')?.className).toContain('text-lg');
+  });
+
+  it('error=true applies danger ring + uses errorText slot for helperText', () => {
+    const { container, getByText } = render(
+      <TextField name="x" label="X" error helperText="Bad" />
+    );
+    expect(container.querySelector('div[class*="rounded-md"]')?.className).toContain(
+      'border-danger-500'
+    );
+    expect(getByText('Bad').className).toContain('text-danger-600');
+  });
+
+  it('aria-invalid is set when error=true', () => {
+    const { getByRole } = render(<TextField name="x" label="X" error />);
+    expect(getByRole('textbox').getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('fullWidth adds w-full to root + wrapper', () => {
+    const { container } = render(<TextField name="x" label="X" fullWidth />);
+    expect((container.firstChild as HTMLElement).className).toContain('w-full');
+  });
+
+  it('layout=inline puts label and input side by side', () => {
+    const { container } = render(<TextField name="x" label="X" layout="inline" />);
+    expect((container.firstChild as HTMLElement).className).toContain('flex-row');
+  });
+});
+
+describe('TextField — override (sx + slotProps)', () => {
+  it('sx is applied to root', () => {
+    const { container } = render(<TextField name="x" label="X" sx="md:w-1/2" />);
+    expect((container.firstChild as HTMLElement).className).toContain('md:w-1/2');
+  });
+
+  it('slotProps.input applies to the <input>', () => {
+    const { getByRole } = render(
+      <TextField name="x" label="X" slotProps={{ input: { className: 'font-mono' } }} />
+    );
+    expect(getByRole('textbox').className).toContain('font-mono');
+  });
+
+  it('slotProps.label applies to the <label>', () => {
+    const { getByText } = render(
+      <TextField name="x" label="My" slotProps={{ label: { className: 'uppercase' } }} />
+    );
+    const label = getByText('My').closest('label');
+    expect(label?.className).toContain('uppercase');
+  });
+});
+
+describe('TextField — RBAC', () => {
+  it('hides with onUnauthorized=hide', () => {
+    const { queryByRole } = render(
+      <RbacProvider policy={READ_ONLY} subject={viewer}>
+        <TextField
+          name="x"
+          label="X"
+          access={{ resource: 'doc', action: 'update', onUnauthorized: 'hide' }}
+        />
+      </RbacProvider>
+    );
+    expect(queryByRole('textbox')).toBeNull();
+  });
+
+  it('disables with onUnauthorized=disable', () => {
+    const { getByRole } = render(
+      <RbacProvider policy={READ_ONLY} subject={viewer}>
+        <TextField
+          name="x"
+          label="X"
+          access={{ resource: 'doc', action: 'update', onUnauthorized: 'disable' }}
+        />
+      </RbacProvider>
+    );
+    expect((getByRole('textbox') as HTMLInputElement).disabled).toBe(true);
+  });
+
+  it('becomes readonly with onUnauthorized=readonly', () => {
+    const { getByRole } = render(
+      <RbacProvider policy={READ_ONLY} subject={viewer}>
+        <TextField
+          name="x"
+          label="X"
+          access={{ resource: 'doc', action: 'update', onUnauthorized: 'readonly' }}
+        />
+      </RbacProvider>
+    );
+    expect((getByRole('textbox') as HTMLInputElement).readOnly).toBe(true);
+  });
+});
+
+describe('TextField — DashFormProvider integration', () => {
+  it('renders inside DashFormProvider', () => {
+    const { getByRole } = render(withForm(<TextField name="email" label="Email" />));
+    expect(getByRole('textbox')).toBeTruthy();
+  });
+
+  it('updates the input value as the user types', () => {
+    const { getByRole } = render(withForm(<TextField name="email" label="Email" />));
+    const input = getByRole('textbox') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'hi@example.com' } });
+    expect(input.value).toBe('hi@example.com');
+  });
+
+  it('respects explicit `value` (controlled mode wins over bridge)', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      withForm(
+        <TextField name="email" label="Email" value="forced" onChange={onChange} />,
+        { email: '' }
+      )
+    );
+    expect((getByRole('textbox') as HTMLInputElement).value).toBe('forced');
+  });
+
+  it('fires user onChange in addition to the bridge update', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      withForm(<TextField name="email" label="Email" onChange={onChange} />)
+    );
+    fireEvent.change(getByRole('textbox'), { target: { value: 'x' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+});