pixelize-native-library 1.0.7 → 1.2.1

package/lib/typescript/modules/button-group/ButtonGroup.variants.d.ts

@@ -13,7 +13,7 @@
  *  - `resolveButtonGroupSegmentAccessibility` derives the per-segment a11y surface purely, mirroring
  *    `resolveRadioRowAccessibility` — this is a single-choice value selector, not a set of tabs.
  */
-import type { RoleColors, Theme } from "../../theme";
+import type { RoleColors, Theme } from "../../theme/hooks";
 export type ButtonGroupSize = "sm" | "md";
 /** Same floor as Button/RadioGroup/Tabs — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
  * stay isolated. */
@@ -50,8 +50,10 @@ export interface ButtonGroupColors {
     readonly selectedFill: string;
     /** Label on `selectedFill` — the derived on-colour, so it always clears 4.5:1 (never a hard white). */
     readonly onSelectedFill: string;
-    /** Unselected-segment label, read on the transparent (canvas) segment. */
+    /** Unselected-segment label, read on the group's `containerFill`. */
     readonly label: string;
+    /** The whole group's tonal fill, replacing the old outer hairline frame. */
+    readonly containerFill: string;
     /**
      * Unselected-segment background while pressed. `label` stays ≥ 4.5:1 on it (WCAG 1.4.3), and — the
      * fix this field exists for — it stays ≥ 3:1 against `selectedFill` (WCAG 1.4.11): when a segment
@@ -61,22 +63,8 @@ export interface ButtonGroupColors {
      * is `bg.sunken` nudged toward `bg.canvas` by a fixed-alpha overlay (see `resolveButtonGroupColors`).
      */
     readonly pressedFill: string;
-    /**
-     * The shared outline colour, used as the container's outer border and as the 1px divider between
-     * adjacent segments — this is what makes the control read as connected, not a row of
-     * separately-bordered buttons. It only ever gets DRAWN on an edge that touches two unselected
-     * segments (or one unselected segment and the group's own outside). WCAG 1.4.11: `outline`
-     * (`border.interactive`, a neutral grey) clears 3:1 against `bg.canvas` on every brand × mode, but
-     * measured directly against a SELECTED segment's `accent.solid` fill it fails 3:1 on 15 of 16
-     * brand × mode combinations (several catastrophically — slate light 1.00, emerald light 1.02).
-     * Since `value` is required, some segment is always selected, so that adjacency is not an edge
-     * case, it is every render. Rather than chase one stroke colour that can never clear 3:1 against
-     * both a near-white canvas AND every brand's accent fill at once, `resolveButtonGroupSegmentEdgeColors`
-     * omits the stroke on any edge that touches the selected segment and lets the fill-vs-canvas
-     * contrast serve as the boundary instead — the same mechanism every other solid-fill component in
-     * this library already relies on (`accent.solid` clears 3:1 against `bg.canvas` on all 16 brand ×
-     * mode combinations, worst case 3.24:1 on emerald light; see `ButtonGroup.test.ts`).
-     */
+    /** The 1px divider between two adjacent unselected segments — omitted where it touches the
+     * selected segment (WCAG 1.4.11), letting `selectedFill` vs `containerFill` carry the boundary. */
     readonly outline: string;
 }
 /**
@@ -95,21 +83,9 @@ export interface ButtonGroupSegmentEdgeInput {
     readonly nextSelected: boolean;
 }
 export interface ButtonGroupSegmentEdgeColors {
-    readonly top: string;
-    readonly bottom: string;
-    /** Only structurally drawn on the first segment (see `buttonGroupSegmentStructure`'s `first`
-     * variant) — harmless to compute for every segment. */
-    readonly left: string;
-    /** The internal divider for every segment except the last, where it is instead that segment's
-     * own outer right edge. */
+    /** The divider shared with the next segment — omitted where either side is selected. */
     readonly right: string;
 }
-/**
- * Per-edge, per-segment outline colour — the WCAG 1.4.11 fix. An edge draws the shared `outline`
- * colour only when BOTH sides of it are unselected; any edge touching the selected segment is
- * `transparent` instead, so the selected fill's own contrast against the canvas (or, for the
- * divider case, against the neighbour's transparent/canvas background) is what marks the boundary.
- */
 export declare function resolveButtonGroupSegmentEdgeColors(colors: ButtonGroupColors, input: ButtonGroupSegmentEdgeInput): ButtonGroupSegmentEdgeColors;
 export interface ButtonGroupSegmentPosition {
     readonly isFirst: boolean;
@@ -145,10 +121,10 @@ export interface ButtonGroupSegmentAccessibilityInput {
 }
 export interface ButtonGroupSegmentAccessibilityProps {
     readonly accessibilityRole: "radio";
-    readonly accessibilityState: {
-        readonly checked: boolean;
-        readonly disabled: boolean;
-    };
+    /** Flat, never `accessibilityState`: react-native-web discards the object form (see
+     *  `docs/PLATFORM-A11Y-PROPS.md`). Quoted keys so the compiler still checks the prop names. */
+    readonly "aria-checked": boolean;
+    readonly "aria-disabled": boolean;
     /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
     readonly disabled: boolean;
 }
@@ -159,31 +135,34 @@ export interface ButtonGroupSegmentAccessibilityProps {
  * selector shape `RadioGroup` already uses, just drawn as connected segments instead of rows).
  */
 export declare function resolveButtonGroupSegmentAccessibility(input: ButtonGroupSegmentAccessibilityInput): ButtonGroupSegmentAccessibilityProps;
+export interface ButtonGroupKeyInput {
+    readonly key: string;
+    /** The index the group's single tab stop currently sits on. */
+    readonly index: number;
+    readonly count: number;
+}
+/**
+ * The WAI-ARIA radio-group keyboard contract, resolved purely: arrows move one segment and WRAP (the
+ * arrows both move and select, so there is no "past the end" to fall off), Home/End jump to the ends.
+ * Returns `undefined` for any other key — also how the caller knows not to swallow that keystroke.
+ * Duplicated from `RadioGroup.variants.ts` rather than imported: modules stay isolated.
+ */
+export declare function resolveButtonGroupKeyIndex(input: ButtonGroupKeyInput): number | undefined;
 /**
- * The container — a clipping rect only. `overflow: hidden` + `borderRadius` clips every segment's
- * fill (and the outer segments' square corners) to this single rounded outline, so the selected
- * segment never shows a corner poking past the shared shape — the visual mechanism that makes this
- * read as ONE connected control rather than a row of standalone buttons. It carries NO border of its
- * own: the outer border is drawn by the first/last segments themselves (see
- * `buttonGroupSegmentStructure`), because only a per-segment border can be selectively omitted where
- * it touches the selected segment (WCAG 1.4.11) — a single container-wide border is one colour for
- * its entire perimeter and cannot vary by which segment it runs along.
+ * The container. `overflow: hidden` + `borderRadius` clips every segment's fill (and the outer
+ * segments' square corners) to one rounded shape, so the selected segment never pokes a corner past
+ * it. `backgroundColor: bg.raised` is the group's tonal frame — it replaces the old outer hairline,
+ * so unselected segments (transparent) read as sitting on one continuous raised surface.
  */
 export declare const buttonGroupStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /**
  * One segment's layout. `minWidth: MIN_TOUCH_TARGET` is the real ≥44dp touch-target floor for the
- * WIDTH axis — horizontal hitSlop can no longer safely pad an internal segment (see
- * `resolveButtonGroupSegmentHitSlop`), so the rendered node itself must never shrink narrower than
- * 44dp, for a realistic 2–4 option row at either size. `height` is fixed (not a minimum) so the
+ * WIDTH axis (see `resolveButtonGroupSegmentHitSlop`). `height` is fixed (not a minimum) so the
  * vertical hitSlop math holds against what actually renders.
  *
- * Every segment structurally carries a top, bottom, and right border (thin width) — the right one is
- * the divider on every segment except the last, where it is instead that segment's own outer right
- * edge. Only the FIRST segment gets a left border and left-corner radii (the group's own outer left
- * edge); only the LAST segment gets right-corner radii (matching the container's own `borderRadius`,
- * so that segment's own border curves rather than being clipped into an L by the container). Border
- * WIDTHS are structural and constant; COLOURS (drawn vs `transparent`) are resolved per render by
- * `resolveButtonGroupSegmentEdgeColors` and applied inline over this.
+ * Only a right border remains, structural on every segment but the last — the internal divider
+ * between two adjacent unselected segments (see `resolveButtonGroupSegmentEdgeColors`). There is no
+ * more top/bottom/left border: the container's own tonal fill carries the group's outer shape now.
  */
 export declare const buttonGroupSegmentStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     size: {
@@ -198,18 +177,18 @@ export declare const buttonGroupSegmentStructure: import("../../core/style").The
     };
     first: {
         on: {
-            borderLeftWidth: 1;
-            borderTopLeftRadius: 8;
-            borderBottomLeftRadius: 8;
-        };
-        off: {
-            borderLeftWidth: number;
+            borderTopLeftRadius: 12;
+            borderBottomLeftRadius: 12;
+            borderCurve: "continuous";
         };
+        off: {};
     };
     last: {
         on: {
-            borderTopRightRadius: 8;
-            borderBottomRightRadius: 8;
+            borderTopRightRadius: 12;
+            borderBottomRightRadius: 12;
+            borderCurve: "continuous";
+            borderRightWidth: number;
         };
         off: {};
     };

package/lib/typescript/modules/card/Card.d.ts

@@ -1,20 +1,22 @@
 /**
- * Card — a plain container for grouping content. No interaction, no text of its own: `children` is
- * ordinary composition (a consumer places `Text`, `Button`, whatever it needs inside), so there is
- * nothing here for `accessibilityRole` to announce — the container is intentionally invisible to
- * assistive tech and its children carry their own semantics, exactly like a plain `View` would.
+ * Card — a plain container for grouping content, optionally pressable. When `onPress` is absent the
+ * root is a plain `View` with no press hook or animated values. Children carry their own semantics.
  */
 import type { ReactNode } from "react";
+import type { GestureResponderEvent } from "react-native";
 import type { LayoutStyle } from "../../core/style";
 import type { CardVariant } from "./Card.variants";
 export interface CardProps {
     variant?: CardVariant;
     children?: ReactNode;
+    onPress?: () => void;
+    onLongPress?: (event: GestureResponderEvent) => void;
+    disabled?: boolean;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;
 }
-declare function CardImpl({ variant, children, style, testID }: CardProps): import("react").JSX.Element;
+declare function CardImpl({ variant, children, onPress, onLongPress, disabled, style, testID, }: CardProps): import("react").JSX.Element;
 export declare const Card: import("react").MemoExoticComponent<typeof CardImpl>;
 export {};
 //# sourceMappingURL=Card.d.ts.map

package/lib/typescript/modules/card/Card.variants.d.ts

@@ -9,8 +9,8 @@
  * Free of React, so the WCAG test imports this directly (mocking only `react-native`'s
  * `StyleSheet`, as `core/style` does).
  */
-import type { RoleColors } from "../../theme";
-import type { Theme } from "../../theme";
+import type { RoleColors } from "../../theme/hooks";
+import type { Theme } from "../../theme/hooks";
 export type CardVariant = "elevated" | "outline" | "flat";
 export interface CardVariantColors {
     readonly background: string;

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

@@ -0,0 +1,26 @@
+import type { LayoutStyle } from "../../core/style";
+export interface BarChartSeries {
+    readonly name: string;
+    readonly color?: string;
+}
+export interface BarChartDatum {
+    readonly label: string;
+    readonly values: number[];
+}
+export interface BarChartProps {
+    data: BarChartDatum[];
+    series?: BarChartSeries[];
+    height?: number;
+    showGrid?: boolean;
+    showValues?: boolean;
+    yAxisFormatter?: (value: number) => string;
+    stacked?: boolean;
+    /** Text legend naming each series. Only drawn when 2+ series are present. */
+    showLegend?: boolean;
+    onPressBar?: (datum: BarChartDatum, seriesIndex: number) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+export declare const BarChart: import("react").NamedExoticComponent<BarChartProps>;
+//# sourceMappingURL=BarChart.d.ts.map

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

@@ -0,0 +1,16 @@
+import type { SeriesShape } from "./Charts.variants";
+export type ChartLegendGlyph = "swatch" | "line" | "mark";
+export interface ChartLegendEntry {
+    readonly color: string;
+    readonly label: string;
+    /** Only read by the `line` and `mark` glyphs — a `swatch` legend has no per-mark shape. */
+    readonly shape?: SeriesShape;
+    readonly dash?: readonly number[];
+}
+export interface ChartLegendProps {
+    readonly entries: readonly ChartLegendEntry[];
+    readonly glyph: ChartLegendGlyph;
+    readonly testID: string | undefined;
+}
+export declare const ChartLegend: import("react").NamedExoticComponent<ChartLegendProps>;
+//# sourceMappingURL=ChartLegend.d.ts.map

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

@@ -2,12 +2,16 @@
  * 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";
+import type { DeviceTier } from "../../core/device";
 export type SparklineTone = "accent" | "neutral" | StatusRole;
 export declare const BAR_LIST_TRACK_HEIGHT = 6;
+/** Header text (`fontSizes.sm` line height) + row gap (`space[1]`) + track — a floor, not a hard
+ *  clip, so `VirtualList`'s `itemHeight` gets a real offset hint without constraining content. */
+export declare const BAR_LIST_ROW_HEIGHT = 30;
 export interface BarListColors {
     readonly label: string;
-    readonly value: string;
+    readonly valueColor: string;
     readonly track: string;
     readonly fill: string;
 }
@@ -23,4 +27,227 @@ 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;
+};
+/** Per-`useDeviceTier()` cap on rendered categories — scaled down from `MAX_RENDERED_POINTS` (200)
+ *  since each `BarChart` category costs THREE svg nodes (bar, label, press target) against a line
+ *  series' one-per-sample, so the same node budget affords fewer categories on the low tiers. */
+export declare const MAX_RENDERED_CATEGORIES_LOW = 60;
+export declare const MAX_RENDERED_CATEGORIES_MID = 120;
+export declare const MAX_RENDERED_CATEGORIES_HIGH = 200;
+export declare function maxRenderedCategories(tier: DeviceTier): number;
+/**
+ * Evenly-spaced stride sampling down to `maxCategories`, first and last category always kept.
+ * Unlike `decimateSeries`' min/max bucketing (built for a numeric y-value), a category has no
+ * "extreme" to preserve — only its label and position — so an even stride keeps the *shown*
+ * categories representative of the full range instead of clustering at one end. Below the cap the
+ * input array is returned as-is (same reference), so a typical chart is byte-identical to before.
+ */
+export declare function decimateCategories<T>(data: readonly T[], maxCategories: number): readonly T[];
+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. Equal
+ *  to `maxRenderedPoints("high")` — kept as a named export since it's also `decimateSeries`'
+ *  default `maxPoints`, for a caller that decimates without a device tier in hand. */
+export declare const MAX_RENDERED_POINTS = 200;
+/** Per-`useDeviceTier()` cap on rendered line/sparkline points. A point costs ONE svg node versus a
+ *  `BarChart` category's three (bar, label, press target), so the same low/mid-tier node budget
+ *  affords more points than `MAX_RENDERED_CATEGORIES` at the same tier. */
+export declare const MAX_RENDERED_POINTS_LOW = 80;
+export declare const MAX_RENDERED_POINTS_MID = 140;
+export declare const MAX_RENDERED_POINTS_HIGH = 200;
+export declare function maxRenderedPoints(tier: DeviceTier): number;
+/**
+ * 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>;
 /**