pixelize-native-library 1.2.0 → 1.3.0

package/lib/typescript/modules/button/ButtonProps.d.ts

@@ -0,0 +1,47 @@
+import type { GestureResponderEvent, MouseEvent, NativeSyntheticEvent, TargetedEvent } from "react-native";
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+import type { ButtonSize, ButtonTone, ButtonVariant, IconPosition } from "./Button.variants";
+interface ButtonBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    tone?: ButtonTone;
+    /** Ignored on icon-only buttons — the icon always renders in the leading slot. */
+    iconPosition?: IconPosition;
+    /** Shows a spinner in place of the icon and blocks press, same as `disabled`. */
+    loading?: boolean;
+    disabled?: boolean;
+    /** Only announced as a toggle state when explicitly passed — omit for a plain button. */
+    selected?: boolean;
+    fullWidth?: boolean;
+    /** Blocked (never fires) while `disabled` or `loading` is true. */
+    onPress?: () => void;
+    /** Not gated by `disabled`/`loading` — fires even while the button is blocked. */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /** Not gated by `disabled`/`loading` — fires even while the button is blocked. */
+    onPressOut?: (event: GestureResponderEvent) => void;
+    onHoverIn?: (event: MouseEvent) => void;
+    onHoverOut?: (event: MouseEvent) => void;
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    accessibilityHint?: string;
+    style?: LayoutStyle;
+    testID?: string;
+}
+interface LabelledButtonProps extends ButtonBaseProps {
+    label: string;
+    icon?: IconName;
+    /** Falls back to `label` when omitted. */
+    accessibilityLabel?: string;
+}
+interface IconOnlyButtonProps extends ButtonBaseProps {
+    icon: IconName;
+    /** Must stay omitted — presence of `label` would make this a labelled button. */
+    label?: never;
+    /** Required — there's no visible label for assistive tech to fall back to. */
+    accessibilityLabel: string;
+}
+/** A labelled or icon-only control; the union enforces `accessibilityLabel` per shape. */
+export type ButtonProps = LabelledButtonProps | IconOnlyButtonProps;
+export {};
+//# sourceMappingURL=ButtonProps.d.ts.map

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

@@ -4,7 +4,7 @@
  * stay internal — a consumer configures a Button through its props, never by importing its internals.
  */
 export { Button } from "./Button";
-export type { ButtonProps } from "./Button";
+export type { ButtonProps } from "./ButtonProps";
 export type { ButtonVariant, ButtonSize, ButtonTone, IconPosition } from "./Button.variants";
 export type { IconName } from "../../core/icon";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,39 +1,5 @@
-/**
- * ButtonGroup — a segmented single-choice control. Visually connected segments sharing one outer
- * border and a divider line between adjacent segments, NOT a row of standalone `Button`s — that
- * connected/segmented treatment is a different structural shape than Button's own pill/rect
- * variants, so this is a standalone sibling (it never imports `../button`). The border/divider is
- * drawn PER SEGMENT, not once on the container: every edge that touches the selected segment omits
- * the stroke (see `resolveButtonGroupSegmentEdgeColors` — WCAG 1.4.11) and relies on the selected
- * fill's own contrast against the canvas instead.
- *
- * One component owns the whole group, same as `RadioGroup`: each segment carries its own
- * `accessibilityRole="radio"` + `accessibilityState.checked`, and the container carries
- * `accessibilityRole="radiogroup"` so assistive tech announces the grouping without collapsing the
- * individually-focusable segments into one.
- *
- * No animation anywhere, deliberately: selection is a conditional fill, and the segments share one
- * continuous border, so a per-segment press scale (Button's affordance) would visibly detach a
- * segment from the control it is part of. The `pressed` fill swap is the affordance instead. Nothing
- * animates, so — like `RadioGroup` — there is nothing here for reduce motion (WCAG 2.3.3) to gate.
- */
-import type { LayoutStyle } from "../../core/style";
-import type { ButtonGroupSize } from "./ButtonGroup.variants";
-export interface ButtonGroupOption {
-    readonly label: string;
-    readonly value: string;
-}
-export interface ButtonGroupProps {
-    options: ButtonGroupOption[];
-    value: string;
-    onValueChange: (value: string) => void;
-    size?: ButtonGroupSize;
-    disabled?: boolean;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
-    style?: LayoutStyle;
-    testID?: string;
-}
+import type { ButtonGroupProps } from "./ButtonGroupProps";
+export type { ButtonGroupOption, ButtonGroupProps } from "./ButtonGroupProps";
 declare function ButtonGroupImpl({ options, value, onValueChange, size, disabled, style, testID, }: ButtonGroupProps): import("react").JSX.Element;
 export declare const ButtonGroup: import("react").MemoExoticComponent<typeof ButtonGroupImpl>;
-export {};
 //# sourceMappingURL=ButtonGroup.d.ts.map

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

@@ -13,11 +13,10 @@
  *  - `resolveButtonGroupSegmentAccessibility` derives the per-segment a11y surface purely, mirroring
  *    `resolveRadioRowAccessibility` — this is a single-choice value selector, not a set of tabs.
  */
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors, Theme } from "../../theme/hooks";
+export { MIN_TOUCH_TARGET };
 export type ButtonGroupSize = "sm" | "md";
-/** Same floor as Button/RadioGroup/Tabs — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export declare const MIN_TOUCH_TARGET = 44;
 export interface ButtonGroupSizeSpec {
     /** Visual height in dp, per segment (fixed, not a minimum — the hitSlop math below depends on the
      * segment actually rendering at this height). */
@@ -50,8 +49,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 +62,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 +82,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;
@@ -173,30 +148,20 @@ export interface ButtonGroupKeyInput {
  */
 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: {
@@ -211,18 +176,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/button-group/ButtonGroupProps.d.ts

@@ -0,0 +1,21 @@
+import type { LayoutStyle } from "../../core/style";
+import type { ButtonGroupSize } from "./ButtonGroup.variants";
+/** One segment of the group. */
+export interface ButtonGroupOption {
+    readonly label: string;
+    readonly value: string;
+}
+/** A segmented single-choice control. */
+export interface ButtonGroupProps {
+    options: ButtonGroupOption[];
+    /** Selects the segment whose `value` matches; an unmatched value selects the first segment. */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Defaults to "md". */
+    size?: ButtonGroupSize;
+    disabled?: boolean;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=ButtonGroupProps.d.ts.map

package/lib/typescript/modules/button-group/index.d.ts

@@ -5,6 +5,6 @@
  * never by importing its internals.
  */
 export { ButtonGroup } from "./ButtonGroup";
-export type { ButtonGroupProps, ButtonGroupOption } from "./ButtonGroup";
+export type { ButtonGroupProps, ButtonGroupOption } from "./ButtonGroupProps";
 export type { ButtonGroupSize } from "./ButtonGroup.variants";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,20 +1,9 @@
 /**
- * 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 { LayoutStyle } from "../../core/style";
-import type { CardVariant } from "./Card.variants";
-export interface CardProps {
-    variant?: CardVariant;
-    children?: ReactNode;
-    /** 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;
+import type { CardProps } from "./CardProps";
+declare function CardImpl({ variant, children, onPress, onLongPress, disabled, accessibilityLabel, accessibilityState, 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/CardProps.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { GestureResponderEvent } from "react-native";
+import type { LayoutStyle } from "../../core/style";
+import type { CardVariant } from "./Card.variants";
+/** A plain, variant-driven container for grouping content — pressable only when `onPress` is set. */
+export interface CardProps {
+    /** Defaults to "elevated". */
+    variant?: CardVariant;
+    children?: ReactNode;
+    /** When set, the root becomes a `Pressable` with press feedback; otherwise a plain `View`. */
+    onPress?: () => void;
+    /** Only fires when `onPress` is also set. */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /** Only applies when `onPress` is set. */
+    disabled?: boolean;
+    /** Only used when `onPress` is set. */
+    accessibilityLabel?: string;
+    /** Only used when `onPress` is set. */
+    accessibilityState?: {
+        disabled?: boolean;
+        selected?: boolean;
+    };
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=CardProps.d.ts.map

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

@@ -4,6 +4,6 @@
  * internal — a consumer configures a Card through its props, never by importing its internals.
  */
 export { Card } from "./Card";
-export type { CardProps } from "./Card";
+export type { CardProps } from "./CardProps";
 export type { CardVariant } from "./Card.variants";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,26 +1,3 @@
-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;
-}
+import type { BarChartProps } from "./BarChartProps";
 export declare const BarChart: import("react").NamedExoticComponent<BarChartProps>;
 //# sourceMappingURL=BarChart.d.ts.map

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

@@ -0,0 +1,36 @@
+import type { LayoutStyle } from "../../core/style";
+/** One series' name and color, index-matched to each datum's `values`. */
+export interface BarChartSeries {
+    readonly name: string;
+    /** Defaults to the categorical ramp color at this series' index. */
+    readonly color?: string;
+}
+/** One category; `values.length === 1` draws a simple bar, more draws grouped/stacked bars. */
+export interface BarChartDatum {
+    readonly label: string;
+    readonly values: number[];
+}
+/** Svg vertical bars with axes and gridlines — simple, grouped or stacked. */
+export interface BarChartProps {
+    data: BarChartDatum[];
+    /** Defaults to the categorical ramp color and "Series N" per index. */
+    series?: BarChartSeries[];
+    /** Defaults to 200. */
+    height?: number;
+    /** Defaults to true. */
+    showGrid?: boolean;
+    /** Draws each bar's value above it. Defaults to false. */
+    showValues?: boolean;
+    /** Formats axis ticks and bar values when shown. Defaults to a plain formatter. */
+    yAxisFormatter?: (value: number) => string;
+    /** Defaults to false. */
+    stacked?: boolean;
+    /** Text legend naming each series. Only drawn when 2+ series are present. */
+    showLegend?: boolean;
+    /** Called with the pressed bar's datum and its index into `values`. */
+    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;
+}
+//# sourceMappingURL=BarChartProps.d.ts.map

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

@@ -1,18 +1,3 @@
-import type { ReactNode } from "react";
-import type { LayoutStyle } from "../../core/style";
-export interface BarListItem {
-    readonly label: string;
-    readonly value: number;
-    readonly color?: string;
-    readonly icon?: ReactNode;
-}
-export interface BarListProps {
-    items: BarListItem[];
-    maxValue?: number;
-    onPressItem?: (item: BarListItem, index: number) => void;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
-    style?: LayoutStyle;
-    testID?: string;
-}
+import type { BarListProps } from "./BarListProps";
 export declare const BarList: import("react").NamedExoticComponent<BarListProps>;
 //# sourceMappingURL=BarList.d.ts.map

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+/** One row's label, value and bar fill. */
+export interface BarListItem {
+    readonly label: string;
+    readonly value: number;
+    /** Defaults to the theme's accent fill; per-item colors support data-driven series. */
+    readonly color?: string;
+    readonly icon?: ReactNode;
+}
+/** Horizontal labeled breakdown bars rendered as plain Views, windowed for large lists. */
+export interface BarListProps {
+    items: BarListItem[];
+    /** Defaults to the largest item's value. */
+    maxValue?: number;
+    /** Rows become pressable buttons; otherwise plain text rows. */
+    onPressItem?: (item: BarListItem, index: number) => void;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=BarListProps.d.ts.map

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

@@ -1,16 +1,4 @@
-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;
-}
+import type { ChartLegendProps } from "./ChartLegendProps";
+export type { ChartLegendEntry, ChartLegendGlyph, ChartLegendProps } from "./ChartLegendProps";
 export declare const ChartLegend: import("react").NamedExoticComponent<ChartLegendProps>;
 //# sourceMappingURL=ChartLegend.d.ts.map

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

@@ -0,0 +1,19 @@
+import type { SeriesShape } from "./Charts.variants";
+/** Legend glyph style: swatch, dashed line, or knocked-out mark. */
+export type ChartLegendGlyph = "swatch" | "line" | "mark";
+/** One legend row — its glyph and the series it names. */
+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;
+    /** Stroke dash pattern; only read by the `line` glyph. */
+    readonly dash?: readonly number[];
+}
+/** Row list for the shared legend; each entry pairs a swatch/glyph with a label. */
+export interface ChartLegendProps {
+    readonly entries: readonly ChartLegendEntry[];
+    readonly glyph: ChartLegendGlyph;
+    readonly testID: string | undefined;
+}
+//# sourceMappingURL=ChartLegendProps.d.ts.map

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

@@ -2,9 +2,15 @@
  * 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 { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors, StatusRole, Theme } from "../../theme/hooks";
+import type { DeviceTier } from "../../core/device";
+export { MIN_TOUCH_TARGET };
 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 valueColor: string;
@@ -99,6 +105,21 @@ export declare function resolveBarChartDomain(data: readonly BarChartDomainInput
     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[];
@@ -120,8 +141,17 @@ export declare function resolveLineDomain(series: readonly LineSeriesDomainInput
     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. */
+ *  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

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

@@ -1,21 +1,3 @@
-import type { LayoutStyle } from "../../core/style";
-export interface DonutChartSegment {
-    readonly value: number;
-    readonly color: string;
-    readonly label?: string;
-}
-export interface DonutChartProps {
-    segments: DonutChartSegment[];
-    size?: number;
-    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;
-}
+import type { DonutChartProps } from "./DonutChartProps";
 export declare const DonutChart: import("react").NamedExoticComponent<DonutChartProps>;
 //# sourceMappingURL=DonutChart.d.ts.map

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

@@ -0,0 +1,27 @@
+import type { LayoutStyle } from "../../core/style";
+/** One ring segment; non-finite or ≤0 values are dropped before rendering. */
+export interface DonutChartSegment {
+    readonly value: number;
+    readonly color: string;
+    /** Falls back to "Segment N" in the legend when omitted. */
+    readonly label?: string;
+}
+/** Svg ring built from stacked circle strokes, with an optional centered label. */
+export interface DonutChartProps {
+    segments: DonutChartSegment[];
+    /** Defaults to 160. */
+    size?: number;
+    /** Ring stroke width in dp. Defaults to 20. */
+    thickness?: number;
+    /** Renders centered inside the ring when set. */
+    centerLabel?: string;
+    /** Small centered line below `centerLabel`. */
+    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;
+}
+//# sourceMappingURL=DonutChartProps.d.ts.map

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

@@ -1,30 +1,3 @@
-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;
-}
+import type { LineChartProps } from "./LineChartProps";
 export declare const LineChart: import("react").NamedExoticComponent<LineChartProps>;
 //# sourceMappingURL=LineChart.d.ts.map