pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/tabs/Tabs.js

@@ -5,23 +5,110 @@
  * real design systems split the strip from panel content, and keeps the component simple and
  * composable (no `TabPanel`, no rendering children per tab).
  *
- * The active-tab indicator is two `Animated.Value`s (`x`, `width`) driven off each tab's own
- * `onLayout` measurement, keyed by `value` so reordering `items` doesn't scramble which
- * measurement belongs to which tab. Reduced motion (WCAG 2.3.3) snaps both values with `setValue`
- * instead of animating — same `duration: reducedMotion ? 0 : …` idiom `Button`'s press fade and
- * `Toast`'s slide use, just applied to `setValue` vs `Animated.timing` instead of a duration of 0
- * (a 0-width/0-position change would still tween through intermediate frames otherwise).
+ * The active-tab indicator is a 1dp-wide bar positioned and stretched entirely by transforms
+ * (`translateX` + `scaleX`) off each tab's own `onLayout` measurement, keyed by `value` so
+ * reordering `items` doesn't scramble which measurement belongs to which tab. Transforms are the
+ * only way this can run on the native driver — see `Tabs.variants.ts` for the geometry, and
+ * `core/motion` for the timing every module now shares.
+ *
+ * That indicator marks SELECTION, not focus: a tab holding keyboard/AT focus draws its own inset
+ * ring (WCAG 2.4.7), the same treatment `BottomNavTab` uses.
  */
 
-import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Animated, Pressable, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated from "react-native-reanimated";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
-import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsIndicatorStructure, tabsStripStructure, TABS_SIZES } from "./Tabs.variants.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useHaptics } from "../../core/haptics/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme } from "../../theme/hooks.js";
+import { resolveTabAccessibility, resolveTabsColors, tabItemStructure, tabsFocusRingStructure, tabsIndicatorStructure, tabsStripStructure, TABS_INDICATOR_UNIT_WIDTH, TABS_SIZES } from "./Tabs.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
-const INDICATOR_MOVE_MS = 200;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
+/** Centre of the 1dp bar in its own untransformed box — `scaleX` grows around it, not from the left. */
+const INDICATOR_ORIGIN = TABS_INDICATOR_UNIT_WIDTH / 2;
+const TabStripItem = /*#__PURE__*/memo(function TabStripItem({
+  item,
+  selected,
+  size,
+  theme,
+  labelColor,
+  hitSlop,
+  fontSize,
+  iconSize,
+  onPress,
+  onLayout,
+  hapticsSelection,
+  testID
+}) {
+  const a11y = resolveTabAccessibility({
+    selected
+  });
+  const press = usePressState(false);
+  const [focused, setFocused] = useState(false);
+  const handlePress = useCallback(() => {
+    hapticsSelection();
+    onPress(item.value);
+  }, [hapticsSelection, onPress, item.value]);
+  const handleLayout = useCallback(event => {
+    press.onLayout(event);
+    onLayout(item.value, event);
+  }, [onLayout, item.value, press.onLayout]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const focusRingStyle = useMemo(() => [tabsFocusRingStructure(theme), {
+    borderColor: theme.colors.border.focus
+  }], [theme]);
+  const itemStyle = useMemo(() => [tabItemStructure(theme, {
+    size
+  }), {
+    overflow: "hidden"
+  }, press.animatedStyle], [theme, size, press.animatedStyle]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }), [theme.mode, theme.radii.md]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights[selected ? "semibold" : "medium"]), {
+    fontSize,
+    color: labelColor
+  }], [theme, fontSize, labelColor, selected]);
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    "aria-selected": a11y["aria-selected"],
+    accessibilityLabel: item.label,
+    onPress: handlePress,
+    onLayout: handleLayout,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: press.handlers.onPressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    hitSlop: hitSlop,
+    style: itemStyle,
+    children: [/*#__PURE__*/_jsx(Reanimated.View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-press-overlay` : undefined,
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
+    }), focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID ? `${testID}-focus-ring` : undefined,
+      style: focusRingStyle
+    }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+      name: item.icon,
+      size: iconSize,
+      color: labelColor,
+      strokeWidth: ICON_STROKE
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: item.label
+    })]
+  });
+});
 export const Tabs = /*#__PURE__*/memo(function Tabs({
   items,
   value,
@@ -31,12 +118,14 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const colors = resolveTabsColors(theme.colors);
+  const motion = useMotion();
+  const haptics = useHaptics();
+  const colors = useMemo(() => resolveTabsColors(theme.colors), [theme.colors]);
   const spec = TABS_SIZES[size];
   const [layouts, setLayouts] = useState({});
-  const indicatorX = useRef(new Animated.Value(0)).current;
-  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const indicatorX = useAnimatedValue(0);
+  const indicatorScaleX = useAnimatedValue(0);
+  const running = useRef(null);
   const activeLayout = layouts[value];
   const handleTabLayout = useCallback((itemValue, event) => {
     const {
@@ -57,71 +146,50 @@ export const Tabs = /*#__PURE__*/memo(function Tabs({
   }, []);
   useEffect(() => {
     if (activeLayout === undefined) return;
-    if (reducedMotion) {
-      indicatorX.setValue(activeLayout.x);
-      indicatorWidth.setValue(activeLayout.width);
+    running.current?.stop();
+    const toX = activeLayout.x + activeLayout.width / 2 - INDICATOR_ORIGIN;
+    const toScaleX = activeLayout.width / TABS_INDICATOR_UNIT_WIDTH;
+    if (!motion.enabled) {
+      indicatorX.setValue(toX);
+      indicatorScaleX.setValue(toScaleX);
       return;
     }
-    Animated.parallel([Animated.timing(indicatorX, {
-      toValue: activeLayout.x,
-      duration: INDICATOR_MOVE_MS,
-      useNativeDriver: false
-    }), Animated.timing(indicatorWidth, {
-      toValue: activeLayout.width,
-      duration: INDICATOR_MOVE_MS,
-      useNativeDriver: false
-    })]).start();
-  }, [activeLayout, reducedMotion, indicatorX, indicatorWidth]);
+    running.current = Animated.parallel([motion.timing(indicatorX, toX), motion.timing(indicatorScaleX, toScaleX)]);
+    running.current.start();
+    return () => running.current?.stop();
+  }, [activeLayout, motion, indicatorX, indicatorScaleX]);
+  useEffect(() => () => running.current?.stop(), []);
+  const indicatorStyle = useMemo(() => [tabsIndicatorStructure(theme), {
+    backgroundColor: colors.indicator,
+    transform: [{
+      translateX: indicatorX
+    }, {
+      scaleX: indicatorScaleX
+    }]
+  }], [theme, colors.indicator, indicatorX, indicatorScaleX]);
+  const rootStyle = useMemo(() => [tabsStripStructure(theme), style], [theme, style]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     accessibilityRole: "tablist",
-    style: [tabsStripStructure(theme), style],
+    style: rootStyle,
     children: [/*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       testID: testID ? `${testID}-indicator` : undefined,
-      style: [tabsIndicatorStructure(theme), {
-        backgroundColor: colors.indicator,
-        transform: [{
-          translateX: indicatorX
-        }],
-        width: indicatorWidth
-      }]
-    }), items.map(item => {
-      const selected = item.value === value;
-      const a11y = resolveTabAccessibility({
-        selected
-      });
-      const labelColor = selected ? colors.activeLabel : colors.inactiveLabel;
-      return /*#__PURE__*/_jsxs(Pressable, {
-        testID: testID ? `${testID}-${item.value}` : undefined,
-        accessibilityRole: a11y.accessibilityRole,
-        accessibilityState: a11y.accessibilityState,
-        accessibilityLabel: item.label,
-        onPress: () => onValueChange(item.value),
-        onLayout: event => handleTabLayout(item.value, event),
-        hitSlop: spec.hitSlop,
-        style: ({
-          pressed
-        }) => [tabItemStructure(theme, {
-          size
-        }), pressed && {
-          backgroundColor: colors.pressedTab
-        }],
-        children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
-          name: item.icon,
-          size: spec.iconSize,
-          color: labelColor,
-          strokeWidth: ICON_STROKE
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize: spec.fontSize,
-            color: labelColor
-          }],
-          children: item.label
-        })]
-      }, item.value);
-    })]
+      style: indicatorStyle
+    }), items.map(item => /*#__PURE__*/_jsx(TabStripItem, {
+      item: item,
+      selected: item.value === value,
+      size: size,
+      theme: theme,
+      labelColor: item.value === value ? colors.activeLabel : colors.inactiveLabel,
+      hitSlop: spec.hitSlop,
+      fontSize: spec.fontSize,
+      iconSize: spec.iconSize,
+      onPress: onValueChange,
+      onLayout: handleTabLayout,
+      hapticsSelection: haptics.selection,
+      testID: testID ? `${testID}-${item.value}` : undefined
+    }, item.value))]
   });
 });
 //# sourceMappingURL=Tabs.js.map

package/lib/module/modules/tabs/Tabs.variants.js

@@ -68,9 +68,7 @@ export function resolveTabsColors(colors) {
 export function resolveTabAccessibility(input) {
   return {
     accessibilityRole: "tab",
-    accessibilityState: {
-      selected: input.selected
-    }
+    "aria-selected": input.selected
   };
 }
 
@@ -92,7 +90,8 @@ export const tabItemStructure = createThemedVariants(theme => ({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {
@@ -119,17 +118,42 @@ export const tabItemStructure = createThemedVariants(theme => ({
 }));
 
 /**
- * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp); the pill radius is
- * `radii.full`. Position (`left`/`width`, via `transform`/`width`) is driven by `Animated.Value`s
- * in `Tabs.tsx`, not by this static resolver.
+ * The active-tab indicator bar. Thickness is the theme's `border.thick` (2dp). Its width is a fixed
+ * 1dp unit that `Tabs.tsx` stretches with an animated `scaleX` — a transform, so the whole indicator
+ * runs on the native driver (animating `width` cannot, and forces a layout pass per frame).
+ *
+ * No `borderRadius`: a corner radius is applied BEFORE the transform, so `scaleX` would smear a
+ * 0.5dp round end into a lens the full width of the tab. At 2dp thick, square ends are
+ * indistinguishable from the previous `radii.full` pill.
  */
+export const TABS_INDICATOR_UNIT_WIDTH = 1;
+
+/**
+ * The keyboard/AT focus ring drawn over one tab's own bounds — the same treatment
+ * `bottomNavFocusRingStructure` uses, and inset rather than outset because the strip's `columnGap`
+ * is a single space step: a ring drawn outside a tab would overlap its neighbour. Focus is NOT the
+ * animated indicator below — that bar marks SELECTION, which moves only on press. Its colour is
+ * applied inline over this, never hardcoded here.
+ */
+export const tabsFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
+  }
+}));
 export const tabsIndicatorStructure = createThemedVariants(theme => ({
   base: {
     position: "absolute",
     left: 0,
     bottom: 0,
-    height: theme.borderWidths.thick,
-    borderRadius: theme.radii.full
+    width: TABS_INDICATOR_UNIT_WIDTH,
+    height: theme.borderWidths.thick
   }
 }));
 //# sourceMappingURL=Tabs.variants.js.map

package/lib/module/modules/text/MODULE.md

@@ -0,0 +1,54 @@
+# text
+
+Typography primitives — `Text` and `Heading` with closed `variant` unions. The base primitive most
+other modules compose, so a colour defect here is a defect everywhere.
+
+## Usage
+
+```tsx
+import { Text, Heading } from 'pixelize-native-library/text';
+
+<Heading variant="h2">Title</Heading>
+<Text variant="body-sm">Secondary copy</Text>
+```
+
+## Variants
+
+| `Text` variant | size | weight | colour role |
+|---|---|---|---|
+| `body` | 17 iOS / 16 Android | regular | `fg.default` |
+| `body-sm` | `sm` | regular | `fg.default` |
+| `caption` | `xs` | regular | `fg.muted` |
+| `label` | `md` | semibold | `fg.default` |
+| `label-sm` | `sm` | semibold | `fg.default` |
+| `overline` | `xs` | bold | `fg.muted` | uppercase + wider tracking |
+
+Optional props (additive): `color` (`fg` role or `status` role), `align`, `weight`, `numberOfLines`.
+Every variant resolves `lineHeight` (size + 5) and `letterSpacing` from theme tokens.
+
+`Heading` reuses `label` / `label-sm` and overrides only the font size (`h1` `3xl` → `h4` `lg`). It
+renders with `accessibilityRole="header"` **and `aria-level` derived 1:1 from `variant`**
+(`HEADING_LEVELS` in `Text.variants.ts`) — `react-native-web` renders every `header` role as `<h1>`
+unless `aria-level` is set, so without this every `Heading` variant rendered the same DOM tag
+regardless of size (see `core/heading/MODULE.md`). `Text` carries neither prop.
+
+## Colour
+
+A variant may bind to **`fg.default` or `fg.muted` only** — the union is closed at the type level
+(`TextColorRole`), and `Text.test.ts` measures both roles across all 9 brands × both modes against
+`bg.canvas`, `bg.surface` and `bg.raised`. Measured minimums: `fg.default` 6.10 / 6.65 / 6.31,
+`fg.muted` 6.52 / 6.99 / 6.71 — all clear WCAG 1.4.3's 4.5:1.
+
+**`fg.subtle` is not available to a text variant.** It is the flat `gray[500]` rung tuned to the 3:1
+non-text tier, with no `readableOn()` derivation behind it, and measures **3.19:1** against
+`bg.canvas` on emerald light (also failing on radiant 3.57, rosewood 3.59, meadow 4.16, lavender
+4.28). `overline` shipped bound to it at `fontSize.xs` — 12dp, with no large-text exemption to fall
+back on. `Text.test.ts` pins the `fg.muted` binding so it cannot come back; `Timeline` documents the
+same defect for its timestamp.
+
+## Testing
+
+`resolveTextColor(colors, variant)` is pure and takes `RoleColors`, so the WCAG suite measures the
+exact value the component renders without building a `Theme` or a React tree. `TEXT_VARIANTS` is the
+runtime companion to the `TextVariant` union so the suite enumerates every variant a consumer can
+pass — a new variant is covered the moment it is added.

package/lib/module/modules/text/Text.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { memo, useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { HeadingText } from "../../core/heading/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { HEADING_LEVELS, resolveHeadingStyle, resolveTextStyle } from "./Text.variants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Text = /*#__PURE__*/memo(function Text({
+  variant = 'body',
+  children,
+  color,
+  numberOfLines,
+  align,
+  weight,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const textOptions = useMemo(() => ({
+    color,
+    align,
+    weight
+  }), [color, align, weight]);
+  const rootStyle = useMemo(() => [resolveTextStyle(theme, variant, textOptions), style], [theme, variant, textOptions, style]);
+  return /*#__PURE__*/_jsx(RNText, {
+    testID: testID,
+    numberOfLines: numberOfLines,
+    style: rootStyle,
+    children: children
+  });
+});
+export const Heading = /*#__PURE__*/memo(function Heading({
+  variant = 'h2',
+  children,
+  color,
+  numberOfLines,
+  align,
+  weight,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const textOptions = useMemo(() => ({
+    color,
+    align,
+    weight
+  }), [color, align, weight]);
+  const rootStyle = useMemo(() => [resolveHeadingStyle(theme, variant, textOptions), style], [theme, variant, textOptions, style]);
+  return /*#__PURE__*/_jsx(HeadingText, {
+    testID: testID,
+    numberOfLines: numberOfLines,
+    accessibilityRole: "header",
+    "aria-level": HEADING_LEVELS[variant],
+    style: rootStyle,
+    children: children
+  });
+});
+//# sourceMappingURL=Text.js.map

package/lib/module/modules/text/Text.variants.js

@@ -0,0 +1,162 @@
+"use strict";
+
+import { Platform } from 'react-native';
+export const HEADING_LEVELS = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4
+};
+export const TEXT_VARIANTS = ['display', 'title', 'heading', 'subheading', 'body', 'body-sm', 'caption', 'label', 'label-sm', 'overline'];
+const VARIANT_CONFIG = {
+  display: {
+    fontSize: '4xl',
+    weight: 'bold',
+    color: 'default',
+    lineHeight: 40,
+    letterSpacing: -0.5
+  },
+  title: {
+    fontSize: '2xl',
+    weight: 'bold',
+    color: 'default',
+    lineHeight: 30,
+    letterSpacing: -0.3
+  },
+  heading: {
+    fontSize: 'xl',
+    weight: 'bold',
+    color: 'default',
+    lineHeight: 26,
+    letterSpacing: -0.2
+  },
+  subheading: {
+    fontSize: 'lg',
+    weight: 'semibold',
+    color: 'default',
+    lineHeight: 24,
+    letterSpacing: -0.1
+  },
+  body: {
+    fontSize: 'body',
+    weight: 'regular',
+    color: 'default',
+    lineHeight: 'body',
+    letterSpacing: 0
+  },
+  'body-sm': {
+    fontSize: 'sm',
+    weight: 'regular',
+    color: 'default',
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  caption: {
+    fontSize: 'xs',
+    weight: 'medium',
+    color: 'muted',
+    lineHeight: 16,
+    letterSpacing: 0.2
+  },
+  label: {
+    fontSize: 'sm',
+    weight: 'semibold',
+    color: 'default',
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  'label-sm': {
+    fontSize: 'xs',
+    weight: 'semibold',
+    color: 'default',
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  overline: {
+    fontSize: 'xs',
+    weight: 'bold',
+    color: 'muted',
+    lineHeight: 16,
+    letterSpacing: 1.2,
+    uppercase: true
+  }
+};
+const HEADING_OVERRIDES = {
+  h1: {
+    fontSize: '3xl'
+  },
+  h2: {
+    fontSize: '2xl'
+  },
+  h3: {
+    fontSize: 'xl'
+  },
+  h4: {
+    fontSize: 'lg'
+  }
+};
+export const HEADING_VARIANTS = {
+  h1: 'title',
+  h2: 'heading',
+  h3: 'subheading',
+  h4: 'label'
+};
+function variantFontSize(theme, variant) {
+  const config = VARIANT_CONFIG[variant];
+  if (config.fontSize === 'body') {
+    return Platform.select({
+      ios: 17,
+      default: theme.fontSizes.md
+    });
+  }
+  return theme.fontSizes[config.fontSize];
+}
+function variantLineHeight(_theme, variant, fontSize) {
+  const config = VARIANT_CONFIG[variant];
+  if (config.lineHeight === 'body') {
+    return fontSize + 6;
+  }
+  return config.lineHeight;
+}
+export function resolveTextColorFromRole(colors, role) {
+  if (role === 'default' || role === 'muted') {
+    return colors.fg[role];
+  }
+  return colors.status[role].text;
+}
+export function resolveTextColor(colors, variant) {
+  return colors.fg[VARIANT_CONFIG[variant].color];
+}
+export function resolveTextStyle(theme, variant, options) {
+  const config = VARIANT_CONFIG[variant];
+  const fontSize = variantFontSize(theme, variant);
+  const weight = options?.weight ?? config.weight;
+  const color = options?.color !== undefined ? resolveTextColorFromRole(theme.colors, options.color) : resolveTextColor(theme.colors, variant);
+  const style = {
+    ...theme.fontStyleForWeight(theme.fontWeights[weight]),
+    fontSize,
+    lineHeight: variantLineHeight(theme, variant, fontSize),
+    letterSpacing: config.letterSpacing,
+    color
+  };
+  if (options?.align !== undefined) {
+    style.textAlign = options.align;
+  }
+  if (config.uppercase) {
+    style.textTransform = 'uppercase';
+  }
+  return style;
+}
+export function resolveHeadingStyle(theme, variant, options) {
+  const base = resolveTextStyle(theme, HEADING_VARIANTS[variant], options);
+  const override = HEADING_OVERRIDES[variant];
+  if (!override) return base;
+  const fontSize = theme.fontSizes[override.fontSize];
+  return {
+    ...base,
+    fontSize,
+    lineHeight: fontSize + (variant === 'h1' ? 6 : variant === 'h2' ? 6 : 4),
+    letterSpacing: variant === 'h1' ? -0.3 : variant === 'h2' ? -0.2 : -0.1
+  };
+}
+//# sourceMappingURL=Text.variants.js.map

package/lib/module/modules/text/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Text, Heading } from "./Text.js";
+//# sourceMappingURL=index.js.map