pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/button/Button.js

@@ -1,46 +1,23 @@
 "use strict";
 
-/**
- * Button — the reference component. The single most-repeated shape in the audited apps (81 raw
- * TouchableOpacity in crm-mobile, 155 in ecommerce-mobile with three different style-key sets for the
- * SAME add-to-cart button, 195 web usages). Every other module copies the patterns here: how variants
- * resolve, how `tone` maps to role colours, how accessibility is wired, and the shape of the tests.
- */
-
-import { memo, useRef, useState } from "react";
-import { ActivityIndicator, Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text } from "react-native";
+import Animated from "react-native-reanimated";
+import { AccentGradientFill } from "../../core/gradient/index.js";
+import { useFocusRing, usePressState } from "../../core/motion/usePressState.js";
+import { useHaptics } from "../../core/haptics/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { composeBoxShadow, highlight } from "../../theme/platform/highlight.native.js";
+import { tokenBoxShadow } from "../../theme/platform/floatingSurface.native.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { rippleColor, stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
+import { useTheme, useThemeColors } from "../../theme/hooks.js";
 import { BUTTON_SIZES, buttonStructure, resolveButtonAccessibility, resolveButtonTone } from "./Button.variants.js";
-
-/** A button with a visible text label. `accessibilityLabel` defaults to `label`. */
-
-/**
- * An icon-only button. It has no visible text, so `accessibilityLabel` is REQUIRED at the type level
- * — the single worst a11y trap on web (its tooltip was the only label on icon-only buttons in 22
- * files, and tooltips do not exist on touch). `label?: never` makes the two shapes mutually exclusive.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PRESS_FADE_MS = 120;
 const ICON_STROKE = 2;
-// State-layer scrims. Direction is chosen by the label's brightness so the fill moves AWAY from the
-// label on press — its contrast can only rise. 8-digit hex carries the alpha (~15%) directly.
-const PRESS_SCRIM_DARK = "#00000026";
-const PRESS_SCRIM_LIGHT = "#ffffff26";
-// The focus ring sits a small gap OUTSIDE the control, on the canvas, because `border.focus` is the
-// role token proven ≥ 3:1 against the canvas (WCAG 2.4.11) — drawn over a solid fill it could fail.
-const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_WIDTH = 3;
 const FOCUS_RING_GAP = 2;
-
-/** Cheap perceived-brightness split; `onFill` is only ever a near-white or near-black role value. */
-function isLight(hex) {
-  const n = parseInt(hex.slice(1, 7), 16);
-  const r = n >> 16 & 0xff;
-  const g = n >> 8 & 0xff;
-  const b = n & 0xff;
-  return r * 0.299 + g * 0.587 + b * 0.114 > 140;
-}
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function ButtonImpl(props) {
   const {
     variant = "solid",
@@ -50,100 +27,160 @@ function ButtonImpl(props) {
     iconPosition = "leading",
     loading = false,
     disabled = false,
+    selected,
     fullWidth = false,
     onPress,
+    onLongPress,
+    onPressOut,
+    onHoverIn,
+    onHoverOut,
+    onFocus,
+    onBlur,
     style,
     testID,
     label,
-    accessibilityLabel
+    accessibilityLabel,
+    accessibilityHint
   } = props;
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const overlay = useRef(new Animated.Value(0)).current;
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const colors = useThemeColors();
+  const haptics = useHaptics();
+  const blocked = disabled || loading;
+  const press = usePressState(blocked);
   const [focused, setFocused] = useState(false);
+  const {
+    focusRingStyle
+  } = useFocusRing(focused, blocked);
   const spec = BUTTON_SIZES[size];
-  const toneColors = resolveButtonTone(theme.colors, tone);
+  const toneColors = useMemo(() => resolveButtonTone(theme.colors, tone), [theme.colors, tone]);
   const iconOnly = label === undefined;
   const foreground = variant === "solid" ? toneColors.onFill : toneColors.text;
-  const overlayColor = variant === "solid" ? isLight(toneColors.onFill) ? PRESS_SCRIM_DARK : PRESS_SCRIM_LIGHT : toneColors.subtle;
-  const a11y = resolveButtonAccessibility({
+  const overlayColor = stateLayerScrim(theme.mode);
+  const handlePress = useCallback(() => {
+    haptics.selection();
+    onPress?.();
+  }, [haptics, onPress]);
+  const a11y = useMemo(() => resolveButtonAccessibility({
     label,
     accessibilityLabel,
     disabled,
     loading,
-    onPress
-  });
-  const setPressed = pressed => {
-    Animated.timing(overlay, {
-      toValue: pressed ? 1 : 0,
-      duration: reducedMotion ? 0 : PRESS_FADE_MS,
-      useNativeDriver: true
-    }).start();
-  };
-  const glyph = name => /*#__PURE__*/_jsx(Icon, {
+    selected,
+    onPress: onPress === undefined ? undefined : handlePress
+  }), [label, accessibilityLabel, disabled, loading, selected, onPress, handlePress]);
+  const handlePressOut = useCallback(event => {
+    press.handlers.onPressOut();
+    onPressOut?.(event);
+  }, [press.handlers, onPressOut]);
+  const handleFocus = useCallback(event => {
+    setFocused(true);
+    onFocus?.(event);
+  }, [onFocus]);
+  const handleBlur = useCallback(event => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur]);
+  const radius = theme.radii.md;
+  const solidToken = elevationTokens.sm;
+  const solidElevation = theme.elevation.sm;
+  const highlightLayers = highlight("subtle", theme.mode);
+  const surfaceStyle = useMemo(() => {
+    const base = {
+      borderRadius: radius,
+      borderCurve: "continuous"
+    };
+    if (variant === "solid") {
+      base.boxShadow = composeBoxShadow(tokenBoxShadow(solidToken), highlightLayers);
+      base.elevation = solidElevation.elevation;
+      Object.assign(base, solidElevation);
+    }
+    return base;
+  }, [variant, radius, solidToken, solidElevation, highlightLayers]);
+  const androidRipple = useMemo(() => {
+    if (Platform.OS !== "android") return undefined;
+    return {
+      color: rippleColor(theme.mode),
+      borderless: false
+    };
+  }, [theme.mode]);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: overlayColor,
+    borderRadius: radius
+  }), [overlayColor, radius]);
+  const focusRingStaticStyle = useMemo(() => ({
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: colors.border.focus,
+    borderRadius: radius + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH)
+  }), [colors.border.focus, radius]);
+  const focusOutlineStyle = useMemo(() => ({
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineOffset: FOCUS_RING_GAP,
+    outlineColor: colors.border.focus,
+    outlineStyle: "solid",
+    borderRadius: radius
+  }), [colors.border.focus, radius]);
+  const glyph = useCallback(name => /*#__PURE__*/_jsx(Icon, {
     name: name,
     size: spec.iconSize,
     color: foreground,
     strokeWidth: ICON_STROKE
-  });
-
-  // The spinner is never the sole loading signal — `accessibilityState.busy` announces it, and the
-  // label (when present) stays visible. Hidden from AT so it isn't read as a separate element.
-  const spinner = /*#__PURE__*/_jsx(ActivityIndicator, {
+  }), [spec.iconSize, foreground]);
+  const spinner = useMemo(() => /*#__PURE__*/_jsx(ActivityIndicator, {
     size: "small",
     color: foreground,
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants"
-  });
+  }), [foreground]);
   const leading = loading ? spinner : icon && (iconPosition === "leading" || iconOnly) ? glyph(icon) : null;
   const trailing = !loading && icon && iconPosition === "trailing" && !iconOnly ? glyph(icon) : null;
-  return /*#__PURE__*/_jsxs(Pressable, {
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    "aria-disabled": a11y["aria-disabled"],
+    "aria-busy": a11y["aria-busy"],
+    "aria-pressed": a11y["aria-pressed"],
     accessibilityState: a11y.accessibilityState,
     disabled: a11y.disabled,
     onPress: a11y.onPress,
-    onPressIn: () => setPressed(true),
-    onPressOut: () => setPressed(false),
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
+    onLongPress: onLongPress,
+    onPressIn: press.handlers.onPressIn,
+    onPressOut: handlePressOut,
+    onHoverIn: onHoverIn,
+    onHoverOut: onHoverOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onLayout: press.onLayout,
     hitSlop: spec.hitSlop,
+    android_ripple: androidRipple,
     style: [buttonStructure(theme, {
       variant,
       size
-    }), variant === "solid" && {
+    }), surfaceStyle, {
+      overflow: "hidden"
+    }, variant === "solid" && {
       backgroundColor: toneColors.fill
     }, variant === "outline" && {
       borderColor: toneColors.border
     }, iconOnly && {
       paddingHorizontal: 0,
       minWidth: spec.height
-    }, fullWidth && styles.fullWidth, (disabled || loading) && styles.dimmed, style],
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none"
-      // Matches the control's own radius: the control isn't `overflow: hidden` (that would clip the
-      // focus ring below), so the state layer rounds itself instead of showing square corners.
-      ,
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: overlayColor,
-        opacity: overlay,
-        borderRadius: theme.radii.base
-      }]
-    }), focused && /*#__PURE__*/_jsx(View, {
+    }, fullWidth && styles.fullWidth, press.animatedStyle, focused && focusOutlineStyle, (disabled || loading) && styles.dimmed, style],
+    children: [variant === "solid" && /*#__PURE__*/_jsx(AccentGradientFill, {
+      color: toneColors.fill
+    }), focused && /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: "none",
       testID: "button-focus-ring",
-      style: {
-        position: "absolute",
-        top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-        left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-        right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-        bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-        borderWidth: FOCUS_RING_WIDTH,
-        borderColor: theme.colors.border.focus,
-        borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
-      }
+      style: [styles.focusRingHost, focusRingStaticStyle, focusRingStyle]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      testID: "button-press-overlay",
+      style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle]
     }), leading, label !== undefined && /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
       style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
@@ -158,16 +195,16 @@ const styles = StyleSheet.create({
   fullWidth: {
     alignSelf: "stretch"
   },
-  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
   dimmed: {
     opacity: 0.5
   },
   linkText: {
     textDecorationLine: "underline"
+  },
+  focusRingHost: {
+    position: "absolute",
+    pointerEvents: "none"
   }
 });
-
-// A consumer's screen re-renders far more often than Button's own props change — memo is near-free
-// insurance for a design-system primitive (see CLAUDE.md "Performance — no unnecessary re-renders").
 export const Button = /*#__PURE__*/memo(ButtonImpl);
 //# sourceMappingURL=Button.js.map

package/lib/module/modules/button/Button.variants.js

@@ -31,22 +31,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const BUTTON_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   },
   lg: {
-    height: 48,
+    height: 56,
     fontSize: 18,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(56)
   }
 };
 /**
@@ -96,10 +96,13 @@ export function resolveButtonTone(colors, tone) {
  *  - disabled OR loading blocks the press (guarded `onPress` AND the `disabled` prop), so a loading
  *    button is non-interactive while it works.
  *
- * `accessibilityState.disabled` tracks the same `blocked` flag the `Pressable disabled` prop uses, so
- * what a screen reader hears matches what actually renders: a loading button announces `busy` AND
- * `disabled` (RN's `disabled` prop forces `disabled` into the state regardless). Reporting `busy` here
- * while the rendered control forced `disabled` back to true would be a lie to assistive tech.
+ * `aria-disabled` tracks the same `blocked` flag the `Pressable disabled` prop uses, so what a screen
+ * reader hears matches what actually renders: a loading button announces `busy` AND `disabled` (RN's
+ * `disabled` prop forces `disabled` into the state regardless). Reporting `busy` here while the
+ * rendered control forced `disabled` back to true would be a lie to assistive tech.
+ *
+ * `selected` is only exposed when the CALLER passed it, mirroring `resolveChipAccessibility`: an
+ * ordinary button has no toggle state and must not announce "not pressed" as if it had one.
  */
 export function resolveButtonAccessibility(input) {
   const isDisabled = input.disabled === true;
@@ -108,9 +111,11 @@ export function resolveButtonAccessibility(input) {
   return {
     accessibilityRole: "button",
     accessibilityLabel: input.accessibilityLabel ?? input.label,
-    accessibilityState: {
-      disabled: blocked,
-      busy: isLoading
+    "aria-disabled": blocked,
+    "aria-busy": isLoading,
+    "aria-pressed": input.selected,
+    accessibilityState: input.selected === undefined ? undefined : {
+      selected: input.selected
     },
     disabled: blocked,
     onPress: blocked ? undefined : input.onPress
@@ -131,7 +136,8 @@ export const buttonStructure = createThemedVariants(theme => ({
     alignItems: "center",
     justifyContent: "center",
     columnGap: theme.space[2],
-    borderRadius: theme.radii.base
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous"
   },
   variants: {
     size: {

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

@@ -28,7 +28,12 @@ and 195 web usages). It is also the **reference module**: the other 16 component
 | `disabled` | `boolean` | `false` | Dimmed; blocks press. |
 | `fullWidth` | `boolean` | `false` | `alignSelf: stretch`. |
 | `onPress` | `() => void` | — | Gated off while disabled/loading. |
+| `onLongPress` | `(e) => void` | — | Passed straight through. Setting it makes RN's `Pressable` route a long press here instead of `onPress`. |
+| `onPressOut` / `onFocus` / `onBlur` | `(e) => void` | — | Chained AFTER Button's own press/focus ring, never replacing it. |
+| `onHoverIn` / `onHoverOut` | `(e) => void` | — | Passed through; only react-native-web (and desktop RN) emits them. |
 | `accessibilityLabel` | `string` | `label` | **Required** when icon-only (type-enforced). |
+| `accessibilityHint` | `string` | — | On the control. A wrapping `Tooltip` MERGES its label into this rather than clobbering it. |
+| `selected` | `boolean` | — | Toggle state for a button that stays "on", e.g. a rich-text-editor toolbar control (Bold/Italic). ACCESSIBILITY ONLY — appearance stays with `variant`, which the caller already swaps for the active look. Omitted entirely, an ordinary button announces no pressed state at all. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
 
 `ButtonProps` is a discriminated union: a labelled button OR an icon-only button (`label?: never` +
@@ -36,6 +41,10 @@ required `accessibilityLabel`). It is impossible to ship an unlabelled icon butt
 worst a11y trap (its tooltip was the only label on icon-only buttons in 22 files; tooltips don't
 exist on touch).
 
+The seven props above the `style` row are exactly what `Tooltip` injects via `cloneElement`. They are
+declared explicitly because `{...rest}` is banned repo-wide — an undeclared prop is silently dropped,
+so without them a tooltip on a Button never opens.
+
 ## Accessibility contract (WCAG)
 
 - **2.5.x target size** — every size reaches ≥ 44 dp; short sizes keep their height and grow the
@@ -47,10 +56,17 @@ exist on touch).
 - **2.4.7 / 2.4.11** — a visible focus ring (`border.focus`) appears on keyboard / external-keyboard /
   AT focus (`onFocus`/`onBlur`). It sits a small gap OUTSIDE the control, on the canvas, because
   `border.focus` is the role token proven ≥ 3:1 against the canvas (over a solid fill it could fail).
-- **1.4.1** — `loading` is announced via `accessibilityState.busy`, not conveyed by the spinner alone
-  (the label stays visible; the spinner is hidden from AT).
+- **1.4.1** — `loading` is announced via `aria-busy`, not conveyed by the spinner alone (the label
+  stays visible; the spinner is hidden from AT).
 - **2.3.3** — the press fade is suppressed when the OS reduce-motion setting is on.
-- `accessibilityRole="button"`, `accessibilityState` for disabled/busy, `accessibilityLabel ?? label`.
+- `accessibilityRole="button"`, flat `aria-disabled` / `aria-busy` (never `accessibilityState={{…}}`
+  — react-native-web discards the object form, see `docs/PLATFORM-A11Y-PROPS.md`),
+  `accessibilityLabel ?? label`.
+- **`selected` (toggle state)** — emits BOTH `aria-pressed` (web; the correct ARIA for a toggle
+  button, unlike `aria-selected`, which is invalid on `role="button"`) and
+  `accessibilityState={{ selected }}` (native; RNW discards this object, so it never collides with
+  the flat prop). Neither is emitted when `selected` is omitted — an ordinary button has no toggle
+  state and must not announce "not pressed".
 
 ## Why `tone` is a union, not a `color`
 
@@ -82,6 +98,18 @@ label); `accent`/`danger` map to the accent and danger roles.
   as optional peers); `Button.tsx` and `index.ts` import from there.
 - `useReducedMotion` hoisted to `src/core/a11y/`.
 
+Press feedback uses `usePressState` (Reanimated scale + state-layer overlay, width-aware).
+Focus ring uses native `outline*` props animated via `useFocusRing`. Solid variant gets
+`elevation.sm` + inset highlight; Android `android_ripple` on a clipped pressable.
+
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `ButtonImpl` internally, exported as `Button = memo(ButtonImpl)`. Its one child, `Icon`, only ever receives primitives — nothing to memoize.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.
+
+- **Round 2 visual** — radii retarget (`radii.md`/`lg`/`xl`/`full`), `borderCurve: continuous` on md+ corners; floating surfaces wire platform elevation/highlight where applicable.