@12-apps/ui 6.17.1 → 6.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.17.1",
+  "version": "6.19.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -41,6 +41,10 @@
       "default": "./dist/utils.js"
     },
     "./tokens": {
+      "react-native": {
+        "types": "./dist/types-native/tokens/index.native.d.ts",
+        "default": "./dist/native/tokens.js"
+      },
       "types": "./dist/types/tokens/scales.d.ts",
       "default": "./dist/tokens.js"
     },
@@ -48,6 +52,22 @@
       "types": "./dist/types/tokens/layers.d.ts",
       "default": "./dist/tokens/layers.js"
     },
+    "./provider": {
+      "react-native": {
+        "types": "./dist/types-native/provider/index.native.d.ts",
+        "default": "./dist/native/provider.js"
+      },
+      "types": "./dist/types/provider/index.d.ts",
+      "default": "./dist/provider.js"
+    },
+    "./icons": {
+      "react-native": {
+        "types": "./dist/types-native/icons/index.native.d.ts",
+        "default": "./dist/native/icons.js"
+      },
+      "types": "./dist/types/icons/index.d.ts",
+      "default": "./dist/icons.js"
+    },
     "./mui/Box": {
       "types": "./dist/types/mui/Box.d.ts",
       "default": "./dist/mui/Box.js"
@@ -117,6 +137,10 @@
       "default": "./dist/mui/ListItemText.js"
     },
     "./data-display/Alert": {
+      "react-native": {
+        "types": "./dist/types-native/components/data-display/Alert/index.native.d.ts",
+        "default": "./dist/native/data-display/Alert.js"
+      },
       "types": "./dist/types/components/data-display/Alert/index.d.ts",
       "default": "./dist/data-display/Alert.js"
     },
@@ -161,6 +185,10 @@
       "default": "./dist/data-display/DescriptionItem.js"
     },
     "./data-display/EmptyState": {
+      "react-native": {
+        "types": "./dist/types-native/components/data-display/EmptyState/index.native.d.ts",
+        "default": "./dist/native/data-display/EmptyState.js"
+      },
       "types": "./dist/types/components/data-display/EmptyState/index.d.ts",
       "default": "./dist/data-display/EmptyState.js"
     },
@@ -229,10 +257,18 @@
       "default": "./dist/data-display/AsyncStateContainer.js"
     },
     "./data-display/ErrorState": {
+      "react-native": {
+        "types": "./dist/types-native/components/data-display/ErrorState/index.native.d.ts",
+        "default": "./dist/native/data-display/ErrorState.js"
+      },
       "types": "./dist/types/components/data-display/ErrorState/index.d.ts",
       "default": "./dist/data-display/ErrorState.js"
     },
     "./data-display/LoadingState": {
+      "react-native": {
+        "types": "./dist/types-native/components/data-display/LoadingState/index.native.d.ts",
+        "default": "./dist/native/data-display/LoadingState.js"
+      },
       "types": "./dist/types/components/data-display/LoadingState/index.d.ts",
       "default": "./dist/data-display/LoadingState.js"
     },
@@ -273,6 +309,10 @@
       "default": "./dist/form/Autocomplete.js"
     },
     "./form/Button": {
+      "react-native": {
+        "types": "./dist/types-native/components/form/Button/index.native.d.ts",
+        "default": "./dist/native/form/Button.js"
+      },
       "types": "./dist/types/components/form/Button/index.d.ts",
       "default": "./dist/form/Button.js"
     },
@@ -392,6 +432,14 @@
       "types": "./dist/types/components/layout/Accordion/index.d.ts",
       "default": "./dist/layout/Accordion.js"
     },
+    "./layout/Box": {
+      "react-native": {
+        "types": "./dist/types-native/components/layout/Box/index.native.d.ts",
+        "default": "./dist/native/layout/Box.js"
+      },
+      "types": "./dist/types/components/layout/Box/index.d.ts",
+      "default": "./dist/layout/Box.js"
+    },
     "./layout/Card": {
       "types": "./dist/types/components/layout/Card/index.d.ts",
       "default": "./dist/layout/Card.js"
@@ -405,6 +453,10 @@
       "default": "./dist/layout/Collapsible.js"
     },
     "./layout/Container": {
+      "react-native": {
+        "types": "./dist/types-native/components/layout/Container/index.native.d.ts",
+        "default": "./dist/native/layout/Container.js"
+      },
       "types": "./dist/types/components/layout/Container/index.d.ts",
       "default": "./dist/layout/Container.js"
     },
@@ -445,9 +497,21 @@
       "default": "./dist/layout/Skeleton.js"
     },
     "./layout/Spacer": {
+      "react-native": {
+        "types": "./dist/types-native/components/layout/Spacer/index.native.d.ts",
+        "default": "./dist/native/layout/Spacer.js"
+      },
       "types": "./dist/types/components/layout/Spacer/index.d.ts",
       "default": "./dist/layout/Spacer.js"
     },
+    "./layout/Stack": {
+      "react-native": {
+        "types": "./dist/types-native/components/layout/Stack/index.native.d.ts",
+        "default": "./dist/native/layout/Stack.js"
+      },
+      "types": "./dist/types/components/layout/Stack/index.d.ts",
+      "default": "./dist/layout/Stack.js"
+    },
     "./layout/TableFilter": {
       "types": "./dist/types/components/layout/TableFilter/index.d.ts",
       "default": "./dist/layout/TableFilter.js"
@@ -493,14 +557,26 @@
       "default": "./dist/typography/Code.js"
     },
     "./typography/Heading": {
+      "react-native": {
+        "types": "./dist/types-native/components/typography/Heading/index.native.d.ts",
+        "default": "./dist/native/typography/Heading.js"
+      },
       "types": "./dist/types/components/typography/Heading/index.d.ts",
       "default": "./dist/typography/Heading.js"
     },
     "./typography/Paragraph": {
+      "react-native": {
+        "types": "./dist/types-native/components/typography/Paragraph/index.native.d.ts",
+        "default": "./dist/native/typography/Paragraph.js"
+      },
       "types": "./dist/types/components/typography/Paragraph/index.d.ts",
       "default": "./dist/typography/Paragraph.js"
     },
     "./typography/Text": {
+      "react-native": {
+        "types": "./dist/types-native/components/typography/Text/index.native.d.ts",
+        "default": "./dist/native/typography/Text.js"
+      },
       "types": "./dist/types/components/typography/Text/index.d.ts",
       "default": "./dist/typography/Text.js"
     },
@@ -595,11 +671,11 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "storybook dev -p 6006",
-    "build": "tsup && pnpm build:types && pnpm exports:check",
+    "build": "tsup && tsup --config tsup.native.config.ts && pnpm build:types && pnpm build:types:native && pnpm exports:check",
     "build:types": "tsc --emitDeclarationOnly --outDir dist/types",
     "exports:sync": "node scripts/sync-exports.mjs",
     "exports:check": "node scripts/sync-exports.mjs --check",
-    "clean": "rm -rf dist storybook-static",
+    "clean": "rm -rf dist storybook-static storybook-native-static coverage-native",
     "storybook:build": "storybook build",
     "storybook:serve": "http-server storybook-static -p 6008 --silent",
     "storybook:test": "test-storybook --maxWorkers=4 --url http://localhost:6008",
@@ -611,12 +687,27 @@
     "lint:files": "bash -c 'eslint \"${@:-.}\" --max-warnings 0' _",
     "lint": "pnpm run lint:files .",
     "lint:fix": "bash -c 'eslint \"${@:-.}\" --max-warnings 0 --fix' _",
-    "typecheck": "tsc --noEmit",
-    "check-types": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.native.json --noEmit && tsc -p tsconfig.native.test.json",
+    "check-types": "tsc --noEmit && tsc -p tsconfig.native.json --noEmit && tsc -p tsconfig.native.test.json",
+    "build:types:native": "tsc -p tsconfig.native.json",
+    "build:native": "tsup --config tsup.native.config.ts && pnpm build:types:native",
+    "test:native": "node ../../scripts/vitest-with-teardown.mjs run --config vitest.native.config.ts",
+    "test:native:watch": "vitest --config vitest.native.config.ts",
+    "storybook:native": "storybook dev -p 6007 -c .storybook-native",
+    "storybook:native:build": "storybook build -c .storybook-native -o storybook-native-static",
+    "storybook:native:serve": "http-server storybook-native-static -p 6009 --silent",
+    "storybook:native:test": "test-storybook --maxWorkers=4 --url http://localhost:6009 --config-dir .storybook-native",
+    "test:native:ci": "pnpm storybook:native:build && (concurrently -k -s first -n 'serve,test' -c 'bgBlue.bold,bgGreen.bold' 'pnpm storybook:native:serve' 'pnpm storybook:native:test')",
+    "icons:generate": "node scripts/generate-icon-paths.mjs",
+    "icons:check": "node scripts/generate-icon-paths.mjs --check",
+    "native:ledger": "node scripts/native-parity.mjs",
+    "native:check": "node scripts/native-parity.mjs --check && pnpm icons:check"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.79.0",
+    "react-native-svg": ">=15.0.0"
   },
   "dependencies": {
     "@12-apps/forms-core": "^1.21.0",
@@ -641,6 +732,7 @@
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",
     "@storybook/builder-vite": "^9.1.10",
+    "@storybook/react-native-web-vite": "9.1.20",
     "@storybook/react-vite": "^9.1.10",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -661,6 +753,9 @@
     "playwright": "^1.56.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-native": "0.83.1",
+    "react-native-svg": "15.15.5",
+    "react-native-web": "0.20.0",
     "start-server-and-test": "^2.1.2",
     "storybook": "^9.1.10",
     "tsup": "^8.0.0",
@@ -686,6 +781,7 @@
     "*.mjs",
     "*.md",
     "!eslint.config.js",
+    "!test-runner-jest.config.cjs",
     "!**/__tests__/**",
     "!**/tests/**",
     "!**/*.test.*",
@@ -693,5 +789,13 @@
     "!**/*.stories.*",
     "!**/*.test-story.*",
     "!**/test-helpers.*"
-  ]
+  ],
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  }
 }

package/src/components/data-display/Alert/Alert.base.ts

@@ -0,0 +1,105 @@
+import type * as React from 'react';
+
+import type { ColorValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * Imports no MUI and no react-native, on purpose: it ships in both
+ * declaration outputs. The web adds MUI's `AlertProps` extras in
+ * `Alert.types.ts`; the native side adds a `View`'s own props in
+ * `Alert.types.native.ts`.
+ */
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'glass' | 'gradient';
+
+/**
+ * The dismissible half, as a UNION rather than one more optional field.
+ *
+ * `closeLabel` is the dismiss button's only accessible name — it renders a
+ * glyph and nothing else — so it must be REQUIRED wherever that button exists.
+ * But most alerts are not closable, and making it required on all of them
+ * would ask a dozen call sites across five packages to name a control they
+ * never render. A word invented to satisfy a type is worse than no word: the
+ * next reader cannot tell which button it belongs to.
+ *
+ * So the type says what is actually true — the label is required exactly when
+ * the button is.
+ */
+export type AlertDismiss =
+  | { closable?: false; onClose?: () => void; closeLabel?: never }
+  | { closable: true; onClose?: () => void; closeLabel: string };
+
+export interface AlertBaseFields {
+  /**
+   * The variant of the alert
+   */
+  variant?: AlertVariant;
+
+  /**
+   * The color of the alert (when not using variant-specific colors)
+   */
+  color?: ColorValue;
+
+  /**
+   * Whether the alert should have a glow effect
+   */
+  glow?: boolean;
+
+  /**
+   * Whether the alert should have a pulse animation
+   */
+  pulse?: boolean;
+
+  /**
+   * Custom icon to display
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Whether to show the default severity icon
+   */
+  showIcon?: boolean;
+
+  /**
+   * Title for the alert
+   */
+  title?: string;
+
+  /**
+   * Description text
+   */
+  description?: string;
+
+  /**
+   * Whether to animate the alert on mount
+   */
+  animate?: boolean;
+
+  /**
+   * ARIA role for the alert
+   */
+  role?: string;
+
+  /**
+   * ARIA live region setting
+   */
+  'aria-live'?: 'polite' | 'assertive' | 'off';
+
+  /**
+   * ARIA atomic setting
+   */
+  'aria-atomic'?: 'true' | 'false';
+
+  children?: React.ReactNode;
+
+  /**
+   * Optional data-testid for testing
+   */
+  'data-testid'?: string;
+
+  dataTestId?: string;
+
+  testID?: string;
+}
+
+export type AlertBaseProps = AlertBaseFields & AlertDismiss;

package/src/components/data-display/Alert/Alert.helpers.ts

@@ -0,0 +1,54 @@
+import type { AlertBaseFields, AlertVariant } from './Alert.base';
+import type { IconName } from '../../../icons/Icon.types';
+
+type AlertDefaultedKeys = 'variant' | 'glow' | 'pulse' | 'showIcon' | 'animate' | 'role' | 'aria-atomic';
+
+export const ALERT_DEFAULTS: Required<Pick<AlertBaseFields, AlertDefaultedKeys>> & { closable: false } = {
+  variant: 'info',
+  glow: false,
+  pulse: false,
+  showIcon: true,
+  closable: false,
+  animate: true,
+  role: 'alert',
+  'aria-atomic': 'true',
+};
+
+/**
+ * Generic over the renderer's own props: the web and the native `Alert` pass
+ * different extras through, and both come back out untouched.
+ */
+export type ResolvedAlertProps<P extends AlertBaseFields> = P &
+  Required<Pick<AlertBaseFields, AlertDefaultedKeys>>;
+
+// Strips explicitly-undefined props before the merge so `prop={undefined}` still
+// falls back to the default, the way a destructuring default would.
+const definedProps = <P extends AlertBaseFields>(props: P): Partial<P> =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined),
+  ) as Partial<P>;
+
+// Through `unknown`: `closable: false` in the defaults belongs to the dismiss
+// union rather than to `AlertBaseFields`, so TypeScript cannot see the merge as
+// comparable to `P` although every field of `P` survives it untouched.
+export const resolveAlertProps = <P extends AlertBaseFields>(props: P): ResolvedAlertProps<P> =>
+  ({ ...ALERT_DEFAULTS, ...definedProps(props) }) as unknown as ResolvedAlertProps<P>;
+
+/** `danger` announces itself; everything else waits its turn. */
+export const defaultAriaLive = (variant: AlertVariant): 'polite' | 'assertive' =>
+  variant === 'danger' ? 'assertive' : 'polite';
+
+export const testIdFor = (base: string | undefined, suffix: string): string =>
+  base ? `${base}-${suffix}` : `alert-${suffix}`;
+
+/**
+ * The glyph each semantic variant carries, by the shared icon set's name.
+ * `glass` and `gradient` carry none of their own: the web renders an empty
+ * icon slot for them unless the caller passes an `icon`, and so does native.
+ */
+export const VARIANT_ICON: Partial<Record<AlertVariant, IconName>> = {
+  info: 'Info',
+  success: 'CheckCircle',
+  warning: 'Warning',
+  danger: 'Error',
+};

package/src/components/data-display/Alert/Alert.look.native.ts

@@ -0,0 +1,131 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import type { AlertVariant } from './Alert.base';
+import {
+  ACTION_SLOT,
+  ALERT_PADDING_UNITS,
+  ALERT_RADIUS_UNITS,
+  type AlertPalette,
+  alertPalette,
+  alertSurface,
+  CLOSE_BUTTON,
+  DESCRIPTION,
+  GLOW,
+  ICON_SLOT,
+  MESSAGE_FONT_SIZE,
+  MESSAGE_GAP_UNITS,
+  MESSAGE_LINE_HEIGHT,
+  TITLE,
+} from './Alert.metrics';
+import { alpha } from '../../../tokens/color';
+import { muiTypeStyle } from '../../../tokens/mui-type';
+import type { UiTheme } from '../../../tokens/theme';
+import type { ColorValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE PAINT, KEPT APART FROM THE STRUCTURE.
+ *
+ * `Alert.native.tsx` reads as what renders where; this file reads as
+ * arithmetic — the same palette slots, alphas and px the web's
+ * `Alert.styles.tsx` derives from `Alert.metrics.ts`.
+ */
+
+export interface AlertLookArgs {
+  variant: AlertVariant;
+  color: ColorValue | undefined;
+  glow: boolean;
+  pulse: boolean;
+}
+
+export interface AlertLook {
+  palette: AlertPalette;
+  /** What the words are set in. */
+  ink: string;
+  iconColor: string;
+  root: ViewStyle;
+}
+
+/**
+ * The root's paint. The web keeps `overflow: hidden` (its pulse wash is
+ * clipped to the card, as it is here); only the glow opens it, because a
+ * view's own shadow is clipped by its own overflow on a device.
+ */
+export function alertLook(theme: UiTheme, a: AlertLookArgs): AlertLook {
+  const palette = alertPalette(theme, a.color ?? a.variant);
+  const surface = alertSurface(theme, a.variant, palette);
+  const root: ViewStyle = {
+    flexDirection: 'row',
+    paddingVertical: theme.spacing(ALERT_PADDING_UNITS.vertical),
+    paddingHorizontal: theme.spacing(ALERT_PADDING_UNITS.horizontal),
+    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
+    overflow: a.glow ? 'visible' : 'hidden',
+    backgroundColor: surface.backgroundColor,
+    ...(surface.borderColor ? { borderWidth: 1, borderColor: surface.borderColor } : {}),
+    ...(a.glow
+      ? {
+          boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(palette.main, GLOW.alpha)}`,
+          filter: `brightness(${GLOW.brightness})`,
+        }
+      : {}),
+  };
+  return { palette, ink: surface.color, iconColor: surface.iconColor, root };
+}
+
+/** The message column: 8px between its lines, allowed to shrink so long text wraps beside the icon. */
+export const messageSlotStyle = (theme: UiTheme): ViewStyle => ({
+  flexDirection: 'column',
+  gap: theme.spacing(MESSAGE_GAP_UNITS),
+  flexShrink: 1,
+  minWidth: 0,
+});
+
+/** A string child: MUI's `body2` letter-spacing at 0.95rem on the message's 1.5. */
+export const messageTextStyle = (theme: UiTheme, ink: string): TextStyle => ({
+  ...muiTypeStyle(theme, 'body2', MESSAGE_FONT_SIZE),
+  lineHeight: MESSAGE_FONT_SIZE * MESSAGE_LINE_HEIGHT,
+  color: ink,
+});
+
+/** MUI's `AlertTitle` (a `body1` Typography) at 1.05rem and 600, lifted 2px, 4px above a description. */
+export const titleStyle = (theme: UiTheme, ink: string, hasDescription: boolean): TextStyle => ({
+  ...muiTypeStyle(theme, 'body1', TITLE.fontSize),
+  fontWeight: `${TITLE.fontWeight}`,
+  color: ink,
+  marginTop: TITLE.marginTop,
+  marginBottom: hasDescription ? theme.spacing(TITLE.marginBottomUnits) : 0,
+});
+
+/** The description: 0.925rem on the message's 1.5, faded to 0.9. */
+export const descriptionStyle = (theme: UiTheme, ink: string): TextStyle => ({
+  ...muiTypeStyle(theme, 'body2', DESCRIPTION.fontSize),
+  lineHeight: DESCRIPTION.fontSize * MESSAGE_LINE_HEIGHT,
+  color: ink,
+  opacity: DESCRIPTION.opacity,
+});
+
+/** MUI's `.MuiAlert-icon` with the web's overrides: first-line aligned, 14px from the words, 2px down. */
+export const iconSlotStyle = (theme: UiTheme): ViewStyle => ({
+  alignSelf: 'flex-start',
+  alignItems: 'center',
+  marginRight: theme.spacing(ICON_SLOT.marginRightUnits),
+  paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),
+  paddingBottom: ICON_SLOT.paddingBottom,
+  opacity: ICON_SLOT.opacity,
+});
+
+/** MUI's `.MuiAlert-action`: top-aligned, pushed to the right edge, 16px off the text. */
+export const actionSlotStyle = (theme: UiTheme): ViewStyle => ({
+  alignItems: 'flex-start',
+  paddingTop: ACTION_SLOT.paddingTop,
+  paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),
+  marginLeft: 'auto',
+  marginRight: ACTION_SLOT.marginRight,
+});
+
+/** MUI's small `IconButton` at 0.7; pressed stands in for the web's hover (full opacity, a faint wash). */
+export const closeButtonStyle = (theme: UiTheme, pressed: boolean): ViewStyle => ({
+  padding: CLOSE_BUTTON.padding,
+  borderRadius: theme.radius.full,
+  opacity: pressed ? 1 : CLOSE_BUTTON.opacity,
+  backgroundColor: pressed ? alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha) : 'transparent',
+});