pixelize-native-library 1.2.1 → 1.3.0

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

@@ -1,4 +1,4 @@
 export { Text, Heading } from './Text';
-export type { TextProps, HeadingProps } from './Text';
+export type { TextProps, HeadingProps } from './TextProps';
 export type { TextVariant, HeadingVariant } from './Text.variants';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/textarea/Textarea.d.ts

@@ -7,24 +7,6 @@
  * Motion comes from `core/motion`: the focus ring crossfades and the helper/error message fades in
  * and out, both gated by `useMotion()`'s reduce-motion resolution.
  */
-import type { LayoutStyle } from "../../core/style";
-import type { TextareaSize, TextareaStatus } from "./Textarea.variants";
-export interface TextareaProps {
-    value: string;
-    onChangeText: (text: string) => void;
-    placeholder?: string;
-    size?: TextareaSize;
-    status?: TextareaStatus;
-    disabled?: boolean;
-    label?: string;
-    /** Overrides the label→`accessibilityLabel` fallback, for a field whose visible label is elsewhere. */
-    accessibilityLabel?: string;
-    helperText?: string;
-    errorText?: string;
-    maxLength?: number;
-    /** Layout-only, outer box, applied exactly once as the LAST entry in the root style array. */
-    containerStyle?: LayoutStyle;
-    testID?: string;
-}
+import type { TextareaProps } from "./TextareaProps";
 export declare const Textarea: import("react").NamedExoticComponent<TextareaProps>;
 //# sourceMappingURL=Textarea.d.ts.map

package/lib/typescript/modules/textarea/Textarea.variants.d.ts

@@ -11,7 +11,9 @@
  * Free of React and of any lucide import, so the WCAG + behaviour tests import it directly (mocking
  * only `react-native`'s `StyleSheet`, as `core/style` does).
  */
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors, Theme } from "../../theme/hooks";
+export { MIN_TOUCH_TARGET };
 export type TextareaSize = "sm" | "md" | "lg";
 export type TextareaStatus = "default" | "error";
 /**
@@ -19,7 +21,6 @@ export type TextareaStatus = "default" | "error";
  * as Button), so the touch target is met structurally — no `hitSlop` needed here. Kept local (not
  * imported from a sibling module) per the library's module-isolation rule.
  */
-export declare const MIN_TOUCH_TARGET = 44;
 export interface TextareaSizeSpec {
     /** Minimum visual height in dp — roughly 3 / 4 / 5 lines at this size's `fontSize`. */
     readonly minHeight: number;

package/lib/typescript/modules/textarea/TextareaProps.d.ts

@@ -0,0 +1,23 @@
+import type { LayoutStyle } from "../../core/style";
+import type { TextareaSize, TextareaStatus } from "./Textarea.variants";
+/** A multiline text field with label, helper/error text and status-driven styling. */
+export interface TextareaProps {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    size?: TextareaSize;
+    status?: TextareaStatus;
+    disabled?: boolean;
+    label?: string;
+    /** Overrides the label→`accessibilityLabel` fallback, for a field whose visible label is elsewhere. */
+    accessibilityLabel?: string;
+    /** Shown below the field; replaced by `errorText` when `status` is `"error"`. */
+    helperText?: string;
+    /** Replaces `helperText`, and joins the accessible name, only when `status` is `"error"`. */
+    errorText?: string;
+    maxLength?: number;
+    /** Layout-only, outer box, applied exactly once as the LAST entry in the root style array. */
+    containerStyle?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=TextareaProps.d.ts.map

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

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

package/lib/typescript/modules/timeline/Timeline.d.ts

@@ -8,21 +8,6 @@
  * A row's title, description and timestamp form ONE accessible node — see
  * `resolveTimelineItemAccessibility` for why three loose `Text` siblings were a 1.3.1 failure.
  */
-import type { ReactNode } from "react";
-import type { IconName } from "../../core/icon";
-import type { LayoutStyle } from "../../core/style";
-export interface TimelineItem {
-    readonly id?: string;
-    readonly title: string;
-    readonly description?: string;
-    readonly timestamp?: string;
-    readonly icon?: IconName;
-    readonly leading?: ReactNode;
-}
-export interface TimelineProps {
-    items: TimelineItem[];
-    style?: LayoutStyle;
-    testID?: string;
-}
+import type { TimelineProps } from "./TimelineProps";
 export declare const Timeline: import("react").NamedExoticComponent<TimelineProps>;
 //# sourceMappingURL=Timeline.d.ts.map

package/lib/typescript/modules/timeline/Timeline.variants.d.ts

@@ -11,6 +11,7 @@
  * Free of React and of any lucide import, so the WCAG + colour-mapping tests import it directly
  * (mocking only `react-native`'s `StyleSheet`, as `core/style` and every sibling module's tests do).
  */
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors, Theme } from "../../theme/hooks";
 export interface TimelineMarkerSpec {
     /** Plain-dot diameter, in dp — used when an item carries no `icon`. */
@@ -46,6 +47,7 @@ export interface TimelineColors {
  * `tone`/`color` prop to widen: every event reads identically, so every colour Timeline can show is
  * one of these role lookups, guaranteed legible in both modes.
  */
+export { MIN_TOUCH_TARGET };
 export declare function resolveTimelineColors(colors: RoleColors): TimelineColors;
 /**
  * The whole row: the connector column beside the content column. No theme dependency (a plain

package/lib/typescript/modules/timeline/TimelineProps.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import type { IconName } from "../../core/icon";
+import type { LayoutStyle } from "../../core/style";
+/** A note attached to a timeline event. */
+export interface TimelineNote {
+    readonly id: string;
+    readonly body: string;
+}
+/** One row in the vertical event list. */
+export interface TimelineItem {
+    /** Falls back to the row's index when omitted — unstable across reorders. */
+    readonly id?: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly timestamp?: string;
+    /** Ignored when `leading` is also set. */
+    readonly icon?: IconName;
+    /** Overrides the default dot/icon marker. */
+    readonly leading?: ReactNode;
+    /** Rendered below the row; add `onEditNote`/`onDeleteNote` for per-note controls. */
+    readonly notes?: readonly TimelineNote[];
+}
+/** Vertical list of dated/ordered events. */
+export interface TimelineProps {
+    items: TimelineItem[];
+    /** Shows an "Add note" button below the list. */
+    onAddNote?: () => void;
+    /** Adds a per-note edit button; ignored on notes without it. */
+    onEditNote?: (noteId: string) => void;
+    /** Adds a per-note delete button; ignored on notes without it. */
+    onDeleteNote?: (noteId: string) => void;
+    /** Shows a loading state on the "Add note" button. */
+    notesLoading?: boolean;
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=TimelineProps.d.ts.map

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

@@ -4,6 +4,6 @@
  * stay internal — a consumer configures a Timeline through its `items`, never by importing internals.
  */
 export { Timeline } from "./Timeline";
-export type { TimelineProps, TimelineItem } from "./Timeline";
+export type { TimelineProps, TimelineItem } from "./TimelineProps";
 export type { IconName } from "../../core/icon";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/toast/Toast.variants.d.ts

@@ -12,13 +12,12 @@
  * Free of React and of `lucide`, so the WCAG + behaviour tests import it directly (mocking only
  * `react-native`'s `StyleSheet`, as `core/style` does).
  */
+import { MIN_TOUCH_TARGET } from "../../core/a11y/touchTarget";
 import type { RoleColors } from "../../theme/hooks";
 import type { Theme } from "../../theme/hooks";
+export { MIN_TOUCH_TARGET };
 export type ToastTone = "success" | "warning" | "danger" | "info" | "neutral";
 export type ToastPosition = "top" | "bottom";
-/** Same floor as Button/Input/Checkbox — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export declare const MIN_TOUCH_TARGET = 44;
 /** The close button's own visual box + glyph. Toast takes no `size` prop, so this is a fixed pair,
  * not a scale — mirrors `BUTTON_SIZES`' shape for exactly one size. */
 export declare const CLOSE_BUTTON_SIZE = 24;

package/lib/typescript/modules/tooltip/Tooltip.d.ts

@@ -25,30 +25,6 @@
  * kept mounted by a timer rather than an animation callback, so an interrupted fade-out can never
  * strand the bubble in the tree.
  */
-import type { ReactElement } from "react";
-import type { GestureResponderEvent, MouseEvent, NativeSyntheticEvent, TargetedEvent } from "react-native";
-import type { TooltipPlacement } from "./Tooltip.variants";
-/** The subset of props Tooltip reads from / injects into its trigger child. */
-export interface TooltipTriggerProps {
-    onLongPress?: (event: GestureResponderEvent) => void;
-    onPressOut?: (event: GestureResponderEvent) => void;
-    onHoverIn?: (event: MouseEvent) => void;
-    onHoverOut?: (event: MouseEvent) => void;
-    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
-    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
-    accessibilityHint?: string;
-    "aria-describedby"?: string;
-}
-export interface TooltipProps {
-    /** The tip's text. Also what gets merged into the trigger's `accessibilityHint`. */
-    label: string;
-    /**
-     * A single element that accepts the press/hover/focus handlers Tooltip injects (e.g. a
-     * `Pressable`). A `Text` is not enough: on web it renders a plain element that emits none of them.
-     */
-    children: ReactElement<TooltipTriggerProps>;
-    placement?: TooltipPlacement;
-    testID?: string;
-}
+import type { TooltipProps } from "./TooltipProps";
 export declare const Tooltip: import("react").NamedExoticComponent<TooltipProps>;
 //# sourceMappingURL=Tooltip.d.ts.map

package/lib/typescript/modules/tooltip/TooltipProps.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement } from "react";
+import type { GestureResponderEvent, MouseEvent, NativeSyntheticEvent, TargetedEvent } from "react-native";
+import type { TooltipPlacement } from "./Tooltip.variants";
+/** The subset of props Tooltip reads from / injects into its trigger child. */
+export interface TooltipTriggerProps {
+    onLongPress?: (event: GestureResponderEvent) => void;
+    onPressOut?: (event: GestureResponderEvent) => void;
+    onHoverIn?: (event: MouseEvent) => void;
+    onHoverOut?: (event: MouseEvent) => void;
+    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    accessibilityHint?: string;
+    "aria-describedby"?: string;
+}
+/** A hover/focus/long-press tip that also reaches screen readers. */
+export interface TooltipProps {
+    /** The tip's text. Also what gets merged into the trigger's `accessibilityHint`. */
+    label: string;
+    /** Must accept Tooltip's injected handlers — a bare `Text` emits none on web. */
+    children: ReactElement<TooltipTriggerProps>;
+    /** Defaults to "bottom". */
+    placement?: TooltipPlacement;
+    /** When true, the tip only appears if the trigger content is truncated. */
+    onlyShowWhenTruncated?: boolean;
+    testID?: string;
+}
+//# sourceMappingURL=TooltipProps.d.ts.map

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

@@ -4,6 +4,6 @@
  * `TOOLTIP_TIMING`) stay internal — a consumer configures a Tooltip through its props only.
  */
 export { Tooltip } from "./Tooltip";
-export type { TooltipProps, TooltipTriggerProps } from "./Tooltip";
+export type { TooltipProps, TooltipTriggerProps } from "./TooltipProps";
 export type { TooltipPlacement } from "./Tooltip.variants";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/typing-indicator/TypingIndicator.d.ts

@@ -9,20 +9,11 @@
  * A screen-reader user who is not focused on the thread would otherwise learn someone is typing only
  * by chance, on their next swipe past this element.
  *
- * Each dot loops a BARE `motion.timing` over a 0→1 driver and interpolates that into the
- * min→max→min opacity pulse. `Animated.loop` only runs natively (`_startNativeLoop`) when the
- * animation it wraps reports `_isUsingNativeDriver()`, which `Animated.sequence` returns `false`
- * for unconditionally — a looped sequence therefore restarts every leg from the JS thread, forever.
- * The stagger is `TimingOptions.delay` (one JS timeout per dot at start-up) rather than
- * `Animated.delay`, which is itself a `useNativeDriver: false` timing.
+ * Each dot loops a bare `motion.loop` over a 0→1 shared driver and interpolates that into the
+ * min→max→min opacity pulse on the UI thread. The stagger is `TimingOptions.delay` (one JS timeout
+ * per dot at start-up) rather than composing delays into the loop animation.
  */
-import type { LayoutStyle } from "../../core/style";
-import type { TypingIndicatorSize } from "./TypingIndicator.variants";
-export interface TypingIndicatorProps {
-    size?: TypingIndicatorSize;
-    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
-    style?: LayoutStyle;
-    testID?: string;
-}
+import type { TypingIndicatorProps } from "./TypingIndicatorProps";
+export type { TypingIndicatorProps } from "./TypingIndicatorProps";
 export declare const TypingIndicator: import("react").NamedExoticComponent<TypingIndicatorProps>;
 //# sourceMappingURL=TypingIndicator.d.ts.map

package/lib/typescript/modules/typing-indicator/TypingIndicatorProps.d.ts

@@ -0,0 +1,11 @@
+import type { LayoutStyle } from "../../core/style";
+import type { TypingIndicatorSize } from "./TypingIndicator.variants";
+/** Static under reduced motion; the accessible "Typing" label is the real signal either way. */
+export interface TypingIndicatorProps {
+    /** Defaults to "md". */
+    size?: TypingIndicatorSize;
+    /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=TypingIndicatorProps.d.ts.map

package/lib/typescript/modules/typing-indicator/index.d.ts

@@ -1,4 +1,4 @@
 export { TypingIndicator } from "./TypingIndicator";
-export type { TypingIndicatorProps } from "./TypingIndicator";
+export type { TypingIndicatorProps } from "./TypingIndicatorProps";
 export type { TypingIndicatorSize } from "./TypingIndicator.variants";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/modules/upgrade-button/UpgradeButton.d.ts

@@ -0,0 +1,3 @@
+import type { UpgradeButtonProps } from "./UpgradeButtonProps";
+export declare const UpgradeButton: import("react").NamedExoticComponent<UpgradeButtonProps>;
+//# sourceMappingURL=UpgradeButton.d.ts.map

package/lib/typescript/modules/upgrade-button/UpgradeButtonProps.d.ts

@@ -0,0 +1,11 @@
+import type { LayoutStyle } from "../../core/style";
+/** CTA that routes users to a plan upgrade flow. */
+export interface UpgradeButtonProps {
+    onPress: () => void;
+    /** Defaults to "Upgrade". */
+    label?: string;
+    disabled?: boolean;
+    style?: LayoutStyle;
+    testID?: string;
+}
+//# sourceMappingURL=UpgradeButtonProps.d.ts.map

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

@@ -0,0 +1,3 @@
+export { UpgradeButton } from "./UpgradeButton";
+export type { UpgradeButtonProps } from "./UpgradeButtonProps";
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/test/motionJest.d.ts

@@ -0,0 +1,12 @@
+import type { ReactTestInstance } from "react-test-renderer";
+export declare function getAnimatedStyle(component: ReactTestInstance): Record<string, unknown>;
+/** Align Reanimated's system reduce-motion gate with mocked `useReducedMotion`. */
+export declare function syncReanimatedReducedMotion(enabled: boolean): void;
+export declare function setReducedMotionMock(mock: jest.Mock, enabled: boolean): void;
+/** Steps Reanimated's animation clock by `ms` (requires fake timers). */
+export declare function advanceMotion(ms: number): void;
+/** Re-run Reanimated style mappers without advancing the animation clock. */
+export declare function flushMotionMappers(): void;
+/** Read computed values from a `useAnimatedStyle` handle under Jest (hook tests). */
+export declare function readAnimatedStyle(handle: unknown): Record<string, unknown>;
+//# sourceMappingURL=motionJest.d.ts.map

package/lib/typescript/theme/platform/elevation.native.d.ts

@@ -1,5 +1,5 @@
 import type { ViewStyle } from 'react-native';
 import type { ElevationToken } from '../tokens/primitives';
-export type ElevationStyle = Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation'>;
+export type ElevationStyle = Partial<Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation' | 'boxShadow'>>;
 export declare function elevation(token: ElevationToken): ElevationStyle;
 //# sourceMappingURL=elevation.native.d.ts.map

package/lib/typescript/theme/tokens/builders/accentText.d.ts

@@ -7,6 +7,9 @@
  * that fixes those, rather than shipping broken until someone notices.
  */
 import type { Ramp } from "../types";
+export declare const pickAccentText: (primary: Ramp, canvas: string) => string;
+export declare const accentTextOnCanvas: (scale: Ramp, canvas: string) => string;
+export declare const onGradient: (from: string, to: string, white: string, black: string) => string;
 /** The two candidate labels. Near-white and near-black, not #fff/#000 — the shadcn look. */
 export declare const ON_ACCENT_LIGHT = "#fafafa";
 export declare const ON_ACCENT_DARK = "#18181b";

package/lib/typescript/theme/tokens/builders/buildBrandScale.d.ts

@@ -0,0 +1,4 @@
+import type { BrandRamp } from "../types";
+export declare function buildRamp(hex500: string, towardLowRungs: string, towardHighRungs: string): Omit<BrandRamp, "opacity">;
+export declare function buildBrandScale(hex500: string, towardLow: string, towardHigh: string): BrandRamp;
+//# sourceMappingURL=buildBrandScale.d.ts.map

package/lib/typescript/theme/tokens/builders/gradientInk.d.ts

@@ -0,0 +1,9 @@
+import type { Gradient } from "../types";
+export type { Gradient };
+export type ResolvedGradient = Gradient & {
+    ink: string;
+};
+export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
+export declare const resolveGradient: (gradient: Gradient, white: string, black: string) => ResolvedGradient;
+export declare const gradientCss: (g: Gradient, angle?: string) => string;
+//# sourceMappingURL=gradientInk.d.ts.map

package/lib/typescript/theme/tokens/builders/paletteFromAccent.d.ts

@@ -0,0 +1,3 @@
+import type { ColorScheme, PaletteProps, ThemeName } from "../types";
+export declare function paletteFromAccent(accentHex: string, brand: ThemeName, mode: ColorScheme): PaletteProps;
+//# sourceMappingURL=paletteFromAccent.d.ts.map

package/lib/typescript/theme/tokens/builders/skeletonShimmer.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from '../types';
+/** Decorative shimmer band — must clear this against `background[200]` (skeleton base). */
+export declare const SKELETON_SHIMMER_CONTRAST = 1.35;
+/**
+ * Skeleton-only highlight fill. Derived from the background ramp against sunken (`[200]`), never from
+ * `backgroundColor.muted` — that token is shared with hover surfaces and other AA ink measurements.
+ */
+export declare function skeletonShimmerHighlight(p: PaletteProps): string;
+//# sourceMappingURL=skeletonShimmer.d.ts.map

package/lib/typescript/theme/tokens/index.d.ts

@@ -21,6 +21,9 @@ export * from "./builders/liftToContrast";
 export * from "./builders/placeholderInk";
 export * from "./builders/semanticText";
 export * from "./builders/finalizePalette";
+export * from "./builders/gradientInk";
+export * from "./builders/buildBrandScale";
+export { paletteFromAccent } from "./builders/paletteFromAccent";
 export * from "./roles";
 export * from "./assertPalette";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/theme/tokens/primitives/controlSizes.d.ts

@@ -0,0 +1,6 @@
+export type ControlSize = "sm" | "md" | "lg";
+/** Mobile control heights — 44dp floor; web uses 32/40/48px and defaults to `sm`. */
+export declare const CONTROL_HEIGHTS: Readonly<Record<ControlSize, number>>;
+export declare const CONTROL_LABEL_FONT_SIZE: Readonly<Record<ControlSize, number>>;
+export declare const DEFAULT_CONTROL_SIZE: ControlSize;
+//# sourceMappingURL=controlSizes.d.ts.map

package/lib/typescript/theme/tokens/primitives/index.d.ts

@@ -20,4 +20,6 @@ export { default as zIndices } from './zIndices';
 export type { ZIndexToken } from './zIndices';
 export { default as sizes } from './sizes';
 export type { SizeToken } from './sizes';
+export { CONTROL_HEIGHTS, CONTROL_LABEL_FONT_SIZE, DEFAULT_CONTROL_SIZE, } from './controlSizes';
+export type { ControlSize } from './controlSizes';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/theme/tokens/roles/index.d.ts

@@ -41,6 +41,8 @@ export type RoleColors = {
         surface: string;
         raised: string;
         sunken: string;
+        /** Skeleton shimmer band only — not `hover`; see `builders/skeletonShimmer.ts`. */
+        skeletonShimmer: string;
         hover: string;
         selected: string;
         disabled: string;

package/lib/typescript/theme/tokens/types.d.ts

@@ -95,8 +95,8 @@ export type PaletteProps = {
 /** What a brand authors by hand: every token required, derived ones excluded. */
 export type BrandPaletteSource = Omit<PaletteProps, "semanticText">;
 /**
- * Brand identities the library ships. `zinc` is the mobile default (the shadcn look); the other
- * eight mirror web. Web has no `zinc` yet and is adopting these values, so this stays a superset.
+ * Brand identities the library ships. `zinc` is the mobile default (the shadcn look); the same nine
+ * brands ship on web — palettes are siblings, not a strict superset either way.
  */
 export type ThemeName = "zinc" | "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood" | "storefront";
 /** The two palettes a brand ships. */