pixelize-native-library 1.2.0 → 1.2.1

package/lib/typescript/modules/skeleton/Skeleton.variants.d.ts

@@ -1,27 +1,8 @@
 /**
  * Skeleton's style + accessibility resolution — the pure functions the component (and its tests)
  * depend on, plus the themed structural variant resolver.
- *
- * The split every sibling module copies (see `Button.variants.ts` / `Avatar.variants.ts`):
- *  - STRUCTURE (the shape's corner radius) lives in the `createThemedVariants` resolver below —
- *    static per (brand, mode), registered once via `StyleSheet.create`.
- *  - SIZE is NOT theme-driven: a skeleton's whole job is standing in for a specific piece of
- *    content, so `width`/`height` are per-instance numbers the caller supplies (or a per-shape
- *    fallback), resolved by `resolveSkeletonSize` and applied inline — never a themed variant,
- *    since there is no closed set of values to register.
- *  - COLOUR is resolved from the theme's ROLE colours (`resolveSkeletonColors`), never a raw ramp,
- *    never a hardcoded hex. There is no `tone` prop to widen — a loading placeholder has exactly
- *    one neutral appearance (same reasoning as `resolveAvatarColors`). `pulse` is `base` composited
- *    with a fixed-alpha overlay (see `resolveSkeletonColors`), not a second role lookup — two
- *    arbitrary role rungs are not guaranteed to differ enough to read as a shimmer.
- *  - ACCESSIBILITY prop derivation is `resolveSkeletonAccessibility`, kept pure so the "decorative
- *    unless labelled" contract is unit-testable without rendering React Native (same shape as
- *    `resolveAvatarAccessibility`).
- *
- * 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` and every sibling module's tests do).
  */
-import type { RoleColors, Theme } from "../../theme/hooks";
+import type { PaletteProps, RoleColors, Theme } from "../../theme/hooks";
 export type SkeletonShape = "rect" | "circle" | "text";
 export interface SkeletonSizeSpec {
     readonly width: number;
@@ -42,75 +23,38 @@ export declare const SKELETON_DEFAULT_SIZE: {
         readonly height: 16;
     };
 };
-/**
- * Resolves the box's actual dp size. `circle` is the one shape that cannot take independent
- * width/height — an unequal pair would render an ellipse under the shared `radii.full` corner
- * radius, not a circle — so a single given dimension mirrors onto the other rather than the two
- * silently drifting apart.
- */
+export declare const SKELETON_SHIMMER_DURATION_MS = 1400;
+export declare const SKELETON_BAND_WIDTH_RATIO = 0.4;
+export declare const SKELETON_STAGGER_MS = 100;
 export declare function resolveSkeletonSize(shape: SkeletonShape, width: number | undefined, height: number | undefined): SkeletonSizeSpec;
 export interface SkeletonColors {
-    /** The resting fill. */
     readonly base: string;
-    /** The shimmer overlay colour, cross-faded in and out over `base`. */
-    readonly pulse: string;
+    readonly highlight: string;
 }
-/**
- * Maps the placeholder onto role colours, then derives `pulse` as `base` composited with a small,
- * fixed-alpha overlay — never a second role lookup. A prior version returned `base: bg.sunken, pulse:
- * bg.raised`: two role rungs whose luminance gap is whatever the brand's ramp happens to produce, and
- * an independent re-measurement found that gap collapses to visually-indistinguishable on every
- * brand × mode — the shimmer was a silent no-op everywhere, not just on one theme. Compositing a
- * fixed-alpha overlay makes the luminance delta a controlled constant instead of an incidental one,
- * so it can't collapse regardless of how a brand's `bg.raised`/`bg.sunken` rungs happen to relate.
- */
-export declare function resolveSkeletonColors(colors: RoleColors): SkeletonColors;
+/** Neutral ramp step 3 (base) and step 5 (highlight band) on the gray ramp. */
+export declare function resolveSkeletonColors(palette: PaletteProps): SkeletonColors;
+/** @deprecated Use palette-based resolver — kept for tests importing RoleColors. */
+export declare function resolveSkeletonColorsFromRoles(_colors: RoleColors, palette: PaletteProps): SkeletonColors;
 export interface SkeletonAccessibilityInput {
     readonly accessibilityLabel?: string | undefined;
 }
 export interface SkeletonAccessibilityProps {
-    /** Groups the placeholder into one accessible element only when it actually carries a name. */
     readonly accessible: boolean;
     readonly accessibilityRole: "progressbar" | undefined;
     readonly accessibilityLabel: string | undefined;
-    /** Indeterminate progress is still busy — announced only on the labelled (exposed) path. */
     readonly "aria-busy": boolean | undefined;
-    /** Hides the whole element from assistive tech when decorative. */
     readonly "aria-hidden": true | undefined;
 }
-/**
- * Derives the accessibility surface once, purely, so the "decorative unless labelled" contract is
- * testable without a renderer (same shape as `resolveAvatarAccessibility`):
- *  - no label → the placeholder stands in for content that hasn't rendered yet and carries no
- *    meaning of its own, so it is hidden from assistive tech rather than read as a bare,
- *    unexplained box.
- *  - a label (e.g. `"Loading"`) → exposed as one `"progressbar"`-role element carrying it, with
- *    `busy: true` (WCAG 1.4.1 — the loading state is announced, not left to be inferred from a box
- *    appearing on screen).
- *
- * `aria-hidden` covers BOTH platforms in one prop: RN maps it onto `accessibilityElementsHidden`
- * (iOS) + `importantForAccessibility="no-hide-descendants"` (Android), and react-native-web forwards
- * it to the DOM — where those two native props reach nothing, so an unlabelled skeleton used to stay
- * fully exposed to a screen reader on web.
- */
 export declare function resolveSkeletonAccessibility(input: SkeletonAccessibilityInput): SkeletonAccessibilityProps;
-/**
- * Structural styles only — the shape's corner radius, plus `overflow: "hidden"` so the animated
- * shimmer overlay (an absolutely-positioned sibling, see `Skeleton.tsx`) clips to it without each
- * shape recomputing the same radius on that overlay. No colour (state-driven, applied inline over
- * this), so this compiles once per theme identity via the `WeakMap`-cached themed resolver and
- * never rebuilds per render.
- *
- * Unlike `Button`, there is no focus ring here that needs to escape the bounds, so `overflow:
- * "hidden"` is safe — nothing else needs to be drawn outside this box.
- */
 export declare const skeletonStructure: import("../../core/style").ThemedVariantResolver<Theme, {
     shape: {
         rect: {
-            borderRadius: 8;
+            borderRadius: 12;
+            borderCurve: "continuous";
         };
         circle: {
             borderRadius: 9999;
+            borderCurve: "continuous";
         };
         text: {
             borderRadius: 4;

package/lib/typescript/modules/stage-progress/StageProgress.variants.d.ts

@@ -42,13 +42,21 @@ export declare function resolveActiveStageIndex(stages: readonly StageProgressSt
  */
 export declare function resolveStageAccessibilityLabel(label: string, state: StageState): string;
 export interface StageAccessibilityState {
-    readonly "aria-selected": boolean;
+    /** The WEB half of "this is the stage you're on". A stage is `role="button"` (or carries no role
+     *  at all when read-only) and `aria-selected` is valid on neither — `aria-current="step"` is the
+     *  WAI-ARIA signal for a step in a process, and unlike `aria-selected` it has no role restriction
+     *  (same fix `pagination` uses for "the page you're on", token `"page"` there vs `"step"` here). */
+    readonly "aria-current": "step" | undefined;
+    /** The NATIVE half — React Native has no "current" concept and react-native-web discards the
+     *  object form, so this never reaches the DOM; `selected` is the nearest native equivalent. */
+    readonly accessibilityState: {
+        readonly selected: boolean;
+    };
     readonly "aria-disabled": boolean;
 }
 /**
- * Flat `aria-*` rather than `accessibilityState={{…}}`: RN's `View`/`Pressable` fold the flat props
- * back into that object, while react-native-web forwards only the flat form — the object reaches
- * nothing at all on web.
+ * Flat `aria-current` for web + explicit `accessibilityState` for native — see the field comments
+ * above for why this pair (not a single flat prop) is required here specifically.
  */
 export declare function resolveStageAccessibilityState(state: StageState, disabled: boolean | undefined): StageAccessibilityState;
 export interface StageProgressAccessibilityProps {
@@ -72,7 +80,6 @@ export interface StageProgressColors {
     readonly completedText: string;
     readonly upcomingFill: string;
     readonly upcomingText: string;
-    readonly track: string;
 }
 export declare function resolveStageProgressColors(colors: RoleColors): StageProgressColors;
 export declare const stageProgressRowStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
@@ -87,9 +94,11 @@ export declare const stageFocusRingStructure: import("../../core/style").ThemedV
     variant: {
         pill: {
             borderRadius: 9999;
+            borderCurve: "continuous";
         };
         stepper: {
-            borderRadius: 8;
+            borderRadius: 12;
+            borderCurve: "continuous";
         };
     };
 }, import("react-native").ViewStyle>;

package/lib/typescript/modules/state-block/StateBlock.d.ts

@@ -25,6 +25,8 @@ export interface LoadingStateProps {
     message?: string;
     size?: SpinnerSize;
     tone?: SpinnerTone;
+    /** Expands to fill and centre in a flex parent (e.g. a list empty slot). */
+    fill?: boolean;
     /** Fades and slides the block out when set to `false`, then unmounts it. */
     visible?: boolean;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
@@ -40,6 +42,8 @@ export interface ErrorStateProps {
     title: string;
     description?: string;
     action?: ErrorStateAction;
+    /** Expands to fill and centre in a flex parent (e.g. a list empty slot). */
+    fill?: boolean;
     /** Fades and slides the block out when set to `false`, then unmounts it. */
     visible?: boolean;
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */

package/lib/typescript/modules/state-block/StateBlock.variants.d.ts

@@ -27,4 +27,5 @@ export declare function resolveErrorStateColors(colors: RoleColors): ErrorStateC
 export declare function resolveErrorStateAnnouncement(title: string, description: string | undefined): string;
 export declare const loadingStateStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const errorStateStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare const stateBlockFillStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 //# sourceMappingURL=StateBlock.variants.d.ts.map

package/lib/typescript/modules/surface/Surface.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { LayoutStyle } from "../../core/style";
+import type { ElevationLevel } from "../../theme/tokens";
+import type { BgRole, BorderRole, RadiusToken, SpaceToken } from "./Surface.variants";
+export interface SurfaceProps {
+    background?: BgRole;
+    border?: BorderRole;
+    radius?: RadiusToken;
+    elevation?: ElevationLevel;
+    padding?: SpaceToken;
+    children?: ReactNode;
+    style?: LayoutStyle;
+    testID?: string;
+}
+declare function SurfaceImpl({ background, border, radius, elevation, padding, children, style, testID, }: SurfaceProps): import("react").JSX.Element;
+export declare const Surface: import("react").MemoExoticComponent<typeof SurfaceImpl>;
+export declare const Box: import("react").MemoExoticComponent<typeof SurfaceImpl>;
+export {};
+//# sourceMappingURL=Surface.d.ts.map

package/lib/typescript/modules/surface/Surface.variants.d.ts

@@ -0,0 +1,15 @@
+import type { ElevationLevel } from "../../theme/tokens";
+import type { RoleColors, Theme } from "../../theme/hooks";
+export type BgRole = keyof RoleColors["bg"];
+export type BorderRole = keyof RoleColors["border"];
+export type RadiusToken = keyof Theme["radii"];
+export type SpaceToken = keyof Theme["space"];
+export interface SurfaceColors {
+    readonly background?: string;
+    readonly border?: string;
+}
+export declare function resolveSurfaceColors(colors: RoleColors, background?: BgRole, border?: BorderRole): SurfaceColors;
+export declare function resolveSurfacePadding(theme: Theme, padding?: SpaceToken): number | undefined;
+export declare function resolveSurfaceElevation(theme: Theme, elevation?: ElevationLevel): Record<string, unknown> | undefined;
+export declare const surfaceStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+//# sourceMappingURL=Surface.variants.d.ts.map

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

@@ -0,0 +1,4 @@
+export { Box, Surface } from "./Surface";
+export type { SurfaceProps } from "./Surface";
+export type { BgRole, BorderRole, RadiusToken, SpaceToken, } from "./Surface.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,20 +1,24 @@
-/**
- * Text — typography primitive with a closed `variant` union. Replaces ad-hoc fontSize literals.
- */
 import { type TextProps as RNTextProps } from 'react-native';
 import type { LayoutStyle } from '../../core/style';
-import type { HeadingVariant, TextVariant } from './Text.variants';
+import type { FontWeightToken } from '../../theme/tokens';
+import type { HeadingVariant, TextColorRole, TextVariant } from './Text.variants';
 export interface TextProps {
     variant?: TextVariant;
     children: RNTextProps['children'];
+    color?: TextColorRole;
     numberOfLines?: number;
+    align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+    weight?: FontWeightToken;
     style?: LayoutStyle;
     testID?: string;
 }
 export interface HeadingProps {
     variant?: HeadingVariant;
     children: RNTextProps['children'];
+    color?: TextColorRole;
     numberOfLines?: number;
+    align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+    weight?: FontWeightToken;
     style?: LayoutStyle;
     testID?: string;
 }

package/lib/typescript/modules/text/Text.variants.d.ts

@@ -1,18 +1,21 @@
 import type { TextStyle } from 'react-native';
+import type { FontWeightToken } from '../../theme/tokens';
 import type { HeadingLevel } from '../../core/heading';
-import type { RoleColors, Theme } from '../../theme/hooks';
-export type TextVariant = 'body' | 'body-sm' | 'caption' | 'label' | 'label-sm' | 'overline';
+import type { RoleColors, StatusRole, Theme } from '../../theme/hooks';
+export type TextVariant = 'display' | 'title' | 'heading' | 'subheading' | 'body' | 'body-sm' | 'caption' | 'label' | 'label-sm' | 'overline';
 export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4';
-/**
- * `variant` is the level as well as the size. Without this, `react-native-web` renders every
- * heading as `<h1>` (see `core/heading`).
- */
+export type FgColorRole = 'default' | 'muted';
+export type TextColorRole = FgColorRole | StatusRole;
 export declare const HEADING_LEVELS: Record<HeadingVariant, HeadingLevel>;
-/** Runtime companion to `TextVariant`, so the WCAG test can enumerate every variant a consumer can pass. */
-export declare const TEXT_VARIANTS: readonly ["body", "body-sm", "caption", "label", "label-sm", "overline"];
+export declare const TEXT_VARIANTS: readonly ["display", "title", "heading", "subheading", "body", "body-sm", "caption", "label", "label-sm", "overline"];
 export declare const HEADING_VARIANTS: Record<HeadingVariant, TextVariant>;
-/** The role colour a variant resolves to. Pure, so the WCAG test measures it without a `Theme`. */
+export interface TextStyleOptions {
+    color?: TextColorRole;
+    weight?: FontWeightToken;
+    align?: TextStyle['textAlign'];
+}
+export declare function resolveTextColorFromRole(colors: RoleColors, role: TextColorRole): string;
 export declare function resolveTextColor(colors: RoleColors, variant: TextVariant): string;
-export declare function resolveTextStyle(theme: Theme, variant: TextVariant): TextStyle;
-export declare function resolveHeadingStyle(theme: Theme, variant: HeadingVariant): TextStyle;
+export declare function resolveTextStyle(theme: Theme, variant: TextVariant, options?: TextStyleOptions): TextStyle;
+export declare function resolveHeadingStyle(theme: Theme, variant: HeadingVariant, options?: TextStyleOptions): TextStyle;
 //# sourceMappingURL=Text.variants.d.ts.map

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

@@ -26,6 +26,8 @@ export declare const CLOSE_ICON_SIZE = 16;
 export declare const CLOSE_HIT_SLOP: number;
 /** `duration` on `ToastOptions` defaults to this when omitted — except for `danger` (see below). */
 export declare const DEFAULT_TOAST_DURATION = 3000;
+export declare const TOAST_IOS_HOME_INDICATOR_INSET = 20;
+export declare function resolveToastBottomInset(basePadding: number, platformOS: string): number;
 /**
  * How long a toast stays up. `"persistent"` = until the user dismisses it (or a later `show()`
  * replaces it) — spelled out rather than encoded as a number, because a bare `0` at a call site

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

@@ -21,6 +21,13 @@ export type TooltipPlacement = "top" | "bottom";
 export declare const TOOLTIP_TIMING: {
     /** Fallback auto-dismiss so a tip can't stay stuck open if `onPressOut` never fires. */
     readonly autoHideMs: 2500;
+    /**
+     * Grace period before a hover-out actually hides the bubble, so a pointer crossing the
+     * `theme.space[1]` gap to the bubble itself doesn't lose the tip mid-transit (WCAG 1.4.13
+     * hoverable). The CSS/UI convention for this exact case; entering the bubble before it elapses
+     * cancels the hide.
+     */
+    readonly hoverOutGraceMs: 200;
 };
 /**
  * Appends `label` to any `accessibilityHint` the trigger already carries, so screen-reader users

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

@@ -6,7 +6,7 @@
 export { PixelizeProvider, useTheme, useThemeColors, useThemeMode, createAsyncStorageAdapter, THEME_NAMES, DEFAULT_THEME, loadPalette, loadPaletteSync, } from './provider';
 export type { PixelizeProviderProps, Theme, ThemeModeValue, ThemeMode, ColorModeStorageAdapter, AsyncStorageLike, } from './provider';
 export type { RoleColors, StatusColors, StatusRole } from './tokens/roles';
-export type { ThemeName, ColorScheme, PaletteProps } from './tokens/types';
+export type { ThemeName, ColorScheme, PaletteProps, BrandPaletteSource, SemanticTone, SemanticTextTokens, } from './tokens/types';
 /** @deprecated Use THEME_NAMES from this module instead. */
 export { THEME_NAMES as themeNames } from './provider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,35 +1,5 @@
 import type { ViewStyle } from 'react-native';
 import type { ElevationToken } from '../tokens/primitives';
-/**
- * The style props an elevation resolves to. A `Pick` rather than `ViewStyle` so a future RN
- * shadow prop cannot silently widen what this function is allowed to emit.
- */
 export type ElevationStyle = Pick<ViewStyle, 'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation'>;
-/**
- * Resolve an elevation token to RN style props.
- *
- * Uses the legacy shadow props over `boxShadow` because `boxShadow` is New-Architecture-only, and
- * our peer range (RN >= 0.79) still lets a consumer ship `newArchEnabled=false` — on which
- * `boxShadow` renders nothing at all. The legacy props map straight to the platform APIs and are
- * not deprecated, so they are the only path that works on both architectures. react-native-web's
- * style preprocessor converts these same legacy props into a real CSS `box-shadow`, so the `web`
- * branch below rides that conversion rather than emitting `boxShadow` itself.
- *
- * An elevation token is a STACK of layers (web needs both an ambient and a contact shadow per
- * step), but legacy RN shadow props can only express one. This renders `layers[0]` — the dominant
- * layer — and drops the rest. That is an honest limit of the legacy path, not a token compromise:
- * a future `boxShadow`-only resolver (new-arch-only consumers) can render every layer.
- *
- * `layer.spread` is dropped — neither legacy platform API exposes it (RN implements it by
- * insetting a custom shadowPath). The ramp's `md`/`lg` carry a negative spread to tighten the
- * shadow on web, so those two steps read marginally wider here. Accepted: honouring it would mean
- * hand-drawing a shadow layer per view.
- *
- * Returns one of three shapes: `ios`, `android` (RN's `default` branch — Android reads the numeric
- * `elevation` prop and ignores offset/opacity/radius), and `web`. `web` MUST stay its own explicit
- * key: without it, react-native-web falls through to `default` (the Android shape), whose only
- * meaningful field — `elevation` — react-native-web silently ignores (it is Android-only), so the
- * shadow renders as nothing at all.
- */
 export declare function elevation(token: ElevationToken): ElevationStyle;
 //# sourceMappingURL=elevation.native.d.ts.map

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

@@ -0,0 +1,10 @@
+import type { ViewStyle } from 'react-native';
+import type { ElevationLevel } from '../tokens';
+import type { Theme } from '../provider/types';
+import type { ElevationToken } from '../tokens/primitives';
+import { type BoxShadowLayer } from './highlight.native';
+export type FloatingLevel = Extract<ElevationLevel, 'sm' | 'md' | 'lg'>;
+export declare function tokenBoxShadow(token: ElevationToken): ReadonlyArray<BoxShadowLayer>;
+export declare function floatingBackground(theme: Theme, level: FloatingLevel): string;
+export declare function floatingSurfaceStyle(theme: Theme, level: FloatingLevel): ViewStyle;
+//# sourceMappingURL=floatingSurface.native.d.ts.map

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

@@ -0,0 +1,17 @@
+import type { ViewStyle } from 'react-native';
+import type { ColorScheme } from '../tokens/types';
+export type HighlightLevel = 'none' | 'subtle' | 'raised';
+export type BoxShadowLayer = {
+    offsetX: number | string;
+    offsetY: number | string;
+    blurRadius?: number | string;
+    spreadDistance?: number | string;
+    inset?: boolean;
+    color?: string;
+};
+export type BoxShadowArray = ReadonlyArray<BoxShadowLayer>;
+export declare function highlightLevels(level: HighlightLevel, mode: ColorScheme): BoxShadowArray;
+export declare function highlight(level: HighlightLevel, mode: ColorScheme): BoxShadowArray;
+export declare function composeBoxShadow(outset: ReadonlyArray<BoxShadowLayer>, inset: BoxShadowArray): BoxShadowArray;
+export declare function asBoxShadowArray(value: ViewStyle['boxShadow']): ReadonlyArray<BoxShadowLayer>;
+//# sourceMappingURL=highlight.native.d.ts.map

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

@@ -8,6 +8,15 @@
 export { rem, hairline } from './units.native';
 export { elevation } from './elevation.native';
 export type { ElevationStyle } from './elevation.native';
+export { highlight, highlightLevels, composeBoxShadow } from './highlight.native';
+export type { HighlightLevel } from './highlight.native';
+export { elevatedSurfaces } from './surfaces.native';
+export type { ElevatedSurfaceRoles } from './surfaces.native';
+export { STATE_LAYER_OPACITY, rippleColor, stateLayerScrim } from './stateLayer.native';
+export { floatingBackground, floatingSurfaceStyle } from './floatingSurface.native';
+export type { FloatingLevel } from './floatingSurface.native';
+export { springs } from './motion.native';
+export type { SpringConfig, SpringKey } from './motion.native';
 export { interFontFamilies, systemFontFamily, fontStyleForWeight } from './fonts.native';
 export type { FontWeightValue, FontStyleForWeight } from './fonts.native';
 export { getSystemColorMode, subscribeToSystemColorMode } from './colorScheme.native';

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

@@ -1,15 +1,35 @@
-export declare const motionDurations: {
-    readonly instant: 0;
-    readonly fast: 150;
-    readonly normal: 200;
-    readonly slow: 300;
+export declare const springs: {
+    readonly spatialFast: {
+        readonly stiffness: 800;
+        readonly damping: 33.94;
+        readonly mass: 1;
+    };
+    readonly spatialDefault: {
+        readonly stiffness: 380;
+        readonly damping: 31.19;
+        readonly mass: 1;
+    };
+    readonly spatialSlow: {
+        readonly stiffness: 200;
+        readonly damping: 22.63;
+        readonly mass: 1;
+    };
+    readonly effectsFast: {
+        readonly stiffness: 3800;
+        readonly damping: 123.29;
+        readonly mass: 1;
+    };
+    readonly effectsDefault: {
+        readonly stiffness: 1600;
+        readonly damping: 80;
+        readonly mass: 1;
+    };
+    readonly effectsSlow: {
+        readonly stiffness: 800;
+        readonly damping: 56.57;
+        readonly mass: 1;
+    };
 };
-export declare const motionEasings: {
-    standard: "ease-in-out";
-    enter: "ease-out";
-    exit: "ease-in";
-    snap: "linear";
-};
-export type MotionDuration = keyof typeof motionDurations;
-export type MotionEasing = keyof typeof motionEasings;
+export type SpringKey = keyof typeof springs;
+export type SpringConfig = typeof springs[SpringKey];
 //# sourceMappingURL=motion.native.d.ts.map

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

@@ -0,0 +1,11 @@
+import type { ColorScheme } from '../tokens/types';
+export declare const STATE_LAYER_OPACITY: {
+    readonly pressed: 0.1;
+    readonly focus: 0.1;
+    readonly hover: 0.08;
+    readonly dragged: 0.16;
+    readonly disabled: 0.38;
+};
+export declare function stateLayerScrim(mode: ColorScheme): '#000000' | '#ffffff';
+export declare const rippleColor: (mode: ColorScheme) => string;
+//# sourceMappingURL=stateLayer.native.d.ts.map

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

@@ -0,0 +1,8 @@
+import type { ColorScheme, PaletteProps } from '../tokens/types';
+export type ElevatedSurfaceRoles = {
+    elevated1: string;
+    elevated2: string;
+    elevated3: string;
+};
+export declare function elevatedSurfaces(palette: PaletteProps, mode: ColorScheme): ElevatedSurfaceRoles | null;
+//# sourceMappingURL=surfaces.native.d.ts.map

package/lib/typescript/theme/provider/PixelizeProvider.d.ts

@@ -1,4 +1,4 @@
 import type { PixelizeProviderProps } from './types';
 export type { Theme, ThemeModeValue, PixelizeProviderProps } from './types';
-export declare function PixelizeProvider({ children, brand: brandProp, mode, storage: storageProp, storageKey, brandStorageKey, interLoaded, palette: paletteProp, }: PixelizeProviderProps): import("react").JSX.Element;
+export declare function PixelizeProvider({ children, brand: brandProp, mode, storage: storageProp, storageKey, brandStorageKey, interLoaded, palette: paletteProp, haptics: hapticsProp, }: PixelizeProviderProps): import("react").JSX.Element;
 //# sourceMappingURL=PixelizeProvider.d.ts.map

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

@@ -2,11 +2,14 @@ import type { ReactNode } from 'react';
 import type { ColorScheme, ElevationLevel, PaletteProps, RoleColors, ThemeName } from '../tokens';
 import { space, radii, fontSizes, fontWeights, lineHeights, letterSpacings, borderWidths, breakpoints, zIndices } from '../tokens';
 import type { ElevationStyle, FontStyleForWeight, FontWeightValue } from '../platform';
+import type { ElevatedSurfaceRoles } from '../platform/surfaces.native';
 import type { ColorModeStorageAdapter, ThemeMode } from './colorModeStorage';
 export type Theme = {
     brand: ThemeName;
     mode: ColorScheme;
     colors: RoleColors;
+    /** Dark-mode elevated surfaces — null in light mode. */
+    elevatedSurfaces: ElevatedSurfaceRoles | null;
     palette: PaletteProps;
     space: typeof space;
     radii: typeof radii;
@@ -37,5 +40,10 @@ export type PixelizeProviderProps = {
     interLoaded?: boolean;
     /** Runtime-selected palette — wins over `brand` when provided. */
     palette?: PaletteProps;
+    /**
+     * Haptic feedback for interactive components. Defaults to enabled when `setHapticsModule` has been
+     * called at app startup, disabled otherwise. No-ops on web.
+     */
+    haptics?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,10 @@
+import type { PaletteProps } from "./types";
+declare const REQUIRED_TOKENS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "semanticText"];
+type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_TOKENS)[number]>;
+export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
+export declare const allPaletteTokensListed: AllPaletteTokensListed;
+export declare const missingPaletteTokens: (palette: unknown) => string[];
+/** Fails once, loudly, where a palette enters — never as a wrong colour deep in a screen. */
+export declare const assertPalette: (palette: unknown, source: string) => PaletteProps;
+export {};
+//# sourceMappingURL=assertPalette.d.ts.map

package/lib/typescript/theme/tokens/brands/emerald/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/lavender/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/meadow/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/radiant/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/rosewood/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/skyline/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/slate/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map

package/lib/typescript/theme/tokens/brands/storefront/palette.light.d.ts

@@ -1,4 +1,5 @@
-import type { PaletteProps } from "../../types";
-declare const palette: PaletteProps;
-export default palette;
+import type { BrandPaletteSource } from "../../types";
+export declare const source: BrandPaletteSource;
+declare const _default: import("../..").PaletteProps;
+export default _default;
 //# sourceMappingURL=palette.light.d.ts.map