pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/charts/PieChart.js

@@ -0,0 +1,140 @@
+"use strict";
+
+import { memo, useCallback, useMemo } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
+import { useTheme } from "../../theme/hooks.js";
+import { ChartLegend } from "./ChartLegend.js";
+import { SEGMENT_SEPARATOR_WIDTH, describeWedge, hitSlopFor, resolvePieWedges, resolveWedgeBoundingBox, seriesShapeAt, summarizePieChart } from "./Charts.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const WedgePressTarget = /*#__PURE__*/memo(function WedgePressTarget({
+  index,
+  box,
+  label,
+  testID,
+  onPress
+}) {
+  const press = useCallback(() => onPress(index), [onPress, index]);
+  const frame = useMemo(() => ({
+    position: "absolute",
+    left: box.x,
+    top: box.y,
+    width: box.width,
+    height: box.height
+  }), [box]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    hitSlop: hitSlopFor(box.width, box.height),
+    onPress: press,
+    style: frame
+  });
+});
+export const PieChart = /*#__PURE__*/memo(function PieChart({
+  segments,
+  size = 180,
+  showLegend = true,
+  showPercentages = true,
+  onPressSegment,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const center = size / 2;
+  const radius = size / 2;
+  const wedges = useMemo(() => resolvePieWedges(segments, theme.colors), [segments, theme.colors]);
+  const summary = useMemo(() => summarizePieChart(segments), [segments]);
+  const only = wedges.length === 1 ? wedges[0] : undefined;
+  const paths = useMemo(() => wedges.length > 1 ? wedges.map(wedge => ({
+    color: wedge.color,
+    d: describeWedge(center, center, radius, wedge.startAngle, wedge.endAngle)
+  })) : [], [wedges, center, radius]);
+  const pressTargets = useMemo(() => onPressSegment === undefined ? [] : wedges.map(wedge => ({
+    box: wedges.length === 1 ? {
+      x: 0,
+      y: 0,
+      width: size,
+      height: size
+    } : resolveWedgeBoundingBox(center, center, radius, wedge.startAngle, wedge.endAngle),
+    label: showPercentages ? `${wedge.source.label}, ${wedge.percentage}%` : wedge.source.label
+  })), [wedges, onPressSegment, showPercentages, size, center, radius]);
+
+  // Keyed by swatch colour alone, two adjacent ramp hues can sit under 1.1:1 contrast (measured,
+  // `Charts.test.ts`) — a knocked-out shape per row, matching the wedge's own separator-bounded
+  // position, is a channel a colour-blind reader can still use to match a legend row to its wedge.
+  const legendRows = useMemo(() => showLegend ? wedges.map((wedge, index) => ({
+    color: wedge.color,
+    label: showPercentages ? `${wedge.source.label} — ${wedge.percentage}%` : wedge.source.label,
+    shape: seriesShapeAt(index)
+  })) : [], [wedges, showLegend, showPercentages]);
+  const pressSegment = useCallback(index => {
+    const wedge = wedges[index];
+    if (wedge !== undefined) onPressSegment?.(wedge.source, index);
+  }, [wedges, onPressSegment]);
+  const sizeStyle = useMemo(() => ({
+    width: size,
+    height: size
+  }), [size]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [styles.container, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: sizeStyle,
+      children: [/*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-summary` : undefined,
+        accessible: true,
+        accessibilityRole: "image",
+        accessibilityLabel: summary,
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "none"
+      }), /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: /*#__PURE__*/_jsxs(Svg, {
+          width: size,
+          height: size,
+          children: [wedges.length === 0 && /*#__PURE__*/_jsx(Circle, {
+            testID: testID ? `${testID}-empty` : undefined,
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: theme.colors.bg.sunken
+          }), only !== undefined && /*#__PURE__*/_jsx(Circle, {
+            testID: testID ? `${testID}-segment-0` : undefined,
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: only.color
+          }), paths.map((path, index) => /*#__PURE__*/_jsx(Path, {
+            testID: testID ? `${testID}-segment-${index}` : undefined,
+            d: path.d,
+            fill: path.color,
+            stroke: theme.colors.bg.surface,
+            strokeWidth: SEGMENT_SEPARATOR_WIDTH
+          }, index))]
+        })
+      }), pressTargets.length > 0 && /*#__PURE__*/_jsx(View, {
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "box-none",
+        children: pressTargets.map((target, index) => /*#__PURE__*/_jsx(WedgePressTarget, {
+          testID: testID ? `${testID}-segment-${index}-press` : undefined,
+          index: index,
+          box: target.box,
+          label: target.label,
+          onPress: pressSegment
+        }, index))
+      })]
+    }), /*#__PURE__*/_jsx(ChartLegend, {
+      entries: legendRows,
+      glyph: "mark",
+      testID: testID ? `${testID}-legend` : undefined
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "flex-start"
+  }
+});
+//# sourceMappingURL=PieChart.js.map

package/lib/module/modules/charts/Sparkline.js

@@ -1,10 +1,10 @@
 "use strict";
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { View } from "react-native";
 import Svg, { Path } from "react-native-svg";
-import { useTheme } from "../../theme/index.js";
-import { resolveSparklineTone } from "./Charts.variants.js";
+import { useTheme } from "../../theme/hooks.js";
+import { decimateSeries, resolveSparklineTone } from "./Charts.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const STROKE_WIDTH = 2;
 const AREA_OPACITY = 0.15;
@@ -34,6 +34,7 @@ function buildPaths(data, width, height) {
 function round(value) {
   return Math.round(value * 100) / 100;
 }
+const sampleValue = value => value;
 export const Sparkline = /*#__PURE__*/memo(function Sparkline({
   data,
   width = 120,
@@ -44,7 +45,7 @@ export const Sparkline = /*#__PURE__*/memo(function Sparkline({
 }) {
   const theme = useTheme();
   const stroke = resolveSparklineTone(theme.colors, tone);
-  const paths = buildPaths(data, width, height);
+  const paths = useMemo(() => buildPaths(decimateSeries(data, sampleValue), width, height), [data, width, height]);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
     accessibilityElementsHidden: true,

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

@@ -9,4 +9,7 @@
 export { BarList } from "./BarList.js";
 export { DonutChart } from "./DonutChart.js";
 export { Sparkline } from "./Sparkline.js";
+export { BarChart } from "./BarChart.js";
+export { LineChart } from "./LineChart.js";
+export { PieChart } from "./PieChart.js";
 //# sourceMappingURL=index.js.map

package/lib/module/modules/checkbox/Checkbox.js

@@ -5,12 +5,17 @@
  * with tri-state support). Every state — unchecked, checked, indeterminate, disabled — maps to a
  * role-coloured pairing proven ≥ 3:1 / ≥ 4.5:1 across every brand × mode, same discipline as
  * `Button`.
+ *
+ * Motion comes from `core/motion`: the row takes `usePressMotion`, the glyph scales in when the box
+ * fills, and the focus ring crossfades. All three collapse to their end state under reduce-motion.
  */
 
-import { memo, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSpaceActivation } from "../../core/a11y/keyboard";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useAnimatedValue, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { CHECKBOX_SIZES, checkboxBoxStructure, checkboxRowStructure, resolveCheckboxAccessibility, resolveCheckboxColors } from "./Checkbox.variants.js";
 
 /** A checkbox with a visible label. `accessibilityLabel` defaults to `label`. Pressing the label
@@ -40,8 +45,8 @@ function CheckboxImpl(props) {
     accessibilityLabel
   } = props;
   const theme = useTheme();
-  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
-  const [focused, setFocused] = useState(false);
+  const motion = useMotion();
+  const press = usePressMotion(disabled);
   const spec = CHECKBOX_SIZES[size];
   const colors = resolveCheckboxColors(theme.colors);
   const a11y = resolveCheckboxAccessibility({
@@ -52,54 +57,119 @@ function CheckboxImpl(props) {
     disabled
   });
   const filled = checked || indeterminate;
-  const handlePress = () => {
+  const ringOpacity = useAnimatedValue(0);
+  const ringAnimation = useRef(null);
+  const glyphScale = useAnimatedValue(filled ? 1 : 0);
+  const glyphAnimation = useRef(null);
+  const setRingVisible = useCallback(visible => {
+    ringAnimation.current?.stop();
+    const to = visible ? 1 : 0;
+    if (!motion.enabled) {
+      ringOpacity.setValue(to);
+      return;
+    }
+    ringAnimation.current = motion.timing(ringOpacity, to, {
+      duration: "fast"
+    });
+    ringAnimation.current.start();
+  }, [motion, ringOpacity]);
+  const handleFocus = useCallback(() => setRingVisible(true), [setRingVisible]);
+  const handleBlur = useCallback(() => setRingVisible(false), [setRingVisible]);
+  useEffect(() => {
+    glyphAnimation.current?.stop();
+    const to = filled ? 1 : 0;
+    if (!motion.enabled) {
+      glyphScale.setValue(to);
+      return;
+    }
+    glyphAnimation.current = motion.timing(glyphScale, to, {
+      duration: "fast",
+      easing: "emphasized"
+    });
+    glyphAnimation.current.start();
+    return () => glyphAnimation.current?.stop();
+  }, [filled, motion, glyphScale]);
+  useEffect(() => () => {
+    ringAnimation.current?.stop();
+    glyphAnimation.current?.stop();
+  }, []);
+  const handlePress = useCallback(() => {
     if (disabled) return;
     onCheckedChange(!checked);
-  };
-  return /*#__PURE__*/_jsxs(Pressable, {
+  }, [disabled, onCheckedChange, checked]);
+
+  // Space is the checkbox's PRIMARY key, but RNW only presses on Space for `role="button"` — see
+  // `core/a11y/keyboard.web.ts`. No-op on native.
+  const pressableRef = useRef(null);
+  useSpaceActivation(pressableRef, handlePress, !disabled);
+  const rootStyle = useMemo(() => [disabled && styles.dimmed, style], [disabled, style]);
+  const rowStyle = useMemo(() => checkboxRowStructure(theme), [theme]);
+  const boxStyle = useMemo(() => [checkboxBoxStructure(theme, {
+    size
+  }), {
+    borderColor: filled ? colors.fill : colors.border,
+    backgroundColor: filled ? colors.fill : "transparent"
+  }], [theme, size, filled, colors.fill, colors.border]);
+  const focusRingStyle = useMemo(() => ({
+    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.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+  }), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: spec.fontSize,
+    color: colors.label
+  }], [theme, spec.fontSize, colors.label]);
+  const glyphStyle = useMemo(() => ({
+    transform: [{
+      scale: glyphScale
+    }]
+  }), [glyphScale]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: pressableRef,
     testID: testID,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: a11y.accessibilityLabel,
-    accessibilityState: a11y.accessibilityState,
+    "aria-checked": a11y["aria-checked"],
+    "aria-disabled": a11y["aria-disabled"],
     disabled: a11y.disabled,
     onPress: handlePress,
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
     hitSlop: spec.hitSlop,
-    style: [checkboxRowStructure(theme), disabled && styles.dimmed, style],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [checkboxBoxStructure(theme, {
-        size
-      }), {
-        borderColor: filled ? colors.fill : colors.border,
-        backgroundColor: filled ? colors.fill : "transparent"
-      }],
-      children: [focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        testID: "checkbox-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.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
-        }
-      }), filled && /*#__PURE__*/_jsx(Icon, {
-        name: indeterminate ? "minus" : "check",
-        size: spec.iconSize,
-        color: colors.icon,
-        strokeWidth: ICON_STROKE
+    style: rootStyle,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      testID: "checkbox-row",
+      style: [rowStyle, press.style],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: boxStyle,
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          pointerEvents: "none",
+          testID: "checkbox-focus-ring",
+          style: [focusRingStyle, {
+            opacity: ringOpacity
+          }]
+        }), filled && /*#__PURE__*/_jsx(Animated.View, {
+          testID: "checkbox-glyph",
+          style: glyphStyle,
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: indeterminate ? "minus" : "check",
+            size: spec.iconSize,
+            color: colors.icon,
+            strokeWidth: ICON_STROKE
+          })
+        })]
+      }), label !== undefined && /*#__PURE__*/_jsx(Text, {
+        style: labelStyle,
+        children: label
       })]
-    }), label !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: spec.fontSize,
-        color: colors.label
-      }],
-      children: label
-    })]
+    })
   });
 }
 const styles = StyleSheet.create({

package/lib/module/modules/checkbox/Checkbox.variants.js

@@ -63,25 +63,30 @@ export function resolveCheckboxColors(colors) {
  *  - `indeterminate` reports `"mixed"` over the literal `checked` value — regardless of `checked` —
  *    because a screen reader must hear the tri-state, not a stale boolean (matches the visual: the
  *    "minus" glyph also wins over "check" whenever `indeterminate` is true).
- *  - `disabled` blocks the toggle (the `Pressable disabled` prop), so `accessibilityState.disabled`
- *    always matches what actually renders.
+ *  - `disabled` blocks the toggle (the `Pressable disabled` prop), so `aria-disabled` always matches
+ *    what actually renders.
+ *
+ * FLAT `aria-*`, not `accessibilityState={{…}}`: react-native-web 0.21's `createDOMProps` picks a
+ * purely flat vocabulary and drops the object entirely, so the web build announced the role with no
+ * state at all. RN's own `Pressable` merges the flat props INTO `accessibilityState` (with the flat
+ * one winning), so one flat form is correct on both platforms.
  */
 export function resolveCheckboxAccessibility(input) {
   const isDisabled = input.disabled === true;
   return {
     accessibilityRole: "checkbox",
     accessibilityLabel: input.accessibilityLabel ?? input.label,
-    accessibilityState: {
-      checked: input.indeterminate === true ? "mixed" : input.checked,
-      disabled: isDisabled
-    },
+    "aria-checked": input.indeterminate === true ? "mixed" : input.checked,
+    "aria-disabled": isDisabled,
     disabled: isDisabled
   };
 }
 
 /**
- * Structural row styles — layout only, no colour. Applied to the outermost `Pressable`, before the
- * consumer's own `style` (last, once). Fixed regardless of `size`: the box (below) is what scales.
+ * Structural row styles — layout only, no colour. Applied to the row `Animated.View` INSIDE the
+ * `Pressable` (which keeps `hitSlop` and, last and once, the consumer's own `style`), so the press
+ * scale transforms the row without moving the touch target. Fixed regardless of `size`: the box
+ * (below) is what scales.
  */
 export const checkboxRowStructure = createThemedVariants(theme => ({
   base: {

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

@@ -12,7 +12,8 @@ the pattern rationale.
 | `Checkbox.variants.ts` | Pure resolvers (`CHECKBOX_SIZES`, `resolveCheckboxColors`, `resolveCheckboxAccessibility`) + the themed structural resolvers `checkboxRowStructure` / `checkboxBoxStructure`. No React, no lucide. |
 | `index.ts` | Public surface: `Checkbox`, `CheckboxProps`, `CheckboxSize`. |
 | `__tests__/Checkbox.test.ts` | Pure: WCAG contrast (all brands × modes) + touch target + a11y contract. |
-| `__tests__/Checkbox.render.test.tsx` | Render: states, press-toggle (box and label), disabled, indeterminate, focus ring. |
+| `__tests__/Checkbox.render.test.tsx` | Render: states, press-toggle (box and label), disabled, indeterminate, focus-ring tween + reached opacity. |
+| `__tests__/Checkbox.motion.test.tsx` | Motion: the reduce-motion snap for all three animations, and the real glyph/press tweens with motion on. |
 
 ## Props
 
@@ -20,7 +21,7 @@ the pattern rationale.
 |------|------|---------|-------|
 | `checked` | `boolean` | — | Controlled; the component holds no state of its own. |
 | `onCheckedChange` | `(checked: boolean) => void` | — | Called with `!checked` on press. Not called while `disabled`. |
-| `indeterminate` | `boolean` | `false` | Renders "minus" instead of "check" and reports `accessibilityState.checked` as `"mixed"` — **regardless of `checked`**. The usual pairing is `checked={false}`, but indeterminate always wins the glyph/state either way. |
+| `indeterminate` | `boolean` | `false` | Renders "minus" instead of "check" and reports `aria-checked` as `"mixed"` — **regardless of `checked`**. The usual pairing is `checked={false}`, but indeterminate always wins the glyph/state either way. |
 | `label` | `string` | — | Rendered beside the box, inside the same `Pressable` row — pressing the label toggles too. Required unless unlabelled (see below). |
 | `disabled` | `boolean` | `false` | Dimmed; blocks the toggle. |
 | `size` | `sm \| md` | `md` | 16 / 20 dp box; both reach 44dp via `hitSlop`. |
@@ -37,10 +38,16 @@ closed union of them — `resolveCheckboxColors` takes no selector argument.
 
 ## Accessibility contract (WCAG)
 
-- `accessibilityRole="checkbox"`, `accessibilityState.checked` is `true | false | "mixed"`,
-  `accessibilityState.disabled` mirrors the `disabled` prop.
-- **2.5.5 / 2.5.8 target size** — both sizes reach ≥ 44 dp via `hitSlop` on the `Pressable` row (the
-  box stays 16/20dp; the touch area grows around it).
+- `accessibilityRole="checkbox"`, `aria-checked` is `true | false | "mixed"`, `aria-disabled`
+  mirrors the `disabled` prop. FLAT `aria-*` props, not `accessibilityState={{…}}` — react-native-web
+  0.21's `createDOMProps` drops the object form entirely (verified in `node_modules`), so the object
+  form announced role with no checked state at all on web. RN's `Pressable` merges the flat props
+  INTO `accessibilityState` at render (flat wins), so one form works on both platforms. Proven on the
+  real DOM by `__tests__/Checkbox.dom.test.tsx` (`jest --config jest.web.config.js`).
+- **2.5.5 / 2.5.8 target size** — both sizes reach ≥ 44 dp via `hitSlop` on the outermost
+  `Pressable` (the box stays 16/20dp; the touch area grows around it). The row's flex structure sits
+  one level in, on the animated row `View` — only `hitSlop` and the consumer `style` are on the
+  `Pressable`.
 - **1.4.11** — the unchecked box boundary is `border.interactive` (≥ 3:1 on the canvas, every
   brand × mode); the checked/indeterminate fill (`accent.solid`) is its own boundary against the
   canvas, also measured ≥ 3:1.
@@ -66,11 +73,31 @@ closed union of them — `resolveCheckboxColors` takes no selector argument.
    (`"check" | "minus"`) from the shared `core/icon` registry, never a new glyph.
 4. **Type-enforced a11y** — make the unlabelled-with-no-accessible-name state unrepresentable.
 
+## Motion
+
+Three animations, all from `core/motion`, all `opacity`/`transform` only on the native driver:
+
+| What | Where | Driver |
+|------|-------|--------|
+| Row press scale + opacity dip | the row `Animated.View` (`Checkbox.tsx:204`) | `usePressMotion(disabled)` (`:84`) — disabled rows never animate |
+| Focus-ring crossfade | the always-mounted ring `Animated.View` (`:206`) | `setRingVisible` (`:110`), `fast` |
+| Glyph scale-in / out on check | the glyph `Animated.View` (`:212`) | the `filled` effect (`:126`), `fast` + `emphasized` |
+
+**WCAG 2.3.3** — each one is guarded by `if (!motion.enabled) { …setValue(to); return; }` (`:106`,
+`:122`, and `usePressMotion`'s own guard), so under reduce motion (or the global kill switch) the
+value is at its FINAL state on the very next render: no tween, no timers. `Checkbox.motion.test.tsx`
+pins both halves — the snap with reduce motion on, a real `Animated.timing` with it off.
+
 ## Known gaps
 
-- No animation (press scrim, checked transition) — a checkbox's state change is instant, so no
-  `useReducedMotion` handling is needed (WCAG 2.3.3 doesn't apply: there's nothing that moves).
+- None currently tracked.
 
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`) — renamed to `CheckboxImpl` internally, exported as `Checkbox = memo(CheckboxImpl)`. 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.

package/lib/module/modules/chip/Chip.js

@@ -0,0 +1,155 @@
+"use strict";
+
+/**
+ * Chip — an interactive token: press to select/toggle, and optionally press a separate trailing "x"
+ * to remove it. Distinct from `Badge` (`../badge`), which is documented, by its own file-level
+ * comment, as non-interactive ("no press, focus, loading, or disabled state" — a `View`, never a
+ * `Pressable`). Badge displays a status/label; Chip is the touchable counterpart for filter chips,
+ * selectable tags, and removable tokens — always `accessibilityRole="button"`, always a 44dp touch
+ * target, never icon-only (`label` is required).
+ */
+
+import { memo, useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { removeAccessibilityLabel } from "../../core/a11y/labels.js";
+import { Icon } from "../../core/icon/index.js";
+import { MediaImage } from "../../core/media/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { CHIP_AVATAR_SIZE, CHIP_REMOVE_HIT_SLOP, CHIP_REMOVE_ICON_SIZE, chipRemoveSlotStructure, chipRemoveTouchStructure, CHIP_SIZES, chipStructure, isChipFilled, resolveChipAccessibility, resolveChipColors, resolveChipPressedBackground } from "./Chip.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+export const Chip = /*#__PURE__*/memo(function Chip(props) {
+  const {
+    label,
+    variant = "subtle",
+    tone = "neutral",
+    size = "md",
+    selected = false,
+    onPress,
+    onRemove,
+    icon,
+    avatarUri,
+    disabled = false,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const spec = CHIP_SIZES[size];
+  const filled = isChipFilled(variant, selected);
+  const colors = resolveChipColors(theme.colors, tone, variant, selected);
+  const pressedBackground = resolveChipPressedBackground(theme.colors);
+  const a11y = resolveChipAccessibility({
+    selected: props.selected,
+    disabled
+  });
+  const pressedStyle = pressed => pressed ? filled ? styles.filledPressed : {
+    backgroundColor: pressedBackground
+  } : null;
+  const avatarBox = CHIP_AVATAR_SIZE[size];
+  const avatarStyle = useMemo(() => ({
+    width: avatarBox,
+    height: avatarBox,
+    borderRadius: theme.radii.full,
+    overflow: "hidden"
+  }), [avatarBox, theme.radii.full]);
+  const leading = avatarUri !== undefined ? /*#__PURE__*/_jsx(MediaImage, {
+    testID: testID ? `${testID}-avatar` : undefined,
+    source: {
+      uri: avatarUri
+    },
+    contentFit: "cover"
+    // Without this a recycled chip row shows the previous subject's face until the new URI
+    // decodes — the bug `Avatar`'s file header documents.
+    ,
+    recyclingKey: avatarUri,
+    style: avatarStyle
+  }) : icon !== undefined ? /*#__PURE__*/_jsx(Icon, {
+    name: icon,
+    size: spec.iconSize,
+    color: colors.text,
+    strokeWidth: ICON_STROKE
+  }) : null;
+  const removable = onRemove !== undefined;
+  const chip = /*#__PURE__*/_jsxs(Pressable, {
+    testID: testID,
+    accessibilityRole: a11y.accessibilityRole,
+    accessibilityLabel: label,
+    "aria-disabled": a11y["aria-disabled"],
+    "aria-pressed": a11y["aria-pressed"],
+    accessibilityState: a11y.accessibilityState,
+    disabled: a11y.disabled,
+    onPress: a11y.disabled ? undefined : onPress,
+    hitSlop: spec.hitSlop,
+    style: ({
+      pressed
+    }) => [chipStructure(theme, {
+      size,
+      variant
+    }), {
+      backgroundColor: colors.background,
+      borderColor: colors.border
+    }, removable ? chipRemoveSlotStructure(theme, {
+      size
+    }) : null, pressedStyle(pressed),
+    // Removable: the wrapper below owns the dim and the consumer `style`, so both also cover
+    // the sibling "x".
+    removable ? null : disabled && styles.dimmed, removable ? null : style],
+    children: [leading, /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+        fontSize: spec.fontSize,
+        color: colors.text,
+        flexShrink: 1
+      }],
+      children: label
+    })]
+  });
+  if (!removable) return chip;
+
+  // The remove control is a SIBLING of the chip's press target, never a descendant: a `Pressable`
+  // defaults to `accessible`, which collapses its whole subtree into one element, so a nested "x"
+  // can be touched but never focused or activated by VoiceOver/TalkBack (WCAG 4.1.2 / 2.1.1) —
+  // the same rule `charts` states for its pressable bars. It overlays the slot the chip reserves.
+  return (
+    /*#__PURE__*/
+    // The wrapper repeats the chip's `hitSlop`: a touch outside a view's own hit region is never
+    // dispatched into its children, so without it this node would clip the chip back to 32dp.
+    _jsxs(View, {
+      hitSlop: spec.hitSlop,
+      style: [disabled && styles.dimmed, style],
+      children: [chip, /*#__PURE__*/_jsx(Pressable, {
+        testID: testID ? `${testID}-remove` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: removeAccessibilityLabel(label),
+        disabled: disabled,
+        onPress: disabled ? undefined : onRemove,
+        hitSlop: CHIP_REMOVE_HIT_SLOP,
+        style: ({
+          pressed
+        }) => [chipRemoveTouchStructure(theme, {
+          size
+        }), pressedStyle(pressed)],
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "x",
+          size: CHIP_REMOVE_ICON_SIZE,
+          color: colors.text,
+          strokeWidth: ICON_STROKE
+        })
+      })]
+    })
+  );
+});
+const styles = StyleSheet.create({
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is
+  // correct — same precedent Button/Select/Badge use.
+  dimmed: {
+    opacity: 0.5
+  },
+  // Filled (solid/selected) chips dim on press instead of swapping to `bg.sunken`: replacing a
+  // coloured fill with a flat neutral tint would erase the tone/selection cue for the moment a
+  // finger is down. See `resolveChipPressedBackground`'s own comment for the non-filled case.
+  filledPressed: {
+    opacity: 0.85
+  }
+});
+//# sourceMappingURL=Chip.js.map