pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/theme/tokens/builders/buildDarkPalette.js

@@ -2,6 +2,7 @@
 
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "./buildBrandTokens.js";
 import { contrastRatio, hexToHsl, hslToHex, withLightness } from "./color.js";
+import finalizePalette from "./finalizePalette.js";
 
 /**
  * Derives a brand's dark palette from its light palette. Every value is computed from the brand's
@@ -249,7 +250,7 @@ export function buildDarkPalette(light) {
     s: SURFACE_SAT,
     l
   })]));
-  return {
+  return finalizePalette({
     ...light,
     // Brand identity: hue preserved, accent lifted as far as a light label allows.
     primary: liftBrand(light.primary, label),
@@ -294,7 +295,7 @@ export function buildDarkPalette(light) {
       error: light.boxShadow.error,
       default: "#00000080"
     }
-  };
+  });
 }
 export default buildDarkPalette;
 //# sourceMappingURL=buildDarkPalette.js.map

package/lib/module/theme/tokens/builders/finalizePalette.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { AA_TEXT } from "./color.js";
+import { liftToContrast } from "./liftToContrast.js";
+import { buildSemanticText } from "./semanticText.js";
+import { liftSemanticText, namedSurfaces, withSurfaceRungs } from "./surfaceRungs.js";
+const withPlaceholderRung = source => ({
+  ...source,
+  placeholder: {
+    ...source.placeholder,
+    500: liftToContrast(source.placeholder[500], source.background[50], AA_TEXT)
+  }
+});
+
+// The hover row is a SURFACE, so it steps away from the ink rather than the ink moving.
+const withTableHoverRung = source => ({
+  ...source,
+  table: {
+    hover: {
+      ...source.table.hover,
+      500: liftToContrast(source.table.hover[500], source.text[500], AA_TEXT)
+    }
+  }
+});
+export function finalizePalette(source) {
+  const resolved = withSurfaceRungs(withTableHoverRung(withPlaceholderRung(source)));
+  const surfaces = namedSurfaces(resolved);
+  return {
+    ...resolved,
+    semanticText: liftSemanticText(buildSemanticText(resolved.semantic, resolved.backgroundColor.main), surfaces)
+  };
+}
+export default finalizePalette;
+//# sourceMappingURL=finalizePalette.js.map

package/lib/module/theme/tokens/builders/liftToContrast.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { contrastRatio, hexToHsl, relativeLuminance, withLightness } from "./color.js";
+export const DARK_CANVAS_LUMINANCE = 0.2;
+export const isDarkCanvas = canvas => relativeLuminance(canvas) < DARK_CANVAS_LUMINANCE;
+
+// Direction comes from the backdrop, so "away from what it sits on" needs no mode argument.
+export function liftToContrast(hex, backdrop, target) {
+  if (contrastRatio(hex, backdrop) >= target) return hex;
+  const {
+    s
+  } = hexToHsl(hex);
+  const step = isDarkCanvas(backdrop) ? 1 : -1;
+  let {
+    l
+  } = hexToHsl(hex);
+  while (l > 0 && l < 100) {
+    l += step;
+    const next = withLightness(hex, l, s);
+    if (contrastRatio(next, backdrop) >= target) return next;
+  }
+  return withLightness(hex, step === 1 ? 100 : 0, s);
+}
+
+/**
+ * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
+ * still clears `target`. For ink that must stay legible without reading as body copy.
+ */
+export function softenToContrast(hex, backdrop, target) {
+  if (contrastRatio(hex, backdrop) <= target) return hex;
+  const {
+    s,
+    l: start
+  } = hexToHsl(hex);
+  const toward = isDarkCanvas(backdrop) ? -1 : 1;
+  let softest = hex;
+  for (let l = start; l > 0 && l < 100; l += toward) {
+    const next = withLightness(hex, l, s);
+    if (contrastRatio(next, backdrop) < target) break;
+    softest = next;
+  }
+  return softest;
+}
+//# sourceMappingURL=liftToContrast.js.map

package/lib/module/theme/tokens/builders/placeholderInk.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import { contrastRatio } from "./color.js";
+import { liftToContrast } from "./liftToContrast.js";
+import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
+
+/** A field always renders on at least one surface — the first is the reference backdrop. */
+
+/**
+ * The hint ink for a field: the rung the brand authored, guaranteed to clear `PLACEHOLDER_TEXT`
+ * on every surface a field can land on. The surface list is the caller's — a field's fill differs
+ * by platform, the resolution does not.
+ *
+ * It does not walk the rung toward AA in either direction. Held to 4.5 the hint stopped reading
+ * as a hint; softening back down again undershot on the next surface.
+ */
+export const placeholderInkOn = (palette, surfaces) => {
+  const rung = palette.placeholder[500];
+  const hardest = surfaces.reduce((worst, s) => contrastRatio(rung, s) < contrastRatio(rung, worst) ? s : worst);
+  return liftToContrast(rung, hardest, PLACEHOLDER_TEXT);
+};
+//# sourceMappingURL=placeholderInk.js.map

package/lib/module/theme/tokens/builders/semanticText.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import { AA_TEXT } from "./color.js";
+import { liftToContrast } from "./liftToContrast.js";
+export const SEMANTIC_TONES = ["success", "error", "warning", "info"];
+
+// `semantic[tone][500]` is a FILL rung; as ink it measures 1.84-3.68:1 on every light canvas.
+export const buildSemanticText = (semantic, canvas) => ({
+  success: liftToContrast(semantic.success[500], canvas, AA_TEXT),
+  error: liftToContrast(semantic.error[500], canvas, AA_TEXT),
+  warning: liftToContrast(semantic.warning[500], canvas, AA_TEXT),
+  info: liftToContrast(semantic.info[500], canvas, AA_TEXT)
+});
+//# sourceMappingURL=semanticText.js.map

package/lib/module/theme/tokens/builders/surfaceRungs.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import { AA_NON_TEXT, AA_TEXT, contrastRatio } from "./color.js";
+import { liftToContrast } from "./liftToContrast.js";
+
+/**
+ * A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
+ * reads as one already typed into. See THEME-CONTRACT.md.
+ */
+export const PLACEHOLDER_TEXT = AA_NON_TEXT;
+export const namedSurfaces = p => [...Object.values(p.backgroundColor), p.background[50], p.table.hover[500]];
+
+/** The surface an ink is closest to — clearing it clears every other one. */
+export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => contrastRatio(ink, s) < contrastRatio(ink, worst) ? s : worst);
+
+// Runs after the hover rung: `table.hover` is one of the surfaces being cleared.
+export function withSurfaceRungs(source) {
+  const surfaces = namedSurfaces(source);
+  const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
+  return {
+    ...source,
+    text: {
+      ...source.text,
+      500: lift(source.text[500], AA_TEXT)
+    },
+    header: {
+      ...source.header,
+      500: lift(source.header[500], AA_TEXT)
+    },
+    // `placeholder` is deliberately absent: the brand authors that rung and it ships untouched.
+    // Its floor is enforced in `placeholderInkOn`, against the surfaces a FIELD renders on.
+    boxborder: {
+      ...source.boxborder,
+      500: lift(source.boxborder[500], AA_NON_TEXT)
+    }
+  };
+}
+export const liftSemanticText = (semanticText, surfaces) => ({
+  success: liftToContrast(semanticText.success, hardestSurface(semanticText.success, surfaces), AA_TEXT),
+  error: liftToContrast(semanticText.error, hardestSurface(semanticText.error, surfaces), AA_TEXT),
+  warning: liftToContrast(semanticText.warning, hardestSurface(semanticText.warning, surfaces), AA_TEXT),
+  info: liftToContrast(semanticText.info, hardestSurface(semanticText.info, surfaces), AA_TEXT)
+});
+//# sourceMappingURL=surfaceRungs.js.map

package/lib/module/theme/tokens/index.js

@@ -23,5 +23,10 @@ export * from "./builders/accentText.js";
 export * from "./builders/buildBrandTokens.js";
 export * from "./builders/buildDarkPalette.js";
 export * from "./builders/color.js";
+export * from "./builders/liftToContrast.js";
+export * from "./builders/placeholderInk.js";
+export * from "./builders/semanticText.js";
+export * from "./builders/finalizePalette.js";
 export * from "./roles/index.js";
+export * from "./assertPalette.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/tokens/roles/index.js

@@ -19,6 +19,9 @@
 
 import { pickOnAccent, resolveFilledAccent } from "../builders/accentText.js";
 import { AA_TEXT, contrastRatio, relativeLuminance } from "../builders/color.js";
+import { placeholderInkOn } from "../builders/placeholderInk.js";
+/** Every surface an enabled field renders on. Disabled fills are exempt from 1.4.3 and excluded. */
+const FIELD_SURFACES = p => [p.backgroundColor.main, p.background[50], p.backgroundColor.muted];
 const RAMP_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
 
 /**
@@ -92,6 +95,8 @@ export function roleColors(p) {
       // canvas — a flat `gray[600]` cleared the canvas on every brand but fell to ~3.5:1 against
       // `bg.hover` on radiant/emerald/rosewood, the same class of mistake web shipped twice.
       muted: readableOn(p.gray, [p.background[50], p.backgroundColor.muted]),
+      // A hint is not body copy: `fg.muted` made every empty field read as already filled in.
+      placeholder: placeholderInkOn(p, FIELD_SURFACES(p)),
       subtle: p.gray[500],
       disabled: p.disabled[500]
     },

package/lib/typescript/core/gradient/AccentGradientFill.d.ts

@@ -0,0 +1,7 @@
+import { type ViewStyle } from 'react-native';
+export interface AccentGradientFillProps {
+    color: string;
+    style?: ViewStyle;
+}
+export declare const AccentGradientFill: import("react").NamedExoticComponent<AccentGradientFillProps>;
+//# sourceMappingURL=AccentGradientFill.d.ts.map

package/lib/typescript/core/gradient/darkenHex.d.ts

@@ -0,0 +1,2 @@
+export declare function darkenHex(hex: string, amount: number): string;
+//# sourceMappingURL=darkenHex.d.ts.map

package/lib/typescript/core/gradient/gradientStops.d.ts

@@ -0,0 +1,10 @@
+import { darkenHex } from './darkenHex';
+export interface GradientStops {
+    top: string;
+    bottom: string;
+}
+export declare function accentGradientStops(color: string): GradientStops;
+export declare function gradientStopDelta(stops: GradientStops): number;
+export declare function shouldRenderGradient(stops: GradientStops): boolean;
+export { darkenHex };
+//# sourceMappingURL=gradientStops.d.ts.map

package/lib/typescript/core/gradient/index.d.ts

@@ -0,0 +1,5 @@
+export { AccentGradientFill } from './AccentGradientFill';
+export { accentGradientStops, gradientStopDelta, shouldRenderGradient } from './gradientStops';
+export { darkenHex } from './darkenHex';
+export { withAlpha } from './withAlpha';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/gradient/withAlpha.d.ts

@@ -0,0 +1,2 @@
+export declare function withAlpha(hex: string, alpha: number): string;
+//# sourceMappingURL=withAlpha.d.ts.map

package/lib/typescript/core/haptics/context.d.ts

@@ -0,0 +1,3 @@
+/** Whether the provider allows haptics — see `PixelizeProvider`'s `haptics` prop. */
+export declare const HapticsContext: import("react").Context<boolean>;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/core/haptics/haptics.d.ts

@@ -0,0 +1,33 @@
+/** Optional peer — injected at app startup, never imported at module scope. */
+export type HapticImpactStyle = 'light' | 'medium' | 'heavy' | 'soft' | 'rigid';
+export type HapticNotificationType = 'success' | 'warning' | 'error';
+export type HapticsModule = {
+    selectionAsync: () => Promise<void>;
+    impactAsync: (style: string) => Promise<void>;
+    notificationAsync: (type: string) => Promise<void>;
+    performAndroidHapticsAsync: (type: string) => Promise<void>;
+    ImpactFeedbackStyle: {
+        readonly Light: string;
+        readonly Medium: string;
+        readonly Heavy: string;
+        readonly Soft: string;
+        readonly Rigid: string;
+    };
+    NotificationFeedbackType: {
+        readonly Success: string;
+        readonly Warning: string;
+        readonly Error: string;
+    };
+    AndroidHaptics: {
+        readonly Context_Click: string;
+        readonly Virtual_Key: string;
+        readonly Long_Press: string;
+        readonly Confirm: string;
+        readonly Reject: string;
+    };
+};
+/** Injects expo-haptics at runtime — never imports the package at module scope. */
+export declare function setHapticsModule(module: HapticsModule): void;
+export declare function hasHapticsModule(): boolean;
+export declare function getHapticsModule(): HapticsModule | null;
+//# sourceMappingURL=haptics.d.ts.map

package/lib/typescript/core/haptics/index.d.ts

@@ -0,0 +1,6 @@
+export { setHapticsModule, hasHapticsModule, getHapticsModule } from './haptics';
+export type { HapticsModule, HapticImpactStyle, HapticNotificationType, } from './haptics';
+export { HapticsContext } from './context';
+export { useHaptics } from './useHaptics';
+export type { HapticsControls } from './useHaptics';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/haptics/useHaptics.d.ts

@@ -0,0 +1,12 @@
+import type { HapticImpactStyle, HapticNotificationType } from './haptics';
+export type HapticsControls = {
+    selection: () => void;
+    impact: (style?: HapticImpactStyle) => void;
+    notification: (type: HapticNotificationType) => void;
+};
+/**
+ * Fires haptic feedback when a module is registered and the provider has not disabled it.
+ * No-ops on web, when unset, or when `haptics={false}`.
+ */
+export declare function useHaptics(): HapticsControls;
+//# sourceMappingURL=useHaptics.d.ts.map

package/lib/typescript/core/icon/icons/trending-up.d.ts

@@ -0,0 +1,3 @@
+import type { LucideIconProps } from "../types";
+export declare function IconTrendingUp(props: LucideIconProps): import("react").JSX.Element;
+//# sourceMappingURL=trending-up.d.ts.map

package/lib/typescript/core/icon/names.d.ts

@@ -1,2 +1,2 @@
-export type IconName = "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell" | "bold" | "building-2" | "calendar" | "chart-column" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "circle-alert" | "circle-check" | "clock" | "code" | "download" | "external-link" | "eye" | "file-text" | "filter" | "flag" | "folder" | "heading-1" | "heading-2" | "heading-3" | "image" | "inbox" | "info" | "italic" | "kanban" | "layers" | "layout-dashboard" | "layout-template" | "life-buoy" | "link" | "list" | "list-checks" | "list-ordered" | "list-todo" | "log-out" | "map" | "message-square" | "milestone" | "minus" | "more-horizontal" | "paperclip" | "pencil" | "plus" | "quote" | "refresh-cw" | "save" | "search" | "send" | "settings" | "share" | "square-code" | "star" | "strikethrough" | "tag" | "trash" | "triangle-alert" | "underline" | "upload" | "user" | "users" | "x";
+export type IconName = "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "at-sign" | "bell" | "bold" | "building-2" | "calendar" | "chart-column" | "check" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-left" | "chevrons-right" | "chevrons-up-down" | "circle-alert" | "circle-check" | "clock" | "code" | "download" | "external-link" | "eye" | "file-text" | "filter" | "flag" | "folder" | "heading-1" | "heading-2" | "heading-3" | "image" | "inbox" | "info" | "italic" | "kanban" | "layers" | "layout-dashboard" | "layout-template" | "life-buoy" | "link" | "list" | "list-checks" | "list-ordered" | "list-todo" | "log-out" | "map" | "message-square" | "milestone" | "minus" | "more-horizontal" | "paperclip" | "pencil" | "plus" | "quote" | "refresh-cw" | "save" | "search" | "send" | "settings" | "share" | "square-code" | "star" | "strikethrough" | "tag" | "trash" | "trending-up" | "triangle-alert" | "underline" | "upload" | "user" | "users" | "x";
 //# sourceMappingURL=names.d.ts.map

package/lib/typescript/core/media/expoImage.d.ts

@@ -1,10 +1,19 @@
 import type { ComponentType } from 'react';
-import type { ImageProps } from 'react-native';
-export type ExpoImageComponent = ComponentType<ImageProps & {
-    recyclingKey?: string;
-    transition?: number;
-    contentFit?: 'cover' | 'contain' | 'fill';
-    cachePolicy?: string;
+import type { ImageStyle, StyleProp } from 'react-native';
+/**
+ * expo-image's real `Image` component does NOT extend RN's `ImageProps` (its `source`, `style` and
+ * `tintColor` shapes all diverge) — this is a minimal structural subset covering only what
+ * `MediaImage.tsx` actually passes, not a copy of RN's own image props.
+ */
+export type ExpoImageComponent = ComponentType<{
+    source?: any;
+    contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk' | null;
+    transition?: any;
+    recyclingKey?: string | null;
+    accessibilityLabel?: string;
+    style?: StyleProp<ImageStyle>;
+    testID?: string;
 }>;
 /** Injects expo-image at runtime — never imports the package at module scope. */
 export declare function setExpoImage(Image: ExpoImageComponent): void;

package/lib/typescript/core/media/pickers.d.ts

@@ -1,23 +1,23 @@
 export type DocumentPickerModule = {
     getDocumentAsync: (options?: object) => Promise<{
         canceled: boolean;
-        assets?: ReadonlyArray<{
+        assets: ReadonlyArray<{
             uri: string;
             name: string;
             size?: number;
             mimeType?: string;
-        }>;
+        }> | null;
     }>;
 };
 export type ImagePickerModule = {
     launchImageLibraryAsync: (options?: object) => Promise<{
         canceled: boolean;
-        assets?: ReadonlyArray<{
+        assets: ReadonlyArray<{
             uri: string;
-            fileName?: string;
+            fileName?: string | null;
             fileSize?: number;
             mimeType?: string;
-        }>;
+        }> | null;
     }>;
 };
 export declare function setDocumentPicker(module: DocumentPickerModule): void;

package/lib/typescript/core/motion/config.d.ts

@@ -10,7 +10,7 @@
 import type { EasingFunction } from "react-native";
 import type { DeviceTier } from "../device";
 export type MotionDurationKey = "instant" | "fast" | "normal" | "slow" | "deliberate";
-export type MotionEasingKey = "standard" | "decelerate" | "accelerate" | "emphasized";
+export type MotionEasingKey = "standard" | "decelerate" | "accelerate" | "emphasized" | "emphasizedDecelerate" | "emphasizedAccelerate";
 export type MotionSpringKey = "gentle" | "snappy" | "bouncy";
 export interface MotionSpringConfig {
     readonly damping: number;
@@ -39,6 +39,7 @@ export declare function motionEasing(key: MotionEasingKey): EasingFunction;
 export declare function resetMotionEasingCache(): void;
 export declare const MOTION_SPRING: Readonly<Record<MotionSpringKey, MotionSpringConfig>>;
 /** Shared magnitudes so every component's motion reads as one system. */
+export declare const pressScaleFor: (width: number) => number;
 export declare const MOTION_TRANSFORM: {
     /** Press scale for buttons, cards, list rows. */
     readonly pressScale: 0.97;

package/lib/typescript/core/motion/index.d.ts

@@ -1,8 +1,10 @@
-export { MOTION_DURATION, MOTION_EASING_CURVE, MOTION_ENABLED, MOTION_SCALE, MOTION_SPRING, MOTION_TIER, MOTION_TRANSFORM, motionEasing, resetMotionEasingCache, resolveDuration, } from "./config";
+export { MOTION_DURATION, MOTION_EASING_CURVE, MOTION_ENABLED, MOTION_SCALE, MOTION_SPRING, MOTION_TIER, MOTION_TRANSFORM, motionEasing, pressScaleFor, resetMotionEasingCache, resolveDuration, } from "./config";
 export type { MotionDurationKey, MotionEasingKey, MotionSpringConfig, MotionSpringKey, MotionTierPolicy, } from "./config";
 export { useAnimatedValue } from "./useAnimatedValue";
 export { useMotion } from "./useMotion";
 export type { Motion, TimingOptions } from "./useMotion";
+export { usePressState, useFocusRing } from "./usePressState";
+export type { PressStateHandlers, UsePressStateResult } from "./usePressState";
 export { useEnterExit, usePressMotion, useReveal } from "./presets";
 export type { EnterExitMotion, PressMotion, RevealMotion } from "./presets";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/core/motion/usePressState.d.ts

@@ -0,0 +1,21 @@
+import { type LayoutChangeEvent, type ViewStyle } from 'react-native';
+import type { AnimatedStyle } from 'react-native-reanimated';
+export interface PressStateHandlers {
+    onPressIn: () => void;
+    onPressOut: () => void;
+    onLayout: (event: LayoutChangeEvent) => void;
+}
+export interface UsePressStateResult {
+    pressed: boolean;
+    animatedStyle: AnimatedStyle<ViewStyle>;
+    overlayStyle: AnimatedStyle<ViewStyle>;
+    focusRingStyle: AnimatedStyle<ViewStyle>;
+    handlers: PressStateHandlers;
+    onLayout: (event: LayoutChangeEvent) => void;
+}
+export declare function usePressState(disabled?: boolean): UsePressStateResult;
+export declare function useFocusRing(focused: boolean, disabled?: boolean): {
+    focusRingStyle: AnimatedStyle<ViewStyle>;
+    animateFocus: (isFocused: boolean) => void;
+};
+//# sourceMappingURL=usePressState.d.ts.map

package/lib/typescript/core/style/index.d.ts

@@ -1,4 +1,5 @@
 export type { LayoutStyle } from "./layoutStyle";
+export { concentric } from "./radius";
 export { sx } from "./sx";
 export type { SxProps, SxSpaceToken } from "./sx";
 export { useThemedStyles } from "./useThemedStyles";

package/lib/typescript/core/style/radius.d.ts

@@ -0,0 +1,2 @@
+export declare const concentric: (outer: number, padding: number, floor?: number) => number;
+//# sourceMappingURL=radius.d.ts.map

package/lib/typescript/index.d.ts

@@ -37,7 +37,7 @@ export type { CardProps, CardVariant } from "./modules/card";
 export { Checkbox } from "./modules/checkbox";
 export type { CheckboxProps, CheckboxSize } from "./modules/checkbox";
 export { Chip, ChipGroup } from "./modules/chip";
-export type { ChipProps, ChipGroupProps, ChipGroupGap, ChipSize, ChipTone, ChipVariant } from "./modules/chip";
+export type { ChipProps, ChipGroupProps, ChipGroupGap, ChipSize, ChipTone, ChipVariant, CustomToneColors } from "./modules/chip";
 export { Combobox } from "./modules/combobox";
 export type { ComboboxProps, ComboboxSingleProps, ComboboxMultipleProps, ComboboxOption } from "./modules/combobox";
 export { Composer } from "./modules/composer";
@@ -105,7 +105,7 @@ export type { SectionListProps, SectionListSection } from "./modules/section-lis
 export { SegmentedControl } from "./modules/segmented-control";
 export type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize } from "./modules/segmented-control";
 export { Select } from "./modules/select";
-export type { SelectProps, SelectOption, SelectSize } from "./modules/select";
+export type { SelectProps, SelectOption, SelectOptionCustomColors, SelectOptionTone, SelectSize } from "./modules/select";
 export { Skeleton } from "./modules/skeleton";
 export type { SkeletonProps, SkeletonShape } from "./modules/skeleton";
 export { Slider } from "./modules/slider";
@@ -120,6 +120,8 @@ export { LoadingState, ErrorState } from "./modules/state-block";
 export type { LoadingStateProps, ErrorStateProps, ErrorStateAction } from "./modules/state-block";
 export { Stepper } from "./modules/stepper";
 export type { StepperProps, StepperStep } from "./modules/stepper";
+export { Box, Surface } from "./modules/surface";
+export type { SurfaceProps, BgRole, BorderRole, RadiusToken, SpaceToken } from "./modules/surface";
 export { SwipeableRow } from "./modules/swipeable-row";
 export type { SwipeableRowAction, SwipeableRowProps, SwipeableActionTone } from "./modules/swipeable-row";
 export { Switch } from "./modules/switch";

package/lib/typescript/modules/accordion/Accordion.variants.d.ts

@@ -55,7 +55,7 @@ export interface AccordionColors {
     readonly title: string;
     /** The chevron glyph — a non-text state indicator, not a label. */
     readonly icon: string;
-    /** The hairline between items — decorative, never the interactive/focus rungs. */
+    /** The StyleSheet.hairlineWidth between items — decorative, never the interactive/focus rungs. */
     readonly divider: string;
     /** A header's background while pressed. */
     readonly pressedHeaderBg: string;
@@ -89,7 +89,7 @@ export interface AccordionHeaderAccessibilityProps {
  */
 export declare function resolveAccordionHeaderAccessibility(input: AccordionHeaderAccessibilityInput): AccordionHeaderAccessibilityProps;
 /**
- * One item's separator — a hairline on the bottom edge, theme-scaled border WIDTH. Colour
+ * One item's separator — a StyleSheet.hairlineWidth on the bottom edge, theme-scaled border WIDTH. Colour
  * (`divider`) is resolved separately and applied inline over this.
  */
 export declare const accordionItemStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;

package/lib/typescript/modules/alert-dialog/AlertDialog.variants.d.ts

@@ -26,4 +26,5 @@ export declare function resolveAlertDialogConfirmTone(tone: AlertDialogTone): Bu
  * each `Button`'s own tone-resolved fill, applied by Button itself.
  */
 export declare const alertDialogActionsStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
+export declare function alertDialogPanelDepth(theme: Theme): import("react-native").ViewStyle;
 //# sourceMappingURL=AlertDialog.variants.d.ts.map

package/lib/typescript/modules/avatar/Avatar.variants.d.ts

@@ -144,7 +144,7 @@ export declare const avatarStructure: import("../../core/style").ThemedVariantRe
             borderRadius: 9999;
         };
         rounded: {
-            borderRadius: 8;
+            borderRadius: 16;
         };
         square: {
             borderRadius: 0;

package/lib/typescript/modules/avatar-group/AvatarGroup.d.ts

@@ -3,8 +3,10 @@
  * `avatars.length` exceeds `max`. Each face is this library's own `Avatar` module — never a hand-rolled
  * image/initials pair — so list recycling, identity hashing, and shape defaults stay consistent.
  *
- * No `accessibilityRole` of its own: each composed `Avatar` carries its own optional label; the
- * overflow pill is hidden from assistive tech as decorative chrome (the visible faces carry identity).
+ * No `accessibilityRole` of its own. Each composed `Avatar` gets a label — the consumer's, or (since
+ * a grouped face has no adjacent visible name to lean on, unlike a standalone `Avatar`) a generic
+ * `resolveAvatarGroupFaceFallbackLabel` fallback. The overflow pill carries its own `"text"`-role
+ * label so a screen reader hears how many faces are hidden, not just the ones on screen.
  */
 import type { LayoutStyle } from "../../core/style";
 import type { AvatarSize } from "../avatar/Avatar.variants";

package/lib/typescript/modules/avatar-group/AvatarGroup.variants.d.ts

@@ -22,6 +22,25 @@ export declare function resolveAvatarGroupColors(colors: RoleColors): AvatarGrou
 export declare function resolveAvatarGroupOverlap(size: AvatarSize): number;
 export declare function resolveAvatarGroupVisibleCount(total: number, max: number): number;
 export declare function resolveAvatarGroupOverflowCount(total: number, visible: number): number;
+export interface AvatarGroupOverflowAccessibilityProps {
+    readonly accessible: true;
+    readonly accessibilityRole: "text";
+    readonly accessibilityLabel: string;
+}
+/**
+ * WCAG 2.5.3: the accessible name must CONTAIN the visible "+N" text (same contract as
+ * `MoreItems`'s trigger), so a voice-control user saying what they read still lands on this pill.
+ * `"text"`, not `"button"` — the pill is informational chrome, not interactive (same as `Badge`).
+ */
+export declare function resolveAvatarGroupOverflowAccessibility(count: number): AvatarGroupOverflowAccessibilityProps;
+/**
+ * A face's honest-but-generic name when its consumer never set `accessibilityLabel`. Unlike a
+ * standalone `Avatar` (usually sits beside a visible name, so undecorated is a fair default —
+ * see `resolveAvatarAccessibility`), a grouped face has no adjacent name: falling through to
+ * `Avatar`'s decorative default would leave a screen reader user unable to tell how many distinct
+ * people the stack represents.
+ */
+export declare function resolveAvatarGroupFaceFallbackLabel(index: number): string;
 export declare const avatarGroupStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const avatarGroupItemStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 export declare const avatarGroupOverflowStructure: import("../../core/style").ThemedVariantResolver<Theme, {

package/lib/typescript/modules/banner/Banner.d.ts

@@ -27,6 +27,8 @@ export interface BannerProps {
     onDismiss?: () => void;
     dismissLabel?: string;
     action?: BannerAction;
+    /** Additional inline actions rendered after `action`. */
+    actions?: readonly BannerAction[];
     /** Layout-only, outermost, applied exactly once as the LAST entry in the root style array. */
     style?: LayoutStyle;
     testID?: string;

package/lib/typescript/modules/bottom-nav/BottomNav.variants.d.ts

@@ -159,9 +159,7 @@ export interface EditRowState {
 /** Pure "is this the targeted slot" derivation, shared by the render tree and its tests — the same
  *  small-pure-predicate idiom `resolveReorderMoveState` uses for Reorder's own row gating. */
 export declare function resolveEditRowState(input: EditRowStateInput): EditRowState;
-/** The bar container: tabs laid out as equal-width flex children, top border separating it from the
- *  screen content above. Colour (border, background) is resolved from role tokens and applied
- *  inline over this — never a hardcoded hex here. */
+/** Tabs laid out as equal-width flex children; the bar separates from content by tone + elevation. */
 export declare const bottomNavBarStructure: import("../../core/style").ThemedVariantResolver<Theme, import("../../core/style").VariantGroups<import("react-native").ViewStyle>, import("react-native").ViewStyle>;
 /** One tab slot: icon above label, centered, spaced by `rowGap`. Shared by every core tab AND the
  *  More tab's own touchable — both must reach the same 56dp visual height. */

package/lib/typescript/modules/bottom-sheet/BottomSheet.variants.d.ts

@@ -1,5 +1,7 @@
 import type { RoleColors, Theme } from "../../theme/hooks";
-export declare const BOTTOM_SHEET_BACKDROP = "#00000080";
+export declare const BOTTOM_SHEET_BACKDROP: string;
+export declare const BOTTOM_SHEET_IOS_HOME_INDICATOR_INSET = 20;
+export declare function resolveBottomSheetBottomInset(basePadding: number, platformOS: string): number;
 export declare function resolveBottomSheetSnapOffset(snapFraction: number, windowHeight: number): number;
 export declare function resolveNearestSnapIndex(offsetY: number, snapOffsets: readonly number[]): number;
 export interface BottomSheetPanelColors {