pixelize-native-library 1.0.6

package/lib/typescript/modules/button/Button.variants.d.ts

@@ -0,0 +1,156 @@
+/**
+ * Button's style + behaviour resolution — the three pure functions the component (and its tests)
+ * depend on, plus the themed structural variant resolver.
+ *
+ * The split every one of the 16 sibling components should copy:
+ *  - STRUCTURE / SIZE (numbers off the theme scale) lives in the `createThemedVariants` resolver
+ *    below — static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is tone-driven and resolved by `resolveButtonTone` from the theme's ROLE colours, never
+ *    a raw ramp and never a hardcoded hex. That is what keeps `tone` a closed union, not a `color`.
+ *  - ACCESSIBILITY prop derivation is `resolveButtonAccessibility`, kept pure so the "disabled blocks
+ *    press / loading is busy" contract is unit-testable without rendering React Native.
+ *
+ * Everything here is 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` does).
+ */
+import type { RoleColors } from "../../theme";
+import type { Theme } from "../../theme";
+export type ButtonVariant = "solid" | "outline" | "ghost" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonTone = "accent" | "neutral" | "danger";
+export type IconPosition = "leading" | "trailing";
+/**
+ * The one touch-target floor we hold every size to. 44dp is Apple's HIG minimum and WCAG 2.5.5
+ * (AAA); it comfortably exceeds 2.5.8's 24×24 (AA). Sizes shorter than this keep their visual
+ * height and reach 44 through `hitSlop` — the target grows, the control never does.
+ */
+export declare const MIN_TOUCH_TARGET = 44;
+export interface ButtonSizeSpec {
+    /** Visual height in dp. */
+    readonly height: number;
+    /** Label size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** Icon glyph size in dp. */
+    readonly iconSize: number;
+    /** Symmetric touch expansion so `height + 2·hitSlop ≥ 44` (and, for icon-only, width too). */
+    readonly hitSlop: number;
+}
+/**
+ * Button-specific dimensions. Height, icon size and slop are the component's own design constants;
+ * `fontSize` sits on the theme's `fontSizes` scale (14/16/18). Kept a plain constant — with no theme
+ * dependency — so the hit-target test can assert `height + 2·hitSlop ≥ 44` without a provider.
+ */
+export declare const BUTTON_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly iconSize: 16;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly iconSize: 18;
+        readonly hitSlop: number;
+    };
+    readonly lg: {
+        readonly height: 48;
+        readonly fontSize: 18;
+        readonly iconSize: 20;
+        readonly hitSlop: number;
+    };
+};
+export interface ButtonToneColors {
+    /** Filled-variant background. */
+    readonly fill: string;
+    /** Label + icon on `fill` — the derived on-colour, so it always clears 4.5:1 (never a hard white). */
+    readonly onFill: string;
+    /** Label + icon for the transparent variants (outline / ghost / link), read on the canvas. */
+    readonly text: string;
+    /** Pressed background for the transparent variants; `text` stays ≥ 4.5:1 on it. */
+    readonly subtle: string;
+    /** Outline boundary — the neutral interactive outline (WCAG 1.4.11 ≥ 3:1 on every brand). */
+    readonly border: string;
+}
+/**
+ * Maps a `tone` onto the theme's role colours. This is the whole reason the public prop is a closed
+ * union and not `color?: string`: every colour a button can show is one of these role lookups, so it
+ * is guaranteed legible in both modes and can never be an off-palette value an app invented.
+ *
+ * The outline border is the neutral interactive outline for every tone (guaranteed ≥ 3:1); the tone
+ * is carried by the label colour, not by a tinted 1px line that would fail 1.4.11 on most brands.
+ */
+export declare function resolveButtonTone(colors: RoleColors, tone: ButtonTone): ButtonToneColors;
+export interface ButtonAccessibilityInput {
+    readonly label?: string | undefined;
+    readonly accessibilityLabel?: string | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly loading?: boolean | undefined;
+    readonly onPress?: (() => void) | undefined;
+}
+export interface ButtonAccessibilityProps {
+    readonly accessibilityRole: "button";
+    /** Falls back to the visible label; required by the type for an icon-only button. */
+    readonly accessibilityLabel: string | undefined;
+    readonly accessibilityState: {
+        readonly disabled: boolean;
+        readonly busy: boolean;
+    };
+    /** The `Pressable` disabled prop — true while disabled OR loading, so touches are blocked. */
+    readonly disabled: boolean;
+    /** Gated `onPress`: undefined while disabled or loading, so a press can't fire. */
+    readonly onPress: (() => void) | undefined;
+}
+/**
+ * Derives the accessibility surface once, purely, so the contract is testable without a renderer:
+ *  - `loading` sets `busy` (1.4.1 — announced, never conveyed by the spinner alone),
+ *  - disabled OR loading blocks the press (guarded `onPress` AND the `disabled` prop), so a loading
+ *    button is non-interactive while it works.
+ *
+ * `accessibilityState.disabled` tracks the same `blocked` flag the `Pressable disabled` prop uses, so
+ * what a screen reader hears matches what actually renders: a loading button announces `busy` AND
+ * `disabled` (RN's `disabled` prop forces `disabled` into the state regardless). Reporting `busy` here
+ * while the rendered control forced `disabled` back to true would be a lie to assistive tech.
+ */
+export declare function resolveButtonAccessibility(input: ButtonAccessibilityInput): ButtonAccessibilityProps;
+/**
+ * Structural styles only — layout, height, padding, radius, border WIDTH. No colours (those are
+ * tone-driven and applied inline over this), so this compiles once per theme identity via the
+ * `WeakMap`-cached themed resolver and never rebuilds per render.
+ *
+ * `size` is registered before `variant` so `link` (which zeroes horizontal padding) wins over the
+ * size's padding — resolution order is base → groups in declaration order, last write wins.
+ */
+export declare const buttonStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+            paddingHorizontal: 12;
+        };
+        md: {
+            height: 40;
+            paddingHorizontal: 16;
+        };
+        lg: {
+            height: 48;
+            paddingHorizontal: 24;
+        };
+    };
+    variant: {
+        solid: {
+            borderWidth: number;
+        };
+        outline: {
+            borderWidth: 1;
+        };
+        ghost: {
+            borderWidth: number;
+        };
+        link: {
+            borderWidth: number;
+            paddingHorizontal: number;
+            columnGap: 4;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Button.variants.d.ts.map

package/lib/typescript/modules/button/Button.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/button/Button.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAInC,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;CAI8B,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sGAAsG;IACtG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,8FAA8F;IAC9F,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,6FAA6F;IAC7F,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,GAAG,gBAAgB,CAgCxF;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,iBAAiB,EAAE,QAAQ,CAAC;IACrC,qFAAqF;IACrF,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,kBAAkB,EAAE;QAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IACpF,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,QAAQ,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,wBAAwB,GAAG,wBAAwB,CAWpG;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsBzB,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/button`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolveButtonTone`, `BUTTON_SIZES`, …)
+ * 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 { ButtonVariant, ButtonSize, ButtonTone, IconPosition } from "./Button.variants";
+export type { IconName } from "../../core/icon";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/button/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG7F,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,37 @@
+/**
+ * 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 (selection is a conditional fill, not a slide or a fade), so — like
+ * `RadioGroup` — there is nothing here for `useReducedMotion` (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;
+}
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/modules/button-group/ButtonGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAYpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,OAAO,EACP,KAAK,EACL,aAAa,EACb,IAAW,EACX,QAAgB,EAChB,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,+BA+DlB;AASD,eAAO,MAAM,WAAW,6DAAwB,CAAC"}

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

@@ -0,0 +1,217 @@
+/**
+ * ButtonGroup's style + behaviour resolution — pure, React/lucide-free, same split as Button:
+ *  - STRUCTURE (segment height/padding, and — per segment — the top/bottom/left/right border
+ *    WIDTHS and corner radii) lives in the `createThemedVariants` resolvers below, registered once
+ *    per (theme, size) — never rebuilt per render.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveButtonGroupColors`), never a raw hex:
+ *    the selected segment is always the accent role, the shared outline/divider is always the
+ *    neutral interactive outline (WCAG 1.4.11), same token used by Button's outline border.
+ *  - `resolveButtonGroupSegmentEdgeColors` decides, PER EDGE OF PER SEGMENT, whether that edge draws
+ *    the outline/divider stroke at all (see the WCAG 1.4.11 note on `resolveButtonGroupColors`).
+ *  - `resolveButtonGroupSegmentHitSlop` decides, PER EDGE OF PER SEGMENT, how far the touch target
+ *    expands (see the touch-target note below `BUTTON_GROUP_SIZES`).
+ *  - `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";
+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). */
+    readonly height: number;
+    /** Label size, on the theme's `fontSizes` scale. */
+    readonly fontSize: number;
+    /** The touch-expansion amount, applied symmetrically on the top/bottom of every segment and on
+     * whichever single horizontal edge (if any) is that segment's TRUE outer edge — never on an edge
+     * shared with a neighbour. See `resolveButtonGroupSegmentHitSlop`. */
+    readonly hitSlop: number;
+}
+/**
+ * ButtonGroup-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
+ * test can assert `height + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
+ */
+export declare const BUTTON_GROUP_SIZES: {
+    readonly sm: {
+        readonly height: 32;
+        readonly fontSize: 14;
+        readonly hitSlop: number;
+    };
+    readonly md: {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly hitSlop: number;
+    };
+};
+export interface ButtonGroupColors {
+    /** Selected-segment fill. */
+    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. */
+    readonly label: 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
+     * ADJACENT to the selected one is actively pressed, the boundary the 1.4.11 fix on `outline` (below)
+     * omitted is now `selectedFill` vs THIS fill, not vs `bg.canvas`. Plain `bg.sunken` measured 2.99:1
+     * against `selectedFill` on rosewood light — under the 3:1 floor, not a rounding artifact — so this
+     * 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`).
+     */
+    readonly outline: string;
+}
+/**
+ * Maps the group's fixed visual roles onto ROLE colours — never a hardcoded hex. There is no
+ * per-segment `tone`: the selected fill is always the accent role and the outline is always the
+ * neutral interactive outline, so — like `RadioGroup` — this is pure indirection, not a union to
+ * resolve.
+ */
+export declare function resolveButtonGroupColors(colors: RoleColors): ButtonGroupColors;
+export interface ButtonGroupSegmentEdgeInput {
+    /** Whether THIS segment is the selected one. */
+    readonly selected: boolean;
+    /** Whether the NEXT segment (the one this segment's right/divider edge is shared with) is
+     * selected. `false` for the last segment — its right edge is the group's own outer edge, shared
+     * with nothing. */
+    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. */
+    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;
+    readonly isLast: boolean;
+}
+export interface ButtonGroupSegmentHitSlop {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+}
+/**
+ * Per-edge, per-segment hitSlop — the touch-target fix. Vertical expansion is symmetric and safe on
+ * every segment (nothing else in the group sits above/below a segment). Horizontal expansion is
+ * granted ONLY on a segment's TRUE outer edge — the group's own left edge on the first segment, its
+ * own right edge on the last — and is exactly 0 on every edge shared with a neighbour.
+ *
+ * Segments in this control render flush against each other (by design — "one connected control",
+ * see `ButtonGroup.tsx`), so a symmetric hitSlop on every segment would expand INTO the adjacent
+ * segment on every internal edge. React Native's own documented hitSlop behaviour never clips to a
+ * sibling's bounds and resolves overlapping siblings' hitSlop to whichever renders LATER (the higher
+ * `options` index), not whichever is visually closer to the tap — so a tap near an internal divider,
+ * still visually inside the earlier segment, would fire the LATER segment's `onValueChange`. Zeroing
+ * the internal edges removes the overlap entirely instead of merely shrinking it.
+ *
+ * Because horizontal hitSlop can no longer safely pad an internal segment's touch width, the ≥44dp
+ * floor for those segments is met by `buttonGroupSegmentStructure`'s own `minWidth`, not by hitSlop.
+ */
+export declare function resolveButtonGroupSegmentHitSlop(size: ButtonGroupSize, position: ButtonGroupSegmentPosition): ButtonGroupSegmentHitSlop;
+export interface ButtonGroupSegmentAccessibilityInput {
+    readonly selected: boolean;
+    readonly disabled: boolean;
+}
+export interface ButtonGroupSegmentAccessibilityProps {
+    readonly accessibilityRole: "radio";
+    readonly accessibilityState: {
+        readonly checked: boolean;
+        readonly disabled: boolean;
+    };
+    /** The `Pressable` disabled prop — blocks touches without relying on `onPress` gating alone. */
+    readonly disabled: boolean;
+}
+/**
+ * Derives one segment's accessibility surface purely, mirroring `resolveRadioRowAccessibility`:
+ * `accessibilityRole="radio"` + `accessibilityState.checked` (NOT `role="tab"`/`.selected` — a tab
+ * switches content panels, which this control does not do; it is the same single-choice value
+ * selector shape `RadioGroup` already uses, just drawn as connected segments instead of rows).
+ */
+export declare function resolveButtonGroupSegmentAccessibility(input: ButtonGroupSegmentAccessibilityInput): ButtonGroupSegmentAccessibilityProps;
+/**
+ * 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.
+ */
+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
+ * 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.
+ */
+export declare const buttonGroupSegmentStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    size: {
+        sm: {
+            height: 32;
+            paddingHorizontal: 8;
+        };
+        md: {
+            height: 40;
+            paddingHorizontal: 12;
+        };
+    };
+    first: {
+        on: {
+            borderLeftWidth: 1;
+            borderTopLeftRadius: 8;
+            borderBottomLeftRadius: 8;
+        };
+        off: {
+            borderLeftWidth: number;
+        };
+    };
+    last: {
+        on: {
+            borderTopRightRadius: 8;
+            borderBottomRightRadius: 8;
+        };
+        off: {};
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=ButtonGroup.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/button-group/ButtonGroup.variants.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+/**
+ * Public surface of `pixelize-native-library/button-group`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The visual/behaviour resolvers (`resolveButtonGroupColors`,
+ * `BUTTON_GROUP_SIZES`, …) stay internal — a consumer configures a ButtonGroup through its props,
+ * never by importing its internals.
+ */
+export { ButtonGroup } from "./ButtonGroup";
+export type { ButtonGroupProps, ButtonGroupOption } from "./ButtonGroup";
+export type { ButtonGroupSize } from "./ButtonGroup.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/button-group/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEzE,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+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;
+export declare const Card: import("react").MemoExoticComponent<typeof CardImpl>;
+export {};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/modules/card/Card.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,QAAQ,CAAC,EAAE,OAAoB,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,+BAkB7E;AAID,eAAO,MAAM,IAAI,sDAAiB,CAAC"}

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

@@ -0,0 +1,51 @@
+/**
+ * Card's style resolution — same split as Button.variants:
+ *  - STRUCTURE (padding, radius, border WIDTH) lives in the themed `cardStructure` resolver, static
+ *    per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is variant-driven and resolved from the theme's ROLE colours by `resolveCardVariant`,
+ *    never a raw ramp and never a hardcoded hex. Elevation (a shadow, not a role colour) is applied
+ *    directly by the component from `theme.elevation.md` — nothing to resolve here.
+ *
+ * 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";
+export type CardVariant = "elevated" | "outline" | "flat";
+export interface CardVariantColors {
+    readonly background: string;
+    /** Present only for `outline` — `undefined` elsewhere so the component skips `borderColor`. */
+    readonly border: string | undefined;
+}
+/**
+ * Maps `variant` onto the theme's role colours. The whole reason the prop is a closed union and not
+ * `color?: string`: every colour a Card can show is one of these role lookups, so it inverts
+ * light↔dark for free and can never be an off-palette value an app invented.
+ *
+ * The outline border deliberately reads `colors.border.interactive`, NOT `colors.border.default`:
+ * `default` is the decorative divider rung and measures ~1.0–1.4:1 against `bg.surface`/`bg.raised`
+ * on every brand × mode — nowhere near WCAG 1.4.11's 3:1 floor for a rendered UI boundary.
+ * `interactive` is the token proven ≥ 3:1 everywhere (see `Card.test.ts`) — the identical
+ * substitution `Button`'s outline variant makes, for the identical reason.
+ */
+export declare function resolveCardVariant(colors: RoleColors, variant: CardVariant): CardVariantColors;
+/**
+ * Structural styles only — padding, radius, border WIDTH. No colours (those are variant-driven and
+ * applied inline over this) and no shadow (elevation is applied directly from `theme.elevation.md`,
+ * already rendered per-platform — never re-derived here), so this compiles once per theme identity
+ * via the `WeakMap`-cached themed resolver and never rebuilds per render.
+ */
+export declare const cardStructure: import("../../core/style").ThemedVariantResolver<Theme, {
+    variant: {
+        flat: {
+            borderWidth: number;
+        };
+        outline: {
+            borderWidth: 1;
+        };
+        elevated: {
+            borderWidth: number;
+        };
+    };
+}, import("react-native").ViewStyle>;
+//# sourceMappingURL=Card.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.variants.d.ts","sourceRoot":"","sources":["../../../../src/modules/card/Card.variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,+FAA+F;IAC/F,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,GAAG,iBAAiB,CAS9F;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;oCAavB,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * Public surface of `pixelize-native-library/card`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The variant resolver (`resolveCardVariant`, `cardStructure`) stays
+ * 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 { CardVariant } from "./Card.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/card/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,43 @@
+/**
+ * Checkbox — a Pressable custom box (React Native ships no native `Checkbox`/`Switch` equivalent
+ * 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`.
+ */
+import type { LayoutStyle } from "../../core/style";
+import type { CheckboxSize } from "./Checkbox.variants";
+interface CheckboxBaseProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /**
+     * Renders the "minus" glyph in place of "check", and reports `accessibilityState.checked` as
+     * `"mixed"` — regardless of `checked` (the usual pairing is `checked={false}`, but indeterminate
+     * always wins the glyph/state either way). Toggling still flips `checked` via `onCheckedChange`.
+     */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+/** A checkbox with a visible label. `accessibilityLabel` defaults to `label`. Pressing the label
+ * toggles too — it lives inside the same `Pressable` row as the box. */
+interface LabelledCheckboxProps extends CheckboxBaseProps {
+    label: string;
+    accessibilityLabel?: string;
+}
+/**
+ * A checkbox with no visible label (e.g. a table row's select-all box). It has no visible text, so
+ * `accessibilityLabel` is REQUIRED at the type level — the same trap `Button`'s icon-only shape
+ * closes. `label?: never` makes the two shapes mutually exclusive.
+ */
+interface UnlabelledCheckboxProps extends CheckboxBaseProps {
+    label?: never;
+    accessibilityLabel: string;
+}
+export type CheckboxProps = LabelledCheckboxProps | UnlabelledCheckboxProps;
+declare function CheckboxImpl(props: CheckboxProps): import("react").JSX.Element;
+export declare const Checkbox: import("react").MemoExoticComponent<typeof CheckboxImpl>;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/modules/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAUpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;wEACwE;AACxE,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,UAAU,uBAAwB,SAAQ,iBAAiB;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,qBAAqB,GAAG,uBAAuB,CAAC;AAQ5E,iBAAS,YAAY,CAAC,KAAK,EAAE,aAAa,+BA4FzC;AASD,eAAO,MAAM,QAAQ,0DAAqB,CAAC"}