@12-apps/ui 6.20.0 → 6.22.0

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/pulse-ring.native.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * THE `::after` PULSE, AS A REACT NATIVE VIEW.
+ *
+ * `Card` and `Dialog` pulse the same way on the web: an `::after` that fills
+ * the element, carries `box-shadow: 0 0 0 <spread>px currentColor` and animates
+ * that spread out and back while fading, once every two seconds, from BEHIND
+ * the element (`z-index: -1`). Those two read this; `Button.native.tsx` still
+ * carries its own `Pulse`, a filled overlay that scales and fades rather than a
+ * ring, and folding it onto this is a `form/Button` change.
+ *
+ * React Native cannot paint a child behind its parent's own background, so a
+ * filled overlay would wash the surface instead of haloing it. This draws a
+ * HOLLOW ring instead: the view is inset by the current spread and carries a
+ * border of exactly that width, so the band it paints is precisely the region
+ * from the surface's edge to `spread` outside it — the same band the box-shadow
+ * spread covers, and nothing over the surface itself.
+ *
+ * Layout props cannot run on the native driver, so this animates on the JS one.
+ */
+export interface PulseRingProps {
+    color: string;
+    /** The surface's own corner radius, which the ring follows. */
+    radius: number | string;
+    /** How far out of the edge the ring grows, in px. */
+    spread: number;
+    durationMs: number;
+    /** The fraction of the cycle the ring is still visible for. */
+    fadeAt: number;
+    /** The ring's opacity at the start of a cycle. */
+    opacity: number;
+    testID: string;
+}
+export declare function PulseRing({ color, radius, spread, durationMs, fadeAt, opacity, testID, }: PulseRingProps): React.JSX.Element;
+//# sourceMappingURL=pulse-ring.native.d.ts.map

package/dist/types-native/platform/pulse-ring.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pulse-ring.native.d.ts","sourceRoot":"","sources":["../../../src/platform/pulse-ring.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,MAAM,EACN,UAAU,EACV,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqCpC"}

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

@@ -14,8 +14,32 @@ 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. */
 export declare function withoutTestIdProps<P extends TestIdProps>(props: P): Omit<P, keyof TestIdProps>;
+/**
+ * A SLOT's own test id, where a raw id means "this element" and `dataTestId`
+ * means "the surface I belong to".
+ *
+ * `Dialog` names its parts by derivation — `d` gives `d-title`, `d-content`,
+ * `d-actions` — and a slot receives the DIALOG's id in `dataTestId` to derive
+ * from. A raw `data-testid` (or React Native's `testID`) is something else: it
+ * is the id the caller wants ON THIS ELEMENT, which is how the shared stories
+ * address a `DialogContent`, so it is taken verbatim and no suffix is added.
+ *
+ * Both renderers read this one function, which is the only way the web and the
+ * native slot can agree about what `<DialogContent data-testid="x">` is called.
+ */
+export declare function slotTestId(props: TestIdProps, suffix: string, fallback: string): string;
 //# sourceMappingURL=test-id.d.ts.map

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;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEvF"}

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/tokens/mui-type.d.ts

@@ -14,7 +14,7 @@ import type { UiTheme } from './theme';
  * halves and not these; each component that reads this records that as a
  * known gap in its `NATIVE-NOTES.md`.
  */
-export type MuiTypeVariantName = 'h6' | 'body1' | 'body2' | 'caption';
+export type MuiTypeVariantName = 'h5' | 'h6' | 'body1' | 'body2' | 'caption';
 export interface MuiTypeVariant {
     fontSize: number;
     lineHeight: number;

package/dist/types-native/tokens/mui-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mui-type.d.ts","sourceRoot":"","sources":["../../../src/tokens/mui-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAK/D,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,mGAAmG;AACnG,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAClC,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,GAAE,MAAmC,GAC5C,YAAY,CASd"}
+{"version":3,"file":"mui-type.d.ts","sourceRoot":"","sources":["../../../src/tokens/mui-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7E,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAM/D,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,mGAAmG;AACnG,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC;IAC9C,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAClC,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,GAAE,MAAmC,GAC5C,YAAY,CASd"}

package/dist/types-native/tokens/shadow.d.ts

@@ -0,0 +1,40 @@
+/**
+ * ONE SHADOW, IN THE SHAPE BOTH RENDERERS READ.
+ *
+ * A drop shadow is one of the few decorations the two sides express in the same
+ * numbers and different syntax: CSS wants `0 8px 32px rgba(…)`, React Native
+ * wants `{ offsetX, offsetY, blurRadius, spreadDistance, color }` (its
+ * `BoxShadowValue`, which `boxShadow` takes an array of). So the numbers live in
+ * a component's `*.metrics.ts` as this object, native passes it straight
+ * through, and the web renders it with {@link shadowCss}.
+ *
+ * {@link shadowCss} reproduces the text the web components already wrote by
+ * hand: a bare `0` for a zero length, and no spread at all when the spread is
+ * zero. That is what makes moving a shadow into a metrics table a refactor
+ * rather than a restyle.
+ */
+export interface UiShadow {
+    offsetX: number;
+    offsetY: number;
+    blurRadius: number;
+    spreadDistance: number;
+    color: string;
+}
+/** One shadow as CSS. A zero spread is omitted, as the web has always written it. */
+export declare const shadowCss: (shadow: UiShadow) => string;
+/** Several shadows as one CSS declaration. */
+export declare const shadowListCss: (shadows: readonly UiShadow[]) => string;
+/**
+ * MUI's `palette.common`, which `UiTheme` has no slot for.
+ *
+ * Here rather than beside each caller because the neumorphic, glass and scrim
+ * arithmetic in more than one component mixes from exactly these two, and a
+ * per-component copy is a per-component chance to write `#000000`.
+ */
+export declare const BLACK = "#000";
+export declare const WHITE = "#fff";
+/** A shadow with no offset — a halo all round, which is how `glow` reads. */
+export declare const halo: (blurRadius: number, color: string) => UiShadow[];
+/** A dropped shadow straight down, which is how a lifted surface sits. */
+export declare const drop: (offsetY: number, blurRadius: number, color: string) => UiShadow[];
+//# sourceMappingURL=shadow.d.ts.map

package/dist/types-native/tokens/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../src/tokens/shadow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAKD,qFAAqF;AACrF,eAAO,MAAM,SAAS,GAAI,QAAQ,QAAQ,KAAG,MAOhC,CAAC;AAEd,8CAA8C;AAC9C,eAAO,MAAM,aAAa,GAAI,SAAS,SAAS,QAAQ,EAAE,KAAG,MAC1B,CAAC;AAEpC;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,SAAS,CAAC;AAC5B,eAAO,MAAM,KAAK,SAAS,CAAC;AAE5B,6EAA6E;AAC7E,eAAO,MAAM,IAAI,GAAI,YAAY,MAAM,EAAE,OAAO,MAAM,KAAG,QAAQ,EAEhE,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,IAAI,GAAI,SAAS,MAAM,EAAE,YAAY,MAAM,EAAE,OAAO,MAAM,KAAG,QAAQ,EAEjF,CAAC"}

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-MESRKY67.js";
 import "../chunk-PWR7K5OP.js";
 import "../chunk-3N6EK6K5.js";
-import "../chunk-QLWBQQW7.js";
+import "../chunk-TYJR4GOF.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-HFXTAEYY.js";
 import "../chunk-QKLGH3RZ.js";
-import "../chunk-QLWBQQW7.js";
+import "../chunk-TYJR4GOF.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-343TTIHD.js";
 import "../chunk-V3PLFYKO.js";
-import "../chunk-QLWBQQW7.js";
+import "../chunk-TYJR4GOF.js";
 import "../chunk-NQN5Z36J.js";
 import "../chunk-AG66JBNH.js";
 import "../chunk-6JAIFIPW.js";

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-7JWXLDRH.js";
+} from "./chunk-ZKR5B6YJ.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-7BYFC2MR.js";
 import "./chunk-3ZVUNSFF.js";
@@ -10,17 +10,19 @@ import "./chunk-FAITHWIO.js";
 import "./chunk-XRMZMBE3.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
-import "./chunk-D2IASECY.js";
-import "./chunk-VMF3UXM4.js";
-import "./chunk-RI5JZLZL.js";
+import "./chunk-AIRWM7KK.js";
+import "./chunk-BEBLRL5D.js";
+import "./chunk-6Q6T3FW5.js";
+import "./chunk-FKUYRQSP.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-24BUCMQA.js";
+import "./chunk-YTOYMJPM.js";
 import "./chunk-JT6TERQL.js";
 import "./chunk-ITGG5OKP.js";
 import "./chunk-TAMIZE4Q.js";
-import "./chunk-2PCOC3PT.js";
+import "./chunk-73BEVJCS.js";
+import "./chunk-343TTIHD.js";
 import "./chunk-V3PLFYKO.js";
-import "./chunk-QLWBQQW7.js";
+import "./chunk-TYJR4GOF.js";
 import "./chunk-NQN5Z36J.js";
 import "./chunk-AG66JBNH.js";
 import "./chunk-6JAIFIPW.js";

package/dist/utility/InstallPrompt.js

@@ -1,11 +1,11 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-5ZOJLYD2.js";
-import "../chunk-GY62N32G.js";
+} from "../chunk-JE6RZ5L6.js";
 import {
   usePwaInstall
 } from "../chunk-5GMHJ7Y5.js";
+import "../chunk-GY62N32G.js";
 import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.20.0",
+  "version": "6.22.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -293,6 +293,10 @@
       "default": "./dist/feedback/ConfirmAction.js"
     },
     "./feedback/Dialog": {
+      "react-native": {
+        "types": "./dist/types-native/components/feedback/Dialog/index.native.d.ts",
+        "default": "./dist/native/feedback/Dialog.js"
+      },
       "types": "./dist/types/components/feedback/Dialog/index.d.ts",
       "default": "./dist/feedback/Dialog.js"
     },
@@ -345,6 +349,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 +389,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 +429,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 +441,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"
     },
@@ -457,6 +477,10 @@
       "default": "./dist/layout/Box.js"
     },
     "./layout/Card": {
+      "react-native": {
+        "types": "./dist/types-native/components/layout/Card/index.native.d.ts",
+        "default": "./dist/native/layout/Card.js"
+      },
       "types": "./dist/types/components/layout/Card/index.d.ts",
       "default": "./dist/layout/Card.js"
     },

package/src/components/data-display/CardKit/NATIVE-NOTES.md

@@ -0,0 +1,48 @@
+# CardKit on React Native — NOT PORTED, and why
+
+`data-display/CardKit` carries no `react-native` condition and is absent from
+`entries.native.json` on purpose. Under Metro the subpath therefore resolves to
+the web file and fails at import on `@mui/material`, loudly — which is the
+behaviour `NATIVE.md` asks an unported subpath for. This file is here so the
+absence is a decision on the record rather than an omission.
+
+It is written down because CardKit was in the same batch as `layout/Card` and
+`feedback/Dialog`, and both of those shipped.
+
+## What blocks it
+
+Four of the kit's five value exports are renderer-bound, and each one is bound
+to a component that has no native half yet:
+
+| export | needs | state |
+|---|---|---|
+| `CardKebab` | `navigation/DropdownMenu` (MUI `Menu`; `DropdownMenu.types.ts` imports `MenuProps`) | not ported |
+| `CardActionsProvider` / `useCardActions` | `@mui/material/Snackbar` | no ported equivalent (`feedback/Toast`, `feedback/Sonner` are web-only too) |
+| `useRowConfirm` / `useRemoveConfirm` | `feedback/ConfirmAction` → `data-display/AlertDialog` | neither ported |
+| `BodyHeading`, `DetailColumns`, `Fact`, `Ledger`, `TagList` | `@12-apps/ui/mui/Box` | raw MUI, web-only by design (see NATIVE.md's layout row) |
+
+Only `rowActionsToMenuItems` is already platform-neutral — a pure array
+transform that imports no renderer.
+
+The TYPES are entangled the same way: `CardKit.types.ts` builds `KindCardProps`
+and `KindListCardProps` on `CardAspectRatio` and `DataViewCardSelection` from
+`../DataViews`, whose `data-views-types.ts` imports `DropdownMenuItem` from
+`navigation/DropdownMenu`, which imports `MenuProps` from `@mui/material/Menu`.
+A native entry would emit that chain into `dist/types-native`, where
+`pnpm native:check` refuses any `@mui/*` import — a native consumer has nothing
+to resolve one against.
+
+## Why not a partial port
+
+Porting only the five layout parts and leaving the kebab, the provider and the
+two confirm hooks out would put a `react-native` condition on the subpath while
+four of its names resolved to `undefined` under Metro. That trades a loud
+module-level failure naming `@mui/material` for a render-time "Element type is
+invalid" that names nothing — the exact swap `NATIVE.md` argues against.
+
+## What porting it actually costs
+
+`navigation/DropdownMenu`, `data-display/AlertDialog`, `feedback/ConfirmAction`
+and a native snackbar, ported first — three categories, none of them in this
+batch, and none of them claimed by a parallel one. CardKit follows them; it is
+not the unit of work.

package/src/components/feedback/Dialog/Dialog.base.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+
+import type { SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE CONTRACT BOTH `Dialog` RENDERERS HONOUR — and nothing else.
+ *
+ * No MUI and no react-native here, on purpose: this file ships in BOTH
+ * declaration outputs, and a native consumer has no `@mui/material` to resolve
+ * a type import against.
+ *
+ * `onClose` IS here, unusually for a handler, because it takes no event on
+ * either side: MUI's own `onClose` reason argument is dropped by `Dialog.tsx`
+ * before it reaches the caller, so both renderers pass a bare `() => void`.
+ */
+export type DialogVariant = 'default' | 'glass' | 'fullscreen' | 'drawer';
+export type DialogSize = SizeValue;
+export type DialogBorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogActionsAlignment = 'left' | 'center' | 'right' | 'space-between';
+
+export interface DialogBaseProps {
+  open: boolean;
+  children: ReactNode;
+  variant?: DialogVariant;
+  size?: DialogSize;
+  title?: ReactNode;
+  description?: string;
+  showCloseButton?: boolean;
+  /** Ignored by BOTH renderers today; see `Dialog.metrics.ts`. */
+  backdrop?: boolean;
+  /** Refuses to close on a backdrop press or Escape. */
+  persistent?: boolean;
+  glass?: boolean;
+  gradient?: boolean;
+  glow?: boolean;
+  pulse?: boolean;
+  borderRadius?: DialogBorderRadius;
+  onClose?: () => void;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface DialogHeaderBaseProps {
+  /** Custom header content; when given it replaces the title/subtitle layout. */
+  children?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface DialogContentBaseProps {
+  children: ReactNode;
+  dividers?: boolean;
+  dense?: boolean;
+  dataTestId?: string;
+  testID?: string;
+}
+
+export interface DialogActionsBaseProps {
+  children: ReactNode;
+  alignment?: DialogActionsAlignment;
+  /** Between the actions, in spacing units. */
+  spacing?: number;
+  dataTestId?: string;
+  testID?: string;
+}

package/src/components/feedback/Dialog/Dialog.helpers.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import type { DialogBaseProps } from './Dialog.base';
+
+/**
+ * The defaults, and the slot detection, BOTH renderers run.
+ *
+ * Neither imports a renderer: the defaults are plain values and the slot check
+ * is told which component identities count, because `DialogContent` on the web
+ * and `DialogContent` on React Native are different functions answering to the
+ * same name.
+ */
+
+type DialogDefaultedKeys =
+  | 'variant'
+  | 'size'
+  | 'showCloseButton'
+  | 'backdrop'
+  | 'persistent'
+  | 'glass'
+  | 'gradient'
+  | 'glow'
+  | 'pulse'
+  | 'borderRadius';
+
+export const DIALOG_DEFAULTS: Required<Pick<DialogBaseProps, DialogDefaultedKeys>> = {
+  variant: 'default',
+  size: 'md',
+  showCloseButton: true,
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: 'lg',
+};
+
+/** The renderer's own props with every defaulted field guaranteed present. */
+export type DialogPropsWithDefaults<P extends DialogBaseProps> = P &
+  Required<Pick<DialogBaseProps, DialogDefaultedKeys>>;
+
+/**
+ * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a
+ * missing/`undefined` prop falls back (a loop, so the component's cyclomatic
+ * complexity doesn't pay one branch per defaulted prop).
+ */
+export function withDialogDefaults<P extends DialogBaseProps>(props: P): DialogPropsWithDefaults<P> {
+  const merged = { ...props } as Record<string, unknown>;
+  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
+    if (merged[key] === undefined) merged[key] = value;
+  }
+  return merged as unknown as DialogPropsWithDefaults<P>;
+}
+
+/**
+ * Does this hand us a spacing slot? Fragments are transparent: `<>` is a way of
+ * passing several children, not a child that owns them, and a consumer who
+ * groups a `DialogContent` and a `DialogActions` in one has still passed both.
+ *
+ * Only the slots themselves count, and only at the top. A `DialogContent`
+ * genuinely nested inside a `<div>` is that div's content, and the dialog
+ * padding the div is right.
+ *
+ * `slots` is passed in rather than closed over so the two renderers can hand it
+ * their own `DialogContent` / `DialogActions`.
+ */
+export function hasSpacingSlot(children: React.ReactNode, slots: readonly unknown[]): boolean {
+  return React.Children.toArray(children).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    if (slots.includes(child.type)) return true;
+    if (child.type !== React.Fragment) return false;
+    return hasSpacingSlot((child.props as { children?: React.ReactNode }).children, slots);
+  });
+}