@12-apps/ui 6.19.0 → 6.20.0

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

@@ -0,0 +1,432 @@
+import {
+  useLoopedProgress
+} from "../chunks/chunk-MLQIOKQZ.js";
+import {
+  MUI_TYPE
+} from "../chunks/chunk-HSIND52T.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  GREY,
+  alpha,
+  contrastText
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/data-display/Progress/Progress.native.tsx
+import * as React from "react";
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  Text as RNText,
+  View
+} from "react-native";
+import Svg, { Circle } from "react-native-svg";
+
+// src/components/data-display/Progress/Progress.helpers.ts
+var PROGRESS_DEFAULTS = {
+  variant: "linear",
+  size: "md",
+  color: "primary",
+  glow: false,
+  pulse: false,
+  showLabel: false,
+  segments: 10,
+  thickness: 4,
+  dataTestId: "progress"
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveProgressProps = (props) => ({ ...PROGRESS_DEFAULTS, ...definedProps(props) });
+var progressLabelText = (label, showLabel, displayValue) => label || (showLabel ? `${Math.round(displayValue)}%` : "");
+var progressFraction = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
+
+// src/components/data-display/Progress/Progress.metrics.ts
+var PROGRESS_SIZES = {
+  xs: { height: 2, circularSize: 24, fontSize: 10 },
+  sm: { height: 4, circularSize: 32, fontSize: 12 },
+  md: { height: 6, circularSize: 40, fontSize: 14 },
+  lg: { height: 8, circularSize: 48, fontSize: 16 },
+  xl: { height: 10, circularSize: 56, fontSize: 18 }
+};
+var TRACK_ALPHA = 0.1;
+var LABEL_FONT_WEIGHT = 600;
+var LABEL_MARGIN_TOP_UNITS = 1;
+var SEGMENT_GAP_UNITS = 0.5;
+var GLASS_BAR_ALPHA = 0.8;
+var GLASS_BAR_BORDER_ALPHA = 0.3;
+var BAR_GLOW = { blur: 10, spread: 2, alpha: 0.4 };
+var SEGMENT_GLOW = { blur: 6, spread: 1, alpha: 0.4 };
+var CIRCULAR_GLOW = { blur: 8, alpha: 0.6 };
+var PULSE = { durationMs: 2e3, dip: 0.7 };
+var CIRCULAR_VIEWBOX = 44;
+var CIRCULAR_ROTATION_DEG = -90;
+var circularCircumference = (thickness) => 2 * Math.PI * ((CIRCULAR_VIEWBOX - thickness) / 2);
+var circularDashOffset = (value, thickness) => (100 - value) / 100 * circularCircumference(thickness);
+var CIRCULAR_INDETERMINATE = { arc: 0.25, rotationMs: 1400 };
+var LINEAR_INDETERMINATE = { width: 0.35, durationMs: 2100 };
+function progressPalette(theme, color) {
+  if (color === "neutral") {
+    return {
+      light: GREY[300],
+      main: GREY[500],
+      dark: GREY[700],
+      contrastText: contrastText(GREY[500])
+    };
+  }
+  return theme.palette[color];
+}
+
+// src/components/data-display/Progress/Progress.look.native.ts
+var glowShadow = (main, { blur, spread, alpha: a }) => `0 0 ${blur}px ${spread}px ${alpha(main, a)}`;
+function trackStyle(theme, size, color) {
+  const { height } = PROGRESS_SIZES[size];
+  return {
+    width: "100%",
+    height,
+    borderRadius: height / 2,
+    backgroundColor: alpha(progressPalette(theme, color).main, TRACK_ALPHA),
+    // The bar inherits the track's radius on the web; here it is clipped to it.
+    overflow: "hidden"
+  };
+}
+function barPaint(variant, palette) {
+  switch (variant) {
+    case "gradient":
+      return { backgroundColor: palette.main };
+    case "glass":
+      return {
+        backgroundColor: alpha(palette.main, GLASS_BAR_ALPHA),
+        borderWidth: 1,
+        borderColor: alpha(palette.main, GLASS_BAR_BORDER_ALPHA)
+      };
+    default:
+      return { backgroundColor: palette.main };
+  }
+}
+function barStyle(theme, a) {
+  const palette = progressPalette(theme, a.color);
+  const { height } = PROGRESS_SIZES[a.size];
+  return {
+    height: "100%",
+    borderRadius: height / 2,
+    ...barPaint(a.variant, palette),
+    ...a.glow ? { boxShadow: glowShadow(palette.main, BAR_GLOW) } : {}
+  };
+}
+function segmentStyle(theme, a) {
+  const palette = progressPalette(theme, a.color);
+  const { height } = PROGRESS_SIZES[a.size];
+  return {
+    flex: 1,
+    height,
+    borderRadius: height / 2,
+    backgroundColor: a.filled ? palette.main : alpha(palette.main, TRACK_ALPHA),
+    ...a.glow && a.filled ? { boxShadow: glowShadow(palette.main, SEGMENT_GLOW) } : {}
+  };
+}
+function circularGlowStyle(theme, color) {
+  const main = progressPalette(theme, color).main;
+  return { boxShadow: `0 0 ${CIRCULAR_GLOW.blur}px ${alpha(main, CIRCULAR_GLOW.alpha)}` };
+}
+function labelStyle(theme, size, muted = false) {
+  const fontSize = PROGRESS_SIZES[size].fontSize;
+  const caption = MUI_TYPE.caption;
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize,
+    lineHeight: fontSize * caption.lineHeight,
+    letterSpacing: fontSize * caption.letterSpacingEm,
+    fontWeight: String(LABEL_FONT_WEIGHT),
+    textAlign: "center",
+    color: muted ? theme.palette.text.secondary : theme.palette.text.primary
+  };
+}
+
+// src/components/data-display/Progress/Progress.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var valueAria = (value) => value === void 0 ? {} : { "aria-valuenow": Math.round(value), "aria-valuemin": 0, "aria-valuemax": 100 };
+function usePulseStyle(enabled) {
+  const progress = useLoopedProgress(enabled, {
+    durationMs: PULSE.durationMs,
+    easing: PULSE_EASING
+  });
+  if (!enabled) return null;
+  return {
+    opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, PULSE.dip, 1] })
+  };
+}
+var PULSE_EASING = Easing.inOut(Easing.ease);
+function ProgressLabel({
+  size,
+  label,
+  testID,
+  muted = false,
+  spaced = false
+}) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsx(
+    RNText,
+    {
+      testID,
+      style: [
+        labelStyle(theme, size, muted),
+        spaced ? { marginTop: theme.spacing(LABEL_MARGIN_TOP_UNITS) } : null
+      ],
+      children: label
+    }
+  );
+}
+function useSweepStyle(enabled) {
+  const width = `${LINEAR_INDETERMINATE.width * 100}%`;
+  const progress = useLoopedProgress(enabled, {
+    durationMs: LINEAR_INDETERMINATE.durationMs,
+    // `left` is a layout property, which the native driver cannot animate.
+    useNativeDriver: false
+  });
+  if (!enabled) return null;
+  return {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width,
+    left: progress.interpolate({ inputRange: [0, 1], outputRange: [`-${width}`, "100%"] })
+  };
+}
+function LinearView({
+  variant,
+  size,
+  color,
+  glow,
+  pulse,
+  showLabel,
+  displayValue,
+  displayLabel,
+  value,
+  testID,
+  elementTestID,
+  style,
+  containerRef,
+  rest
+}) {
+  const theme = useUiTheme();
+  const pulseStyle = usePulseStyle(pulse);
+  const sweep = useSweepStyle(value === void 0);
+  return /* @__PURE__ */ jsxs(View, { ref: containerRef, testID, style: [styles.block, style], children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: elementTestID,
+        role: "progressbar",
+        ...valueAria(value),
+        style: trackStyle(theme, size, color),
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              barStyle(theme, { variant, size, color, glow }),
+              sweep ?? { width: `${progressFraction(displayValue)}%` },
+              pulseStyle
+            ]
+          }
+        )
+      }
+    ),
+    showLabel ? /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testID: `${testID}-label`, spaced: true }) : null
+  ] });
+}
+function useSpinStyle(enabled) {
+  const progress = useLoopedProgress(enabled, {
+    durationMs: CIRCULAR_INDETERMINATE.rotationMs
+  });
+  if (!enabled) {
+    return { transform: [{ rotate: `${CIRCULAR_ROTATION_DEG}deg` }] };
+  }
+  return {
+    transform: [
+      { rotate: progress.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }
+    ]
+  };
+}
+function CircularDial({
+  diameter,
+  thickness,
+  stroke,
+  dashOffset
+}) {
+  const half = CIRCULAR_VIEWBOX / 2;
+  return /* @__PURE__ */ jsx(
+    Svg,
+    {
+      width: diameter,
+      height: diameter,
+      viewBox: `${half} ${half} ${CIRCULAR_VIEWBOX} ${CIRCULAR_VIEWBOX}`,
+      children: /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: CIRCULAR_VIEWBOX,
+          cy: CIRCULAR_VIEWBOX,
+          r: (CIRCULAR_VIEWBOX - thickness) / 2,
+          fill: "none",
+          stroke,
+          strokeWidth: thickness,
+          strokeDasharray: circularCircumference(thickness),
+          strokeDashoffset: dashOffset
+        }
+      )
+    }
+  );
+}
+function CircularView({
+  size,
+  color,
+  glow,
+  pulse,
+  showLabel,
+  displayValue,
+  displayLabel,
+  value,
+  testID,
+  elementTestID,
+  style,
+  containerRef,
+  rest,
+  thickness,
+  circularSize
+}) {
+  const theme = useUiTheme();
+  const indeterminate = value === void 0;
+  const pulseStyle = usePulseStyle(pulse);
+  const spin = useSpinStyle(indeterminate);
+  const diameter = circularSize || PROGRESS_SIZES[size].circularSize;
+  const box = { width: diameter, height: diameter };
+  return /* @__PURE__ */ jsxs(View, { ref: containerRef, testID, style: [styles.inline, style], children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        testID: elementTestID,
+        role: "progressbar",
+        ...valueAria(value),
+        style: [box, glow ? circularGlowStyle(theme, color) : null, pulseStyle],
+        ...rest,
+        children: /* @__PURE__ */ jsx(Animated.View, { style: [box, spin], children: /* @__PURE__ */ jsx(
+          CircularDial,
+          {
+            diameter,
+            thickness,
+            stroke: progressPalette(theme, color).main,
+            dashOffset: indeterminate ? circularCircumference(thickness) * (1 - CIRCULAR_INDETERMINATE.arc) : circularDashOffset(displayValue, thickness)
+          }
+        ) })
+      }
+    ),
+    showLabel && !indeterminate ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.centre], children: /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testID: `${testID}-label`, muted: true }) }) : null
+  ] });
+}
+function SegmentedView({
+  size,
+  color,
+  glow,
+  pulse,
+  showLabel,
+  displayValue,
+  displayLabel,
+  testID,
+  elementTestID,
+  style,
+  containerRef,
+  rest,
+  segments
+}) {
+  const theme = useUiTheme();
+  const pulseStyle = usePulseStyle(pulse);
+  const filled = Math.floor(progressFraction(displayValue) / 100 * segments);
+  return /* @__PURE__ */ jsxs(View, { ref: containerRef, testID: elementTestID, style: [styles.block, style], ...rest, children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: `${testID}-segments-container`,
+        style: [styles.segments, { gap: theme.spacing(SEGMENT_GAP_UNITS) }],
+        children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: `${testID}-segment-${index}`,
+            style: [
+              segmentStyle(theme, { size, color, filled: index < filled, glow }),
+              index < filled ? pulseStyle : null
+            ]
+          },
+          `segment-${index}`
+        ))
+      }
+    ),
+    showLabel ? /* @__PURE__ */ jsx(ProgressLabel, { size, label: displayLabel, testID: `${testID}-label`, spaced: true }) : null
+  ] });
+}
+var Progress = React.forwardRef((rawProps, ref) => {
+  const {
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    showLabel,
+    label,
+    segments,
+    thickness,
+    circularSize,
+    value,
+    dataTestId,
+    testID,
+    style,
+    "data-testid": elementId,
+    ...rest
+  } = resolveProgressProps(rawProps);
+  const displayValue = value || 0;
+  const base = testID ?? dataTestId;
+  const shared = {
+    size,
+    color,
+    glow,
+    pulse,
+    showLabel,
+    displayValue,
+    displayLabel: progressLabelText(label, showLabel, displayValue),
+    value,
+    testID: base,
+    elementTestID: base,
+    style,
+    containerRef: ref,
+    rest
+  };
+  if (variant === "circular") {
+    return /* @__PURE__ */ jsx(
+      CircularView,
+      {
+        ...shared,
+        elementTestID: elementId ?? `${base}-circular`,
+        thickness,
+        circularSize
+      }
+    );
+  }
+  if (variant === "segmented") {
+    return /* @__PURE__ */ jsx(SegmentedView, { ...shared, elementTestID: elementId ?? base, segments });
+  }
+  return /* @__PURE__ */ jsx(LinearView, { ...shared, elementTestID: elementId ?? `${base}-linear`, variant });
+});
+Progress.displayName = "Progress";
+var styles = StyleSheet.create({
+  block: { width: "100%" },
+  /** MUI's `display: inline-flex` on the circular wrapper. */
+  inline: { position: "relative", alignSelf: "flex-start" },
+  centre: { alignItems: "center", justifyContent: "center" },
+  segments: { flexDirection: "row", width: "100%" }
+});
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-display/Progress/Progress.native.tsx","../../../src/components/data-display/Progress/Progress.helpers.ts","../../../src/components/data-display/Progress/Progress.metrics.ts","../../../src/components/data-display/Progress/Progress.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Animated,\n  Easing,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type StyleProp,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport Svg, { Circle } from 'react-native-svg';\n\nimport { progressFraction, progressLabelText, resolveProgressProps } from './Progress.helpers';\nimport {\n  barStyle,\n  circularGlowStyle,\n  labelStyle,\n  segmentStyle,\n  trackStyle,\n} from './Progress.look.native';\nimport {\n  CIRCULAR_INDETERMINATE,\n  CIRCULAR_ROTATION_DEG,\n  CIRCULAR_VIEWBOX,\n  LABEL_MARGIN_TOP_UNITS,\n  LINEAR_INDETERMINATE,\n  PROGRESS_SIZES,\n  PULSE,\n  SEGMENT_GAP_UNITS,\n  circularCircumference,\n  circularDashOffset,\n  progressPalette,\n} from './Progress.metrics';\nimport type { ProgressProps, ProgressSize, ProgressVariant } from './Progress.types.native';\nimport { useLoopedProgress } from '../../../platform/animation';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\ntype ValueAria = Pick<ViewProps, 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax'>;\n\n/** MUI names the value only when it knows it; an indeterminate bar reports none. */\nconst valueAria = (value: number | undefined): ValueAria =>\n  value === undefined\n    ? {}\n    : { 'aria-valuenow': Math.round(value), 'aria-valuemin': 0, 'aria-valuemax': 100 };\n\n/** MUI's `pulseAnimation`, as an opacity the caller can merge into a style. */\nfunction usePulseStyle(enabled: boolean): { opacity: Animated.AnimatedInterpolation<number> } | null {\n  const progress = useLoopedProgress(enabled, {\n    durationMs: PULSE.durationMs,\n    easing: PULSE_EASING,\n  });\n  if (!enabled) return null;\n  return {\n    opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, PULSE.dip, 1] }),\n  };\n}\n\nconst PULSE_EASING = Easing.inOut(Easing.ease);\n\ninterface ViewArgs {\n  size: ProgressSize;\n  color: ColorValue;\n  glow: boolean;\n  pulse: boolean;\n  showLabel: boolean;\n  displayValue: number;\n  displayLabel: string;\n  /** Absent means indeterminate — the bar animates rather than reporting progress. */\n  value?: number;\n  /** The component's own id; the parts derive theirs from it. */\n  testID: string;\n  /** The id the addressed element takes — the caller's `data-testid` when they gave one. */\n  elementTestID: string;\n  style?: StyleProp<ViewStyle>;\n  containerRef?: React.Ref<View>;\n  rest: ViewProps;\n}\n\nfunction ProgressLabel({\n  size,\n  label,\n  testID,\n  muted = false,\n  spaced = false,\n}: {\n  size: ProgressSize;\n  label: string;\n  testID: string;\n  muted?: boolean;\n  spaced?: boolean;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <RNText\n      testID={testID}\n      style={[\n        labelStyle(theme, size, muted),\n        spaced ? { marginTop: theme.spacing(LABEL_MARGIN_TOP_UNITS) } : null,\n      ]}\n    >\n      {label}\n    </RNText>\n  );\n}\n\n/**\n * MUI's `bar1Indeterminate`: a third of the track crossing it every 2.1s.\n * Two bars on the web, one here — `NATIVE-NOTES.md` records the difference.\n */\nfunction useSweepStyle(enabled: boolean): Animated.WithAnimatedValue<ViewStyle> | null {\n  const width = `${LINEAR_INDETERMINATE.width * 100}%` as const;\n  const progress = useLoopedProgress(enabled, {\n    durationMs: LINEAR_INDETERMINATE.durationMs,\n    // `left` is a layout property, which the native driver cannot animate.\n    useNativeDriver: false,\n  });\n  if (!enabled) return null;\n  return {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    width,\n    left: progress.interpolate({ inputRange: [0, 1], outputRange: [`-${width}`, '100%'] }),\n  };\n}\n\nfunction LinearView({\n  variant,\n  size,\n  color,\n  glow,\n  pulse,\n  showLabel,\n  displayValue,\n  displayLabel,\n  value,\n  testID,\n  elementTestID,\n  style,\n  containerRef,\n  rest,\n}: ViewArgs & { variant: ProgressVariant }): React.JSX.Element {\n  const theme = useUiTheme();\n  const pulseStyle = usePulseStyle(pulse);\n  const sweep = useSweepStyle(value === undefined);\n\n  return (\n    <View ref={containerRef} testID={testID} style={[styles.block, style]}>\n      <View\n        testID={elementTestID}\n        role=\"progressbar\"\n        {...valueAria(value)}\n        style={trackStyle(theme, size, color)}\n        {...rest}\n      >\n        <Animated.View\n          style={[\n            barStyle(theme, { variant, size, color, glow }),\n            sweep ?? { width: `${progressFraction(displayValue)}%` },\n            pulseStyle,\n          ]}\n        />\n      </View>\n      {showLabel ? (\n        <ProgressLabel size={size} label={displayLabel} testID={`${testID}-label`} spaced />\n      ) : null}\n    </View>\n  );\n}\n\n/** MUI's `circular-rotate`: one turn every 1.4s behind an arc that never closes. */\nfunction useSpinStyle(enabled: boolean): Animated.WithAnimatedValue<ViewStyle> {\n  const progress = useLoopedProgress(enabled, {\n    durationMs: CIRCULAR_INDETERMINATE.rotationMs,\n  });\n  if (!enabled) {\n    return { transform: [{ rotate: `${CIRCULAR_ROTATION_DEG}deg` }] };\n  }\n  return {\n    transform: [\n      { rotate: progress.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) },\n    ],\n  };\n}\n\nfunction CircularDial({\n  diameter,\n  thickness,\n  stroke,\n  dashOffset,\n}: {\n  diameter: number;\n  thickness: number;\n  stroke: string;\n  dashOffset: number;\n}): React.JSX.Element {\n  const half = CIRCULAR_VIEWBOX / 2;\n  return (\n    <Svg\n      width={diameter}\n      height={diameter}\n      viewBox={`${half} ${half} ${CIRCULAR_VIEWBOX} ${CIRCULAR_VIEWBOX}`}\n    >\n      <Circle\n        cx={CIRCULAR_VIEWBOX}\n        cy={CIRCULAR_VIEWBOX}\n        r={(CIRCULAR_VIEWBOX - thickness) / 2}\n        fill=\"none\"\n        stroke={stroke}\n        strokeWidth={thickness}\n        strokeDasharray={circularCircumference(thickness)}\n        strokeDashoffset={dashOffset}\n      />\n    </Svg>\n  );\n}\n\nfunction CircularView({\n  size,\n  color,\n  glow,\n  pulse,\n  showLabel,\n  displayValue,\n  displayLabel,\n  value,\n  testID,\n  elementTestID,\n  style,\n  containerRef,\n  rest,\n  thickness,\n  circularSize,\n}: ViewArgs & { thickness: number; circularSize?: number }): React.JSX.Element {\n  const theme = useUiTheme();\n  const indeterminate = value === undefined;\n  const pulseStyle = usePulseStyle(pulse);\n  const spin = useSpinStyle(indeterminate);\n  const diameter = circularSize || PROGRESS_SIZES[size].circularSize;\n  const box = { width: diameter, height: diameter };\n\n  return (\n    <View ref={containerRef} testID={testID} style={[styles.inline, style]}>\n      <Animated.View\n        testID={elementTestID}\n        role=\"progressbar\"\n        {...valueAria(value)}\n        style={[box, glow ? circularGlowStyle(theme, color) : null, pulseStyle]}\n        {...rest}\n      >\n        <Animated.View style={[box, spin]}>\n          <CircularDial\n            diameter={diameter}\n            thickness={thickness}\n            stroke={progressPalette(theme, color).main}\n            dashOffset={\n              indeterminate\n                ? circularCircumference(thickness) * (1 - CIRCULAR_INDETERMINATE.arc)\n                : circularDashOffset(displayValue, thickness)\n            }\n          />\n        </Animated.View>\n      </Animated.View>\n      {showLabel && !indeterminate ? (\n        <View style={[StyleSheet.absoluteFill, styles.centre]}>\n          <ProgressLabel size={size} label={displayLabel} testID={`${testID}-label`} muted />\n        </View>\n      ) : null}\n    </View>\n  );\n}\n\nfunction SegmentedView({\n  size,\n  color,\n  glow,\n  pulse,\n  showLabel,\n  displayValue,\n  displayLabel,\n  testID,\n  elementTestID,\n  style,\n  containerRef,\n  rest,\n  segments,\n}: ViewArgs & { segments: number }): React.JSX.Element {\n  const theme = useUiTheme();\n  const pulseStyle = usePulseStyle(pulse);\n  const filled = Math.floor((progressFraction(displayValue) / 100) * segments);\n\n  return (\n    <View ref={containerRef} testID={elementTestID} style={[styles.block, style]} {...rest}>\n      <View\n        testID={`${testID}-segments-container`}\n        style={[styles.segments, { gap: theme.spacing(SEGMENT_GAP_UNITS) }]}\n      >\n        {Array.from({ length: segments }, (_, index) => (\n          <Animated.View\n            key={`segment-${index}`}\n            testID={`${testID}-segment-${index}`}\n            style={[\n              segmentStyle(theme, { size, color, filled: index < filled, glow }),\n              index < filled ? pulseStyle : null,\n            ]}\n          />\n        ))}\n      </View>\n      {showLabel ? (\n        <ProgressLabel size={size} label={displayLabel} testID={`${testID}-label`} spaced />\n      ) : null}\n    </View>\n  );\n}\n\n/**\n * The native `Progress`: the same track, bar, dial and segments the MUI half\n * draws, on `View`s and a `react-native-svg` arc.\n */\nexport const Progress = React.forwardRef<View, ProgressProps>((rawProps, ref) => {\n  const {\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    showLabel,\n    label,\n    segments,\n    thickness,\n    circularSize,\n    value,\n    dataTestId,\n    testID,\n    style,\n    'data-testid': elementId,\n    ...rest\n  } = resolveProgressProps(rawProps);\n  const displayValue = value || 0;\n  // `testID` is React Native's spelling of `dataTestId` and names the component;\n  // `data-testid` names the ELEMENT, which is where the web puts it.\n  const base = testID ?? dataTestId;\n  const shared: ViewArgs = {\n    size,\n    color,\n    glow,\n    pulse,\n    showLabel,\n    displayValue,\n    displayLabel: progressLabelText(label, showLabel, displayValue),\n    value,\n    testID: base,\n    elementTestID: base,\n    style,\n    containerRef: ref,\n    rest,\n  };\n\n  if (variant === 'circular') {\n    return (\n      <CircularView\n        {...shared}\n        elementTestID={elementId ?? `${base}-circular`}\n        thickness={thickness}\n        circularSize={circularSize}\n      />\n    );\n  }\n\n  if (variant === 'segmented') {\n    return <SegmentedView {...shared} elementTestID={elementId ?? base} segments={segments} />;\n  }\n\n  return <LinearView {...shared} elementTestID={elementId ?? `${base}-linear`} variant={variant} />;\n});\n\nProgress.displayName = 'Progress';\n\nconst styles = StyleSheet.create({\n  block: { width: '100%' },\n  /** MUI's `display: inline-flex` on the circular wrapper. */\n  inline: { position: 'relative', alignSelf: 'flex-start' },\n  centre: { alignItems: 'center', justifyContent: 'center' },\n  segments: { flexDirection: 'row', width: '100%' },\n});\n","import type { ProgressBaseProps } from './Progress.base';\n\ntype ProgressDefaultedKeys =\n  | 'variant'\n  | 'size'\n  | 'color'\n  | 'glow'\n  | 'pulse'\n  | 'showLabel'\n  | 'segments'\n  | 'thickness'\n  | 'dataTestId';\n\n/**\n * Generic over the renderer's own props: the web and the native `Progress`\n * carry different extras (MUI's `LinearProgress` props against a `View`'s), and\n * both come back out untouched.\n */\ntype ResolvedProgressProps<P extends ProgressBaseProps> = P &\n  Required<Pick<ProgressBaseProps, ProgressDefaultedKeys>>;\n\nconst PROGRESS_DEFAULTS: Required<Pick<ProgressBaseProps, ProgressDefaultedKeys>> = {\n  variant: 'linear',\n  size: 'md',\n  color: 'primary',\n  glow: false,\n  pulse: false,\n  showLabel: false,\n  segments: 10,\n  thickness: 4,\n  dataTestId: 'progress',\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 ProgressBaseProps>(props: P): Partial<P> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<P>;\n\nexport const resolveProgressProps = <P extends ProgressBaseProps>(\n  props: P,\n): ResolvedProgressProps<P> =>\n  ({ ...PROGRESS_DEFAULTS, ...definedProps(props) }) as ResolvedProgressProps<P>;\n\n/**\n * The label the caller asked for, or the rounded percentage when they only\n * asked for one. Empty when there is nothing to show.\n */\nexport const progressLabelText = (\n  label: string | undefined,\n  showLabel: boolean,\n  displayValue: number,\n): string => label || (showLabel ? `${Math.round(displayValue)}%` : '');\n\n/** How much of the track the bar covers, 0 to 100 — a value outside that is clamped. */\nexport const progressFraction = (value: number): number =>\n  Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;\n","import type { ProgressSize } from './Progress.base';\nimport { contrastText, GREY, type UiPaletteColor, type UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Progress` RENDERERS DRAW WITH.\n *\n * `Progress.styles.ts` (web, emotion over MUI's `LinearProgress` and\n * `CircularProgress`) and `Progress.native.tsx` (React Native, with\n * `react-native-svg` for the arc) read this one table. The web turns the px\n * into rem and the shadows into CSS strings; native uses the numbers.\n *\n * The `CIRCULAR_*` group is MUI's OWN geometry, restated because the native\n * half draws the arc itself: a 44-unit viewBox whose circle is inset by the\n * stroke, with the value expressed as a dash offset — the same arithmetic\n * MUI's `CircularProgress` runs, so the two draw the same sweep.\n */\nexport interface ProgressSizeMetrics {\n  /** The linear track's height, in px. The bar's radius is half of it. */\n  height: number;\n  /** The circular variant's diameter, in px. */\n  circularSize: number;\n  /** The label's type size, in px. */\n  fontSize: number;\n}\n\nexport const PROGRESS_SIZES: Record<ProgressSize, ProgressSizeMetrics> = {\n  xs: { height: 2, circularSize: 24, fontSize: 10 },\n  sm: { height: 4, circularSize: 32, fontSize: 12 },\n  md: { height: 6, circularSize: 40, fontSize: 14 },\n  lg: { height: 8, circularSize: 48, fontSize: 16 },\n  xl: { height: 10, circularSize: 56, fontSize: 18 },\n};\n\n/** The unfilled track, and an unfilled segment: the hue at a tenth. */\nexport const TRACK_ALPHA = 0.1;\n\n/** The label is MUI's `caption` at the size's own step, in semibold. */\nexport const LABEL_FONT_WEIGHT = 600;\n/** `mt: 1` between a linear or segmented bar and its label. */\nexport const LABEL_MARGIN_TOP_UNITS = 1;\n/** `gap: 0.5` between segments. */\nexport const SEGMENT_GAP_UNITS = 0.5;\n\n/** `glass`: the hue at 80% behind a 10px blur, inside a 30% hairline. */\nexport const GLASS_BAR_ALPHA = 0.8;\nexport const GLASS_BAR_BORDER_ALPHA = 0.3;\nexport const GLASS_BLUR_PX = 10;\n\n/** `glow` on a bar: `0 0 10px 2px alpha(main, 0.4)` and a 1.1 brightness lift. */\nexport const BAR_GLOW = { blur: 10, spread: 2, alpha: 0.4 } as const;\nexport const GLOW_BRIGHTNESS = 1.1;\n/** `glow` on a filled segment: the same shadow, one step tighter. */\nexport const SEGMENT_GLOW = { blur: 6, spread: 1, alpha: 0.4 } as const;\n/** `glow` on the circular arc: `drop-shadow(0 0 8px alpha(main, 0.6))`. */\nexport const CIRCULAR_GLOW = { blur: 8, alpha: 0.6 } as const;\n\n/** MUI's `pulseAnimation`: opacity 1 → 0.7 → 1, every two seconds. */\nexport const PULSE = { durationMs: 2000, dip: 0.7 } as const;\n\n/** `transition: all 0.3s ease` on the bar and on every segment. */\nexport const TRANSITION_MS = 300;\n\n/* ── MUI's `CircularProgress`, restated for the renderer that has no MUI ──── */\n\n/** MUI's `SIZE`: the arc is drawn in a 44-unit box and scaled to the px size. */\nexport const CIRCULAR_VIEWBOX = 44;\n/** MUI puts the determinate arc's start at twelve o'clock. */\nexport const CIRCULAR_ROTATION_DEG = -90;\n/** The circumference of the circle a `thickness` leaves room for. */\nexport const circularCircumference = (thickness: number): number =>\n  2 * Math.PI * ((CIRCULAR_VIEWBOX - thickness) / 2);\n/** MUI's `strokeDashoffset`: the share of the circumference still to run. */\nexport const circularDashOffset = (value: number, thickness: number): number =>\n  ((100 - value) / 100) * circularCircumference(thickness);\n\n/**\n * MUI's indeterminate `CircularProgress` never closes the ring: it draws\n * roughly a fifth of it and spins. One turn every 1.4s, as MUI's\n * `circular-rotate` keyframes do.\n */\nexport const CIRCULAR_INDETERMINATE = { arc: 0.25, rotationMs: 1400 } as const;\n/** MUI's `bar1Indeterminate` keyframes: 2.1s a lap, over about a third of the track. */\nexport const LINEAR_INDETERMINATE = { width: 0.35, durationMs: 2100 } as const;\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Progress.styles.ts` has\n * always drawn it from three greys; `danger` is MUI's `error`, which is what\n * the shared theme calls `danger`. Same colours here.\n */\nexport function progressPalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    return {\n      light: GREY[300],\n      main: GREY[500],\n      dark: GREY[700],\n      contrastText: contrastText(GREY[500]),\n    };\n  }\n  return theme.palette[color];\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { ProgressSize, ProgressVariant } from './Progress.base';\nimport {\n  BAR_GLOW,\n  CIRCULAR_GLOW,\n  GLASS_BAR_ALPHA,\n  GLASS_BAR_BORDER_ALPHA,\n  LABEL_FONT_WEIGHT,\n  PROGRESS_SIZES,\n  SEGMENT_GLOW,\n  TRACK_ALPHA,\n  progressPalette,\n} from './Progress.metrics';\nimport { MUI_TYPE } from '../../../tokens/mui-type';\nimport { alpha } from '../../../tokens/color';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/** `0 0 <blur>px <spread>px alpha(main, a)`, the string both renderers write. */\nconst glowShadow = (\n  main: string,\n  { blur, spread, alpha: a }: { blur: number; spread: number; alpha: number },\n): string => `0 0 ${blur}px ${spread}px ${alpha(main, a)}`;\n\n/** The unfilled track a linear bar runs in. */\nexport function trackStyle(theme: UiTheme, size: ProgressSize, color: ColorValue): ViewStyle {\n  const { height } = PROGRESS_SIZES[size];\n  return {\n    width: '100%',\n    height,\n    borderRadius: height / 2,\n    backgroundColor: alpha(progressPalette(theme, color).main, TRACK_ALPHA),\n    // The bar inherits the track's radius on the web; here it is clipped to it.\n    overflow: 'hidden',\n  };\n}\n\n/**\n * What the web's `barVariantStyles` paint. `gradient` is the one honest gap:\n * React Native core has no gradient fill, so it takes the first stop.\n */\nfunction barPaint(variant: ProgressVariant, palette: UiPaletteColor): ViewStyle {\n  switch (variant) {\n    case 'gradient':\n      return { backgroundColor: palette.main };\n    case 'glass':\n      return {\n        backgroundColor: alpha(palette.main, GLASS_BAR_ALPHA),\n        borderWidth: 1,\n        borderColor: alpha(palette.main, GLASS_BAR_BORDER_ALPHA),\n      };\n    default:\n      return { backgroundColor: palette.main };\n  }\n}\n\n/** The bar itself: the variant's paint, the glow, and the height of its track. */\nexport function barStyle(\n  theme: UiTheme,\n  a: { variant: ProgressVariant; size: ProgressSize; color: ColorValue; glow: boolean },\n): ViewStyle {\n  const palette = progressPalette(theme, a.color);\n  const { height } = PROGRESS_SIZES[a.size];\n  return {\n    height: '100%',\n    borderRadius: height / 2,\n    ...barPaint(a.variant, palette),\n    ...(a.glow ? { boxShadow: glowShadow(palette.main, BAR_GLOW) } : {}),\n  };\n}\n\n/** One segment of the segmented variant: filled with the hue, or a tenth of it. */\nexport function segmentStyle(\n  theme: UiTheme,\n  a: { size: ProgressSize; color: ColorValue; filled: boolean; glow: boolean },\n): ViewStyle {\n  const palette = progressPalette(theme, a.color);\n  const { height } = PROGRESS_SIZES[a.size];\n  return {\n    flex: 1,\n    height,\n    borderRadius: height / 2,\n    backgroundColor: a.filled ? palette.main : alpha(palette.main, TRACK_ALPHA),\n    ...(a.glow && a.filled ? { boxShadow: glowShadow(palette.main, SEGMENT_GLOW) } : {}),\n  };\n}\n\n/** The circular arc's glow: the web's `drop-shadow`, as a box shadow round the dial. */\nexport function circularGlowStyle(theme: UiTheme, color: ColorValue): ViewStyle {\n  const main = progressPalette(theme, color).main;\n  return { boxShadow: `0 0 ${CIRCULAR_GLOW.blur}px ${alpha(main, CIRCULAR_GLOW.alpha)}` };\n}\n\n/**\n * The label: MUI's `caption` ratios at the size's own step, in semibold. The\n * circular variant sets it in the muted ink, as `color=\"text.secondary\"` does.\n */\nexport function labelStyle(theme: UiTheme, size: ProgressSize, muted = false): TextStyle {\n  const fontSize = PROGRESS_SIZES[size].fontSize;\n  const caption = MUI_TYPE.caption;\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize,\n    lineHeight: fontSize * caption.lineHeight,\n    letterSpacing: fontSize * caption.letterSpacingEm,\n    fontWeight: String(LABEL_FONT_WEIGHT) as TextStyle['fontWeight'],\n    textAlign: 'center',\n    color: muted ? theme.palette.text.secondary : theme.palette.text.primary,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/native/icons.js

@@ -4,9 +4,9 @@ import {
   ICON_SIZES,
   Icon,
   iconSize
-} from "./chunks/chunk-YQGNMAJN.js";
-import "./chunks/chunk-5WLOVHKK.js";
+} from "./chunks/chunk-Q52IDAF2.js";
 import "./chunks/chunk-M4DTJDWU.js";
+import "./chunks/chunk-5WLOVHKK.js";
 import "./chunks/chunk-YTHR4Y5P.js";
 import "./chunks/chunk-P3PL4WBO.js";
 export {

package/dist/native/layout/Container.js

@@ -30,6 +30,7 @@ var CONTAINER_PADDING_UNITS = {
   xl: 6
 };
 var CONTAINER_DEFAULT_PADDING = "md";
+var CONTAINER_PADDED_VERTICAL_UNITS = 8;
 var CONTAINER_COMPACT_PADDING_UNITS = 2;
 var CONTAINER_COMPACT_BELOW = 600;
 var isMaxWidthKey = (value) => value in CONTAINER_MAX_WIDTHS;
@@ -42,7 +43,11 @@ function resolveContainerMaxWidth(variant, maxWidth) {
 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];
+  return units ?? CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}
+function containerVerticalUnits(variant, padding, compact) {
+  if (variant !== "padded") return containerPaddingUnits(padding, compact);
+  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;
 }
 
 // src/components/layout/Container/Container.native.tsx
@@ -56,6 +61,7 @@ function containerStyle(theme, a) {
     marginRight: "auto",
     maxWidth: limit === false ? void 0 : CONTAINER_MAX_WIDTHS[limit],
     padding: theme.spacing(containerPaddingUnits(a.padding, compact)),
+    paddingVertical: theme.spacing(containerVerticalUnits(a.variant, a.padding, compact)),
     ...a.variant === "centered" ? { alignItems: "center", justifyContent: "center", minHeight: a.window.height } : null
   };
 }

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

@@ -1 +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":[]}
+{"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  containerVerticalUnits,\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`'s vertical inset\n * and `padding=\"none\"`'s zero come from the same two functions the web reads.\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    paddingVertical: theme.spacing(containerVerticalUnits(a.variant, 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 * `??`, not `||`: `none` is 0, and 0 is falsy. Reading the map with `||` sent\n * `padding=\"none\"` through to the `md` default, so the one value a caller\n * would reach for to remove the inset was the one value that could not.\n * A word outside the vocabulary still reads as the default.\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\n/**\n * What `variant=\"padded\"` paints above and below, in spacing units — the\n * horizontal inset stays whatever `padding` says.\n *\n * The variant used to paint nothing of its own: the web declared these before\n * the `padding` shorthand, which overrode them, and the native half copied the\n * painted result so the two would agree. Now both read this.\n *\n * A `responsive` container under {@link CONTAINER_COMPACT_BELOW} compacts, as\n * every other inset does; a tall vertical inset is the first thing a phone\n * cannot spare.\n */\nexport function containerVerticalUnits(\n  variant: ContainerVariant,\n  padding: ContainerPadding | string,\n  compact: boolean,\n): number {\n  if (variant !== 'padded') return containerPaddingUnits(padding, compact);\n  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;\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;AAGpD,IAAM,kCAAkC;AAGxC,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;AAUO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;AAcO,SAAS,uBACd,SACA,SACA,SACQ;AACR,MAAI,YAAY,SAAU,QAAO,sBAAsB,SAAS,OAAO;AACvE,SAAO,UAAU,kCAAkC;AACrD;;;ADxCM;AA3BC,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,iBAAiB,MAAM,QAAQ,uBAAuB,EAAE,SAAS,EAAE,SAAS,OAAO,CAAC;AAAA,IACpF,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":[]}