@12-apps/ui 6.21.0 → 6.23.0

package/dist/types-native/components/layout/Card/CardParts.native.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { type DimensionValue, type TextStyle } from 'react-native';
+import type { CardActionsProps, CardContentProps, CardHeaderProps, CardMediaProps } from './Card.types.native';
+import type { UiTheme } from '../../../tokens/theme';
+/**
+ * THE FOUR SLOTS A CARD IS BUILT OUT OF, ON REACT NATIVE.
+ *
+ * Each one is a `View` carrying the padding MUI's own `CardHeader`,
+ * `CardContent`, `CardActions` and `CardMedia` declare in px — the web half
+ * overrides only `padding` and `justify-content`, so the rest of the numbers
+ * come from MUI and are restated in `Card.metrics.ts` rather than re-invented.
+ */
+/**
+ * THE INK A CARD PUBLISHES TO ITS SLOTS.
+ *
+ * `Card.styles.ts` puts `color: primary.contrastText` on the gradient card
+ * ITSELF and lets CSS inheritance carry it into the header and the body. React
+ * Native inherits nothing across views, so the card publishes its ink here and
+ * every slot reads it — which is the difference between a legible gradient card
+ * and near-black text on indigo.
+ *
+ * `null` is "no card above me": a slot rendered on its own falls back to the
+ * body ink, exactly as it would on the web.
+ */
+export declare const CardInkContext: React.Context<string | null>;
+/** MUI's header title: `h5`, or `body2` when an avatar shares the row. */
+export declare const cardTitleStyle: (theme: UiTheme, hasAvatar: boolean, ink?: string | null) => TextStyle;
+/**
+ * MUI's header subheader: `body1` (or `body2` beside an avatar), in the muted
+ * ink — which does NOT follow the card's own ink, because MUI's `CardHeader`
+ * pins the subheader to `textSecondary` explicitly rather than inheriting.
+ */
+export declare const cardSubtitleStyle: (theme: UiTheme, hasAvatar: boolean) => TextStyle;
+export declare function CardHeader({ title, subtitle, action, avatar, children, ...others }: CardHeaderProps): React.JSX.Element;
+export declare namespace CardHeader {
+    var displayName: string;
+}
+export declare function CardContent({ children, dense, ...others }: CardContentProps): React.JSX.Element;
+export declare namespace CardContent {
+    var displayName: string;
+}
+export declare function CardActions({ children, disableSpacing, alignment, ...others }: CardActionsProps): React.JSX.Element;
+export declare namespace CardActions {
+    var displayName: string;
+}
+/**
+ * `height` accepts the web's spellings: a number, a numeric string (`"200"`, as
+ * an `<img height>` takes) or a percentage.
+ */
+export declare function mediaHeight(height: number | string): DimensionValue;
+export declare function CardMedia({ image, title, height, children, ...others }: CardMediaProps): React.JSX.Element;
+export declare namespace CardMedia {
+    var displayName: string;
+}
+//# sourceMappingURL=CardParts.native.d.ts.map

package/dist/types-native/components/layout/Card/CardParts.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardParts.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Card/CardParts.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAEV,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACf,MAAM,qBAAqB,CAAC;AAK7B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD;;;;;;;GAOG;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,8BAA2C,CAAC;AAQvE,0EAA0E;AAC1E,eAAO,MAAM,cAAc,GACzB,OAAO,OAAO,EACd,WAAW,OAAO,EAClB,MAAK,MAAM,GAAG,IAAW,KACxB,SAGD,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,OAAO,EAAE,WAAW,OAAO,KAAG,SAGrE,CAAC;AAEH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwCrC;yBA/Ce,UAAU;;;AAmD1B,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAa,EACb,GAAG,MAAM,EACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CActC;yBAlBe,WAAW;;;AA6B3B,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,cAAsB,EACtB,SAAkB,EAClB,GAAG,MAAM,EACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmBtC;yBAxBe,WAAW;;;AA4B3B;;;GAGG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,cAAc,CAInE;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAA0B,EAC1B,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqBpC;yBA3Be,SAAS"}

package/dist/types-native/components/layout/Card/index.native.d.ts

@@ -0,0 +1,4 @@
+export { Card } from './Card.native';
+export { CardActions, CardContent, CardHeader, CardMedia } from './CardParts.native';
+export type { CardActionsAlignment, CardActionsBaseProps, CardActionsProps, CardBaseProps, CardBorderRadius, CardContentBaseProps, CardContentProps, CardEntranceAnimation, CardHeaderBaseProps, CardHeaderProps, CardMediaBaseProps, CardMediaProps, CardProps, CardVariant, } from './Card.types.native';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/components/layout/Card/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Card/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrF,YAAY,EACV,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,WAAW,GACZ,MAAM,qBAAqB,CAAC"}

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

@@ -28,4 +28,18 @@ export declare function splitTestId<T extends TestIdProps>(props: T, fallback?:
 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;;;;;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"}
+{"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/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/typography/Heading.js

@@ -1,10 +1,10 @@
 import "../chunk-6GP2DOOO.js";
 import {
   Heading
-} from "../chunk-426FTCMF.js";
+} from "../chunk-MESRKY67.js";
 import "../chunk-PWR7K5OP.js";
 import "../chunk-3N6EK6K5.js";
-import "../chunk-6F5IKY32.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-Z5ABJLTM.js";
+} from "../chunk-HFXTAEYY.js";
 import "../chunk-QKLGH3RZ.js";
-import "../chunk-6F5IKY32.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-26Z7QWID.js";
+} from "../chunk-343TTIHD.js";
 import "../chunk-V3PLFYKO.js";
-import "../chunk-6F5IKY32.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-SAHQLXNN.js";
+} from "./chunk-4LRFGB3K.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-I7HYGIEJ.js";
 import "./chunk-4SQFO4GW.js";
@@ -10,17 +10,19 @@ import "./chunk-3ZVUNSFF.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-BNNSO4MC.js";
-import "./chunk-TAMIZE4Q.js";
+import "./chunk-YTOYMJPM.js";
 import "./chunk-JT6TERQL.js";
 import "./chunk-ITGG5OKP.js";
-import "./chunk-26Z7QWID.js";
+import "./chunk-TAMIZE4Q.js";
+import "./chunk-73BEVJCS.js";
+import "./chunk-343TTIHD.js";
 import "./chunk-V3PLFYKO.js";
-import "./chunk-6F5IKY32.js";
+import "./chunk-TYJR4GOF.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-WROCSDVL.js";
-import "../chunk-QF6LTUCE.js";
+} from "../chunk-GSFNH4C5.js";
 import "../chunk-ATSHKSSD.js";
+import "../chunk-QF6LTUCE.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InfiniteScroll

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.21.0",
+  "version": "6.23.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -204,6 +204,10 @@
       "types": "./dist/types/components/data-display/EmptyState/index.d.ts",
       "default": "./dist/data-display/EmptyState.js"
     },
+    "./data-display/FleetMap": {
+      "types": "./dist/types/components/data-display/FleetMap/index.d.ts",
+      "default": "./dist/data-display/FleetMap.js"
+    },
     "./data-display/SectionOnboarding": {
       "types": "./dist/types/components/data-display/SectionOnboarding/index.d.ts",
       "default": "./dist/data-display/SectionOnboarding.js"
@@ -293,6 +297,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"
     },
@@ -473,6 +481,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/data-display/FleetMap/FleetBody.tsx

@@ -0,0 +1,96 @@
+import Box from '@mui/material/Box/index.js';
+import Stack from '@mui/material/Stack/index.js';
+import React from 'react';
+
+import { FleetCanvas } from './FleetCanvas';
+import type { FleetMapState } from './FleetMap.hooks';
+import type { FleetMapCopy } from './FleetMap.types';
+import { FleetRoster } from './FleetRoster';
+
+export interface FleetBodyProps
+  extends Pick<FleetMapState, 'ordered' | 'centre' | 'markers' | 'select' | 'onKeyDown'> {
+  copy: FleetMapCopy;
+  selectedId: string | null | undefined;
+  laggingAfterSeconds: number;
+  staleAfterSeconds: number;
+  height: string;
+  loading: boolean;
+  testId: string;
+}
+
+/**
+ * The two halves side by side: the roster that reads the fleet, and the map.
+ *
+ * A component rather than JSX inside {@link import('./FleetMap').FleetMap}
+ * because the layout is where every responsive decision lives, and keeping it
+ * here is what leaves the exported component short enough to read in one
+ * screen — which the complexity ledger enforces rather than merely suggests.
+ */
+export function FleetBody({
+  ordered,
+  centre,
+  markers,
+  select,
+  onKeyDown,
+  copy,
+  selectedId,
+  laggingAfterSeconds,
+  staleAfterSeconds,
+  height,
+  loading,
+  testId,
+}: FleetBodyProps): React.JSX.Element {
+  return (
+    <Stack
+      direction={{ xs: 'column', md: 'row' }}
+      spacing={2}
+      // `aria-busy` belongs on the halves that are actually reloading, NOT on
+      // the panel root — the live region announcing the reload is a sibling up
+      // there, and a live region inside a busy subtree is exactly what
+      // `aria-busy` tells assistive tech to hold back. Marking the root busy
+      // would have silenced the announcement for the whole of the only window
+      // in which it has anything to say. `CepField` splits them the same way.
+      aria-busy={loading || undefined}
+      data-testid={`${testId}-body`}
+      sx={{ alignItems: 'stretch', minWidth: 0 }}
+    >
+      {/* The roster reads first on a phone and sits beside the map from md up.
+          It keeps a ceiling so thirty units scroll rather than push the map off
+          the screen.
+
+          It also WIDENS with the viewport rather than staying at its md width.
+          Held at 280px, a desktop gave the map 1600px for three pins while the
+          roster stayed too narrow for its own meta line — `Lagging · 2 min ago ·
+          ±180 m` wrapped, at 1920px of all widths. The rungs below are the ones
+          the six-width pass was taken at. */}
+      <Box
+        sx={{
+          flexBasis: { md: '280px', lg: '320px', xl: '380px' },
+          flexShrink: 0,
+          minWidth: 0,
+          maxHeight: height,
+          display: 'flex',
+        }}
+      >
+        <FleetRoster
+          units={ordered}
+          copy={copy}
+          selectedId={selectedId}
+          onSelect={select}
+          laggingAfterSeconds={laggingAfterSeconds}
+          staleAfterSeconds={staleAfterSeconds}
+          loading={loading}
+          testId={testId}
+          onKeyDown={onKeyDown}
+        />
+      </Box>
+      <FleetCanvas
+        copy={copy}
+        centre={centre}
+        markers={markers}
+        height={height}
+        testId={testId}
+      />
+    </Stack>
+  );
+}

package/src/components/data-display/FleetMap/FleetCanvas.tsx

@@ -0,0 +1,80 @@
+import Box from '@mui/material/Box/index.js';
+import React from 'react';
+
+import { MapPreview } from '../MapPreview/MapPreview';
+
+import type { FleetMarker } from './FleetMap.hooks';
+import type { LatLng } from './FleetMap.helpers';
+import type { FleetMapCopy } from './FleetMap.types';
+
+export interface FleetCanvasProps {
+  copy: FleetMapCopy;
+  /** Where to point. `null` renders NOTHING — see the component's note. */
+  centre: LatLng | null;
+  markers: FleetMarker[];
+  height: string;
+  testId: string;
+}
+
+/**
+ * The map half — a NAMED LANDMARK, not an `aria-hidden` one.
+ *
+ * Its controls are focusable, and `aria-hidden` over a focusable subtree is the
+ * `aria-hidden-focus` violation: a keyboard user tabs into something a screen
+ * reader insists is not there. `role="region"` with a name is what puts it in a
+ * screen reader's landmark rotor, so it can be jumped PAST in one gesture;
+ * `role="group"` is not a landmark and would not.
+ *
+ * ## Skipping it does not silence it, and that is not ours to fix here
+ *
+ * `MapPreview` puts `aria-live="polite"` on its own root, with an English
+ * `aria-label` naming the centre coordinates and zoom. So re-centring the map —
+ * which every selection change does — announces something like "Map preview
+ * centered at -23.5505, -46.6333 with zoom level 15", in English, however
+ * thoroughly a reader has skipped the landmark. Two things follow, and neither
+ * is solved by anything this file can do:
+ *
+ *   * a live region announces from wherever the reader is, so the landmark's
+ *     skippability does not suppress it;
+ *   * that string is the one piece of user-facing text in this component that
+ *     does NOT come through `copy`.
+ *
+ * Fixing it means changing `MapPreview`, which every other consumer shares, so
+ * it is stated here rather than quietly claimed away.
+ *
+ * ## No centre, no map
+ *
+ * `mapCentre` answers `null` rather than a coordinate for an empty fleet, and
+ * that refusal has to survive the whole way down. `MapPreview` has no default
+ * centre — it resolves `center || coordinates || { lat: 0, lng: 0 }` — so
+ * forwarding `undefined` sails the map to the Gulf of Guinea and prints
+ * `Lat: 0.000000` under a default pin. That is exactly the render the helper
+ * exists to prevent, and it is reachable: a board that is `loading` with
+ * nothing yet reported skips the empty state by design and lands here.
+ */
+export function FleetCanvas({
+  copy,
+  centre,
+  markers,
+  height,
+  testId,
+}: FleetCanvasProps): React.JSX.Element | null {
+  if (!centre) return null;
+  return (
+    <Box
+      role="region"
+      aria-label={copy.mapLabel}
+      data-testid={`${testId}-canvas`}
+      sx={{ flexGrow: 1, minWidth: 0 }}
+    >
+      <MapPreview
+        copy={copy.map}
+        center={centre}
+        markers={markers}
+        height={height}
+        interactive
+        showControls
+      />
+    </Box>
+  );
+}

package/src/components/data-display/FleetMap/FleetMap.fixtures.ts

@@ -0,0 +1,70 @@
+import { EN_US_MAP_PREVIEW_COPY } from '../../../en-US.data-display';
+
+import type { FleetMapCopy, FleetUnit } from './FleetMap.types';
+
+/**
+ * The copy and the fleet every story and test story shares.
+ *
+ * A module rather than a per-story literal, so a change to the shape breaks in
+ * ONE place rather than in fourteen — and so the test stories assert against
+ * the same words the visual ones render.
+ */
+
+/** English, because stories are developer-facing. A consumer passes its own. */
+export const FLEET_COPY: FleetMapCopy = {
+  title: 'Couriers on the road',
+  emptyTitle: 'Nobody is reporting',
+  emptyDescription: 'A courier appears here once their phone sends its first position.',
+  rosterLabel: 'Couriers, freshest first',
+  mapLabel: 'Map of where the couriers are',
+  freshness: { live: 'Live', lagging: 'Lagging', stale: 'Stale' },
+  lastSeen: (seconds) =>
+    seconds < 60 ? `${seconds}s ago` : `${Math.floor(seconds / 60)} min ago`,
+  // A NON-BREAKING space between the number and its unit. The meta line is
+  // the narrowest text in the component and it wraps at spaces, so a plain
+  // space orphans the `m` onto a line of its own — measured at 900px and
+  // 1920px, where the roster column is at its tightest relative to the map.
+  // Consumers writing their own `accuracy` want the same character.
+  accuracy: (metres) => `±${Math.round(metres)}\u00A0m`,
+  map: EN_US_MAP_PREVIEW_COPY,
+};
+
+/**
+ * Three riders around São Paulo, one in each freshness state.
+ *
+ * Deliberately NOT in staleness order, and the labels deliberately do not agree
+ * with it either. `rosterOrder` sorts on staleness and breaks ties on the
+ * label, so a fixture whose two orders coincide lets the roster's ordering
+ * assertion pass against a LABEL-only sort as readily as the real one — a test
+ * reporting coverage it does not have. Here the three orders are all different:
+ * declared is [ale, ana, bruno], alphabetical is the same, and the correct
+ * answer is [ana, bruno, ale].
+ */
+export const FLEET: FleetUnit[] = [
+  {
+    id: 'ale',
+    label: 'Alessandra Nunes',
+    latitude: -23.5405,
+    longitude: -46.6133,
+    accuracyM: null,
+    staleSeconds: 640,
+  },
+  {
+    id: 'ana',
+    label: 'Ana Ribeiro',
+    latitude: -23.5505,
+    longitude: -46.6333,
+    accuracyM: 12,
+    staleSeconds: 8,
+    badge: '2 deliveries',
+  },
+  {
+    id: 'bruno',
+    label: 'Bruno Alves',
+    latitude: -23.5605,
+    longitude: -46.6533,
+    accuracyM: 180,
+    staleSeconds: 140,
+    badge: '1 delivery',
+  },
+];