@12-apps/ui 6.21.0 → 6.22.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,26 +1,28 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-SAHQLXNN.js";
+} from "./chunk-ZKR5B6YJ.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-I7HYGIEJ.js";
+import "./chunk-7BYFC2MR.js";
+import "./chunk-3ZVUNSFF.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";
-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.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"
     },
@@ -473,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);
+  });
+}