@12-apps/ui 6.17.1 → 6.19.0

package/dist/native/data-display/LoadingState.js

@@ -0,0 +1,205 @@
+import {
+  muiTypeStyle
+} from "../chunks/chunk-V4DQTC5L.js";
+import {
+  SIZE_VALUES
+} from "../chunks/chunk-5WLOVHKK.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  alpha
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/data-display/LoadingState/LoadingState.native.tsx
+import * as React from "react";
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  View
+} from "react-native";
+
+// src/components/data-display/LoadingState/LoadingState.metrics.ts
+var SPINNER_SIZES = {
+  xs: 16,
+  sm: 24,
+  md: 40,
+  lg: 56,
+  xl: 64
+};
+var MESSAGE_TYPE = {
+  xs: "body2",
+  sm: "body2",
+  md: "body1",
+  lg: "h6",
+  xl: "h6"
+};
+var SKELETON_ROW_HEIGHT = {
+  xs: 14,
+  sm: 20,
+  md: 28,
+  lg: 36,
+  xl: 44
+};
+var SPINNER_PADDING_UNITS = 6;
+var SPINNER_MIN_HEIGHT = 200;
+var SPINNER_GAP_UNITS = 2;
+var SKELETON_PADDING_UNITS = 3;
+var SKELETON_ROW_GAP_UNITS = 2;
+var SKELETON_MESSAGE_MARGIN_TOP_UNITS = 2;
+var SKELETON_RADIUS = 4;
+var SKELETON_LAST_ROW_WIDTH = "60%";
+var SKELETON_FULL_ROW_WIDTH = "100%";
+var SKELETON_TINT_ALPHA = 0.13;
+var IOS_LARGE_SPINNER_FROM = 40;
+
+// src/components/data-display/LoadingState/LoadingState.helpers.ts
+var SIZE_MAP = Object.fromEntries(
+  SIZE_VALUES.map((size) => [size, { spinner: SPINNER_SIZES[size], text: MESSAGE_TYPE[size] }])
+);
+var LOADING_STATE_DEFAULTS = {
+  variant: "spinner",
+  size: "md",
+  skeletonRows: 3
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveLoadingStateProps = (props) => ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) });
+var makeTestIds = (dataTestId) => ({
+  base: dataTestId || "loading-state",
+  optional: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0,
+  named: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`
+});
+
+// src/components/data-display/LoadingState/LoadingState.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function messageStyle(theme, size) {
+  return { ...muiTypeStyle(theme, MESSAGE_TYPE[size]), color: theme.palette.text.secondary };
+}
+var skeletonTint = (theme) => alpha(theme.palette.text.primary, SKELETON_TINT_ALPHA);
+function spinnerSize(px) {
+  if (Platform.OS !== "ios") return px;
+  return px >= IOS_LARGE_SPINNER_FROM ? "large" : "small";
+}
+function LoadingMessage({
+  message,
+  size,
+  testIds,
+  style
+}) {
+  const theme = useUiTheme();
+  if (!message) return null;
+  return /* @__PURE__ */ jsx(RNText, { style: [messageStyle(theme, size), style], testID: testIds.named("message"), children: message });
+}
+function SkeletonRows({ size, skeletonRows, testIds }) {
+  const theme = useUiTheme();
+  const tint = skeletonTint(theme);
+  return /* @__PURE__ */ jsx(View, { style: { gap: theme.spacing(SKELETON_ROW_GAP_UNITS) }, children: Array.from({ length: skeletonRows }, (_, index) => /* @__PURE__ */ jsx(
+    View,
+    {
+      "aria-hidden": true,
+      testID: testIds.optional(`skeleton-${index}`),
+      style: {
+        height: SKELETON_ROW_HEIGHT[size],
+        // The last row is short, so the block reads as a paragraph of text.
+        width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
+        borderRadius: SKELETON_RADIUS,
+        backgroundColor: tint
+      }
+    },
+    `skeleton-row-${index}`
+  )) });
+}
+function SkeletonView({ message, size, skeletonRows, testIds, style, rest }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "status",
+      "aria-busy": true,
+      "aria-label": message || "Loading content",
+      testID: testIds.base,
+      style: [styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(SkeletonRows, { size, skeletonRows, testIds }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            style: { marginTop: theme.spacing(SKELETON_MESSAGE_MARGIN_TOP_UNITS), textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+}
+function SpinnerView({ message, size, testIds, style, rest }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "status",
+      "aria-busy": true,
+      "aria-label": message || "Loading",
+      testID: testIds.base,
+      style: [
+        styles.spinner,
+        {
+          padding: theme.spacing(SPINNER_PADDING_UNITS),
+          minHeight: SPINNER_MIN_HEIGHT,
+          gap: theme.spacing(SPINNER_GAP_UNITS)
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            size: spinnerSize(SPINNER_SIZES[size]),
+            color: theme.palette.primary.main,
+            testID: testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+}
+var LoadingState = React.memo(function LoadingState2(rawProps) {
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, style, ...others } = resolved;
+  const args = {
+    message,
+    size,
+    skeletonRows,
+    style,
+    testIds: makeTestIds(resolveTestId(others)),
+    rest: withoutTestIdProps(others)
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...args }) : /* @__PURE__ */ jsx(SpinnerView, { ...args });
+});
+LoadingState.displayName = "LoadingState";
+var styles = StyleSheet.create({
+  skeleton: {
+    width: "100%"
+  },
+  spinner: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  LoadingState
+};
+//# sourceMappingURL=LoadingState.js.map

package/dist/native/data-display/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-display/LoadingState/LoadingState.native.tsx","../../../src/components/data-display/LoadingState/LoadingState.metrics.ts","../../../src/components/data-display/LoadingState/LoadingState.helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Platform,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { type LoadingStateTestIds, makeTestIds, resolveLoadingStateProps } from './LoadingState.helpers';\nimport {\n  IOS_LARGE_SPINNER_FROM,\n  MESSAGE_TYPE,\n  SKELETON_FULL_ROW_WIDTH,\n  SKELETON_LAST_ROW_WIDTH,\n  SKELETON_MESSAGE_MARGIN_TOP_UNITS,\n  SKELETON_PADDING_UNITS,\n  SKELETON_RADIUS,\n  SKELETON_ROW_GAP_UNITS,\n  SKELETON_ROW_HEIGHT,\n  SKELETON_TINT_ALPHA,\n  SPINNER_GAP_UNITS,\n  SPINNER_MIN_HEIGHT,\n  SPINNER_PADDING_UNITS,\n  SPINNER_SIZES,\n} from './LoadingState.metrics';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** The message's type: MUI's `body2`/`body1`/`h6` per size, in the muted ink, as the web's `Typography` sets it. */\nexport function messageStyle(theme: UiTheme, size: LoadingStateSize): TextStyle {\n  return { ...muiTypeStyle(theme, MESSAGE_TYPE[size]), color: theme.palette.text.secondary };\n}\n\n/** The skeleton rows' tint: the house `Skeleton`'s `medium` intensity. */\nexport const skeletonTint = (theme: UiTheme): string =>\n  alpha(theme.palette.text.primary, SKELETON_TINT_ALPHA);\n\n/** iOS has two spinner sizes; everything else takes the px. */\nfunction spinnerSize(px: number): number | 'small' | 'large' {\n  if (Platform.OS !== 'ios') return px;\n  return px >= IOS_LARGE_SPINNER_FROM ? 'large' : 'small';\n}\n\ninterface ViewArgs {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  testIds: LoadingStateTestIds;\n  style?: StyleProp<ViewStyle>;\n  rest: Omit<LoadingStateProps, keyof ViewArgs | 'variant' | 'testID' | 'dataTestId'>;\n}\n\nfunction LoadingMessage({\n  message,\n  size,\n  testIds,\n  style,\n}: Pick<ViewArgs, 'message' | 'size' | 'testIds'> & { style?: TextStyle }): React.JSX.Element | null {\n  const theme = useUiTheme();\n  if (!message) return null;\n  return (\n    <RNText style={[messageStyle(theme, size), style]} testID={testIds.named('message')}>\n      {message}\n    </RNText>\n  );\n}\n\nfunction SkeletonRows({ size, skeletonRows, testIds }: Pick<ViewArgs, 'size' | 'skeletonRows' | 'testIds'>): React.JSX.Element {\n  const theme = useUiTheme();\n  const tint = skeletonTint(theme);\n  return (\n    <View style={{ gap: theme.spacing(SKELETON_ROW_GAP_UNITS) }}>\n      {Array.from({ length: skeletonRows }, (_, index) => (\n        <View\n          key={`skeleton-row-${index}`}\n          aria-hidden\n          testID={testIds.optional(`skeleton-${index}`)}\n          style={{\n            height: SKELETON_ROW_HEIGHT[size],\n            // The last row is short, so the block reads as a paragraph of text.\n            width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,\n            borderRadius: SKELETON_RADIUS,\n            backgroundColor: tint,\n          }}\n        />\n      ))}\n    </View>\n  );\n}\n\nfunction SkeletonView({ message, size, skeletonRows, testIds, style, rest }: ViewArgs): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View\n      role=\"status\"\n      aria-busy\n      aria-label={message || 'Loading content'}\n      testID={testIds.base}\n      style={[styles.skeleton, { padding: theme.spacing(SKELETON_PADDING_UNITS) }, style]}\n      {...rest}\n    >\n      <SkeletonRows size={size} skeletonRows={skeletonRows} testIds={testIds} />\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        style={{ marginTop: theme.spacing(SKELETON_MESSAGE_MARGIN_TOP_UNITS), textAlign: 'center' }}\n      />\n    </View>\n  );\n}\n\nfunction SpinnerView({ message, size, testIds, style, rest }: ViewArgs): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View\n      role=\"status\"\n      aria-busy\n      aria-label={message || 'Loading'}\n      testID={testIds.base}\n      style={[\n        styles.spinner,\n        {\n          padding: theme.spacing(SPINNER_PADDING_UNITS),\n          minHeight: SPINNER_MIN_HEIGHT,\n          gap: theme.spacing(SPINNER_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ActivityIndicator\n        size={spinnerSize(SPINNER_SIZES[size])}\n        color={theme.palette.primary.main}\n        testID={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </View>\n  );\n}\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo(function LoadingState(rawProps) {\n  const resolved = resolveLoadingStateProps(rawProps);\n  const { variant, message, size, skeletonRows, style, ...others } = resolved;\n  const args: ViewArgs = {\n    message,\n    size,\n    skeletonRows,\n    style,\n    testIds: makeTestIds(resolveTestId(others)),\n    rest: withoutTestIdProps(others),\n  };\n\n  return variant === 'skeleton' ? <SkeletonView {...args} /> : <SpinnerView {...args} />;\n});\n\nLoadingState.displayName = 'LoadingState';\n\nconst styles = StyleSheet.create({\n  skeleton: {\n    width: '100%',\n  },\n  spinner: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n","import type { MuiTypeVariantName } from '../../../tokens/mui-type';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `LoadingState` RENDERERS DRAW WITH.\n *\n * `LoadingState.tsx` (MUI) and `LoadingState.native.tsx` (React Native) read\n * this one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`, so a host with a different unit moves both renderers;\n * everything else is px.\n */\n\n/** MUI's `CircularProgress` diameter per size. */\nexport const SPINNER_SIZES: Record<SizeValue, number> = {\n  xs: 16,\n  sm: 24,\n  md: 40,\n  lg: 56,\n  xl: 64,\n};\n\n/** The MUI `Typography` variant the message is set in, per size. */\nexport const MESSAGE_TYPE: Record<SizeValue, MuiTypeVariantName> = {\n  xs: 'body2',\n  sm: 'body2',\n  md: 'body1',\n  lg: 'h6',\n  xl: 'h6',\n};\n\nexport const SKELETON_ROW_HEIGHT: Record<SizeValue, number> = {\n  xs: 14,\n  sm: 20,\n  md: 28,\n  lg: 36,\n  xl: 44,\n};\n\n/** The spinner view: a centred column, `theme.spacing(6)` of padding, at least 200px tall. */\nexport const SPINNER_PADDING_UNITS = 6;\nexport const SPINNER_MIN_HEIGHT = 200;\n/** Between the spinner and its message. */\nexport const SPINNER_GAP_UNITS = 2;\n\n/** The skeleton view: full width, `theme.spacing(3)` of padding. */\nexport const SKELETON_PADDING_UNITS = 3;\n/** Between rows (MUI `Stack spacing={2}`), and above the message (`mt: 2`). */\nexport const SKELETON_ROW_GAP_UNITS = 2;\nexport const SKELETON_MESSAGE_MARGIN_TOP_UNITS = 2;\nexport const SKELETON_RADIUS = 4;\n/** The last row is short, so the block reads as a paragraph of text. */\nexport const SKELETON_LAST_ROW_WIDTH = '60%';\nexport const SKELETON_FULL_ROW_WIDTH = '100%';\n/**\n * The house `Skeleton`'s `medium` intensity, which this component never\n * overrides: `alpha(text.primary, 0.13)` in light mode, `alpha(#fff, 0.13)`\n * in dark — and dark mode's `text.primary` IS `#fff`, so one expression\n * covers both.\n */\nexport const SKELETON_TINT_ALPHA = 0.13;\n\n/**\n * iOS's `ActivityIndicator` has two sizes, `small` (20pt) and `large`\n * (36pt); a diameter from this threshold up draws `large`. Android and the\n * web take the exact px.\n */\nexport const IOS_LARGE_SPINNER_FROM = 40;\n","import type { LoadingStateBaseProps, LoadingStateSize } from './LoadingState.base';\nimport { MESSAGE_TYPE, SKELETON_ROW_HEIGHT, SPINNER_SIZES } from './LoadingState.metrics';\nimport type { MuiTypeVariantName } from '../../../tokens/mui-type';\nimport { SIZE_VALUES } from '../../../tokens/vocabulary';\n\nexport { SKELETON_ROW_HEIGHT };\n\n// Derived from the shared metrics, not restated: the native `LoadingState`\n// reads the same two tables, so the renderers cannot disagree on a size.\nexport const SIZE_MAP: Record<LoadingStateSize, { spinner: number; text: MuiTypeVariantName }> =\n  Object.fromEntries(\n    SIZE_VALUES.map((size) => [size, { spinner: SPINNER_SIZES[size], text: MESSAGE_TYPE[size] }]),\n  ) as Record<LoadingStateSize, { spinner: number; text: MuiTypeVariantName }>;\n\ntype LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';\n\n/**\n * Generic over the renderer's own props: the web and the native `LoadingState`\n * pass different extras through, and both come back out untouched.\n */\ntype ResolvedLoadingStateProps<P extends LoadingStateBaseProps> = P &\n  Required<Pick<LoadingStateBaseProps, LoadingStateDefaultedKeys>>;\n\nconst LOADING_STATE_DEFAULTS: Required<Pick<LoadingStateBaseProps, LoadingStateDefaultedKeys>> = {\n  variant: 'spinner',\n  size: 'md',\n  skeletonRows: 3,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = <P extends LoadingStateBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveLoadingStateProps = <P extends LoadingStateBaseProps>(\n  props: P,\n): ResolvedLoadingStateProps<P> =>\n  ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) }) as ResolvedLoadingStateProps<P>;\n\n/**\n * Test ids come in three flavours here: the container falls back to a bare\n * `loading-state`, the labelled parts to `loading-state-<part>`, and the\n * skeleton rows to nothing at all when the caller supplied no base id.\n */\nexport const makeTestIds = (dataTestId?: string) => ({\n  base: dataTestId || 'loading-state',\n  optional: (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined,\n  named: (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`,\n});\n\nexport type LoadingStateTestIds = ReturnType<typeof makeTestIds>;\n"],"mappings":"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","names":["LoadingState"]}

package/dist/native/form/Button.js

@@ -0,0 +1,11 @@
+import {
+  Button
+} from "../chunks/chunk-UKCCYP52.js";
+import "../chunks/chunk-5GJ5OG5R.js";
+import "../chunks/chunk-M4DTJDWU.js";
+import "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/native/form/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/native/icons.js

@@ -0,0 +1,19 @@
+import {
+  ICON_NAMES,
+  ICON_PATHS,
+  ICON_SIZES,
+  Icon,
+  iconSize
+} from "./chunks/chunk-YQGNMAJN.js";
+import "./chunks/chunk-5WLOVHKK.js";
+import "./chunks/chunk-M4DTJDWU.js";
+import "./chunks/chunk-YTHR4Y5P.js";
+import "./chunks/chunk-P3PL4WBO.js";
+export {
+  ICON_NAMES,
+  ICON_PATHS,
+  ICON_SIZES,
+  Icon,
+  iconSize
+};
+//# sourceMappingURL=icons.js.map

package/dist/native/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/native/layout/Box.js

@@ -0,0 +1,12 @@
+import {
+  Box,
+  resolveBoxLayout
+} from "../chunks/chunk-EKKNUEA6.js";
+import "../chunks/chunk-M4DTJDWU.js";
+import "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+export {
+  Box,
+  resolveBoxLayout
+};
+//# sourceMappingURL=Box.js.map

package/dist/native/layout/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/native/layout/Container.js

@@ -0,0 +1,87 @@
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/layout/Container/Container.native.tsx
+import * as React from "react";
+import { View, useWindowDimensions } from "react-native";
+
+// src/components/layout/Container/Container.metrics.ts
+var CONTAINER_MAX_WIDTHS = {
+  xs: 444,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536
+};
+var CONTAINER_DEFAULT_MAX_WIDTH = "lg";
+var CONTAINER_CENTERED_MAX_WIDTH = "md";
+var CONTAINER_PADDING_UNITS = {
+  none: 0,
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 6
+};
+var CONTAINER_DEFAULT_PADDING = "md";
+var CONTAINER_COMPACT_PADDING_UNITS = 2;
+var CONTAINER_COMPACT_BELOW = 600;
+var isMaxWidthKey = (value) => value in CONTAINER_MAX_WIDTHS;
+function resolveContainerMaxWidth(variant, maxWidth) {
+  if (variant === "fluid") return false;
+  if (variant === "centered") return CONTAINER_CENTERED_MAX_WIDTH;
+  if (typeof maxWidth === "string" && isMaxWidthKey(maxWidth)) return maxWidth;
+  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;
+}
+function containerPaddingUnits(padding, compact) {
+  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;
+  const units = CONTAINER_PADDING_UNITS[padding];
+  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}
+
+// src/components/layout/Container/Container.native.tsx
+import { jsx } from "react/jsx-runtime";
+function containerStyle(theme, a) {
+  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;
+  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);
+  return {
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxWidth: limit === false ? void 0 : CONTAINER_MAX_WIDTHS[limit],
+    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),
+    ...a.variant === "centered" ? { alignItems: "center", justifyContent: "center", minHeight: a.window.height } : null
+  };
+}
+var Container = React.forwardRef(
+  ({ children, maxWidth = "lg", variant = "default", padding = "md", responsive = true, style, ...others }, ref) => {
+    const theme = useUiTheme();
+    const window = useWindowDimensions();
+    const resolved = React.useMemo(
+      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),
+      [theme, variant, maxWidth, padding, responsive, window]
+    );
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ref,
+        style: [resolved, style],
+        testID: resolveTestId(others, "container"),
+        ...withoutTestIdProps(others),
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+export {
+  Container,
+  containerStyle
+};
+//# sourceMappingURL=Container.js.map

package/dist/native/layout/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/Container/Container.native.tsx","../../../src/components/layout/Container/Container.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { View, useWindowDimensions, type ViewStyle } from 'react-native';\n\nimport {\n  CONTAINER_COMPACT_BELOW,\n  CONTAINER_MAX_WIDTHS,\n  containerPaddingUnits,\n  resolveContainerMaxWidth,\n} from './Container.metrics';\nimport type { ContainerMaxWidth, ContainerPadding, ContainerProps, ContainerVariant } from './Container.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\n\nexport interface ContainerStyleArgs {\n  variant: ContainerVariant;\n  maxWidth: ContainerMaxWidth | string;\n  padding: ContainerPadding;\n  responsive: boolean;\n  /** The window, for the two things CSS answers with a media query and `100vh`. */\n  window: { width: number; height: number };\n}\n\n/**\n * The style MUI's `Container` plus the web `sx` paint, in absolute numbers.\n *\n * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is\n * the breakpoint the web applies under `min-width` (below it the column is\n * narrower anyway); the `responsive` media query becomes a window-width test;\n * `centered`'s `100vh` becomes the window height. `padded` and `padding=\"none\"`\n * paint what the web paints — see `containerPaddingUnits`.\n */\nexport function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle {\n  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;\n  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);\n  return {\n    width: '100%',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    maxWidth: limit === false ? undefined : CONTAINER_MAX_WIDTHS[limit],\n    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),\n    ...(a.variant === 'centered'\n      ? { alignItems: 'center', justifyContent: 'center', minHeight: a.window.height }\n      : null),\n  };\n}\n\n/** The native `Container`: a `View` sized by the same rules MUI's `Container` and the web `sx` apply. */\nexport const Container = React.forwardRef<View, ContainerProps>(\n  ({ children, maxWidth = 'lg', variant = 'default', padding = 'md', responsive = true, style, ...others }, ref) => {\n    const theme = useUiTheme();\n    const window = useWindowDimensions();\n    const resolved = React.useMemo(\n      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),\n      [theme, variant, maxWidth, padding, responsive, window],\n    );\n\n    return (\n      <View\n        ref={ref}\n        style={[resolved, style]}\n        testID={resolveTestId(others, 'container')}\n        {...withoutTestIdProps(others)}\n      >\n        {children}\n      </View>\n    );\n  },\n);\n\nContainer.displayName = 'Container';\n","import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';\n\n/**\n * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.\n *\n * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's\n * breakpoint names inside the component; the native renderer has no MUI\n * breakpoints to name, so the values live here in SPACING UNITS and px, and\n * each renderer multiplies the units out through its own `theme.spacing`.\n */\nexport type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;\n\n/**\n * MUI's default breakpoints, which its `Container` reads as `max-width`\n * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under\n * `min-width: <breakpoint>`, but below it the column is `width: 100%` and\n * narrower anyway, so a plain `maxWidth` paints the same.\n */\nexport const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {\n  xs: 444,\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1536,\n};\n\nexport const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';\n/** The `centered` variant reads at `md`, whatever `maxWidth` says. */\nexport const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';\n\nexport const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {\n  none: 0,\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nexport const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';\n\n/** What `variant=\"padded\"` declares above and below, in spacing units. */\nexport const CONTAINER_PADDED_VERTICAL_UNITS = 8;\n\n/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */\nexport const CONTAINER_COMPACT_PADDING_UNITS = 2;\n\n/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */\nexport const CONTAINER_COMPACT_BELOW = 600;\n\nconst isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;\n\n/**\n * The breakpoint the column is limited to, or `false` for none. `fluid` drops\n * the limit, `centered` fixes it at `md`, and a string outside the vocabulary\n * reads as the default — the rules `Container.tsx` has always applied.\n */\nexport function resolveContainerMaxWidth(\n  variant: ContainerVariant,\n  maxWidth: ContainerMaxWidth | string,\n): ContainerMaxWidthKey | false {\n  if (variant === 'fluid') return false;\n  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;\n  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;\n  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;\n}\n\n/**\n * The inset every side of the container is PAINTED with, in spacing units.\n *\n * This is the web's painted result, not its declared intent, and two of its\n * rules are worth knowing before reaching for them:\n *\n * - `padding=\"none\"` paints the default. The web reads its map with `||`, so\n *   `none`'s 0 falls through to `md`.\n * - `variant=\"padded\"` paints the same inset as `default`. The web declares its\n *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the\n *   `padding` shorthand, which therefore overrides them.\n *\n * Both renderers read this one function so they agree today; either fix is a\n * change to the web's emitted CSS and to this function, made together.\n */\nexport function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {\n  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;\n  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];\n  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];\n}\n"],"mappings":";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,MAAM,2BAA2C;;;ACiBnD,IAAM,uBAA6D;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,8BAAoD;AAE1D,IAAM,+BAAqD;AAE3D,IAAM,0BAA4D;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,4BAA8C;AAMpD,IAAM,kCAAkC;AAGxC,IAAM,0BAA0B;AAEvC,IAAM,gBAAgB,CAAC,UAAiD,SAAS;AAO1E,SAAS,yBACd,SACA,UAC8B;AAC9B,MAAI,YAAY,QAAS,QAAO;AAChC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,OAAO,aAAa,YAAY,cAAc,QAAQ,EAAG,QAAO;AACpE,SAAO,aAAa,QAAQ,QAAQ;AACtC;AAiBO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;;;AD5BM;AA1BC,SAAS,eAAe,OAAgB,GAAkC;AAC/E,QAAM,UAAU,EAAE,cAAc,EAAE,OAAO,QAAQ;AACjD,QAAM,QAAQ,yBAAyB,EAAE,SAAS,EAAE,QAAQ;AAC5D,SAAO;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU,UAAU,QAAQ,SAAY,qBAAqB,KAAK;AAAA,IAClE,SAAS,MAAM,QAAQ,sBAAsB,EAAE,SAAS,OAAO,CAAC;AAAA,IAChE,GAAI,EAAE,YAAY,aACd,EAAE,YAAY,UAAU,gBAAgB,UAAU,WAAW,EAAE,OAAO,OAAO,IAC7E;AAAA,EACN;AACF;AAGO,IAAM,YAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,MAAM,UAAU,WAAW,UAAU,MAAM,aAAa,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ;AAChH,UAAM,QAAQ,WAAW;AACzB,UAAM,SAAS,oBAAoB;AACnC,UAAM,WAAiB;AAAA,MACrB,MAAM,eAAe,OAAO,EAAE,SAAS,UAAU,SAAS,YAAY,OAAO,CAAC;AAAA,MAC9E,CAAC,OAAO,SAAS,UAAU,SAAS,YAAY,MAAM;AAAA,IACxD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,CAAC,UAAU,KAAK;AAAA,QACvB,QAAQ,cAAc,QAAQ,WAAW;AAAA,QACxC,GAAG,mBAAmB,MAAM;AAAA,QAE5B;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/native/layout/Spacer.js

@@ -0,0 +1,80 @@
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  cssLengthToPx
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/layout/Spacer/Spacer.native.tsx
+import * as React from "react";
+import { View } from "react-native";
+
+// src/components/layout/Spacer/Spacer.metrics.ts
+var SPACER_SIZE_UNITS = {
+  xs: 0.5,
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 4
+};
+var SPACER_DEFAULT_SIZE = "md";
+var SPACER_DEFAULT_DIRECTION = "both";
+var SPACER_FLEX_GROW = 1;
+var SPACER_FLEX_SHRINK = 0;
+function spacerDimensions(geometry, spacing) {
+  const { size = SPACER_DEFAULT_SIZE, direction = SPACER_DEFAULT_DIRECTION, width, height } = geometry;
+  const step = spacing(SPACER_SIZE_UNITS[size] ?? SPACER_SIZE_UNITS[SPACER_DEFAULT_SIZE]);
+  return {
+    width: direction === "vertical" ? width : width ?? step,
+    height: direction === "horizontal" ? height : height ?? step
+  };
+}
+
+// src/components/layout/Spacer/Spacer.native.tsx
+import { jsx } from "react/jsx-runtime";
+var PERCENTAGE = /^-?\d+(\.\d+)?%$/;
+var RESOLVABLE_LENGTH = /^-?\d+(\.\d+)?(px|rem|em)$/;
+function toNativeDimension(value) {
+  if (typeof value === "number") return value;
+  if (typeof value !== "string") return void 0;
+  if (value === "auto") return "auto";
+  if (PERCENTAGE.test(value)) return value;
+  if (!RESOLVABLE_LENGTH.test(value)) return void 0;
+  const px = cssLengthToPx(value, Number.NaN);
+  return Number.isNaN(px) ? void 0 : px;
+}
+var Spacer = React.forwardRef(
+  ({ size, direction, width, height, flex = false, style, ...others }, ref) => {
+    const theme = useUiTheme();
+    const dimensions = spacerDimensions(
+      { size, direction, width: toNativeDimension(width), height: toNativeDimension(height) },
+      theme.spacing
+    );
+    const resolved = {
+      width: dimensions.width,
+      height: dimensions.height,
+      flex: flex ? SPACER_FLEX_GROW : void 0,
+      flexShrink: SPACER_FLEX_SHRINK,
+      pointerEvents: "none"
+    };
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ref,
+        "aria-hidden": true,
+        style: [resolved, style],
+        testID: resolveTestId(others),
+        ...withoutTestIdProps(others)
+      }
+    );
+  }
+);
+Spacer.displayName = "Spacer";
+export {
+  Spacer
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/native/layout/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/Spacer/Spacer.native.tsx","../../../src/components/layout/Spacer/Spacer.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { View, type ViewStyle } from 'react-native';\n\nimport { SPACER_FLEX_GROW, SPACER_FLEX_SHRINK, spacerDimensions } from './Spacer.metrics';\nimport type { SpacerDimension, SpacerProps } from './Spacer.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { cssLengthToPx } from '../../../tokens/css-units';\nimport type { BoxDimension } from '../Box/Box.base';\n\nconst PERCENTAGE = /^-?\\d+(\\.\\d+)?%$/;\n/** The lengths a 16px root can resolve. `vw`, `vh`, `ch`, `pt` and `calc()` cannot. */\nconst RESOLVABLE_LENGTH = /^-?\\d+(\\.\\d+)?(px|rem|em)$/;\n\n/**\n * A caller's dimension as React Native can take it. Numbers, percentages and\n * `auto` pass through; a CSS length (`2rem`, `1.5em`, `20px`) is read against\n * the 16px root the web would use, so the same string measures the same on\n * both sides. Anything else (`calc()`, `vw`) is not a length React Native has,\n * and yields to the size step — the same fallback an unset dimension takes.\n */\nexport function toNativeDimension(value: SpacerDimension | undefined): BoxDimension | undefined {\n  if (typeof value === 'number') return value;\n  if (typeof value !== 'string') return undefined;\n  if (value === 'auto') return 'auto';\n  if (PERCENTAGE.test(value)) return value as `${number}%`;\n  // Matched before conversion, because `cssLengthToPx` reads any string\n  // `parseFloat` can start — `50vw` would silently become 50 px.\n  if (!RESOLVABLE_LENGTH.test(value)) return undefined;\n  const px = cssLengthToPx(value, Number.NaN);\n  return Number.isNaN(px) ? undefined : px;\n}\n\n/**\n * The native `Spacer`: an empty `View` sized from the same metrics the web\n * puts in `sx`. Hidden from assistive technology and deaf to touches, as the\n * web one is to the pointer.\n */\nexport const Spacer = React.forwardRef<View, SpacerProps>(\n  ({ size, direction, width, height, flex = false, style, ...others }, ref) => {\n    const theme = useUiTheme();\n    const dimensions = spacerDimensions(\n      { size, direction, width: toNativeDimension(width), height: toNativeDimension(height) },\n      theme.spacing,\n    );\n    // `userSelect` is the one web declaration with no View equivalent: a\n    // React Native view holds no text to select.\n    const resolved: ViewStyle = {\n      width: dimensions.width,\n      height: dimensions.height,\n      flex: flex ? SPACER_FLEX_GROW : undefined,\n      flexShrink: SPACER_FLEX_SHRINK,\n      pointerEvents: 'none',\n    };\n\n    return (\n      <View\n        ref={ref}\n        aria-hidden\n        style={[resolved, style]}\n        testID={resolveTestId(others)}\n        {...withoutTestIdProps(others)}\n      />\n    );\n  },\n);\n\nSpacer.displayName = 'Spacer';\n","import type { SpacerDirection, SpacerSize } from './Spacer.base';\n\n/**\n * THE NUMBERS BOTH `Spacer` RENDERERS DRAW WITH.\n *\n * `Spacer.tsx` used to hold the size steps as a `switch` over\n * `theme.spacing(…)` calls, and `Spacer.native.tsx` would have held them again\n * as a second table. Now there is one, in SPACING UNITS, and each renderer\n * multiplies it out through its own `theme.spacing` — `'16px'` on the web,\n * `16` on native — so an `md` spacer is 16 wide on both sides by construction.\n */\nexport const SPACER_SIZE_UNITS: Record<SpacerSize, number> = {\n  xs: 0.5,\n  sm: 1,\n  md: 2,\n  lg: 3,\n  xl: 4,\n};\n\nexport const SPACER_DEFAULT_SIZE: SpacerSize = 'md';\nexport const SPACER_DEFAULT_DIRECTION: SpacerDirection = 'both';\n\n/** `flex` grows the spacer by one share of the free space; every spacer refuses to shrink. */\nexport const SPACER_FLEX_GROW = 1;\nexport const SPACER_FLEX_SHRINK = 0;\n\n/** The geometry props, with the dimension type left to the renderer. */\nexport interface SpacerGeometry<Dimension> {\n  size?: SpacerSize;\n  direction?: SpacerDirection;\n  width?: Dimension;\n  height?: Dimension;\n}\n\n/**\n * The width and height a spacer occupies, on either renderer.\n *\n * An explicit `width`/`height` wins on its axis whatever `direction` says; the\n * step fills only the axes `direction` names. `spacing` is the renderer's own\n * `theme.spacing`, so the same units come out as `'16px'` on the web and `16`\n * on native — the one resolver is what keeps the two from disagreeing.\n */\nexport function spacerDimensions<Dimension, Spacing>(\n  geometry: SpacerGeometry<Dimension>,\n  spacing: (units: number) => Spacing,\n): { width: Dimension | Spacing | undefined; height: Dimension | Spacing | undefined } {\n  const { size = SPACER_DEFAULT_SIZE, direction = SPACER_DEFAULT_DIRECTION, width, height } = geometry;\n  // A size outside the vocabulary (a story control, an untyped caller) draws `md`,\n  // exactly as the old `switch` did in its `default` arm.\n  const step = spacing(SPACER_SIZE_UNITS[size] ?? SPACER_SIZE_UNITS[SPACER_DEFAULT_SIZE]);\n  return {\n    width: direction === 'vertical' ? width : (width ?? step),\n    height: direction === 'horizontal' ? height : (height ?? step),\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAA4B;;;ACU9B,IAAM,oBAAgD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,sBAAkC;AACxC,IAAM,2BAA4C;AAGlD,IAAM,mBAAmB;AACzB,IAAM,qBAAqB;AAkB3B,SAAS,iBACd,UACA,SACqF;AACrF,QAAM,EAAE,OAAO,qBAAqB,YAAY,0BAA0B,OAAO,OAAO,IAAI;AAG5F,QAAM,OAAO,QAAQ,kBAAkB,IAAI,KAAK,kBAAkB,mBAAmB,CAAC;AACtF,SAAO;AAAA,IACL,OAAO,cAAc,aAAa,QAAS,SAAS;AAAA,IACpD,QAAQ,cAAc,eAAe,SAAU,UAAU;AAAA,EAC3D;AACF;;;ADEM;AA9CN,IAAM,aAAa;AAEnB,IAAM,oBAAoB;AASnB,SAAS,kBAAkB,OAA8D;AAC9F,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,WAAW,KAAK,KAAK,EAAG,QAAO;AAGnC,MAAI,CAAC,kBAAkB,KAAK,KAAK,EAAG,QAAO;AAC3C,QAAM,KAAK,cAAc,OAAO,OAAO,GAAG;AAC1C,SAAO,OAAO,MAAM,EAAE,IAAI,SAAY;AACxC;AAOO,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,MAAM,WAAW,OAAO,QAAQ,OAAO,OAAO,OAAO,GAAG,OAAO,GAAG,QAAQ;AAC3E,UAAM,QAAQ,WAAW;AACzB,UAAM,aAAa;AAAA,MACjB,EAAE,MAAM,WAAW,OAAO,kBAAkB,KAAK,GAAG,QAAQ,kBAAkB,MAAM,EAAE;AAAA,MACtF,MAAM;AAAA,IACR;AAGA,UAAM,WAAsB;AAAA,MAC1B,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MACnB,MAAM,OAAO,mBAAmB;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,QACX,OAAO,CAAC,UAAU,KAAK;AAAA,QACvB,QAAQ,cAAc,MAAM;AAAA,QAC3B,GAAG,mBAAmB,MAAM;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/native/layout/Stack.js

@@ -0,0 +1,30 @@
+import {
+  Box
+} from "../chunks/chunk-EKKNUEA6.js";
+import "../chunks/chunk-M4DTJDWU.js";
+import "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/layout/Stack/Stack.native.tsx
+import * as React2 from "react";
+
+// src/components/layout/Stack/with-dividers.ts
+import * as React from "react";
+function withDividers(children, divider) {
+  if (divider === void 0 || divider === null) return children;
+  const items = React.Children.toArray(children);
+  return items.flatMap(
+    (child, index) => index === 0 ? [child] : [React.createElement(React.Fragment, { key: `divider-${index}` }, divider), child]
+  );
+}
+
+// src/components/layout/Stack/Stack.native.tsx
+import { jsx } from "react/jsx-runtime";
+var Stack = React2.forwardRef(
+  ({ direction = "column", gap = 0, divider, children, ...rest }, ref) => /* @__PURE__ */ jsx(Box, { ref, direction, gap, ...rest, children: withDividers(children, divider) })
+);
+Stack.displayName = "Stack";
+export {
+  Stack
+};
+//# sourceMappingURL=Stack.js.map

package/dist/native/layout/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/Stack/Stack.native.tsx","../../../src/components/layout/Stack/with-dividers.ts"],"sourcesContent":["import * as React from 'react';\nimport type { View } from 'react-native';\n\nimport type { StackProps } from './Stack.types.native';\nimport { withDividers } from './with-dividers';\nimport { Box } from '../Box/Box.native';\n\nexport const Stack = React.forwardRef<View, StackProps>(\n  ({ direction = 'column', gap = 0, divider, children, ...rest }, ref) => (\n    <Box ref={ref} direction={direction} gap={gap} {...rest}>\n      {withDividers(children, divider)}\n    </Box>\n  ),\n);\n\nStack.displayName = 'Stack';\n","import * as React from 'react';\n\n/** The children with `divider` cloned between each adjacent pair. */\nexport function withDividers(\n  children: React.ReactNode,\n  divider: React.ReactNode | undefined,\n): React.ReactNode {\n  if (divider === undefined || divider === null) return children;\n  const items = React.Children.toArray(children);\n  return items.flatMap((child, index) =>\n    index === 0\n      ? [child]\n      : [React.createElement(React.Fragment, { key: `divider-${index}` }, divider), child],\n  );\n}\n"],"mappings":";;;;;;;;AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AAGhB,SAAS,aACd,UACA,SACiB;AACjB,MAAI,YAAY,UAAa,YAAY,KAAM,QAAO;AACtD,QAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,SAAO,MAAM;AAAA,IAAQ,CAAC,OAAO,UAC3B,UAAU,IACN,CAAC,KAAK,IACN,CAAO,oBAAoB,gBAAU,EAAE,KAAK,WAAW,KAAK,GAAG,GAAG,OAAO,GAAG,KAAK;AAAA,EACvF;AACF;;;ADLI;AAFG,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,YAAY,UAAU,MAAM,GAAG,SAAS,UAAU,GAAG,KAAK,GAAG,QAC9D,oBAAC,OAAI,KAAU,WAAsB,KAAW,GAAG,MAChD,uBAAa,UAAU,OAAO,GACjC;AAEJ;AAEA,MAAM,cAAc;","names":["React"]}

package/dist/native/provider.js

@@ -0,0 +1,26 @@
+import {
+  UiThemeContext,
+  useUiTheme
+} from "./chunks/chunk-YTHR4Y5P.js";
+import {
+  createUiTheme
+} from "./chunks/chunk-P3PL4WBO.js";
+
+// src/provider/UiProvider.native.tsx
+import * as React from "react";
+
+// src/provider/UiProvider.types.ts
+var isUiTheme = (theme) => theme !== void 0 && "palette" in theme && "spacing" in theme && typeof theme.spacing === "function";
+
+// src/provider/UiProvider.native.tsx
+import { jsx } from "react/jsx-runtime";
+function UiProvider({ theme, children }) {
+  const ui = React.useMemo(() => isUiTheme(theme) ? theme : createUiTheme(theme), [theme]);
+  return /* @__PURE__ */ jsx(UiThemeContext.Provider, { value: ui, children });
+}
+UiProvider.displayName = "UiProvider";
+export {
+  UiProvider,
+  useUiTheme
+};
+//# sourceMappingURL=provider.js.map

package/dist/native/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/provider/UiProvider.native.tsx","../../src/provider/UiProvider.types.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { UiThemeContext } from './ui-theme-context';\nimport { isUiTheme, type UiProviderProps } from './UiProvider.types';\nimport { createUiTheme } from '../tokens/theme';\n\n/** The native `UiProvider`: the theme every native component reads. */\nexport function UiProvider({ theme, children }: UiProviderProps): React.JSX.Element {\n  const ui = React.useMemo(() => (isUiTheme(theme) ? theme : createUiTheme(theme)), [theme]);\n  return <UiThemeContext.Provider value={ui}>{children}</UiThemeContext.Provider>;\n}\n\nUiProvider.displayName = 'UiProvider';\n","import type * as React from 'react';\n\nimport type { UiTheme, UiThemeOptions } from '../tokens/theme';\n\nexport interface UiProviderProps {\n  /**\n   * A built `UiTheme`, or the options to build one. Omit for the package\n   * default: the platform's light theme.\n   */\n  theme?: UiTheme | UiThemeOptions;\n  children: React.ReactNode;\n}\n\n/**\n * Options may carry a `palette` too (the seeds), so the discriminant is the\n * one thing only a BUILT theme has: `spacing` as a function. Options carry a\n * numeric `spacingUnit` instead.\n */\nexport const isUiTheme = (theme: UiTheme | UiThemeOptions | undefined): theme is UiTheme =>\n  theme !== undefined && 'palette' in theme && 'spacing' in theme && typeof theme.spacing === 'function';\n"],"mappings":";;;;;;;;;AAAA,YAAY,WAAW;;;ACkBhB,IAAM,YAAY,CAAC,UACxB,UAAU,UAAa,aAAa,SAAS,aAAa,SAAS,OAAO,MAAM,YAAY;;;ADVrF;AAFF,SAAS,WAAW,EAAE,OAAO,SAAS,GAAuC;AAClF,QAAM,KAAW,cAAQ,MAAO,UAAU,KAAK,IAAI,QAAQ,cAAc,KAAK,GAAI,CAAC,KAAK,CAAC;AACzF,SAAO,oBAAC,eAAe,UAAf,EAAwB,OAAO,IAAK,UAAS;AACvD;AAEA,WAAW,cAAc;","names":[]}

package/dist/native/tokens.js

@@ -0,0 +1,65 @@
+import {
+  COLOR_VALUES,
+  SIZE_VALUES,
+  muiColor,
+  muiSize,
+  paletteKey
+} from "./chunks/chunk-5WLOVHKK.js";
+import {
+  DEFAULT_BRAND,
+  DEFAULT_UI_THEME,
+  FONT_WEIGHTS,
+  GREY,
+  HEADING_LEVELS,
+  HEADING_SCALE,
+  NEUTRAL,
+  TYPE_SIZES,
+  WEB_FONT_FAMILY,
+  WEB_MONOSPACE_FONT_FAMILY,
+  alpha,
+  augmentColor,
+  contrastText,
+  createUiTheme,
+  darken,
+  decomposeColor,
+  emphasize,
+  getContrastRatio,
+  getLuminance,
+  hexToRgb,
+  hslToRgb,
+  lighten,
+  px,
+  recomposeColor
+} from "./chunks/chunk-P3PL4WBO.js";
+export {
+  COLOR_VALUES,
+  DEFAULT_BRAND,
+  DEFAULT_UI_THEME,
+  FONT_WEIGHTS,
+  GREY,
+  HEADING_LEVELS,
+  HEADING_SCALE,
+  NEUTRAL,
+  SIZE_VALUES,
+  TYPE_SIZES,
+  WEB_FONT_FAMILY,
+  WEB_MONOSPACE_FONT_FAMILY,
+  alpha,
+  augmentColor,
+  contrastText,
+  createUiTheme,
+  darken,
+  decomposeColor,
+  emphasize,
+  getContrastRatio,
+  getLuminance,
+  hexToRgb,
+  hslToRgb,
+  lighten,
+  muiColor,
+  muiSize,
+  paletteKey,
+  px,
+  recomposeColor
+};
+//# sourceMappingURL=tokens.js.map

package/dist/native/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}