pixelize-native-library 1.0.7 → 1.2.0

package/lib/typescript/modules/charts/Charts.variants.d.ts

@@ -2,12 +2,12 @@
  * Pure resolvers for the charts module — no React, no svg, so the WCAG tests import this directly
  * (mocking only `react-native`'s `StyleSheet`, as every sibling module's tests do).
  */
-import type { RoleColors, StatusRole, Theme } from "../../theme";
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
 export type SparklineTone = "accent" | "neutral" | StatusRole;
 export declare const BAR_LIST_TRACK_HEIGHT = 6;
 export interface BarListColors {
     readonly label: string;
-    readonly value: string;
+    readonly valueColor: string;
     readonly track: string;
     readonly fill: string;
 }
@@ -23,4 +23,203 @@ export declare const barListStructure: import("../../core/style").ThemedVariantR
 export declare const barListRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const barListHeaderStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const barListTrackStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+/** Same touch-target floor as Select/Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export declare const CHART_MIN_TOUCH_TARGET = 44;
+export interface ChartHitSlop {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+/** Symmetric hit-area expansion so a drawn mark smaller than 44dp still meets the touch-target
+ *  floor, on whichever axis is short — a thin bar and a slim pie wedge fail on different axes. */
+export declare function hitSlopFor(width: number, height: number, minTarget?: number): ChartHitSlop;
+export interface ChartAxisColors {
+    readonly label: string;
+    readonly gridline: string;
+}
+/**
+ * `border.interactive` is the one border role proven ≥ 3:1 against `bg.surface`/`bg.canvas` on
+ * every brand × mode (`roleColors.test.ts`) — `border.default` is the decorative card-outline
+ * rung and isn't held to that bar, so it can't stand in for a gridline.
+ */
+export declare function resolveChartAxisColors(colors: RoleColors): ChartAxisColors;
+/**
+ * Five role-derived hues for data series with no natural closed union (categorical breakdowns).
+ * Every entry measures ≥ 3:1 against `bg.surface` for all 9 brands × both modes (`Charts.test.ts`)
+ * — `status.*.text`, deliberately not `status.*.solid`: the solid fills are tuned for a label
+ * drawn ON them (badges) and measure as low as 2.0:1 against `bg.surface` on several brands in
+ * light mode, while `status.*.text` clears 5.9:1 everywhere.
+ */
+export declare function resolveCategoricalRamp(colors: RoleColors): readonly string[];
+/** Wraps around the 5-hue ramp for a 6th+ series — an explicit per-series `color` is the escape
+ *  hatch for a chart that needs more distinguishable hues than the role table has, the same
+ *  documented exception `BarList`'s per-item `color` already establishes. */
+export declare function categoricalColorAt(colors: RoleColors, index: number): string;
+export interface NiceScale {
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly ticks: readonly number[];
+}
+/**
+ * "Nice numbers" axis ticks (Heckbert): a human-readable step (0/25/50/75/100), never a raw
+ * division like 0/23.7/47.4. `min === max` (all-equal or single-value data) degenerates to a
+ * fixed small band instead of dividing a zero-width range.
+ */
+export declare function niceScale(min: number, max: number, tickCount?: number): NiceScale;
+/** Linear value → pixel scaling. A zero-span domain (all-equal data) lands on the range midpoint
+ *  instead of dividing by zero; a non-finite value falls back to `rangeStart`. */
+export declare function scaleValue(value: number, domainMin: number, domainMax: number, rangeStart: number, rangeEnd: number): number;
+export declare function finiteOrZero(value: number): number;
+/** `1200 -> "1,200"`. The default `yAxisFormatter` for both `BarChart` and `LineChart`. */
+export declare function defaultNumberFormatter(value: number): string;
+export declare const BAR_GROUP_GAP_RATIO = 0.2;
+export declare const BAR_SERIES_GAP_RATIO = 0.12;
+export interface BarLayout {
+    readonly bandWidth: number;
+    readonly groupWidth: number;
+    readonly barWidth: number;
+}
+/** One category's horizontal "band": `bandWidth` split into a gap plus a `groupWidth` that holds
+ *  either one bar (simple/stacked) or `seriesCount` bars side by side (grouped). */
+export declare function resolveBarLayout(categoryCount: number, seriesCount: number, plotWidth: number, stacked: boolean): BarLayout;
+/** Left edge (plot-relative) of one bar within its category band. */
+export declare function resolveBarX(categoryIndex: number, seriesIndex: number, seriesCount: number, layout: BarLayout, stacked: boolean): number;
+export interface BarChartDomainInput {
+    readonly values: readonly number[];
+}
+/**
+ * The y-domain across every category, baseline pinned to 0 (bars always read from zero). Stacked
+ * mode walks each category's own running cumulative sum and tracks its full min/max extent —
+ * the identical math the stacked bar geometry itself uses, so the axis and the bars can never
+ * disagree about where the stack reaches.
+ */
+export declare function resolveBarChartDomain(data: readonly BarChartDomainInput[], stacked: boolean): {
+    min: number;
+    max: number;
+};
+export interface BarChartSummaryDatum {
+    readonly label: string;
+    readonly values: readonly number[];
+}
+/** "Bar chart, 4 categories, highest Revenue at 1,200" — the accessibility label IS the chart for
+ *  a screen reader, so it names the count and the single tallest bar drawn, across every series. */
+export declare function summarizeBarChart(data: readonly BarChartSummaryDatum[], formatter: (value: number) => string): string;
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+export interface LineSeriesDomainInput {
+    readonly data: readonly {
+        readonly y: number;
+    }[];
+}
+export declare function resolveLineDomain(series: readonly LineSeriesDomainInput[]): {
+    min: number;
+    max: number;
+};
+/** Above this sample count, line/sparkline series are decimated before any geometry is built —
+ *  one svg node per sample is what makes a 5,000-point series unusable on a mid-tier phone. */
+export declare const MAX_RENDERED_POINTS = 200;
+/**
+ * Min/max bucket decimation down to ~`maxPoints`: both endpoints are kept, and the interior is
+ * split into equal buckets that each contribute their lowest and highest sample, in original
+ * order. Plain stride sampling would drop a one-sample spike; keeping each bucket's extremes
+ * preserves the visual envelope of the line at a fraction of the nodes.
+ */
+export declare function decimateSeries<T>(data: readonly T[], value: (item: T) => number, maxPoints?: number): readonly T[];
+/** Non-finite samples are dropped (same contract as `Sparkline`), then the survivors are spaced
+ *  evenly across `width` BY INDEX, not by numeric `x` — so unevenly-spaced categories (weeks,
+ *  months) still lay out as a readable, evenly-ticked axis. A single survivor still plots as one
+ *  centred point. */
+export declare function resolveSeriesPoints(data: readonly {
+    readonly y: number;
+}[], domainMin: number, domainMax: number, width: number, height: number): Point[];
+/** A straight polyline by default; `curved` walks the same points through a Catmull-Rom spline
+ *  converted to cubic bézier segments, so a smoothed line still passes through every sample
+ *  instead of merely approaching it. */
+export declare function buildLinePath(points: readonly Point[], curved: boolean): string;
+/** The line path plus a close down to `baselineY` — the plot's bottom edge, matching `Sparkline`'s
+ *  own area contract rather than the zero gridline (a chart with negative values has no single
+ *  "bottom" that both floors the fill and still reads as empty space). */
+export declare function buildAreaPath(points: readonly Point[], baselineY: number, curved: boolean): string;
+export declare function summarizeLineChart(series: readonly {
+    readonly name: string;
+}[]): string;
+export interface PieWedgeInput {
+    readonly label: string;
+    readonly value: number;
+    readonly color?: string;
+}
+export interface PieWedge<T extends PieWedgeInput = PieWedgeInput> {
+    readonly source: T;
+    readonly color: string;
+    readonly fraction: number;
+    readonly percentage: number;
+    readonly startAngle: number;
+    readonly endAngle: number;
+}
+/** Drops non-finite/non-positive segments (same contract as `DonutChart`), then walks the
+ *  survivors into cumulative angles, 0° = top, increasing clockwise. Carries the original segment
+ *  as `source` so a caller's `onPressSegment` gets back its own object, not a reconstruction. */
+export declare function resolvePieWedges<T extends PieWedgeInput>(segments: readonly T[], colors: RoleColors): PieWedge<T>[];
+export declare function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): Point;
+/** A filled-wedge path: center → arc start → (clockwise) arc end → close. Callers special-case a
+ *  single 100% segment as a plain circle — an arc command can't describe a full sweep whose start
+ *  and end coincide. */
+export declare function describeWedge(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string;
+export interface BoundingBox {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/** Bounding box of a circular sector — samples the center, both arc endpoints, and every cardinal
+ *  point (0/90/180/270°) the sector actually sweeps past, so a wedge spanning a quadrant boundary
+ *  still gets a box that fully contains its curve, not just its two straight edges. Used to size
+ *  the touch-target overlay for a pressable wedge, since the wedge itself isn't rectangular. */
+export declare function resolveWedgeBoundingBox(cx: number, cy: number, r: number, startAngle: number, endAngle: number): BoundingBox;
+export declare function summarizePieChart(segments: readonly PieWedgeInput[]): string;
+/** Marker shapes, one per ramp hue, wrapping for a 6th+ series exactly as the hues do. */
+export declare const SERIES_SHAPES: readonly ["circle", "square", "triangle", "diamond", "cross"];
+export type SeriesShape = (typeof SERIES_SHAPES)[number];
+/** Every shape except `circle`, which renders as a native `<Circle>` rather than a bezier path. */
+export type MarkerShape = Exclude<SeriesShape, "circle">;
+export declare function seriesShapeAt(index: number): SeriesShape;
+/**
+ * `strokeDasharray` per series index — the line channel. Index 0 is solid (`undefined`, so the
+ * common single-series chart emits no dash prop at all), and the four patterns after it are
+ * separated by period AND by dash/gap ratio, not just length: two patterns that differ only in
+ * scale read as the same line at a glance.
+ */
+export declare const SERIES_DASH_PATTERNS: readonly (readonly number[] | undefined)[];
+export declare function seriesDashAt(index: number): readonly number[] | undefined;
+/**
+ * A closed svg path for one non-circular marker, centred on (`cx`, `cy`) and sized from `r` — the
+ * radius the equivalent circular marker would use.
+ */
+export declare function describeMarker(shape: MarkerShape, cx: number, cy: number, r: number): string;
+/**
+ * Narrower than this and a knocked-out shape marker stops reading as a shape, so `BarChart` drops
+ * it and the bar falls back to the legend plus its fixed position in the group.
+ */
+export declare const BAR_MARKER_MIN_SPAN = 14;
+export declare const BAR_MARKER_RADIUS = 4;
+/** Hairline separators between stacked/adjacent segments — two ramp hues can sit at 1.02:1, which
+ *  merges them into one indistinguishable block without an explicit boundary. */
+export declare const SEGMENT_SEPARATOR_WIDTH = 1;
+/** Fraction of the ring a donut segment gives up so its boundary with the next one is visible. */
+export declare const DONUT_SEGMENT_GAP_RATIO = 0.006;
+export declare const LEGEND_SWATCH_SIZE = 10;
+/** The line-glyph swatch is wider than the plain square: a dash pattern needs run-length to read. */
+export declare const LEGEND_GLYPH_WIDTH = 22;
+export declare const LEGEND_GLYPH_HEIGHT = 10;
+export declare const LEGEND_GLYPH_STROKE_WIDTH = 2;
+export declare const LEGEND_GLYPH_MARKER_RADIUS = 3;
+/** The knockout-shape swatch needs more room than the plain colour square to read as a shape. */
+export declare const LEGEND_MARK_SIZE = 14;
+export declare const chartLegendStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const chartLegendRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const chartLegendSwatchStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 //# sourceMappingURL=Charts.variants.d.ts.map

package/lib/typescript/modules/charts/DonutChart.d.ts

@@ -10,6 +10,9 @@ export interface DonutChartProps {
     thickness?: number;
     centerLabel?: string;
     centerSublabel?: string;
+    /** Text legend naming each segment (falls back to "Segment N" when a segment has no `label`).
+     *  Only drawn for 2+ valid segments — one ring needs no key. */
+    showLegend?: boolean;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;

package/lib/typescript/modules/charts/LineChart.d.ts

@@ -0,0 +1,30 @@
+import type { LayoutStyle } from "../../core/style";
+import type { SeriesShape } from "./Charts.variants";
+export interface LineChartDatum {
+    readonly x: string | number;
+    readonly y: number;
+}
+export interface LineChartSeries {
+    readonly name: string;
+    readonly data: LineChartDatum[];
+    readonly color?: string;
+    /** Overrides the shape this series' markers (and its legend glyph) take; defaults by index. */
+    readonly shape?: SeriesShape;
+}
+export interface LineChartProps {
+    series: LineChartSeries[];
+    height?: number;
+    showGrid?: boolean;
+    showDots?: boolean;
+    showArea?: boolean;
+    curved?: boolean;
+    /** Text legend naming each series. Only drawn for 2+ series — one line needs no key. */
+    showLegend?: boolean;
+    yAxisFormatter?: (value: number) => string;
+    xAxisFormatter?: (value: string | number) => string;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const LineChart: import("react").NamedExoticComponent<LineChartProps>;
+//# sourceMappingURL=LineChart.d.ts.map

package/lib/typescript/modules/charts/PieChart.d.ts

@@ -0,0 +1,18 @@
+import type { LayoutStyle } from "../../core/style";
+export interface PieChartSegment {
+    readonly label: string;
+    readonly value: number;
+    readonly color?: string;
+}
+export interface PieChartProps {
+    segments: PieChartSegment[];
+    size?: number;
+    showLegend?: boolean;
+    showPercentages?: boolean;
+    onPressSegment?: (segment: PieChartSegment, index: number) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const PieChart: import("react").NamedExoticComponent<PieChartProps>;
+//# sourceMappingURL=PieChart.d.ts.map

package/lib/typescript/modules/charts/index.d.ts

@@ -9,5 +9,11 @@ export { DonutChart } from "./DonutChart";
 export type { DonutChartProps, DonutChartSegment } from "./DonutChart";
 export { Sparkline } from "./Sparkline";
 export type { SparklineProps } from "./Sparkline";
+export { BarChart } from "./BarChart";
+export type { BarChartProps, BarChartDatum, BarChartSeries } from "./BarChart";
+export { LineChart } from "./LineChart";
+export type { LineChartProps, LineChartDatum, LineChartSeries } from "./LineChart";
+export { PieChart } from "./PieChart";
+export type { PieChartProps, PieChartSegment } from "./PieChart";
 export type { SparklineTone } from "./Charts.variants";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/checkbox/Checkbox.d.ts

@@ -3,6 +3,9 @@
  * 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 type { LayoutStyle } from "../../core/style";
 import type { CheckboxSize } from "./Checkbox.variants";
@@ -10,7 +13,7 @@ interface CheckboxBaseProps {
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
     /**
-     * Renders the "minus" glyph in place of "check", and reports `accessibilityState.checked` as
+     * Renders the "minus" glyph in place 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). Toggling still flips `checked` via `onCheckedChange`.
      */

package/lib/typescript/modules/checkbox/Checkbox.variants.d.ts

@@ -16,7 +16,7 @@
  * Free of `lucide` and of any React tree, so the WCAG + behaviour tests import it directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` and `Button.variants.ts` do).
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type CheckboxSize = "sm" | "md";
 /**
  * Same touch-target floor as `Button` (44dp, WCAG 2.5.5 AAA). Duplicated rather than imported —
@@ -79,10 +79,8 @@ export interface CheckboxAccessibilityProps {
     readonly accessibilityRole: "checkbox";
     /** Falls back to the visible label; required by the type when there is no visible label. */
     readonly accessibilityLabel: string | undefined;
-    readonly accessibilityState: {
-        readonly checked: boolean | "mixed";
-        readonly disabled: boolean;
-    };
+    readonly "aria-checked": boolean | "mixed";
+    readonly "aria-disabled": boolean;
     /** The `Pressable` disabled prop — true while disabled, so touches are blocked. */
     readonly disabled: boolean;
 }
@@ -91,13 +89,20 @@ export interface CheckboxAccessibilityProps {
  *  - `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 declare function resolveCheckboxAccessibility(input: CheckboxAccessibilityInput): CheckboxAccessibilityProps;
 /**
- * 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 declare const checkboxRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /**

package/lib/typescript/modules/chip/Chip.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { ChipSize, ChipTone, ChipVariant } from "./Chip.variants";
+export interface ChipProps {
+    /** A chip is never icon-only — this is its whole accessible name. */
+    label: string;
+    variant?: ChipVariant;
+    tone?: ChipTone;
+    size?: ChipSize;
+    /** Renders the filled/accented look regardless of `variant`. Only added to
+     *  `accessibilityState` when passed — see `resolveChipAccessibility`. */
+    selected?: boolean;
+    onPress?: () => void;
+    /** Provided → a trailing "x" `Pressable` that is a SIBLING of the chip's own press target, with
+     *  its own accessible name and its own 44dp hit target, so removing never fires `onPress` and a
+     *  screen reader can reach it. Omitted → no remove affordance renders. */
+    onRemove?: () => void;
+    /** Leading glyph. Ignored when `avatarUri` is also given — see `avatarUri`. */
+    icon?: IconName;
+    /** Leading circular image. Wins over `icon` when both are passed: an identity photo is a more
+     *  specific signal than a generic glyph, the same "most specific wins" precedent `Select`'s own
+     *  `leading` slot documents for the image-over-glyph case. */
+    avatarUri?: string;
+    disabled?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const Chip: import("react").NamedExoticComponent<ChipProps>;
+//# sourceMappingURL=Chip.d.ts.map

package/lib/typescript/modules/chip/Chip.variants.d.ts

@@ -0,0 +1,198 @@
+/**
+ * Chip's style + behaviour resolution — same split as every sibling module:
+ *  - STRUCTURE (sizing/spacing off the theme scale) lives in the `createThemedVariants` resolvers
+ *    below — static per (brand, mode), registered once.
+ *  - COLOUR is resolved from the theme's ROLE colours (never a raw ramp, never a hardcoded hex) by
+ *    `resolveChipColors` — `tone`/`variant` are closed unions for the same reason Button's `tone` is.
+ *  - ACCESSIBILITY prop derivation is `resolveChipAccessibility`, kept pure so the "selected is only
+ *    announced when the caller controls it" contract is unit-testable without rendering React Native.
+ *
+ * Free of React and of any lucide/Pressable import, so the WCAG + behaviour tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
+export type ChipVariant = "solid" | "outline" | "subtle";
+/** `accent`/`neutral` are brand-driven emphasis; the rest mirror the theme's status roles — same
+ *  shape `Badge`'s own `BadgeTone` uses. */
+export type ChipTone = "accent" | "neutral" | StatusRole;
+export type ChipSize = "sm" | "md";
+export type ChipGroupGap = "sm" | "md";
+/** Same touch-target floor as every interactive control in this library (44dp — Apple HIG minimum,
+ *  WCAG 2.5.5 AAA). */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface ChipSizeSpec {
+    /** Visual height in dp. */
+    readonly height: number;
+    /** Label size, on the same compact scale `Badge`'s own sizes use. */
+    readonly fontSize: number;
+    /** Leading icon glyph size in dp. */
+    readonly iconSize: number;
+    /** Symmetric touch expansion so `height + 2·hitSlop ≥ 44` — the visual pill stays small, the
+     *  target doesn't. */
+    readonly hitSlop: number;
+}
+/**
+ * Chip-specific dimensions. Visibly smaller than Button (a chip is a token, not a call-to-action)
+ * but every size still reaches the 44dp floor via `hitSlop`, exactly like Button/Select do for
+ * their own short sizes.
+ */
+export declare const CHIP_SIZES: {
+    readonly sm: {
+        readonly height: 28;
+        readonly fontSize: 12;
+        readonly iconSize: 14;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+};
+/** Leading `avatarUri` diameter per chip size — a few dp inside the chip's own height so it never
+ *  clips the pill's vertical padding. */
+export declare const CHIP_AVATAR_SIZE: {
+    readonly sm: 18;
+    readonly md: 22;
+};
+/** The trailing "x" remove affordance. Fixed — independent of `size`, the same stance Select's row
+ *  "check" glyph and Menu's row icon take (a fixed-purpose glyph is not a caller-facing choice). */
+export declare const CHIP_REMOVE_ICON_SIZE = 12;
+/** Visual touch box for the remove glyph — small on purpose (it sits inside an already-small chip);
+ *  `CHIP_REMOVE_HIT_SLOP` is what actually carries it to the 44dp floor. */
+export declare const CHIP_REMOVE_TOUCH_BOX = 18;
+export declare const CHIP_REMOVE_HIT_SLOP: number;
+export interface ChipColors {
+    /** Chip fill. */
+    readonly background: string;
+    /** Label, leading icon, and remove glyph — one colour for all three (see `Chip.tsx`: the icon and
+     *  remove glyph reuse this exact value, so once the label clears the stricter 4.5:1 text minimum,
+     *  both glyphs clear their looser 3:1 non-text minimum for free — the same reasoning Menu's row
+     *  icon and Select's active-row check glyph rely on). */
+    readonly text: string;
+    /** Boundary colour. Equals `background` for the solid/selected (filled) look, so the structural
+     *  hairline (if any) blends away; `"transparent"` for `subtle`, which also has zero border WIDTH
+     *  structurally, so the colour never shows either way. Only `outline` (unselected) draws a real,
+     *  visible boundary. */
+    readonly border: string;
+}
+/**
+ * Resolves one (tone, variant, selected) combination's fill/text/border. `selected` renders the
+ * filled/accented look regardless of `variant` (spec) by reusing the SAME `solidFill`/`onSolid`
+ * pair `variant="solid"` reads — so "selected outline chip" and "solid chip" render identically
+ * instead of introducing a third, separately-measured filled pairing.
+ */
+export declare function resolveChipColors(colors: RoleColors, tone: ChipTone, variant: ChipVariant, selected: boolean): ChipColors;
+/** Whether a (variant, selected) combination renders the filled/accented look — the same predicate
+ *  `resolveChipColors` and `Chip.tsx`'s own press-feedback branch both key off. */
+export declare function isChipFilled(variant: ChipVariant, selected: boolean): boolean;
+/**
+ * A resting (non-filled) chip's pressed-state background — `bg.sunken`, the exact precedent
+ * `Menu.variants.ts`'s `resolveMenuRowPressedBackground` sets (a pale neutral tint keeps the label
+ * ≥ 4.5:1, unlike the saturated `bg.hover` mid-tone). Not used for a filled chip (`variant="solid"`
+ * or `selected`): swapping a coloured fill to a flat neutral tint on every press would erase the
+ * tone/selection cue for the moment a finger is down, so a filled chip dims instead
+ * (`Chip.tsx`'s `styles.filledPressed`) — the same "disabled is a uniform dim, exempt from the
+ * contrast minimum" reasoning this library already applies, extended to a transient press.
+ */
+export declare function resolveChipPressedBackground(colors: RoleColors): string;
+export interface ChipAccessibilityInput {
+    /** The RAW prop, before any `= false` default — see the return contract below. */
+    readonly selected?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+}
+export interface ChipAccessibilityProps {
+    readonly accessibilityRole: "button";
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted key so the compiler still checks the prop name. */
+    readonly "aria-disabled": boolean;
+    /** The WEB half of `selected`. A filter chip is a toggle button, so the correct ARIA is
+     *  `aria-pressed` — `aria-selected` is not valid on `role="button"` and browsers ignore it. */
+    readonly "aria-pressed": boolean | undefined;
+    /** The NATIVE half of `selected` — React Native has no `pressed` state, and react-native-web
+     *  discards this object, so it never reaches the DOM. `undefined` when the chip has no toggle. */
+    readonly accessibilityState: {
+        readonly selected: boolean;
+    } | undefined;
+    readonly disabled: boolean;
+}
+/**
+ * Derives the chip's accessibility surface once, purely. `selected` is only exposed when the CALLER
+ * actually passed the prop: a plain removable-token chip (never supplies `selected`) has no
+ * selection concept and shouldn't announce "not selected" as if it were part of a toggle group,
+ * while a filter chip that IS controlled (`selected` passed, even `false`) gets the full toggle
+ * semantics (WCAG 4.1.2 — a widget's state is only exposed when the widget actually has that state).
+ */
+export declare function resolveChipAccessibility(input: ChipAccessibilityInput): ChipAccessibilityProps;
+/**
+ * Structural styles only — layout, height, padding, radius, border WIDTH. No colours (tone/selected
+ * driven, applied inline over this), so this compiles once per theme identity via the themed
+ * resolver. `variant` controls border WIDTH the same way Button's own `variant` does: a hairline for
+ * `outline`, zero for `solid`/`subtle` — `resolveChipColors` supplies the border COLOUR, so
+ * `outline` is the only variant that ever draws a visible ring (`solid`/`subtle`/selected set the
+ * colour to match their own fill, or to `"transparent"`, regardless of this width).
+ */
+export declare const chipStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 28;
+            paddingHorizontal: number;
+        };
+        md: {
+            height: 32;
+            paddingHorizontal: number;
+        };
+    };
+    variant: {
+        solid: {
+            borderWidth: number;
+        };
+        outline: {
+            borderWidth: 1;
+        };
+        subtle: {
+            borderWidth: number;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The pill's own trailing gutter, widened to hold the remove control's slot. The control itself is
+ * a SIBLING of the chip's `Pressable` (it would be unreachable to a screen reader nested inside
+ * one — see `Chip.tsx`), so nothing in flow reserves its space; this padding does. The arithmetic
+ * reproduces the old in-flow layout exactly: gutter + touch box + the chip's own `columnGap`.
+ */
+export declare const chipRemoveSlotStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            paddingRight: number;
+        };
+        md: {
+            paddingRight: number;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/**
+ * The remove glyph's own small touch box — a circle, so its pressed-state fill (see `Chip.tsx`)
+ * reads as a rounded affordance rather than a square patch inside the pill. Absolutely positioned
+ * over the slot `chipRemoveSlotStructure` reserves, which is what lets it be a sibling of the chip's
+ * `Pressable` while still sitting inside the pill: the chip's own background (and its pressed tint)
+ * keeps running underneath it, exactly as when it was a child.
+ */
+export declare const chipRemoveTouchStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            right: number;
+            top: number;
+        };
+        md: {
+            right: number;
+            top: number;
+        };
+    };
+}, import("react-native").ViewStyle>;
+/** Resolves `ChipGroup`'s `gap` prop onto the theme's spacing scale — a direct value, not its own
+ *  `createThemedVariants` sheet, since `ChipGroup` has no other structural variant to compile
+ *  alongside it (see `ChipGroup.tsx`). */
+export declare function resolveChipGroupGap(theme: Theme, gap: ChipGroupGap): number;
+//# sourceMappingURL=Chip.variants.d.ts.map

package/lib/typescript/modules/chip/ChipGroup.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ChipGroup — a thin layout wrapper for a row of `Chip`s: wraps onto multiple lines by default, or
+ * scrolls horizontally (`scrollable`) for a filter rail. Owns no chip state of its own — selection/
+ * removal stay on each `Chip`'s own `onPress`/`onRemove`, the same "props in, events out" stance
+ * every layout-only wrapper in this library takes.
+ */
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+import type { ChipGroupGap } from "./Chip.variants";
+export interface ChipGroupProps {
+    children: ReactNode;
+    /** Ignored when `scrollable` is true — a horizontal rail never wraps. */
+    wrap?: boolean;
+    gap?: ChipGroupGap;
+    /** Horizontal `ScrollView` (no wrap), for a filter rail that scrolls instead of wrapping. */
+    scrollable?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const ChipGroup: import("react").NamedExoticComponent<ChipGroupProps>;
+//# sourceMappingURL=ChipGroup.d.ts.map

package/lib/typescript/modules/chip/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Public surface of `pixelize-native-library/chip`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The resolvers (`resolveChipColors`, `CHIP_SIZES`, …) stay internal — a
+ * consumer configures a Chip through its props, never by importing its internals.
+ */
+export { Chip } from "./Chip";
+export type { ChipProps } from "./Chip";
+export { ChipGroup } from "./ChipGroup";
+export type { ChipGroupProps } from "./ChipGroup";
+export type { ChipGroupGap, ChipSize, ChipTone, ChipVariant } from "./Chip.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map