@12-apps/ui 6.19.1 → 6.20.0

package/src/components/layout/Skeleton/Skeleton.helpers.ts

@@ -1,4 +1,4 @@
-import type { SkeletonProps } from './Skeleton.types';
+import type { SkeletonBaseProps } from './Skeleton.base';
 
 type SkeletonDefaultedKeys =
   | 'variant'
@@ -9,10 +9,15 @@ type SkeletonDefaultedKeys =
   | 'glassmorphism'
   | 'shimmer';
 
-type ResolvedSkeletonProps = SkeletonProps &
-  Required<Pick<SkeletonProps, SkeletonDefaultedKeys>>;
+/**
+ * Generic over the renderer's own props: the web and the native `Skeleton`
+ * carry different extras (`className`/`style` against a `View`'s props), and
+ * both come back out untouched.
+ */
+type ResolvedSkeletonProps<P extends SkeletonBaseProps> = P &
+  Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>>;
 
-const SKELETON_DEFAULTS: Pick<SkeletonProps, SkeletonDefaultedKeys> = {
+const SKELETON_DEFAULTS: Required<Pick<SkeletonBaseProps, SkeletonDefaultedKeys>> = {
   variant: 'text',
   animation: 'pulse',
   count: 1,
@@ -24,10 +29,21 @@ const SKELETON_DEFAULTS: Pick<SkeletonProps, SkeletonDefaultedKeys> = {
 
 // Strips explicitly-undefined props before the merge, so `count={undefined}` still
 // falls back to the default exactly as a destructuring default would.
-const definedProps = (props: SkeletonProps): Partial<SkeletonProps> =>
+const definedProps = <P extends SkeletonBaseProps>(props: P): Partial<P> =>
   Object.fromEntries(
     Object.entries(props).filter(([, value]) => value !== undefined),
-  ) as Partial<SkeletonProps>;
+  ) as Partial<P>;
 
-export const resolveSkeletonProps = (props: SkeletonProps): ResolvedSkeletonProps =>
-  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps;
+export const resolveSkeletonProps = <P extends SkeletonBaseProps>(
+  props: P,
+): ResolvedSkeletonProps<P> =>
+  ({ ...SKELETON_DEFAULTS, ...definedProps(props) }) as ResolvedSkeletonProps<P>;
+
+/**
+ * The id of instance `index` when a caller asked for several. Unnamed
+ * skeletons stay unnamed — the web has always cloned `undefined` there.
+ */
+export const skeletonInstanceTestId = (
+  base: string | undefined,
+  index: number,
+): string | undefined => (base ? `${base}-${index}` : undefined);

package/src/components/layout/Skeleton/Skeleton.metrics.ts

@@ -0,0 +1,81 @@
+import type { SkeletonIntensity, SkeletonVariant } from './Skeleton.base';
+
+/**
+ * THE NUMBERS BOTH `Skeleton` RENDERERS DRAW WITH.
+ *
+ * `Skeleton.styles.ts` (web, emotion over MUI's own `Skeleton`) and
+ * `Skeleton.native.tsx` (React Native) read this one table. The web turns them
+ * into CSS strings — `blur(20px)`, `shimmer 2s infinite` — and native uses the
+ * numbers as they are, so neither renderer restates a value.
+ *
+ * Two groups live here. The first is what the web component WRITES (the
+ * intensity alphas, the default box, the glass and shimmer washes). The second
+ * is what MUI's own `Skeleton` contributes on the web and the native half
+ * therefore has to restate: its pulse keyframe, its wave cadence, and the
+ * geometry of the `text` variant. Those are MUI's DEFAULTS — a host that
+ * re-themes them moves the web only, which `NATIVE-NOTES.md` records.
+ */
+
+/** The tint's alpha over the ink, per intensity. */
+export const SKELETON_INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15,
+};
+
+/** The box a variant draws when the caller gives no `width`/`height`. */
+export const SKELETON_DEFAULT_DIMENSIONS: Record<
+  SkeletonVariant,
+  { width: number | string; height: number | undefined }
+> = {
+  // `text` has no height of its own: MUI's line box gives it one (below).
+  text: { width: '100%', height: undefined },
+  circular: { width: 40, height: 40 },
+  rectangular: { width: '100%', height: 40 },
+  wave: { width: '100%', height: 40 },
+};
+
+/* ── `glassmorphism` ──────────────────────────────────────────────────────── */
+
+/** The 135° wash over `background.paper`, from the first stop to the last. */
+export const GLASS_BACKGROUND_ALPHA_FROM = 0.8;
+export const GLASS_BACKGROUND_ALPHA_TO = 0.4;
+export const GLASS_BLUR_PX = 20;
+export const GLASS_BORDER_ALPHA = 0.2;
+/** `0 8px 32px 0 rgba(0, 0, 0, 0.1)`. */
+export const GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 } as const;
+
+/* ── `shimmer` ────────────────────────────────────────────────────────────── */
+
+/** The sweep's middle stop, over white. */
+export const SHIMMER_ALPHA = 0.3;
+export const SHIMMER_DURATION_MS = 2000;
+
+/**
+ * MUI's `palette.common`, which is a pair of fixed hexes rather than anything
+ * derived — so the shared theme has no slot for them and they are named here.
+ */
+export const COMMON_BLACK = '#000';
+export const COMMON_WHITE = '#fff';
+
+/* ── MUI's own `Skeleton`, restated for the renderer that has no MUI ──────── */
+
+/**
+ * MUI's `pulseKeyframe`: opacity 1 → 0.4 → 1, `2s ease-in-out 0.5s infinite`.
+ * The delay runs once on the web; native replays it each lap unless the
+ * animation is sequenced, which `Skeleton.native.tsx` does.
+ */
+export const PULSE = { durationMs: 2000, delayMs: 500, dip: 0.4 } as const;
+
+/** MUI's `wave` sweep: `1.6s linear 0.5s infinite`, in `palette.action.hover`. */
+export const WAVE = { durationMs: 1600, delayMs: 500 } as const;
+
+/**
+ * The `text` variant, as MUI draws it: a line box `1.2em` tall squashed to 60%
+ * of its height (`transform: scale(1, 0.60)`), with a `4px/6.7px` elliptical
+ * radius that the same squash turns back into a round 4px. React Native has no
+ * `em`, and its transforms do not change layout, so the native half multiplies
+ * the two out into one height and draws the plain 4px radius the squash lands on.
+ */
+export const TEXT_LINE_HEIGHT_EM = 1.2;
+export const TEXT_SCALE_Y = 0.6;

package/src/components/layout/Skeleton/Skeleton.native.tsx

@@ -0,0 +1,271 @@
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  type DimensionValue,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import { resolveSkeletonProps, skeletonInstanceTestId } from './Skeleton.helpers';
+import {
+  COMMON_BLACK,
+  COMMON_WHITE,
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  PULSE,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  SKELETON_DEFAULT_DIMENSIONS,
+  SKELETON_INTENSITY_OPACITY,
+  TEXT_LINE_HEIGHT_EM,
+  TEXT_SCALE_Y,
+  WAVE,
+} from './Skeleton.metrics';
+import type {
+  SkeletonAnimation,
+  SkeletonIntensity,
+  SkeletonProps,
+  SkeletonVariant,
+} from './Skeleton.types.native';
+import { useLoopedProgress } from '../../../platform/animation';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { alpha } from '../../../tokens/color';
+import type { UiTheme } from '../../../tokens/theme';
+
+/** MUI's `pulseKeyframe` runs `ease-in-out`. */
+const PULSE_EASING = Easing.inOut(Easing.ease);
+const PERCENT = /^-?\d+(?:\.\d+)?%$/;
+
+/**
+ * A width or a height, as React Native accepts one. The web takes any CSS
+ * length; here a number is dp and a percentage is a percentage — anything else
+ * (`10rem`, `calc(...)`) has no equivalent and sizes the box from its content,
+ * which `NATIVE-NOTES.md` records.
+ */
+export function dimension(value: number | string | undefined): DimensionValue | undefined {
+  if (value === undefined || typeof value === 'number') return value;
+  return PERCENT.test(value) ? (value as `${number}%`) : undefined;
+}
+
+/** The tint the web writes: the body ink at the intensity's alpha, white in dark mode. */
+export const skeletonTint = (theme: UiTheme, intensity: SkeletonIntensity): string =>
+  alpha(
+    theme.mode === 'dark' ? COMMON_WHITE : theme.palette.text.primary,
+    SKELETON_INTENSITY_OPACITY[intensity],
+  );
+
+/** MUI's radius per variant: a circle, a square rectangle, the theme's 4px on text. */
+const radiusFor = (theme: UiTheme, variant: SkeletonVariant): number => {
+  if (variant === 'circular') return theme.radius.full;
+  return variant === 'text' ? theme.radius.md : 0;
+};
+
+/**
+ * The `text` variant's height. MUI gives it a `1.2em` line box and squashes the
+ * whole box to 60%; React Native's transforms do not change layout, so the two
+ * are multiplied out into the height the web actually shows.
+ */
+export function textBoxHeight(
+  theme: UiTheme,
+  height: number | string | undefined,
+): DimensionValue | undefined {
+  if (typeof height === 'string') return dimension(height);
+  const box = height ?? theme.typography.sizes.md.fontSize * TEXT_LINE_HEIGHT_EM;
+  return box * TEXT_SCALE_Y;
+}
+
+/**
+ * `glassmorphism`: the gradient's first stop flat, the hairline, and the web's
+ * own box-shadow string — React Native 0.76+ takes CSS shadow syntax, so the
+ * two renderers draw the shadow from the same declaration. What is missing is
+ * the 20px backdrop blur, which React Native has no equivalent of.
+ */
+function glassStyle(theme: UiTheme): ViewStyle {
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM),
+    borderWidth: 1,
+    borderColor: alpha(theme.palette.divider, GLASS_BORDER_ALPHA),
+    boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(COMMON_BLACK, GLASS_SHADOW.alpha)}`,
+  };
+}
+
+interface SkeletonBoxStyleArgs {
+  variant: SkeletonVariant;
+  intensity: SkeletonIntensity;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number | string;
+  glassmorphism: boolean;
+  /** A box with a wash sliding over it clips, as MUI's `wave` and the shimmer do. */
+  clipped: boolean;
+}
+
+/** The box the web paints, in absolute numbers. */
+export function skeletonBoxStyle(theme: UiTheme, a: SkeletonBoxStyleArgs): ViewStyle {
+  const box = SKELETON_DEFAULT_DIMENSIONS[a.variant];
+  const height = a.height ?? box.height;
+  const style: ViewStyle = {
+    width: dimension(a.width ?? box.width),
+    height: a.variant === 'text' ? textBoxHeight(theme, height) : dimension(height),
+    borderRadius: dimension(a.borderRadius) ?? radiusFor(theme, a.variant),
+    backgroundColor: skeletonTint(theme, a.intensity),
+  };
+  if (a.clipped) style.overflow = 'hidden';
+  return a.glassmorphism ? { ...style, ...glassStyle(theme) } : style;
+}
+
+interface WashProps {
+  color: string;
+  durationMs: number;
+  delayMs: number;
+  testID?: string;
+}
+
+/**
+ * MUI's sweeping `::after`, standing still. React Native core has no gradient
+ * fill and no pseudo-elements, so the same wash covers the box and fades in and
+ * out on the same cadence instead of travelling across it. It carries no
+ * `aria-hidden` of its own: the box it sits in is already hidden, and the
+ * shared stories count the boxes by that attribute.
+ */
+function Wash({ color, durationMs, delayMs, testID }: WashProps): React.JSX.Element {
+  const progress = useLoopedProgress(true, { durationMs, delayMs, easing: Easing.linear });
+  return (
+    <Animated.View
+      testID={testID}
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          pointerEvents: 'none',
+          backgroundColor: color,
+          opacity: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] }),
+        },
+      ]}
+    />
+  );
+}
+
+interface SkeletonBoxProps extends SkeletonBoxStyleArgs {
+  animation: SkeletonAnimation;
+  shimmer: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  rest: ViewProps;
+}
+
+/** The web's `muiAnimationFor`: the `wave` VARIANT always animates as a wave. */
+const effectiveAnimation = (
+  variant: SkeletonVariant,
+  animation: SkeletonAnimation,
+): SkeletonAnimation => (variant === 'wave' ? 'wave' : animation);
+
+/** One skeleton box: the tint, the pulse, and the wash the sweep stands in for. */
+function SkeletonBox({
+  animation,
+  shimmer,
+  style,
+  testID,
+  rest,
+  ...styleArgs
+}: SkeletonBoxProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const animates = effectiveAnimation(styleArgs.variant, animation);
+  const pulse = useLoopedProgress(animates === 'pulse', {
+    durationMs: PULSE.durationMs,
+    delayMs: PULSE.delayMs,
+    easing: PULSE_EASING,
+  });
+  const box = skeletonBoxStyle(theme, styleArgs);
+  const washId = testID ? `${testID}-wash` : undefined;
+
+  return (
+    <Animated.View
+      aria-hidden
+      testID={testID}
+      style={[
+        box,
+        animates === 'pulse'
+          ? { opacity: pulse.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, PULSE.dip, 1] }) }
+          : null,
+        style,
+      ]}
+      {...rest}
+    >
+      {shimmer ? (
+        <Wash
+          color={alpha(COMMON_WHITE, SHIMMER_ALPHA)}
+          durationMs={SHIMMER_DURATION_MS}
+          delayMs={0}
+          testID={washId}
+        />
+      ) : null}
+      {!shimmer && animates === 'wave' ? (
+        <Wash
+          color={theme.palette.action.hover}
+          durationMs={WAVE.durationMs}
+          delayMs={WAVE.delayMs}
+          testID={washId}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}
+
+/**
+ * The native `Skeleton`: the same box, the same tint and the same default
+ * dimensions the MUI half draws, on a `View`.
+ */
+export const Skeleton: React.FC<SkeletonProps> = React.memo(function Skeleton(rawProps) {
+  const resolved = resolveSkeletonProps(rawProps);
+  const {
+    variant,
+    animation,
+    width,
+    height,
+    count,
+    spacing,
+    borderRadius,
+    intensity,
+    glassmorphism,
+    shimmer,
+    style,
+    ...others
+  } = resolved;
+  const theme = useUiTheme();
+  const testID = resolveTestId(others);
+  const box: Omit<SkeletonBoxProps, 'testID'> = {
+    variant,
+    animation,
+    intensity,
+    width,
+    height,
+    borderRadius,
+    glassmorphism,
+    shimmer,
+    clipped: shimmer || effectiveAnimation(variant, animation) === 'wave',
+    style,
+    rest: withoutTestIdProps(others),
+  };
+
+  // Handle edge case: count of 0 should render nothing
+  if (count === 0) return null;
+  if (count === 1) return <SkeletonBox {...box} testID={testID} />;
+
+  return (
+    <View style={{ gap: theme.spacing(spacing) }}>
+      {Array.from({ length: count }, (_, index) => (
+        <View key={`skeleton-${index}`}>
+          <SkeletonBox {...box} testID={skeletonInstanceTestId(testID, index)} />
+        </View>
+      ))}
+    </View>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

package/src/components/layout/Skeleton/Skeleton.styles.ts

@@ -2,6 +2,17 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { SkeletonProps } from './Skeleton.types';
+import {
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BACKGROUND_ALPHA_TO,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  SKELETON_DEFAULT_DIMENSIONS,
+  SKELETON_INTENSITY_OPACITY,
+} from './Skeleton.metrics';
 
 type SkeletonVariant = NonNullable<SkeletonProps['variant']>;
 type SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;
@@ -29,36 +40,25 @@ export const muiAnimationFor = (
   return animation;
 };
 
+// Derived from the shared metrics, not restated: the native `Skeleton` reads
+// the same table, so the two renderers cannot disagree on a default box.
 export const defaultDimensions = (
   variant: SkeletonVariant,
-): { width: number | string; height: number | undefined } => {
-  switch (variant) {
-    case 'circular':
-      return { width: 40, height: 40 };
-    case 'rectangular':
-    case 'wave':
-      return { width: '100%', height: 40 };
-    default:
-      return { width: '100%', height: undefined };
-  }
-};
-
-const INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {
-  low: 0.11,
-  medium: 0.13,
-  high: 0.15,
-};
+): { width: number | string; height: number | undefined } =>
+  // The `default:` arm the old switch had: an unrecognised variant used to fall
+  // back rather than hand `undefined` to a caller that then reads `.width`.
+  SKELETON_DEFAULT_DIMENSIONS[variant] ?? SKELETON_DEFAULT_DIMENSIONS.rectangular;
 
 const intensityOpacity = (intensity: SkeletonIntensity): number =>
-  INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;
+  SKELETON_INTENSITY_OPACITY[intensity] ?? SKELETON_INTENSITY_OPACITY.medium;
 
 const glassmorphismStyles = (theme: Theme): CSSObject => ({
   background: `linear-gradient(135deg,
-        ${alpha(theme.palette.background.paper, 0.8)} 0%,
-        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,
-  backdropFilter: 'blur(20px)',
-  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_FROM)} 0%,
+        ${alpha(theme.palette.background.paper, GLASS_BACKGROUND_ALPHA_TO)} 100%)`,
+  backdropFilter: `blur(${GLASS_BLUR_PX}px)`,
+  border: `1px solid ${alpha(theme.palette.divider, GLASS_BORDER_ALPHA)}`,
+  boxShadow: `0 ${GLASS_SHADOW.offsetY}px ${GLASS_SHADOW.blur}px 0 ${alpha(theme.palette.common.black, GLASS_SHADOW.alpha)}`,
 });
 
 // The sweep is a pseudo-element sliding across the box, so the box has to clip it
@@ -74,11 +74,11 @@ const shimmerStyles = (theme: Theme): CSSObject => ({
     background: `linear-gradient(
           90deg,
           transparent,
-          ${alpha(theme.palette.common.white, 0.3)},
+          ${alpha(theme.palette.common.white, SHIMMER_ALPHA)},
           transparent
         )`,
     transform: 'translateX(-100%)',
-    animation: 'shimmer 2s infinite',
+    animation: `shimmer ${SHIMMER_DURATION_MS / 1000}s infinite`,
   },
   '@keyframes shimmer': {
     '100%': {

package/src/components/layout/Skeleton/Skeleton.tsx

@@ -4,7 +4,7 @@ import Stack from '@mui/material/Stack/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import { resolveSkeletonProps } from './Skeleton.helpers';
+import { resolveSkeletonProps, skeletonInstanceTestId } from './Skeleton.helpers';
 import {
   defaultDimensions,
   muiAnimationFor,
@@ -12,6 +12,7 @@ import {
   skeletonStyles,
 } from './Skeleton.styles';
 import type { SkeletonProps } from './Skeleton.types';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 
 export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
   const {
@@ -26,10 +27,13 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
     intensity,
     glassmorphism,
     shimmer,
-    'data-testid': dataTestId,
     style,
-    ...props
+    ...others
   } = resolveSkeletonProps(rawProps);
+  // `testID` and `dataTestId` are the shared contract's spellings; the DOM
+  // wants `data-testid`, and must not see the other two as attributes.
+  const dataTestId = resolveTestId(others);
+  const props = withoutTestIdProps(others);
   const theme = useTheme();
 
   const defaults = defaultDimensions(variant);
@@ -70,7 +74,7 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
       {Array.from({ length: count }).map((_, index) => (
         <Box key={`skeleton-${index}`}>
           {React.cloneElement(singleSkeleton, {
-            'data-testid': dataTestId ? `${dataTestId}-${index}` : undefined,
+            'data-testid': skeletonInstanceTestId(dataTestId, index),
           })}
         </Box>
       ))}
@@ -78,4 +82,4 @@ export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
   );
 });
 
-Skeleton.displayName = 'Skeleton';
+Skeleton.displayName = 'Skeleton';

package/src/components/layout/Skeleton/Skeleton.types.native.ts

@@ -0,0 +1,16 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { SkeletonBaseProps } from './Skeleton.base';
+
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonVariant,
+} from './Skeleton.base';
+
+/** The native `Skeleton`: the shared contract, plus a `View`'s own props. */
+export type SkeletonProps = SkeletonBaseProps &
+  Omit<ViewProps, keyof SkeletonBaseProps | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };

package/src/components/layout/Skeleton/Skeleton.types.ts

@@ -1,19 +1,16 @@
-export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'wave';
-export type SkeletonAnimation = 'pulse' | 'wave' | false;
-export type SkeletonIntensity = 'low' | 'medium' | 'high';
+import type React from 'react';
 
-export interface SkeletonProps {
-  variant?: SkeletonVariant;
-  animation?: SkeletonAnimation;
-  width?: number | string;
-  height?: number | string;
-  count?: number;
-  spacing?: number;
-  borderRadius?: number | string;
+import type { SkeletonBaseProps } from './Skeleton.base';
+
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonVariant,
+} from './Skeleton.base';
+
+/** The web `Skeleton`: the shared contract, plus the DOM's own two styling hooks. */
+export interface SkeletonProps extends SkeletonBaseProps {
   className?: string;
-  intensity?: SkeletonIntensity;
-  glassmorphism?: boolean;
-  shimmer?: boolean;
-  'data-testid'?: string;
   style?: React.CSSProperties;
-}
+}

package/src/components/layout/Skeleton/index.native.ts

@@ -0,0 +1,8 @@
+export { Skeleton } from './Skeleton.native';
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonProps,
+  SkeletonVariant,
+} from './Skeleton.types.native';

package/src/components/layout/Skeleton/index.ts

@@ -1,2 +1,8 @@
 export { Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton.types';
+export type {
+  SkeletonAnimation,
+  SkeletonBaseProps,
+  SkeletonIntensity,
+  SkeletonProps,
+  SkeletonVariant,
+} from './Skeleton.types';

package/src/icons/glyphs.json

@@ -4,6 +4,8 @@
   "ArrowDownward",
   "ArrowForward",
   "ArrowUpward",
+  "BrokenImage",
+  "Cancel",
   "Check",
   "CheckCircle",
   "ChevronLeft",

package/src/icons/paths.generated.ts

@@ -12,6 +12,8 @@ export const ICON_PATHS = {
   ArrowDownward: ["m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"],
   ArrowForward: ["m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"],
   ArrowUpward: ["m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"],
+  BrokenImage: ["M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2m-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4z"],
+  Cancel: ["M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"],
   Check: ["M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"],
   CheckCircle: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"],
   ChevronLeft: ["M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"],

package/src/platform/animation.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Animated, Easing, Platform } from 'react-native';
+
+/**
+ * A CSS KEYFRAME LOOP, AS REACT NATIVE RUNS ONE.
+ *
+ * `animation: pulse 2s ease-in-out 0.5s infinite` is one declaration on the
+ * web and four decisions here: a driving value, a timing, a delay that runs
+ * ONCE (which is why the loop is sequenced behind an `Animated.delay` rather
+ * than given the timing's own `delay`, which would replay every lap), and a
+ * teardown. Several ported components paint a breathing surface, and each one
+ * writing that out again is how two of them end up on different cadences.
+ *
+ * The value runs 0 → 1 and repeats; the caller interpolates it into whatever
+ * the keyframes actually change.
+ */
+const DEFAULT_NATIVE_DRIVER = Platform.OS !== 'web';
+
+export interface LoopOptions {
+  durationMs: number;
+  /** The CSS animation's delay, run once before the first lap. */
+  delayMs?: number;
+  easing?: (value: number) => number;
+  /**
+   * Layout properties (`left`, `width`, `height`) cannot be driven natively;
+   * `opacity` and `transform` can. Defaults to native everywhere but the web.
+   */
+  useNativeDriver?: boolean;
+}
+
+export function useLoopedProgress(enabled: boolean, options: LoopOptions): Animated.Value {
+  const {
+    durationMs,
+    delayMs = 0,
+    easing = Easing.linear,
+    useNativeDriver = DEFAULT_NATIVE_DRIVER,
+  } = options;
+  const progress = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    const animation = Animated.sequence([
+      Animated.delay(delayMs),
+      Animated.loop(
+        Animated.timing(progress, { toValue: 1, duration: durationMs, easing, useNativeDriver }),
+      ),
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [enabled, durationMs, delayMs, easing, useNativeDriver, progress]);
+
+  return progress;
+}