@12-apps/ui 6.18.0 → 6.19.0

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

@@ -0,0 +1,293 @@
+import {
+  webAria
+} from "../chunks/chunk-4NK5ZQZ3.js";
+import {
+  Icon
+} from "../chunks/chunk-YQGNMAJN.js";
+import {
+  MUI_FONT_WEIGHT_MEDIUM,
+  MUI_TYPE,
+  muiTypeStyle
+} from "../chunks/chunk-V4DQTC5L.js";
+import "../chunks/chunk-5WLOVHKK.js";
+import {
+  Button
+} from "../chunks/chunk-UKCCYP52.js";
+import "../chunks/chunk-5GJ5OG5R.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/EmptyState/EmptyState.native.tsx
+import * as React from "react";
+import {
+  Linking,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  useWindowDimensions,
+  View
+} from "react-native";
+
+// src/components/data-display/EmptyState/EmptyState.helpers.ts
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;
+var actionsOf = (props, refreshLabel, createLabel) => {
+  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;
+  const specs = [];
+  if (primaryAction) {
+    specs.push({
+      key: "primary-action",
+      variant: "contained",
+      onClick: primaryAction.onClick,
+      label: primaryAction.label
+    });
+  }
+  if (onCreate) {
+    specs.push({
+      key: "create-button",
+      variant: "contained",
+      onClick: onCreate,
+      label: createLabel,
+      icon: "Add"
+    });
+  }
+  if (secondaryAction) {
+    specs.push({
+      key: "secondary-action",
+      variant: "outlined",
+      onClick: secondaryAction.onClick,
+      label: secondaryAction.label
+    });
+  }
+  if (onRefresh) {
+    specs.push({
+      key: "refresh-button",
+      variant: "outlined",
+      onClick: onRefresh,
+      label: refreshLabel,
+      icon: "Refresh"
+    });
+  }
+  return specs;
+};
+
+// src/components/data-display/EmptyState/EmptyState.metrics.ts
+var EMPTY_STATE_PADDING_UNITS = 6;
+var EMPTY_STATE_MIN_HEIGHT = 200;
+var EMPTY_STATE_GAP_UNITS = 3;
+var ILLUSTRATION_MAX_WIDTH = { illustrated: 240, other: 120 };
+var ILLUSTRATION_OPACITY = { minimal: 0.6, other: 0.8 };
+var illustrationMaxWidth = (variant) => variant === "illustrated" ? ILLUSTRATION_MAX_WIDTH.illustrated : ILLUSTRATION_MAX_WIDTH.other;
+var illustrationOpacity = (variant) => variant === "minimal" ? ILLUSTRATION_OPACITY.minimal : ILLUSTRATION_OPACITY.other;
+var CONTENT_GAP_UNITS = 2;
+var TITLE_MAX_WIDTH = 400;
+var DESCRIPTION_MAX_WIDTH = 480;
+var DESCRIPTION_LINE_HEIGHT = 1.6;
+var ACTIONS_MARGIN_TOP_UNITS = 2;
+var ACTIONS_GAP_UNITS = 2;
+var ACTIONS_ROW_FROM = 600;
+var ACTION_MIN_WIDTH = 120;
+var ACTION_BUTTON = {
+  contained: { paddingVertical: 6, paddingHorizontal: 16 },
+  outlined: { paddingVertical: 5, paddingHorizontal: 15 },
+  iconSize: 20,
+  outlinedBorderAlpha: 0.5
+};
+var MUI_CONTAINED_SHADOW = "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)";
+var HELP_LINK_MARGIN_TOP_UNITS = 1;
+var EXTERNAL_LINK_MARK = " \u2197";
+
+// src/components/data-display/EmptyState/EmptyState.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function titleStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "h6"),
+    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,
+    color: theme.palette.text.primary,
+    maxWidth: TITLE_MAX_WIDTH,
+    textAlign: "center"
+  };
+}
+function descriptionStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "body2"),
+    lineHeight: MUI_TYPE.body2.fontSize * DESCRIPTION_LINE_HEIGHT,
+    color: theme.palette.text.secondary,
+    maxWidth: DESCRIPTION_MAX_WIDTH,
+    textAlign: "center"
+  };
+}
+function helpLinkStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "body1"),
+    color: theme.palette.primary.main,
+    textDecorationLine: "none",
+    marginTop: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),
+    textAlign: "center"
+  };
+}
+function illustrationStyle(variant) {
+  return {
+    maxWidth: illustrationMaxWidth(variant),
+    width: "100%",
+    opacity: illustrationOpacity(variant),
+    display: variant === "minimal" ? "none" : "flex"
+  };
+}
+function actionStyle(theme, variant) {
+  const padding = ACTION_BUTTON[variant];
+  return {
+    minWidth: ACTION_MIN_WIDTH,
+    borderRadius: theme.radius.md,
+    paddingVertical: padding.paddingVertical,
+    paddingHorizontal: padding.paddingHorizontal,
+    ...variant === "contained" ? { boxShadow: MUI_CONTAINED_SHADOW, overflow: "visible" } : { borderColor: alpha(theme.palette.primary.main, ACTION_BUTTON.outlinedBorderAlpha) }
+  };
+}
+var actionsDirection = (windowWidth) => windowWidth >= ACTIONS_ROW_FROM ? "row" : "column";
+function anchorProps(href, external) {
+  if (Platform.OS !== "web") return {};
+  return { href, hrefAttrs: external ? { target: "_blank", rel: "noopener noreferrer" } : void 0 };
+}
+function ActionButton({ spec, testID }) {
+  const theme = useUiTheme();
+  const contained = spec.variant === "contained";
+  const glyph = spec.icon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: spec.icon,
+      size: ACTION_BUTTON.iconSize,
+      color: contained ? theme.palette.primary.contrastText : "primary"
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: contained ? "solid" : "outline",
+      color: "primary",
+      size: "sm",
+      icon: glyph,
+      onClick: spec.onClick,
+      testID,
+      style: actionStyle(theme, spec.variant),
+      children: spec.label
+    }
+  );
+}
+function Actions({ specs, testId }) {
+  const theme = useUiTheme();
+  const { width } = useWindowDimensions();
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.actions,
+        {
+          flexDirection: actionsDirection(width),
+          gap: theme.spacing(ACTIONS_GAP_UNITS),
+          marginTop: theme.spacing(ACTIONS_MARGIN_TOP_UNITS)
+        }
+      ],
+      children: specs.map((spec) => /* @__PURE__ */ jsx(ActionButton, { spec, testID: testId(spec.key) }, spec.key))
+    }
+  );
+}
+function HelpLink({ helpLink, testId }) {
+  const theme = useUiTheme();
+  const external = helpLink.external === true;
+  const open = Platform.OS === "web" ? void 0 : () => void Linking.openURL(helpLink.href);
+  return /* @__PURE__ */ jsxs(RNText, { role: "link", testID: testId, style: helpLinkStyle(theme), onPress: open, ...anchorProps(helpLink.href, external), children: [
+    helpLink.label,
+    external ? EXTERNAL_LINK_MARK : null
+  ] });
+}
+function Content({ title, description, titleId, testId, actions, showActions, helpLink }) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(View, { style: [styles.content, { gap: theme.spacing(CONTENT_GAP_UNITS) }], children: [
+    /* @__PURE__ */ jsx(RNText, { id: titleId, role: "heading", ...webAria({ "aria-level": 3 }), testID: testId("title"), style: titleStyle(theme), children: title }),
+    description ? /* @__PURE__ */ jsx(RNText, { testID: testId("description"), style: descriptionStyle(theme), children: description }) : null,
+    showActions ? /* @__PURE__ */ jsx(Actions, { specs: actions, testId }) : null,
+    helpLink ? /* @__PURE__ */ jsx(HelpLink, { helpLink, testId: testId("help-link") }) : null
+  ] });
+}
+var EmptyState = React.memo(function EmptyState2(props) {
+  const {
+    variant = "default",
+    title,
+    description,
+    illustration,
+    helpLink,
+    refreshLabel = "Refresh",
+    createLabel = "Create New",
+    primaryAction: _primary,
+    secondaryAction: _secondary,
+    onCreate: _onCreate,
+    onRefresh: _onRefresh,
+    style,
+    ...others
+  } = props;
+  const theme = useUiTheme();
+  const titleId = React.useId();
+  const dataTestId = resolveTestId(others);
+  const testId = makeTestId(dataTestId);
+  const rest = withoutTestIdProps(others);
+  const actions = actionsOf(props, refreshLabel, createLabel);
+  const showActions = variant === "action" || actions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      testID: dataTestId || "empty-state",
+      style: [
+        styles.root,
+        {
+          padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),
+          minHeight: EMPTY_STATE_MIN_HEIGHT,
+          gap: theme.spacing(EMPTY_STATE_GAP_UNITS)
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        illustration ? /* @__PURE__ */ jsx(View, { testID: testId("icon"), style: illustrationStyle(variant), children: illustration }) : null,
+        /* @__PURE__ */ jsx(
+          Content,
+          {
+            title,
+            description,
+            titleId,
+            testId,
+            actions,
+            showActions,
+            helpLink
+          }
+        )
+      ]
+    }
+  );
+});
+EmptyState.displayName = "EmptyState";
+var styles = StyleSheet.create({
+  root: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  content: {
+    alignItems: "center"
+  },
+  actions: {
+    alignItems: "center"
+  }
+});
+export {
+  EmptyState
+};
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-display/EmptyState/EmptyState.native.tsx","../../../src/components/data-display/EmptyState/EmptyState.helpers.ts","../../../src/components/data-display/EmptyState/EmptyState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Linking,\n  Platform,\n  StyleSheet,\n  Text as RNText,\n  useWindowDimensions,\n  View,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { type ActionSpec, actionsOf, makeTestId } from './EmptyState.helpers';\nimport {\n  ACTION_BUTTON,\n  ACTION_MIN_WIDTH,\n  ACTIONS_GAP_UNITS,\n  ACTIONS_MARGIN_TOP_UNITS,\n  ACTIONS_ROW_FROM,\n  CONTENT_GAP_UNITS,\n  DESCRIPTION_LINE_HEIGHT,\n  DESCRIPTION_MAX_WIDTH,\n  EMPTY_STATE_GAP_UNITS,\n  EMPTY_STATE_MIN_HEIGHT,\n  EMPTY_STATE_PADDING_UNITS,\n  EXTERNAL_LINK_MARK,\n  HELP_LINK_MARGIN_TOP_UNITS,\n  illustrationMaxWidth,\n  illustrationOpacity,\n  MUI_CONTAINED_SHADOW,\n  TITLE_MAX_WIDTH,\n} from './EmptyState.metrics';\nimport type { EmptyStateHelpLink, EmptyStateProps, EmptyStateVariant } from './EmptyState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink, wrapping at 400px. */\nexport function titleStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'h6'),\n    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n    color: theme.palette.text.primary,\n    maxWidth: TITLE_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** MUI's `body2` on a 1.6 line height, muted, wrapping at 480px. */\nexport function descriptionStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body2'),\n    lineHeight: MUI_TYPE.body2.fontSize * DESCRIPTION_LINE_HEIGHT,\n    color: theme.palette.text.secondary,\n    maxWidth: DESCRIPTION_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** The web `Link` inherits the page's `body1`; primary ink, no underline until hovered. */\nexport function helpLinkStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body1'),\n    color: theme.palette.primary.main,\n    textDecorationLine: 'none',\n    marginTop: theme.spacing(HELP_LINK_MARGIN_TOP_UNITS),\n    textAlign: 'center',\n  };\n}\n\nexport function illustrationStyle(variant: EmptyStateVariant): ViewStyle {\n  return {\n    maxWidth: illustrationMaxWidth(variant),\n    width: '100%',\n    opacity: illustrationOpacity(variant),\n    display: variant === 'minimal' ? 'none' : 'flex',\n  };\n}\n\n/**\n * The web actions are MUI's medium contained/outlined buttons; the house\n * `Button` is sized to them here. The shadow needs the button's overflow\n * visible — a view clips its own shadow otherwise.\n */\nexport function actionStyle(theme: UiTheme, variant: ActionSpec['variant']): ViewStyle {\n  const padding = ACTION_BUTTON[variant];\n  return {\n    minWidth: ACTION_MIN_WIDTH,\n    borderRadius: theme.radius.md,\n    paddingVertical: padding.paddingVertical,\n    paddingHorizontal: padding.paddingHorizontal,\n    ...(variant === 'contained'\n      ? { boxShadow: MUI_CONTAINED_SHADOW, overflow: 'visible' }\n      : { borderColor: alpha(theme.palette.primary.main, ACTION_BUTTON.outlinedBorderAlpha) }),\n  };\n}\n\n/** MUI's `sm` breakpoint decides the action row's axis: a row from 600px up, a column below. */\nexport const actionsDirection = (windowWidth: number): 'row' | 'column' =>\n  windowWidth >= ACTIONS_ROW_FROM ? 'row' : 'column';\n\n/** react-native-web's anchor props for a `Text`, which React Native's `TextProps` do not declare. */\nfunction anchorProps(href: string, external: boolean): object {\n  if (Platform.OS !== 'web') return {};\n  return { href, hrefAttrs: external ? { target: '_blank', rel: 'noopener noreferrer' } : undefined };\n}\n\nfunction ActionButton({ spec, testID }: { spec: ActionSpec; testID: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  const contained = spec.variant === 'contained';\n  const glyph = spec.icon ? (\n    <Icon\n      name={spec.icon}\n      size={ACTION_BUTTON.iconSize}\n      color={contained ? theme.palette.primary.contrastText : 'primary'}\n    />\n  ) : undefined;\n  return (\n    <Button\n      variant={contained ? 'solid' : 'outline'}\n      color=\"primary\"\n      size=\"sm\"\n      icon={glyph}\n      onClick={spec.onClick}\n      testID={testID}\n      style={actionStyle(theme, spec.variant)}\n    >\n      {spec.label}\n    </Button>\n  );\n}\n\nfunction Actions({ specs, testId }: { specs: ActionSpec[]; testId: (suffix: string) => string }): React.JSX.Element {\n  const theme = useUiTheme();\n  const { width } = useWindowDimensions();\n  return (\n    <View\n      style={[\n        styles.actions,\n        {\n          flexDirection: actionsDirection(width),\n          gap: theme.spacing(ACTIONS_GAP_UNITS),\n          marginTop: theme.spacing(ACTIONS_MARGIN_TOP_UNITS),\n        },\n      ]}\n    >\n      {specs.map((spec) => (\n        <ActionButton key={spec.key} spec={spec} testID={testId(spec.key)} />\n      ))}\n    </View>\n  );\n}\n\nfunction HelpLink({ helpLink, testId }: { helpLink: EmptyStateHelpLink; testId: string }): React.JSX.Element {\n  const theme = useUiTheme();\n  const external = helpLink.external === true;\n  // On the web the anchor navigates by itself; a device has no anchor and opens the URL.\n  const open = Platform.OS === 'web' ? undefined : () => void Linking.openURL(helpLink.href);\n  return (\n    <RNText role=\"link\" testID={testId} style={helpLinkStyle(theme)} onPress={open} {...anchorProps(helpLink.href, external)}>\n      {helpLink.label}\n      {external ? EXTERNAL_LINK_MARK : null}\n    </RNText>\n  );\n}\n\ninterface ContentProps {\n  title: string;\n  description?: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n  actions: ActionSpec[];\n  showActions: boolean;\n  helpLink?: EmptyStateHelpLink;\n}\n\nfunction Content({ title, description, titleId, testId, actions, showActions, helpLink }: ContentProps): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View style={[styles.content, { gap: theme.spacing(CONTENT_GAP_UNITS) }]}>\n      <RNText id={titleId} role=\"heading\" {...webAria({ 'aria-level': 3 })} testID={testId('title')} style={titleStyle(theme)}>\n        {title}\n      </RNText>\n\n      {description ? (\n        <RNText testID={testId('description')} style={descriptionStyle(theme)}>\n          {description}\n        </RNText>\n      ) : null}\n\n      {showActions ? <Actions specs={actions} testId={testId} /> : null}\n\n      {helpLink ? <HelpLink helpLink={helpLink} testId={testId('help-link')} /> : null}\n    </View>\n  );\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = React.memo(function EmptyState(props) {\n  const {\n    variant = 'default',\n    title,\n    description,\n    illustration,\n    helpLink,\n    refreshLabel = 'Refresh',\n    createLabel = 'Create New',\n    primaryAction: _primary,\n    secondaryAction: _secondary,\n    onCreate: _onCreate,\n    onRefresh: _onRefresh,\n    style,\n    ...others\n  } = props;\n  const theme = useUiTheme();\n  const titleId = React.useId();\n  const dataTestId = resolveTestId(others);\n  const testId = makeTestId(dataTestId);\n  const rest = withoutTestIdProps(others);\n\n  const actions = actionsOf(props, refreshLabel, createLabel);\n  // The `action` variant reserves the action row even when nothing fills it.\n  const showActions = variant === 'action' || actions.length > 0;\n\n  return (\n    <View\n      role=\"region\"\n      aria-labelledby={titleId}\n      testID={dataTestId || 'empty-state'}\n      style={[\n        styles.root,\n        {\n          padding: theme.spacing(EMPTY_STATE_PADDING_UNITS),\n          minHeight: EMPTY_STATE_MIN_HEIGHT,\n          gap: theme.spacing(EMPTY_STATE_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      {illustration ? (\n        <View testID={testId('icon')} style={illustrationStyle(variant)}>\n          {illustration}\n        </View>\n      ) : null}\n\n      <Content\n        title={title}\n        description={description}\n        titleId={titleId}\n        testId={testId}\n        actions={actions}\n        showActions={showActions}\n        helpLink={helpLink}\n      />\n    </View>\n  );\n});\n\nEmptyState.displayName = 'EmptyState';\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  content: {\n    alignItems: 'center',\n  },\n  actions: {\n    alignItems: 'center',\n  },\n});\n","import type { EmptyStateBaseProps } from './EmptyState.base';\n\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;\n\n/** The glyph an action carries, by the shared icon set's name; each renderer draws it its own way. */\nexport type ActionIconName = 'Add' | 'Refresh';\n\nexport interface ActionSpec {\n  key: 'primary-action' | 'create-button' | 'secondary-action' | 'refresh-button';\n  variant: 'contained' | 'outlined';\n  onClick: () => void;\n  label: string;\n  icon?: ActionIconName;\n}\n\n// The four buttons are one button with different props. Listing them keeps their\n// order — primary, create, secondary, refresh — visible in one place, and both\n// renderers read this one list.\nexport const actionsOf = (\n  props: EmptyStateBaseProps,\n  refreshLabel: string,\n  createLabel: string,\n): ActionSpec[] => {\n  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;\n  const specs: ActionSpec[] = [];\n\n  if (primaryAction) {\n    specs.push({\n      key: 'primary-action',\n      variant: 'contained',\n      onClick: primaryAction.onClick,\n      label: primaryAction.label,\n    });\n  }\n  if (onCreate) {\n    specs.push({\n      key: 'create-button',\n      variant: 'contained',\n      onClick: onCreate,\n      label: createLabel,\n      icon: 'Add',\n    });\n  }\n  if (secondaryAction) {\n    specs.push({\n      key: 'secondary-action',\n      variant: 'outlined',\n      onClick: secondaryAction.onClick,\n      label: secondaryAction.label,\n    });\n  }\n  if (onRefresh) {\n    specs.push({\n      key: 'refresh-button',\n      variant: 'outlined',\n      onClick: onRefresh,\n      label: refreshLabel,\n      icon: 'Refresh',\n    });\n  }\n\n  return specs;\n};\n","import type { EmptyStateVariant } from './EmptyState.base';\n\n/**\n * THE NUMBERS BOTH `EmptyState` RENDERERS DRAW WITH.\n *\n * `EmptyState.tsx` (MUI) and `EmptyState.native.tsx` (React Native) read\n * this one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 24px apart. */\nexport const EMPTY_STATE_PADDING_UNITS = 6;\nexport const EMPTY_STATE_MIN_HEIGHT = 200;\nexport const EMPTY_STATE_GAP_UNITS = 3;\n\n/** The illustration: wider when it is the point, faded a little always, hidden in `minimal`. */\nexport const ILLUSTRATION_MAX_WIDTH = { illustrated: 240, other: 120 } as const;\nexport const ILLUSTRATION_OPACITY = { minimal: 0.6, other: 0.8 } as const;\n\nexport const illustrationMaxWidth = (variant: EmptyStateVariant): number =>\n  variant === 'illustrated' ? ILLUSTRATION_MAX_WIDTH.illustrated : ILLUSTRATION_MAX_WIDTH.other;\nexport const illustrationOpacity = (variant: EmptyStateVariant): number =>\n  variant === 'minimal' ? ILLUSTRATION_OPACITY.minimal : ILLUSTRATION_OPACITY.other;\n\n/** Title, description, actions and link are 16px apart; the title wraps at 400px, the description at 480px on a 1.6 line height. */\nexport const CONTENT_GAP_UNITS = 2;\nexport const TITLE_MAX_WIDTH = 400;\nexport const DESCRIPTION_MAX_WIDTH = 480;\nexport const DESCRIPTION_LINE_HEIGHT = 1.6;\n\n/** The action row: 16px below the text, buttons 16px apart, stacked below MUI's `sm` breakpoint. */\nexport const ACTIONS_MARGIN_TOP_UNITS = 2;\nexport const ACTIONS_GAP_UNITS = 2;\nexport const ACTIONS_ROW_FROM = 600;\nexport const ACTION_MIN_WIDTH = 120;\n/**\n * The web actions ARE MUI's medium `contained` and `outlined` buttons: 6px\n * 16px, or 5px 15px inside a 1px border at half alpha, 14px type, the\n * theme's radius, a 20px start icon. The native side sizes the house\n * `Button` to these.\n */\nexport const ACTION_BUTTON = {\n  contained: { paddingVertical: 6, paddingHorizontal: 16 },\n  outlined: { paddingVertical: 5, paddingHorizontal: 15 },\n  iconSize: 20,\n  outlinedBorderAlpha: 0.5,\n} as const;\n/** MUI's `theme.shadows[2]`, the elevation a contained button rests at. */\nexport const MUI_CONTAINED_SHADOW =\n  '0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)';\n\n/** The help link: 8px below whatever precedes it, marked when it leaves the app. */\nexport const HELP_LINK_MARGIN_TOP_UNITS = 1;\nexport const EXTERNAL_LINK_MARK = ' ↗';\n"],"mappings":"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","names":["EmptyState"]}

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

@@ -0,0 +1,188 @@
+import {
+  webAria
+} from "../chunks/chunk-4NK5ZQZ3.js";
+import {
+  Icon
+} from "../chunks/chunk-YQGNMAJN.js";
+import {
+  MUI_FONT_WEIGHT_MEDIUM,
+  MUI_TYPE,
+  muiTypeStyle
+} from "../chunks/chunk-V4DQTC5L.js";
+import "../chunks/chunk-5WLOVHKK.js";
+import {
+  Button
+} from "../chunks/chunk-UKCCYP52.js";
+import "../chunks/chunk-5GJ5OG5R.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/data-display/ErrorState/ErrorState.native.tsx
+import * as React from "react";
+import { StyleSheet, Text as RNText, View } from "react-native";
+
+// src/components/data-display/ErrorState/ErrorState.metrics.ts
+var ERROR_STATE_PADDING_UNITS = 6;
+var ERROR_STATE_MIN_HEIGHT = 200;
+var ERROR_STATE_GAP_UNITS = 2;
+var ERROR_ICON_BOX = 80;
+var ERROR_ICON_BOX_OPACITY = 0.9;
+var ERROR_ICON_SIZE = 48;
+var ERROR_TEXT_GAP_UNITS = 1;
+var ERROR_MESSAGE_MAX_WIDTH = 400;
+var ERROR_MESSAGE_LINE_HEIGHT = 1.6;
+var RETRY_MARGIN_TOP_UNITS = 1;
+var RETRY_MIN_WIDTH = 120;
+var RETRY_BUTTON = {
+  paddingVertical: 5,
+  paddingHorizontal: 15,
+  iconSize: 20
+};
+function errorStatePalette(theme, severity) {
+  return severity === "error" ? theme.palette.danger : theme.palette.warning;
+}
+
+// src/components/data-display/ErrorState/ErrorState.native.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;
+function titleStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "h6"),
+    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,
+    color: theme.palette.text.primary,
+    textAlign: "center"
+  };
+}
+function messageStyle(theme) {
+  return {
+    ...muiTypeStyle(theme, "body2"),
+    lineHeight: MUI_TYPE.body2.fontSize * ERROR_MESSAGE_LINE_HEIGHT,
+    color: theme.palette.text.secondary,
+    maxWidth: ERROR_MESSAGE_MAX_WIDTH,
+    textAlign: "center"
+  };
+}
+function iconBoxStyle(theme, severity) {
+  return {
+    width: ERROR_ICON_BOX,
+    height: ERROR_ICON_BOX,
+    borderRadius: ERROR_ICON_BOX / 2,
+    backgroundColor: errorStatePalette(theme, severity).light,
+    opacity: ERROR_ICON_BOX_OPACITY,
+    alignItems: "center",
+    justifyContent: "center"
+  };
+}
+function retryStyle(theme) {
+  return {
+    marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),
+    minWidth: RETRY_MIN_WIDTH,
+    paddingVertical: RETRY_BUTTON.paddingVertical,
+    paddingHorizontal: RETRY_BUTTON.paddingHorizontal,
+    borderRadius: theme.radius.md
+  };
+}
+function ErrorIcon({
+  severity,
+  icon,
+  testId
+}) {
+  const theme = useUiTheme();
+  const glyph = severity === "error" ? "ErrorOutline" : "WarningAmber";
+  return /* @__PURE__ */ jsx(View, { testID: testId, style: iconBoxStyle(theme, severity), children: icon || /* @__PURE__ */ jsx(Icon, { name: glyph, size: ERROR_ICON_SIZE, color: errorStatePalette(theme, severity).main }) });
+}
+function ErrorText({
+  title,
+  message,
+  titleId,
+  testId
+}) {
+  const theme = useUiTheme();
+  return /* @__PURE__ */ jsxs(View, { style: [styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }], children: [
+    title ? /* @__PURE__ */ jsx(
+      RNText,
+      {
+        id: titleId,
+        role: "heading",
+        ...webAria({ "aria-level": 3 }),
+        testID: testId("title"),
+        style: titleStyle(theme),
+        children: title
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(RNText, { id: `${titleId}-message`, testID: testId("message"), style: messageStyle(theme), children: message })
+  ] });
+}
+var ErrorState = React.memo(function ErrorState2(props) {
+  const {
+    message,
+    title,
+    onRetry,
+    retryLabel = "Retry",
+    severity = "error",
+    icon,
+    style,
+    ...others
+  } = props;
+  const theme = useUiTheme();
+  const titleId = React.useId();
+  const dataTestId = resolveTestId(others);
+  const testId = makeTestId(dataTestId);
+  const rest = withoutTestIdProps(others);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "alert",
+      "aria-labelledby": title ? titleId : void 0,
+      ...webAria({ "aria-describedby": `${titleId}-message` }),
+      testID: dataTestId || "error-state",
+      style: [
+        styles.root,
+        {
+          padding: theme.spacing(ERROR_STATE_PADDING_UNITS),
+          minHeight: ERROR_STATE_MIN_HEIGHT,
+          gap: theme.spacing(ERROR_STATE_GAP_UNITS)
+        },
+        style
+      ],
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ErrorIcon, { severity, icon, testId: testId("icon") }),
+        /* @__PURE__ */ jsx(ErrorText, { title, message, titleId, testId }),
+        onRetry ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            color: severity === "error" ? "danger" : "warning",
+            size: "sm",
+            icon: /* @__PURE__ */ jsx(Icon, { name: "Refresh", size: RETRY_BUTTON.iconSize, color: severity === "error" ? "danger" : "warning" }),
+            onClick: onRetry,
+            testID: testId("retry-button"),
+            style: retryStyle(theme),
+            children: retryLabel
+          }
+        ) : null
+      ]
+    }
+  );
+});
+ErrorState.displayName = "ErrorState";
+var styles = StyleSheet.create({
+  root: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  text: {
+    alignItems: "center"
+  }
+});
+export {
+  ErrorState
+};
+//# sourceMappingURL=ErrorState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-display/ErrorState/ErrorState.native.tsx","../../../src/components/data-display/ErrorState/ErrorState.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { StyleSheet, Text as RNText, View, type TextStyle, type ViewStyle } from 'react-native';\n\nimport {\n  ERROR_ICON_BOX,\n  ERROR_ICON_BOX_OPACITY,\n  ERROR_ICON_SIZE,\n  ERROR_MESSAGE_LINE_HEIGHT,\n  ERROR_MESSAGE_MAX_WIDTH,\n  ERROR_STATE_GAP_UNITS,\n  ERROR_STATE_MIN_HEIGHT,\n  ERROR_STATE_PADDING_UNITS,\n  ERROR_TEXT_GAP_UNITS,\n  RETRY_BUTTON,\n  RETRY_MARGIN_TOP_UNITS,\n  RETRY_MIN_WIDTH,\n  errorStatePalette,\n} from './ErrorState.metrics';\nimport type { ErrorStateProps, ErrorStateSeverity } from './ErrorState.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { MUI_FONT_WEIGHT_MEDIUM, MUI_TYPE, muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { Button } from '../../form/Button/Button.native';\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `error-state-${suffix}`;\n\n/** MUI's `h6` as an `h3`, medium weight, in the body ink — what the web `Typography` renders. */\nexport function titleStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'h6'),\n    fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}`,\n    color: theme.palette.text.primary,\n    textAlign: 'center',\n  };\n}\n\n/** MUI's `body2` on a 1.6 line height, muted, wrapping at 400px. */\nexport function messageStyle(theme: UiTheme): TextStyle {\n  return {\n    ...muiTypeStyle(theme, 'body2'),\n    lineHeight: MUI_TYPE.body2.fontSize * ERROR_MESSAGE_LINE_HEIGHT,\n    color: theme.palette.text.secondary,\n    maxWidth: ERROR_MESSAGE_MAX_WIDTH,\n    textAlign: 'center',\n  };\n}\n\n/** The 80px disc behind the glyph, in the severity's `light` shade. */\nexport function iconBoxStyle(theme: UiTheme, severity: ErrorStateSeverity): ViewStyle {\n  return {\n    width: ERROR_ICON_BOX,\n    height: ERROR_ICON_BOX,\n    borderRadius: ERROR_ICON_BOX / 2,\n    backgroundColor: errorStatePalette(theme, severity).light,\n    opacity: ERROR_ICON_BOX_OPACITY,\n    alignItems: 'center',\n    justifyContent: 'center',\n  };\n}\n\n/** The web retry is MUI's medium outlined button; the house `Button` is sized to it here. */\nexport function retryStyle(theme: UiTheme): ViewStyle {\n  return {\n    marginTop: theme.spacing(RETRY_MARGIN_TOP_UNITS),\n    minWidth: RETRY_MIN_WIDTH,\n    paddingVertical: RETRY_BUTTON.paddingVertical,\n    paddingHorizontal: RETRY_BUTTON.paddingHorizontal,\n    borderRadius: theme.radius.md,\n  };\n}\n\nfunction ErrorIcon({\n  severity,\n  icon,\n  testId,\n}: {\n  severity: ErrorStateSeverity;\n  icon?: React.ReactNode;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  const glyph = severity === 'error' ? 'ErrorOutline' : 'WarningAmber';\n  return (\n    <View testID={testId} style={iconBoxStyle(theme, severity)}>\n      {icon || <Icon name={glyph} size={ERROR_ICON_SIZE} color={errorStatePalette(theme, severity).main} />}\n    </View>\n  );\n}\n\nfunction ErrorText({\n  title,\n  message,\n  titleId,\n  testId,\n}: {\n  title?: string;\n  message: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n}): React.JSX.Element {\n  const theme = useUiTheme();\n  return (\n    <View style={[styles.text, { gap: theme.spacing(ERROR_TEXT_GAP_UNITS) }]}>\n      {title ? (\n        <RNText\n          id={titleId}\n          role=\"heading\"\n          {...webAria({ 'aria-level': 3 })}\n          testID={testId('title')}\n          style={titleStyle(theme)}\n        >\n          {title}\n        </RNText>\n      ) : null}\n      <RNText id={`${titleId}-message`} testID={testId('message')} style={messageStyle(theme)}>\n        {message}\n      </RNText>\n    </View>\n  );\n}\n\nexport const ErrorState: React.FC<ErrorStateProps> = React.memo(function ErrorState(props) {\n  const {\n    message,\n    title,\n    onRetry,\n    retryLabel = 'Retry',\n    severity = 'error',\n    icon,\n    style,\n    ...others\n  } = props;\n  const theme = useUiTheme();\n  const titleId = React.useId();\n  const dataTestId = resolveTestId(others);\n  const testId = makeTestId(dataTestId);\n  const rest = withoutTestIdProps(others);\n\n  return (\n    <View\n      role=\"alert\"\n      aria-labelledby={title ? titleId : undefined}\n      {...webAria({ 'aria-describedby': `${titleId}-message` })}\n      testID={dataTestId || 'error-state'}\n      style={[\n        styles.root,\n        {\n          padding: theme.spacing(ERROR_STATE_PADDING_UNITS),\n          minHeight: ERROR_STATE_MIN_HEIGHT,\n          gap: theme.spacing(ERROR_STATE_GAP_UNITS),\n        },\n        style,\n      ]}\n      {...rest}\n    >\n      <ErrorIcon severity={severity} icon={icon} testId={testId('icon')} />\n\n      <ErrorText title={title} message={message} titleId={titleId} testId={testId} />\n\n      {onRetry ? (\n        <Button\n          variant=\"outline\"\n          color={severity === 'error' ? 'danger' : 'warning'}\n          size=\"sm\"\n          icon={<Icon name=\"Refresh\" size={RETRY_BUTTON.iconSize} color={severity === 'error' ? 'danger' : 'warning'} />}\n          onClick={onRetry}\n          testID={testId('retry-button')}\n          style={retryStyle(theme)}\n        >\n          {retryLabel}\n        </Button>\n      ) : null}\n    </View>\n  );\n});\n\nErrorState.displayName = 'ErrorState';\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  text: {\n    alignItems: 'center',\n  },\n});\n","import type { ErrorStateSeverity } from './ErrorState.base';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `ErrorState` RENDERERS DRAW WITH.\n *\n * `ErrorState.tsx` (MUI) and `ErrorState.native.tsx` (React Native) read this\n * one table. Spacing is in SPACING UNITS where the web writes\n * `theme.spacing(n)`; everything else is px or a ratio.\n */\n\n/** The region: a centred column, `theme.spacing(6)` of padding, at least 200px tall, its parts 16px apart. */\nexport const ERROR_STATE_PADDING_UNITS = 6;\nexport const ERROR_STATE_MIN_HEIGHT = 200;\nexport const ERROR_STATE_GAP_UNITS = 2;\n\n/** The glyph sits in an 80px disc of the severity's `light` shade at 0.9 opacity. */\nexport const ERROR_ICON_BOX = 80;\nexport const ERROR_ICON_BOX_OPACITY = 0.9;\nexport const ERROR_ICON_SIZE = 48;\n\n/** Title and message are 8px apart; the message wraps at 400px on a 1.6 line height. */\nexport const ERROR_TEXT_GAP_UNITS = 1;\nexport const ERROR_MESSAGE_MAX_WIDTH = 400;\nexport const ERROR_MESSAGE_LINE_HEIGHT = 1.6;\n\n/** The retry button: 8px below the text, no narrower than 120px. */\nexport const RETRY_MARGIN_TOP_UNITS = 1;\nexport const RETRY_MIN_WIDTH = 120;\n/**\n * The web retry IS MUI's medium outlined `Button`: 5px 15px inside its 1px\n * border, 14px type, the theme's radius, a 20px start icon. The native side\n * sizes the house `Button` to these.\n */\nexport const RETRY_BUTTON = {\n  paddingVertical: 5,\n  paddingHorizontal: 15,\n  iconSize: 20,\n} as const;\n\n/** `error` is MUI's name for the `danger` slot; `warning` is its own. */\nexport function errorStatePalette(theme: UiTheme, severity: ErrorStateSeverity): UiPaletteColor {\n  return severity === 'error' ? theme.palette.danger : theme.palette.warning;\n}\n"],"mappings":"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","names":["ErrorState"]}