@12-apps/ui 6.20.0 → 6.21.0

package/dist/types-native/components/form/Switch/Switch.types.native.d.ts

@@ -0,0 +1,27 @@
+import type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { SwitchBaseProps } from './Switch.base';
+export type { SwitchBaseProps, SwitchLabelPosition, SwitchVariant } from './Switch.base';
+/**
+ * The change a native `Switch` reports.
+ *
+ * Shaped as `{ target: { checked } }` because that is what MUI's
+ * `ChangeEvent<HTMLInputElement>` gives the `onChange={(e) =>
+ * set(e.target.checked)}` handlers a shared screen already has; the resolved
+ * flag arrives as the second argument, exactly as MUI passes it.
+ */
+export interface SwitchChangeEvent {
+    target: {
+        checked: boolean;
+    };
+}
+/** The native `Switch`: the shared contract, plus a `View`'s own props. */
+export type SwitchProps = SwitchBaseProps & Omit<ViewProps, keyof SwitchBaseProps | 'style'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (event: SwitchChangeEvent, checked: boolean) => void;
+    /** Both spellings fire, as `Button`'s do. */
+    onClick?: (event: GestureResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=Switch.types.native.d.ts.map

package/dist/types-native/components/form/Switch/Switch.types.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.types.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Switch/Switch.types.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEzF;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAC9B;AAED,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,eAAe,GACvC,IAAI,CAAC,SAAS,EAAE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/dist/types-native/components/form/Switch/index.native.d.ts

@@ -0,0 +1,3 @@
+export { Switch } from './Switch.native';
+export type { SwitchBaseProps, SwitchChangeEvent, SwitchLabelPosition, SwitchProps, SwitchVariant, } from './Switch.types.native';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/components/form/Switch/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Switch/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,aAAa,GACd,MAAM,uBAAuB,CAAC"}

package/dist/types-native/components/form/field-pulse.native.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * THE BAR THAT PULSES BEHIND A FIELD.
+ *
+ * `Input.styles.ts` and `Select.tsx` declare the same `::after` — a 56px wash
+ * of the primary hue at 0.3, growing a 10px box-shadow ring and fading out
+ * every two seconds — so the native halves draw it from one component rather
+ * than one each. The numbers stay in `Input.metrics.ts`, which `Select.metrics`
+ * re-exports under its own name.
+ *
+ * React Native has no box-shadow spread, so the ring is a scale on the bar.
+ */
+export declare function FieldPulse({ color, radius, testID, }: {
+    color: string;
+    radius: number;
+    testID: string;
+}): React.JSX.Element;
+//# sourceMappingURL=field-pulse.native.d.ts.map

package/dist/types-native/components/form/field-pulse.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-pulse.native.d.ts","sourceRoot":"","sources":["../../../../src/components/form/field-pulse.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0CpB"}

package/dist/types-native/icons/paths.generated.d.ts

@@ -3,11 +3,14 @@ export declare const ICON_PATHS: {
     readonly Add: readonly ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"];
     readonly ArrowBack: readonly ["M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"];
     readonly ArrowDownward: readonly ["m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"];
+    readonly ArrowDropDown: readonly ["m7 10 5 5 5-5z"];
     readonly ArrowForward: readonly ["m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"];
     readonly ArrowUpward: readonly ["m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"];
     readonly BrokenImage: readonly ["M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2m-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4z"];
     readonly Cancel: readonly ["M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"];
     readonly Check: readonly ["M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"];
+    readonly CheckBox: readonly ["M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2m-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"];
+    readonly CheckBoxOutlineBlank: readonly ["M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"];
     readonly CheckCircle: readonly ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"];
     readonly ChevronLeft: readonly ["M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"];
     readonly ChevronRight: readonly ["M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"];
@@ -20,6 +23,7 @@ export declare const ICON_PATHS: {
     readonly ExpandLess: readonly ["m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"];
     readonly ExpandMore: readonly ["M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"];
     readonly FilterList: readonly ["M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"];
+    readonly IndeterminateCheckBox: readonly ["M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-2 10H7v-2h10z"];
     readonly Info: readonly ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"];
     readonly InfoOutlined: readonly ["M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"];
     readonly KeyboardArrowDown: readonly ["M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"];

package/dist/types-native/icons/paths.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.generated.d.ts","sourceRoot":"","sources":["../../../src/icons/paths.generated.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C,eAAO,MAAM,UAAU,EAA8B,SAAS,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"paths.generated.d.ts","sourceRoot":"","sources":["../../../src/icons/paths.generated.ts"],"names":[],"mappings":"AAOA,mDAAmD;AACnD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Cb,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C,eAAO,MAAM,UAAU,EAA8B,SAAS,QAAQ,EAAE,CAAC"}

package/dist/types-native/platform/aria.d.ts

@@ -1,5 +1,5 @@
 /**
- * ARIA ATTRIBUTES REACT NATIVE DOES NOT DECLARE.
+ * WEB ATTRIBUTES REACT NATIVE DOES NOT DECLARE.
  *
  * React Native's `ViewProps` (0.83) type a dozen `aria-*` props and stop:
  * `aria-level`, `aria-atomic` and `aria-describedby` are not among them.
@@ -13,6 +13,20 @@ export interface WebAria {
     'aria-level'?: 1 | 2 | 3 | 4 | 5 | 6;
     'aria-atomic'?: 'true' | 'false';
     'aria-describedby'?: string;
+    /**
+     * A field's validity and whether it must be filled. React Native's
+     * `accessibilityState` has neither — its five flags are disabled, selected,
+     * checked, busy and expanded — so these are web-only, and a device reads the
+     * error text instead. react-native-web forwards both.
+     */
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    /**
+     * What a control pops open. React Native has `aria-expanded` and no
+     * `aria-haspopup`, so a `combobox` needs this one from here to say the thing
+     * it expands is a listbox — which is what the web's own trigger carries.
+     */
+    'aria-haspopup'?: 'listbox' | 'menu' | 'dialog' | 'true';
 }
 /**
  * `attrs` as something JSX can spread onto a react-native element without
@@ -26,4 +40,48 @@ export interface WebAria {
  * Neither name exists on a device, so nothing is lost there.
  */
 export declare function webAria(attrs: WebAria): object;
+/**
+ * `disabled` for a react-native-web form control.
+ *
+ * React Native's `TextInput` has `editable` and no `disabled`, because a
+ * device has no disabled state to speak of — an uneditable field simply does
+ * not take the keyboard. The DOM does: only a real `disabled` attribute takes
+ * an `<input>` out of the tab order, and it is what `toBeDisabled()` reads. So
+ * a native field spreads this ALONGSIDE `editable={false}` and
+ * `aria-disabled`: react-native-web puts the attribute on the input, and a
+ * device ignores a prop it does not know.
+ */
+export declare function webDisabled(disabled: boolean): object;
+/**
+ * `onClick` for a react-native-web element whose React Native twin has no
+ * click of its own.
+ *
+ * react-native-web's `TextInput` forwards `onClick` to the DOM input and drops
+ * `onPressIn`; a device does the opposite. A field that must answer a press on
+ * both renderers spreads this ALONGSIDE `onPressIn`, and exactly one of the two
+ * fires on each side — never both.
+ */
+export declare function webClick<E>(handler: ((event: E) => void) | undefined): object;
+/**
+ * A `role` React Native's own union does not carry.
+ *
+ * `Role` (0.83) stops at `list` and `menu`: `listbox`, the role a dropdown's
+ * option list owes a screen reader, is not in it. react-native-web forwards
+ * whatever string it is given, and a device ignores a role it does not know —
+ * the same trade `webAria` makes for the attributes below it.
+ */
+export declare function webRole(role: string): object;
+/** The half of a DOM keyboard event a component needs, without the DOM lib. */
+export interface WebKeyEvent {
+    key: string;
+}
+/**
+ * `onKeyDown` for a react-native-web element.
+ *
+ * React Native has no key events on a `View` — a phone has no keyboard to
+ * press Escape on — so nothing here is typed by react-native and nothing here
+ * fires on a device. react-native-web forwards it to the DOM, which is what
+ * lets a native dropdown still answer Escape and the arrow keys in a browser.
+ */
+export declare function webKeyDown(handler: (event: WebKeyEvent) => void): object;
 //# sourceMappingURL=aria.d.ts.map

package/dist/types-native/platform/aria.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/platform/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,OAAO;IACtB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAG9C"}
+{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/platform/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,OAAO;IACtB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC1D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAG9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAErD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,MAAM,CAE7E;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,MAAM,CAExE"}

package/dist/types-native/platform/test-id.d.ts

@@ -14,6 +14,16 @@ export interface TestIdProps {
 }
 /** The id the caller asked for under any of the three names, else `fallback`. */
 export declare function resolveTestId(props: TestIdProps, fallback?: string): string | undefined;
+/**
+ * The id under whichever of the three spellings the caller used, together with
+ * the props stripped of all three — so a web component can put `data-testid`
+ * where the DOM wants it without React seeing `testID` or `dataTestId` and
+ * warning that it does not recognise them.
+ */
+export declare function splitTestId<T extends TestIdProps>(props: T, fallback?: string): {
+    testId: string | undefined;
+    rest: Omit<T, keyof TestIdProps>;
+};
 /** `${id}-${suffix}` for a sub-element, or `${fallback}-${suffix}` when unnamed. */
 export declare function childTestId(props: TestIdProps, suffix: string, fallback: string): string;
 /** `props` without any of the three spellings, for spreading onto a native element. */

package/dist/types-native/platform/test-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-id.d.ts","sourceRoot":"","sources":["../../../src/platform/test-id.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEvF;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CACzB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,MAAM,CAER;AAED,uFAAuF;AACvF,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,WAAW,CAAC,CAG9F"}
+{"version":3,"file":"test-id.d.ts","sourceRoot":"","sources":["../../../src/platform/test-id.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAEvF;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAC/C,KAAK,EAAE,CAAC,EACR,QAAQ,CAAC,EAAE,MAAM,GAChB;IAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,WAAW,CAAC,CAAA;CAAE,CAElE;AAED,oFAAoF;AACpF,wBAAgB,WAAW,CACzB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,MAAM,CAER;AAED,uFAAuF;AACvF,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,WAAW,CAAC,CAG9F"}

package/dist/types-native/tokens/field-edge.core.d.ts

@@ -0,0 +1,27 @@
+/**
+ * THE FIELD EDGE, WITH NO RENDERER BEHIND IT.
+ *
+ * The argument for why an outlined control cannot draw its resting boundary
+ * from `alpha(theme.palette.divider, 0.23)` is in `./field-edge.ts`, next to
+ * the MUI-typed `fieldEdge` the web components call. This file is the WALK
+ * itself, over two colour strings, so the native renderer can run it too:
+ * `Input.native.tsx` and `Select.native.tsx` have no MUI `Theme` to pass and no
+ * `@mui/material/styles` to import, and a second copy of the walk beside them
+ * is a second answer to "where is this field's border" waiting to drift.
+ *
+ * `./color` is a faithful port of MUI's colour manipulator (asserted equal to
+ * it in `./__tests__/color.test.ts`), so the string this returns is the string
+ * the web has always emitted.
+ */
+/**
+ * WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
+ * behind it. See `./field-edge.ts` for why 3:1 and why it is a floor.
+ */
+export declare const MIN_UI_CONTRAST = 3;
+/**
+ * The resting boundary a control draws on `surface`, from the theme's own
+ * `divider` as the seed: the seed itself when it already clears
+ * {@link MIN_UI_CONTRAST}, otherwise the nearest tone of it that does.
+ */
+export declare function resolveFieldEdge(divider: string, surface: string): string;
+//# sourceMappingURL=field-edge.core.d.ts.map

package/dist/types-native/tokens/field-edge.core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-edge.core.d.ts","sourceRoot":"","sources":["../../../src/tokens/field-edge.core.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;GAcG;AAEH;;;GAGG;AACH,eAAO,MAAM,eAAe,IAAI,CAAC;AAiCjC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAkBzE"}

package/dist/types-native/utils/withDefaults.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Fills in the defaults for props the caller left `undefined`.
+ *
+ * A table plus one loop, rather than a `= default` per destructured prop. Each
+ * of those defaults is a branch, and a component with fifteen of them is over
+ * the cyclomatic bar before it renders anything.
+ *
+ * Only `undefined` is replaced, so an explicit `prop={undefined}` still falls
+ * back to the default exactly as a destructuring default would, while an
+ * explicit `null`, `0`, `''` or `false` is preserved as the caller's choice.
+ */
+export declare function withDefaults<T extends object>(props: T, defaults: Partial<T>): T;
+//# sourceMappingURL=withDefaults.d.ts.map

package/dist/types-native/utils/withDefaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withDefaults.d.ts","sourceRoot":"","sources":["../../../src/utils/withDefaults.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAQhF"}

package/dist/typography/Heading.js

@@ -1,10 +1,10 @@
 import "../chunk-6GP2DOOO.js";
 import {
   Heading
-} from "../chunk-Z7JNCB5Q.js";
+} from "../chunk-426FTCMF.js";
 import "../chunk-PWR7K5OP.js";
 import "../chunk-3N6EK6K5.js";
-import "../chunk-QLWBQQW7.js";
+import "../chunk-6F5IKY32.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-NQN5Z36J.js";
 import "../chunk-AG66JBNH.js";

package/dist/typography/Paragraph.js

@@ -1,8 +1,8 @@
 import {
   Paragraph
-} from "../chunk-V3SBJ3PB.js";
+} from "../chunk-Z5ABJLTM.js";
 import "../chunk-QKLGH3RZ.js";
-import "../chunk-QLWBQQW7.js";
+import "../chunk-6F5IKY32.js";
 import "../chunk-NQN5Z36J.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-6JAIFIPW.js";

package/dist/typography/Text.js

@@ -1,9 +1,9 @@
 import "../chunk-VUHLNYAE.js";
 import {
   Text
-} from "../chunk-2PCOC3PT.js";
+} from "../chunk-26Z7QWID.js";
 import "../chunk-V3PLFYKO.js";
-import "../chunk-QLWBQQW7.js";
+import "../chunk-6F5IKY32.js";
 import "../chunk-NQN5Z36J.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-6JAIFIPW.js";

package/dist/user-avatar.js

@@ -1,12 +1,12 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-7JWXLDRH.js";
+} from "./chunk-SAHQLXNN.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-7BYFC2MR.js";
-import "./chunk-3ZVUNSFF.js";
+import "./chunk-I7HYGIEJ.js";
 import "./chunk-4SQFO4GW.js";
 import "./chunk-FAITHWIO.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-XRMZMBE3.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
@@ -14,13 +14,13 @@ import "./chunk-D2IASECY.js";
 import "./chunk-VMF3UXM4.js";
 import "./chunk-RI5JZLZL.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-24BUCMQA.js";
+import "./chunk-BNNSO4MC.js";
+import "./chunk-TAMIZE4Q.js";
 import "./chunk-JT6TERQL.js";
 import "./chunk-ITGG5OKP.js";
-import "./chunk-TAMIZE4Q.js";
-import "./chunk-2PCOC3PT.js";
+import "./chunk-26Z7QWID.js";
 import "./chunk-V3PLFYKO.js";
-import "./chunk-QLWBQQW7.js";
+import "./chunk-6F5IKY32.js";
 import "./chunk-NQN5Z36J.js";
 import "./chunk-AG66JBNH.js";
 import "./chunk-6JAIFIPW.js";

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-GSFNH4C5.js";
-import "../chunk-ATSHKSSD.js";
+} from "../chunk-WROCSDVL.js";
 import "../chunk-QF6LTUCE.js";
+import "../chunk-ATSHKSSD.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InfiniteScroll

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.20.0",
+  "version": "6.21.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -345,6 +345,10 @@
       "default": "./dist/form/CepField.js"
     },
     "./form/Checkbox": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/Checkbox/index.native.d.ts",
+        "default": "./dist/native/form/Checkbox.js"
+      },
       "types": "./dist/types/components/form/Checkbox/index.d.ts",
       "default": "./dist/form/Checkbox.js"
     },
@@ -381,6 +385,10 @@
       "default": "./dist/form/total-form.js"
     },
     "./form/Input": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/Input/index.native.d.ts",
+        "default": "./dist/native/form/Input.js"
+      },
       "types": "./dist/types/components/form/Input/index.d.ts",
       "default": "./dist/form/Input.js"
     },
@@ -417,6 +425,10 @@
       "default": "./dist/form/SearchPalette.js"
     },
     "./form/Select": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/Select/index.native.d.ts",
+        "default": "./dist/native/form/Select.js"
+      },
       "types": "./dist/types/components/form/Select/index.d.ts",
       "default": "./dist/form/Select.js"
     },
@@ -425,6 +437,10 @@
       "default": "./dist/form/Slider.js"
     },
     "./form/Switch": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/Switch/index.native.d.ts",
+        "default": "./dist/native/form/Switch.js"
+      },
       "types": "./dist/types/components/form/Switch/index.d.ts",
       "default": "./dist/form/Switch.js"
     },

package/src/components/form/Checkbox/Checkbox.base.ts

@@ -0,0 +1,36 @@
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * No MUI and no react-native here: this file is in BOTH declaration outputs,
+ * and a native consumer has no `@mui/material` to resolve a type import
+ * against. See `Button.base.ts`.
+ */
+export type CheckboxVariant = 'default' | 'rounded' | 'toggle';
+
+/**
+ * The contract both renderers honour.
+ *
+ * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the change
+ * as a DOM `ChangeEvent` and the native side synthesises the
+ * `{ target: { checked } }` shape those handlers already read. Neither is
+ * `size`, which this component takes in MUI's own words (`small | medium`)
+ * rather than the house scale — narrowing it would reject the callers it has.
+ */
+export interface CheckboxBaseProps {
+  variant?: CheckboxVariant;
+  label?: string;
+  /** Paints the label and the helper text in the danger hue. */
+  error?: boolean;
+  helperText?: string;
+  /** Fades the box, makes it inert and turns a spinner over it. */
+  loading?: boolean;
+  /** The touch ripple. `false` removes it. */
+  ripple?: boolean;
+  glow?: boolean;
+  pulse?: boolean;
+  /** The third state: neither checked nor unchecked, drawn as a dash. */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  testID?: string;
+  dataTestId?: string;
+}

package/src/components/form/Checkbox/Checkbox.helpers.ts

@@ -1,27 +1,27 @@
-import type { CheckboxProps } from './Checkbox.types';
+import type { CheckboxBaseProps } from './Checkbox.base';
+import { withDefaults } from '../../../utils/withDefaults';
 
 type CheckboxDefaultedKeys = 'variant' | 'ripple' | 'glow' | 'pulse';
 
-type ResolvedCheckboxProps = CheckboxProps &
-  Required<Pick<CheckboxProps, CheckboxDefaultedKeys>>;
+/**
+ * Generic over the renderer's own props, as `resolveButtonProps` is: the web
+ * and the native `Checkbox` pass different handler types through, and both come
+ * back out untouched.
+ */
+export type ResolvedCheckboxProps<P extends CheckboxBaseProps = CheckboxBaseProps> = P &
+  Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>>;
 
-const CHECKBOX_DEFAULTS: Pick<CheckboxProps, CheckboxDefaultedKeys> = {
+const CHECKBOX_DEFAULTS: Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>> = {
   variant: 'default',
   ripple: true,
   glow: false,
   pulse: false,
 };
 
-// Strips explicitly-undefined props before the merge, so `ripple={undefined}` still
-// falls back to the default exactly as a destructuring default would.
-const definedProps = (props: CheckboxProps): Partial<CheckboxProps> =>
-  Object.fromEntries(
-    Object.entries(props).filter(([, value]) => value !== undefined),
-  ) as Partial<CheckboxProps>;
-
-export const resolveCheckboxProps = (props: CheckboxProps): ResolvedCheckboxProps =>
-  ({ ...CHECKBOX_DEFAULTS, ...definedProps(props) }) as ResolvedCheckboxProps;
+export const resolveCheckboxProps = <P extends CheckboxBaseProps>(props: P): ResolvedCheckboxProps<P> =>
+  withDefaults(props, CHECKBOX_DEFAULTS as Partial<P>) as ResolvedCheckboxProps<P>;
 
+/** `${dataTestId}-${suffix}`, or `checkbox-${suffix}` when the caller named nothing. */
 export const makeTestId =
   (dataTestId?: string) =>
   (suffix: string): string =>

package/src/components/form/Checkbox/Checkbox.metrics.ts

@@ -0,0 +1,73 @@
+import type { CheckboxVariant } from './Checkbox.base';
+
+/**
+ * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.
+ *
+ * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and
+ * `Checkbox.native.tsx` (React Native) read this one table. As with the other
+ * fields, some of it is what the web writes itself — the two variants' corner
+ * treatment, the glow and pulse keyframes, the helper text's inset — and some
+ * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s
+ * three sizes, and the ink a box is drawn in.
+ */
+
+/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */
+export const CHECKBOX_PADDING = 9;
+
+/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */
+export const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;
+export type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;
+
+export const glyphSize = (size: CheckboxSize | undefined): number =>
+  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;
+
+/**
+ * The three glyphs MUI draws, by state.
+ *
+ * `@12-apps/ui/icons` generates their paths from the same
+ * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the
+ * native box is the web box rather than a hand-drawn square.
+ */
+export const CHECKBOX_GLYPH = {
+  checked: 'CheckBox',
+  unchecked: 'CheckBoxOutlineBlank',
+  indeterminate: 'IndeterminateCheckBox',
+} as const;
+
+/**
+ * The corner each variant gives the glyph's box.
+ *
+ * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied
+ * to the SVG's own box on the web, where they show only through what the box
+ * clips. Native gives them the same radius and the same scale.
+ */
+export const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {
+  default: {},
+  rounded: { radius: '50%' },
+  toggle: { radius: 12, scale: 1.2 },
+};
+
+/** The wash a hovered box takes, and the 0.3s every state change runs over. */
+export const CHECKBOX_HOVER_ALPHA = 0.1;
+export const CHECKBOX_TRANSITION_MS = 300;
+
+/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */
+export const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;
+
+/**
+ * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's
+ * primary — the web writes the rgba out by hand — so both renderers do.
+ */
+export const CHECKBOX_EFFECT_INK = { r: 25, g: 118, b: 210 } as const;
+export const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;
+export const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;
+
+/** MUI's default blue at an alpha, as the web's keyframes spell it. */
+export const effectInk = (alphaValue: number): string =>
+  `rgba(${CHECKBOX_EFFECT_INK.r}, ${CHECKBOX_EFFECT_INK.g}, ${CHECKBOX_EFFECT_INK.b}, ${alphaValue})`;
+
+/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */
+export const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;
+
+/** `FormHelperText`: four spacing units in, half a unit down. */
+export const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;