@platform-blocks/ui 0.1.1

package/lib/core/animations/transitions.d.ts

@@ -0,0 +1,31 @@
+import { Animated } from 'react-native';
+export interface TransitionConfig {
+    duration?: number;
+    delay?: number;
+    easing?: (value: number) => number;
+}
+export type TransitionType = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'rotate';
+export declare const TRANSITION_EASINGS: {
+    readonly linear: (t: number) => number;
+    readonly ease: (t: number) => number;
+    readonly easeIn: import("react-native-reanimated").EasingFunction;
+    readonly easeOut: import("react-native-reanimated").EasingFunction;
+    readonly easeInOut: import("react-native-reanimated").EasingFunction;
+    readonly bounce: (t: number) => number;
+    readonly elastic: import("react-native-reanimated").EasingFunction;
+};
+export declare const DEFAULT_TRANSITION_CONFIG: Required<TransitionConfig>;
+export declare function createTransition(animatedValue: Animated.Value, toValue: number, config?: TransitionConfig, opts?: {
+    reduced?: boolean;
+}): Animated.CompositeAnimation;
+export declare function createSpringTransition(animatedValue: Animated.Value, toValue: number, config?: {
+    tension?: number;
+    friction?: number;
+    speed?: number;
+    bounciness?: number;
+}, opts?: {
+    reduced?: boolean;
+}): Animated.CompositeAnimation;
+export declare function useTransitionConfig(): {
+    reduced: boolean;
+};

package/lib/core/components/ClearButton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SizeValue } from '../theme/types';
+export interface ClearButtonProps {
+    onPress: () => void;
+    disabled?: boolean;
+    size?: SizeValue;
+    accessibilityLabel?: string;
+    hasRightSection?: boolean;
+    style?: any;
+}
+/**
+ * Unified clear button component used across all input-like components
+ * Ensures consistent sizing and behavior
+ */
+export declare function ClearButton({ onPress, disabled, size, accessibilityLabel, hasRightSection, style, }: ClearButtonProps): React.JSX.Element;

package/lib/core/components/InputContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { SizeValue } from '../theme/types';
+export interface InputContainerProps {
+    children: React.ReactNode;
+    size?: SizeValue;
+    disabled?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    radius?: any;
+    leftSection?: React.ReactNode;
+    rightSection?: React.ReactNode;
+    style?: ViewStyle;
+}
+/**
+ * Unified input container that provides consistent styling
+ * for all input-like components (Input, Select, AutoComplete, etc.)
+ */
+export declare function InputContainer({ children, size, disabled, error, focused, radius, leftSection, rightSection, style, }: InputContainerProps): React.JSX.Element;

package/lib/core/design-tokens.d.ts

@@ -0,0 +1,292 @@
+import { SizeValue } from './theme/types';
+/**
+ * Design tokens for consistent styling across the UI library
+ * These tokens ensure visual consistency and make global changes easier
+ */
+/**
+ * Animation tokens
+ */
+export declare const MOTION_TOKENS: {
+    readonly duration: {
+        readonly instant: 0;
+        readonly fast: 150;
+        readonly normal: 200;
+        readonly slow: 300;
+    };
+    readonly easing: {
+        readonly ease: "ease";
+        readonly easeIn: "ease-in";
+        readonly easeOut: "ease-out";
+        readonly easeInOut: "ease-in-out";
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+};
+/**
+ * Shadow tokens for depth and elevation
+ */
+export declare const SHADOW_TOKENS: {
+    readonly xs: "0 1px 2px rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)";
+    readonly md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)";
+    readonly lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)";
+    readonly xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)";
+};
+/**
+ * Border radius tokens
+ */
+export declare const RADIUS_TOKENS: {
+    readonly none: 0;
+    readonly xs: 2;
+    readonly sm: 4;
+    readonly md: 6;
+    readonly lg: 8;
+    readonly xl: 12;
+    readonly '2xl': 16;
+    readonly '3xl': 24;
+    readonly full: 9999;
+};
+/**
+ * Spacing tokens
+ */
+export declare const SPACING_TOKENS: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 32;
+};
+/**
+ * Typography tokens
+ */
+export declare const TYPOGRAPHY_TOKENS: {
+    readonly fontSize: {
+        readonly xs: 12;
+        readonly sm: 14;
+        readonly md: 16;
+        readonly lg: 18;
+        readonly xl: 20;
+        readonly '2xl': 24;
+        readonly '3xl': 30;
+    };
+    readonly lineHeight: {
+        readonly xs: 16;
+        readonly sm: 20;
+        readonly md: 24;
+        readonly lg: 28;
+        readonly xl: 32;
+        readonly '2xl': 36;
+        readonly '3xl': 42;
+    };
+    readonly fontWeight: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+/**
+ * Interactive element tokens
+ */
+export declare const INTERACTIVE_TOKENS: {
+    readonly height: {
+        readonly xs: 28;
+        readonly sm: 32;
+        readonly md: 40;
+        readonly lg: 44;
+        readonly xl: 48;
+        readonly '2xl': 52;
+        readonly '3xl': 56;
+    };
+    readonly padding: {
+        readonly xs: 6;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 20;
+        readonly '2xl': 24;
+        readonly '3xl': 28;
+    };
+    readonly hitTarget: {
+        readonly minimum: 44;
+        readonly comfortable: 48;
+        readonly large: 56;
+    };
+    readonly focusRing: {
+        readonly width: 2;
+        readonly offset: 1;
+    };
+};
+/**
+ * Color opacity tokens
+ */
+export declare const OPACITY_TOKENS: {
+    readonly disabled: 0.5;
+    readonly hover: 0.9;
+    readonly pressed: 0.8;
+    readonly overlay: 0.6;
+    readonly backdrop: 0.4;
+    readonly subtle: 0.1;
+};
+/**
+ * Component-specific tokens
+ */
+export declare const COMPONENT_TOKENS: {
+    readonly clearButton: {
+        readonly size: 14;
+        readonly padding: 4;
+        readonly margin: -4;
+        readonly borderRadius: 6;
+        readonly hitSlop: 6;
+    };
+    readonly divider: {
+        readonly thickness: 1;
+        readonly opacity: 0.1;
+    };
+    readonly badge: {
+        readonly minWidth: 20;
+        readonly height: 20;
+        readonly padding: 6;
+    };
+};
+/**
+ * Get design token value
+ */
+export declare function getToken<T extends keyof typeof DESIGN_TOKENS>(category: T, token: keyof typeof DESIGN_TOKENS[T]): any;
+/**
+ * All design tokens grouped for easy access
+ */
+export declare const DESIGN_TOKENS: {
+    readonly motion: {
+        readonly duration: {
+            readonly instant: 0;
+            readonly fast: 150;
+            readonly normal: 200;
+            readonly slow: 300;
+        };
+        readonly easing: {
+            readonly ease: "ease";
+            readonly easeIn: "ease-in";
+            readonly easeOut: "ease-out";
+            readonly easeInOut: "ease-in-out";
+            readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        };
+    };
+    readonly shadow: {
+        readonly xs: "0 1px 2px rgba(0, 0, 0, 0.05)";
+        readonly sm: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)";
+        readonly md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)";
+        readonly lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)";
+        readonly xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)";
+    };
+    readonly radius: {
+        readonly none: 0;
+        readonly xs: 2;
+        readonly sm: 4;
+        readonly md: 6;
+        readonly lg: 8;
+        readonly xl: 12;
+        readonly '2xl': 16;
+        readonly '3xl': 24;
+        readonly full: 9999;
+    };
+    readonly spacing: {
+        readonly xs: 4;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 20;
+        readonly '2xl': 24;
+        readonly '3xl': 32;
+    };
+    readonly typography: {
+        readonly fontSize: {
+            readonly xs: 12;
+            readonly sm: 14;
+            readonly md: 16;
+            readonly lg: 18;
+            readonly xl: 20;
+            readonly '2xl': 24;
+            readonly '3xl': 30;
+        };
+        readonly lineHeight: {
+            readonly xs: 16;
+            readonly sm: 20;
+            readonly md: 24;
+            readonly lg: 28;
+            readonly xl: 32;
+            readonly '2xl': 36;
+            readonly '3xl': 42;
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+    };
+    readonly interactive: {
+        readonly height: {
+            readonly xs: 28;
+            readonly sm: 32;
+            readonly md: 40;
+            readonly lg: 44;
+            readonly xl: 48;
+            readonly '2xl': 52;
+            readonly '3xl': 56;
+        };
+        readonly padding: {
+            readonly xs: 6;
+            readonly sm: 8;
+            readonly md: 12;
+            readonly lg: 16;
+            readonly xl: 20;
+            readonly '2xl': 24;
+            readonly '3xl': 28;
+        };
+        readonly hitTarget: {
+            readonly minimum: 44;
+            readonly comfortable: 48;
+            readonly large: 56;
+        };
+        readonly focusRing: {
+            readonly width: 2;
+            readonly offset: 1;
+        };
+    };
+    readonly opacity: {
+        readonly disabled: 0.5;
+        readonly hover: 0.9;
+        readonly pressed: 0.8;
+        readonly overlay: 0.6;
+        readonly backdrop: 0.4;
+        readonly subtle: 0.1;
+    };
+    readonly component: {
+        readonly clearButton: {
+            readonly size: 14;
+            readonly padding: 4;
+            readonly margin: -4;
+            readonly borderRadius: 6;
+            readonly hitSlop: 6;
+        };
+        readonly divider: {
+            readonly thickness: 1;
+            readonly opacity: 0.1;
+        };
+        readonly badge: {
+            readonly minWidth: 20;
+            readonly height: 20;
+            readonly padding: 6;
+        };
+    };
+};
+/**
+ * Create consistent transition styles
+ */
+export declare function createTransition(properties?: string[], duration?: keyof typeof MOTION_TOKENS.duration, easing?: keyof typeof MOTION_TOKENS.easing): string;
+/**
+ * Get responsive value based on size
+ */
+export declare function getResponsiveValue<T>(values: Partial<Record<SizeValue, T>>, size?: SizeValue): T | undefined;

package/lib/core/factory/factory.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { UniversalSystemProps } from '../utils/universal';
+export interface FactoryPayload {
+    props: any & UniversalSystemProps;
+    ref: any;
+    staticComponents?: Record<string, any>;
+}
+export interface ComponentWithProps<Props = {}> {
+    withProps: <T extends Partial<Props>>(fixedProps: T) => React.FC<Omit<Props, keyof T>>;
+}
+export interface PlatformBlocksComponent<Payload extends FactoryPayload> extends React.FC<Payload['props']>, ComponentWithProps<Payload['props']> {
+    extend: any;
+    displayName?: string;
+}
+/**
+ * Factory function for creating PlatformBlocks components
+ */
+export interface FactoryOptions<Payload extends FactoryPayload> {
+    /**
+     * Optional display name applied to the resulting component. If omitted, React will infer the name.
+     */
+    displayName?: string;
+    /**
+     * Enable or disable memoization. Defaults to `true`.
+     */
+    memo?: boolean;
+    /**
+     * Optional custom comparison used when memoization is enabled.
+     */
+    arePropsEqual?: (prevProps: Readonly<Payload['props']>, nextProps: Readonly<Payload['props']>) => boolean;
+}
+export declare function factory<Payload extends FactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['ref'], Payload['props']>, options?: FactoryOptions<Payload>): PlatformBlocksComponent<Payload>;
+export type Factory<Payload extends FactoryPayload> = Payload;

package/lib/core/factory/index.d.ts

@@ -0,0 +1,4 @@
+export type { Factory, FactoryPayload, PlatformBlocksComponent, FactoryOptions } from './factory';
+export { factory } from './factory';
+export type { PolymorphicFactory, PolymorphicFactoryPayload, PolymorphicComponent, PolymorphicComponentProps, PolymorphicRef } from './polymorphicFactory';
+export { polymorphicFactory, createPolymorphicComponent } from './polymorphicFactory';

package/lib/core/factory/polymorphicFactory.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ComponentWithProps, FactoryPayload } from './factory';
+type ElementType = keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>;
+type PropsOf<C extends ElementType> = React.JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;
+type ComponentProp<C> = {
+    component?: C;
+};
+type ExtendedProps<Props = {}, OverrideProps = {}> = OverrideProps & Omit<Props, keyof OverrideProps>;
+type InheritedProps<C extends ElementType, Props = {}> = ExtendedProps<PropsOf<C>, Props>;
+export type PolymorphicRef<C> = C extends React.ElementType ? React.ComponentPropsWithRef<C>['ref'] : never;
+export type PolymorphicComponentProps<C, Props = {}> = C extends React.ElementType ? InheritedProps<C, Props & ComponentProp<C>> & {
+    ref?: PolymorphicRef<C>;
+} : Props & {
+    component: React.ElementType;
+};
+export interface PolymorphicFactoryPayload extends FactoryPayload {
+    defaultComponent: any;
+    defaultRef: any;
+}
+export interface PolymorphicComponent<Payload extends PolymorphicFactoryPayload> extends ComponentWithProps<Payload['props']> {
+    <C = Payload['defaultComponent']>(props: PolymorphicComponentProps<C, Payload['props']>): React.ReactElement;
+    extend: any;
+    displayName?: string;
+}
+/**
+ * Factory function for creating polymorphic PlatformBlocks components
+ */
+export declare function polymorphicFactory<Payload extends PolymorphicFactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['defaultRef'], Payload['props']>): PolymorphicComponent<Payload>;
+/**
+ * Creates a polymorphic component from a regular component
+ */
+export declare function createPolymorphicComponent<ComponentDefaultType, Props, StaticComponents = Record<string, never>>(component: any): (<C = ComponentDefaultType>(props: PolymorphicComponentProps<C, Props>) => React.ReactElement) & Omit<React.FunctionComponent<(Props & ComponentProp<any> & Omit<Omit<any, "ref">, "component" | keyof Props> & {
+    ref?: any;
+}) | (Props & {
+    component: React.ElementType;
+})>, never> & StaticComponents;
+export type PolymorphicFactory<Payload extends PolymorphicFactoryPayload> = Payload;
+export {};

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface HapticsContextValue {
+    enabled: boolean;
+    setEnabled: (v: boolean) => void;
+    temporarilyDisable: (ms: number) => void;
+}
+export interface HapticsProviderProps {
+    children: React.ReactNode;
+    defaultEnabled?: boolean;
+}
+export declare const HapticsProvider: React.FC<HapticsProviderProps>;
+export declare function useHapticsSettings(): HapticsContextValue;
+export declare function useOptionalHapticsSettings(): HapticsContextValue | undefined;
+export {};

package/lib/core/hooks/useDropdownPositioning.d.ts

@@ -0,0 +1,61 @@
+import { UsePopoverPositioningOptions } from './usePopoverPositioning';
+export interface UseDropdownPositioningOptions extends UsePopoverPositioningOptions {
+    /** Whether the dropdown is open */
+    isOpen: boolean;
+    /** Called when the dropdown should close */
+    onClose?: () => void;
+    /** Whether to close on click outside */
+    closeOnClickOutside?: boolean;
+    /** Whether to close on escape key */
+    closeOnEscape?: boolean;
+}
+export interface UseDropdownPositioningReturn {
+    /** Current position result */
+    position: import('../utils/positioning-enhanced').PositionResult | null;
+    /** Update position manually */
+    updatePosition: () => Promise<void>;
+    /** Whether positioning is currently being calculated */
+    isPositioning: boolean;
+    /** Ref to attach to the anchor element */
+    anchorRef: React.RefObject<any>;
+    /** Ref to attach to the popover element for size measurement */
+    popoverRef: React.RefObject<any>;
+    /** Function to create and show the overlay with content */
+    showOverlay: (content: React.ReactElement, overrides?: {
+        width?: number | string;
+        maxHeight?: number | string;
+        zIndex?: number;
+    }) => void;
+    /** Function to hide the overlay */
+    hideOverlay: () => void;
+}
+/**
+ * Hook for managing dropdown positioning and overlay lifecycle.
+ *
+ * This hook combines usePopoverPositioning with useOverlay to provide a complete
+ * dropdown solution that handles:
+ * - Intelligent positioning with viewport constraints
+ * - Automatic flipping and shifting
+ * - Overlay lifecycle management
+ * - Click outside and escape key handling
+ *
+ * Used by both AutoComplete and ColorPicker components to ensure consistent
+ * dropdown behavior across the component library.
+ *
+ * @example
+ * ```tsx
+ * const { anchorRef, popoverRef, showOverlay, position } = useDropdownPositioning({
+ *   isOpen: dropdownOpen,
+ *   placement: 'bottom-start',
+ *   flip: true,
+ *   shift: true,
+ *   onClose: () => setDropdownOpen(false),
+ * });
+ *
+ * // When ready to show dropdown
+ * if (position) {
+ *   showOverlay(<DropdownContent />);
+ * }
+ * ```
+ */
+export declare function useDropdownPositioning(options: UseDropdownPositioningOptions): UseDropdownPositioningReturn;

package/lib/core/hooks/usePopoverPositioning.d.ts

@@ -0,0 +1,33 @@
+import { type PositionResult, type PositioningOptions } from '../utils/positioning-enhanced';
+export interface UsePopoverPositioningOptions extends PositioningOptions {
+    /** Whether to automatically reposition on window resize */
+    autoUpdate?: boolean;
+    /** Debounce delay for resize/scroll updates in ms */
+    updateDelay?: number;
+}
+export interface UsePopoverPositioningReturn {
+    /** Current position result */
+    position: PositionResult | null;
+    /** Update position manually */
+    updatePosition: () => Promise<void>;
+    /** Whether positioning is currently being calculated */
+    isPositioning: boolean;
+    /** Ref to attach to the anchor element */
+    anchorRef: React.RefObject<any>;
+    /** Ref to attach to the popover element for size measurement */
+    popoverRef: React.RefObject<any>;
+}
+/**
+ * Hook for managing popover positioning with automatic viewport constraint handling
+ */
+export declare function usePopoverPositioning(isOpen: boolean, options?: UsePopoverPositioningOptions): UsePopoverPositioningReturn;
+/**
+ * Hook for managing tooltip positioning specifically
+ * (simplified version with tooltip-specific defaults)
+ */
+export declare function useTooltipPositioning(isOpen: boolean, placement?: PositioningOptions['placement']): UsePopoverPositioningReturn;
+/**
+ * Hook for managing dropdown/menu positioning
+ * (optimized for dropdown behavior)
+ */
+export declare function useDropdownPositioning(isOpen: boolean, placement?: PositioningOptions['placement']): UsePopoverPositioningReturn;

package/lib/core/i18n/I18nContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { I18nConfig, I18nContextValue } from './types';
+export interface I18nProviderProps {
+    initial?: Partial<I18nConfig>;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: React.FC<I18nProviderProps>;
+export declare function useI18n(): I18nContextValue;

package/lib/core/i18n/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './I18nContext';

package/lib/core/i18n/types.d.ts

@@ -0,0 +1,22 @@
+export type TranslationDictionary = Record<string, string | ((params: Record<string, any>) => string)>;
+export interface I18nResources {
+    [locale: string]: {
+        translation: TranslationDictionary;
+    };
+}
+export interface I18nConfig {
+    locale: string;
+    fallbackLocale: string;
+    resources: I18nResources;
+    onMissingKey?: (key: string, locale: string) => void;
+    pluralSeparator?: string;
+}
+export interface I18nContextValue {
+    locale: string;
+    setLocale: (next: string) => void;
+    t: (key: string, params?: Record<string, any>) => string;
+    formatNumber: (value: number, opts?: Intl.NumberFormatOptions) => string;
+    formatDate: (value: Date, opts?: Intl.DateTimeFormatOptions) => string;
+    formatRelativeTime: (value: number, unit: Intl.RelativeTimeFormatUnit, opts?: Intl.RelativeTimeFormatOptions) => string;
+    hasKey: (key: string) => boolean;
+}

package/lib/core/index.d.ts

@@ -0,0 +1,15 @@
+export * from './theme';
+export * from './factory';
+export * from './providers';
+export * from './responsive';
+export * from './i18n';
+export * from './accessibility';
+export * from './sound';
+export { getSpacingStyles, extractSpacingProps, getLayoutStyles, extractLayoutProps, UniversalProps, ResponsiveProps } from './utils';
+export { DESIGN_TOKENS, createTransition, getResponsiveValue } from './design-tokens';
+export { createFocusStyles, createHoverStyles, createPressedStyles, createDisabledStyles, createInteractiveStateStyles, createTransitionStyles, type InteractiveStateConfig } from './interactive-states';
+export { createComponentStyles, type StyleFactoryConfig } from './style-factory';
+export { COMPONENT_SIZES as UNIFIED_COMPONENT_SIZES, getComponentSize as getUnifiedComponentSize, createInteractiveStyles as createUnifiedInteractiveStyles, getIconSize as getUnifiedIconSize, getSectionSpacing as getUnifiedSectionSpacing } from './theme/unified-sizing';
+export { ClearButton, type ClearButtonProps } from './components/ClearButton';
+export { InputContainer, type InputContainerProps } from './components/InputContainer';
+export { rem, px, getSize, getShadow, getColor } from './utils';

package/lib/core/interactive-states.d.ts

@@ -0,0 +1,41 @@
+import { ViewStyle } from 'react-native';
+import { PlatformBlocksTheme } from './theme/types';
+import { DESIGN_TOKENS } from './design-tokens';
+/**
+ * Utilities for consistent focus, hover, and interactive states
+ */
+export interface InteractiveStateConfig {
+    focusRing?: boolean;
+    hoverEffect?: boolean;
+    pressedEffect?: boolean;
+    disabledState?: boolean;
+}
+/**
+ * Create consistent focus ring styles
+ */
+export declare function createFocusStyles(theme: PlatformBlocksTheme, visible?: boolean): ViewStyle;
+/**
+ * Create consistent hover styles
+ */
+export declare function createHoverStyles(theme: PlatformBlocksTheme, baseColor: string, active?: boolean): ViewStyle;
+/**
+ * Create consistent pressed/active styles
+ */
+export declare function createPressedStyles(theme: PlatformBlocksTheme, active?: boolean): ViewStyle;
+/**
+ * Create consistent disabled styles
+ */
+export declare function createDisabledStyles(theme: PlatformBlocksTheme, disabled?: boolean): ViewStyle;
+/**
+ * Create comprehensive interactive styles for any component
+ */
+export declare function createInteractiveStateStyles(theme: PlatformBlocksTheme, state: {
+    focused?: boolean;
+    hovered?: boolean;
+    pressed?: boolean;
+    disabled?: boolean;
+}, config?: InteractiveStateConfig): ViewStyle;
+/**
+ * Create animated transition styles
+ */
+export declare function createTransitionStyles(properties?: string[], duration?: keyof typeof DESIGN_TOKENS.motion.duration): ViewStyle;

package/lib/core/motion/ReducedMotionProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ReducedMotionContextValue {
+    reduced: boolean;
+}
+export interface ReducedMotionProviderProps {
+    children: React.ReactNode;
+    forcedValue?: boolean;
+}
+export declare const ReducedMotionProvider: React.FC<ReducedMotionProviderProps>;
+export declare function useReducedMotion(): boolean;

package/lib/core/motion/motionTokens.d.ts

@@ -0,0 +1,12 @@
+export interface MotionTokens {
+    enabled: boolean;
+    durations: Record<'instant' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', number>;
+    spring: {
+        tension: number;
+        friction: number;
+        speed: number;
+        bounciness: number;
+    };
+    maybe: (value: number) => number;
+}
+export declare function useMotionTokens(): MotionTokens;