@platform-blocks/ui 0.1.1

package/lib/core/theme/unified-sizing.d.ts

@@ -0,0 +1,65 @@
+import { SizeValue } from '../theme/types';
+import { PlatformBlocksTheme } from '../theme/types';
+/**
+ * Unified sizing system for all UI components
+ * This ensures consistent spacing, heights, and typography across the library
+ */
+export interface ComponentSizeConfig {
+    fontSize: number;
+    padding: number;
+    height: number;
+    iconSize: number;
+    borderRadius: number;
+}
+export declare const COMPONENT_SIZES: Record<SizeValue, ComponentSizeConfig>;
+/**
+ * Get unified size configuration for any component
+ */
+export declare function getComponentSize(size?: SizeValue): ComponentSizeConfig;
+/**
+ * Create consistent interactive element styles (buttons, inputs, etc.)
+ */
+export declare function createInteractiveStyles(theme: PlatformBlocksTheme, size?: SizeValue, variant?: 'filled' | 'outline' | 'ghost', state?: 'default' | 'hover' | 'focus' | 'disabled'): {
+    opacity: number;
+    minHeight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    borderRadius: number;
+    fontSize: number;
+    borderWidth: number;
+} | {
+    opacity: number;
+    minHeight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    borderRadius: number;
+    fontSize: number;
+    borderWidth: number;
+} | {
+    boxShadow?: string | undefined;
+    borderColor: string;
+    minHeight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    borderRadius: number;
+    fontSize: number;
+    borderWidth: number;
+} | {
+    opacity: number;
+    backgroundColor: string;
+    color: string;
+    minHeight: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    borderRadius: number;
+    fontSize: number;
+    borderWidth: number;
+};
+/**
+ * Consistent icon sizing within components
+ */
+export declare function getIconSize(componentSize?: SizeValue, context?: 'default' | 'small' | 'large'): number;
+/**
+ * Consistent spacing for component sections (left/right sections, gaps, etc.)
+ */
+export declare function getSectionSpacing(size?: SizeValue): number;

package/lib/core/theme/useColorScheme.d.ts

@@ -0,0 +1,6 @@
+export type ColorScheme = 'light' | 'dark';
+/**
+ * Hook that detects and responds to OS color scheme changes
+ * Works on web and React Native
+ */
+export declare function useColorScheme(): ColorScheme;

package/lib/core/theme/utils.d.ts

@@ -0,0 +1,9 @@
+import { PlatformBlocksTheme, PlatformBlocksThemeOverride } from './types';
+/**
+ * Deep merges a theme override with the default theme
+ */
+export declare function mergeTheme(defaultTheme: PlatformBlocksTheme, themeOverride?: PlatformBlocksThemeOverride): PlatformBlocksTheme;
+/**
+ * Creates a theme object with proper type checking
+ */
+export declare function createTheme(themeOverride: PlatformBlocksThemeOverride): PlatformBlocksThemeOverride;

package/lib/core/unified-styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Core styling utilities for Platform Blocks UI
+ *
+ * This module provides unified styling utilities to ensure consistency
+ * across all components in the library.
+ */
+export { DESIGN_TOKENS, createTransition, getResponsiveValue } from './design-tokens';
+export { COMPONENT_SIZES as UNIFIED_COMPONENT_SIZES, getComponentSize as getUnifiedComponentSize, createInteractiveStyles as createUnifiedInteractiveStyles, getIconSize as getUnifiedIconSize, getSectionSpacing as getUnifiedSectionSpacing } from './theme/unified-sizing';
+export { createFocusStyles, createHoverStyles, createPressedStyles, createDisabledStyles, createInteractiveStateStyles, createTransitionStyles, type InteractiveStateConfig } from './interactive-states';
+export { createComponentStyles, type StyleFactoryConfig } from './style-factory';
+export { ClearButton, type ClearButtonProps } from './components/ClearButton';
+export { InputContainer, type InputContainerProps } from './components/InputContainer';

package/lib/core/utils/UniversalCSS.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Universal CSS styles for Platform Blocks universal props
+ * Optimized for React Native (Expo) with web compatibility
+ */
+/**
+ * Generates global CSS for universal props functionality
+ * This creates the CSS that makes lightHidden/darkHidden work on web
+ */
+export declare function generateUniversalCSS(): string;
+/**
+ * Component that injects global CSS for universal props
+ * Web-only component - React Native uses inline styles instead
+ */
+export declare function UniversalCSS(): null;

package/lib/core/utils/debounce.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Debounce utility for performance optimization
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number, immediate?: boolean): (...args: Parameters<T>) => void;
+/**
+ * Throttle utility to limit function execution rate
+ */
+export declare function throttle<T extends (...args: any[]) => any>(func: T, limit: number): (...args: Parameters<T>) => void;
+/**
+ * Performance monitoring utilities
+ */
+export declare function measurePerformance<T>(name: string, fn: () => T): T;
+/**
+ * Async version of performance measurement
+ */
+export declare function measureAsyncPerformance<T>(name: string, fn: () => Promise<T>): Promise<T>;

package/lib/core/utils/hash.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Simple non-cryptographic stable hash (FNV-1a 32-bit) returning base36 string
+ */
+export declare function fastHash(input: string): string;

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

@@ -0,0 +1,38 @@
+/**
+ * Converts pixel values to rem units
+ */
+export declare function rem(value: number | string): string;
+export { SpacingProps, BaseSystemProps, getSpacingStyles, extractSpacingProps } from './spacing';
+export { UniversalProps, ResponsiveProps, UniversalSystemProps, getUniversalClasses, extractUniversalProps, shouldHideComponent, shouldHideForBreakpoint, useUniversalStyles } from './universal';
+export { withUniversalProps, useUniversalProps } from './withUniversalProps';
+export { LayoutProps, getLayoutStyles, extractLayoutProps } from './layout';
+export { extractShadowProps, getShadowStyles } from './shadow';
+export { flipDirection, flipHorizontal, getLogicalProperty, transformRTLStyle, flipAlignment, shouldMirrorIcon, getIconMirrorTransform, swapStartEnd, getWritingDirection, getDefaultTextAlign, mirrorPlacement, reverseArray, DEFAULT_MIRRORABLE_ICONS, } from './rtl';
+export { debounce, throttle, measurePerformance, measureAsyncPerformance } from './debounce';
+export { INPUT_PERFORMANCE_CONFIG, PERFORMANCE_THRESHOLDS, buildInputComponents } from './performance';
+export { calculateOverlayPosition, calculateOverlayPositionEnhanced, getViewport, measureElement, pointInRect, getScrollPosition, clearOverlayPositionCache } from './positioning-enhanced';
+export type { Rect, Viewport, PositionResult, PlacementType, PositioningOptions } from './positioning-enhanced';
+/**
+ * Converts values to px
+ */
+export declare function px(value: string | number): number;
+/**
+ * Gets a size value from theme or returns the value if it's a string
+ */
+export declare function getSize(size: string | number | undefined, prefix: string, theme?: any): string | undefined;
+/**
+ * Gets font size value
+ */
+export declare function getFontSize(size: string | undefined): string | undefined;
+/**
+ * Gets radius value
+ */
+export declare function getRadius(radius: string | number | undefined): string | undefined;
+/**
+ * Gets shadow value
+ */
+export declare function getShadow(shadow: string | undefined): string | undefined;
+/**
+ * Gets color value from theme
+ */
+export declare function getColor(color: string | undefined, shade?: number | string): string | undefined;

package/lib/core/utils/layout.d.ts

@@ -0,0 +1,44 @@
+import { ViewStyle, DimensionValue } from 'react-native';
+export interface LayoutProps {
+    /** Makes the component fill the full width of its parent */
+    fullWidth?: boolean;
+    /** Sets a specific width (shorthand for width) */
+    w?: DimensionValue;
+    /** Sets a specific width */
+    width?: DimensionValue;
+    /** Sets a specific height */
+    height?: DimensionValue;
+    /** Sets the maximum width */
+    maxWidth?: DimensionValue;
+    /** Sets the minimum width */
+    minWidth?: DimensionValue;
+    /** Sets the maximum height */
+    maxHeight?: DimensionValue;
+    /** Sets the minimum height */
+    minHeight?: DimensionValue;
+}
+/**
+ * Generates layout styles based on provided layout properties.
+ *
+ * @param props - The layout properties object
+ * @param props.fullWidth - When true, sets width to 100%
+ * @param props.w - Shorthand width property (overrides fullWidth)
+ * @param props.width - Specific width value (overrides fullWidth and w)
+ * @param props.height - Height value
+ * @param props.maxWidth - Maximum width constraint
+ * @param props.minWidth - Minimum width constraint
+ * @param props.maxHeight - Maximum height constraint
+ * @param props.minHeight - Minimum height constraint
+ *
+ * @returns A partial ViewStyle object containing the computed layout styles
+ *
+ * @remarks
+ * Property precedence for width: width > w > fullWidth
+ * The function processes width properties in order of specificity, with more specific
+ * properties overriding more general ones.
+ */
+export declare function getLayoutStyles(props: LayoutProps): Partial<ViewStyle>;
+export declare function extractLayoutProps<T extends LayoutProps>(props: T): {
+    layoutProps: LayoutProps;
+    otherProps: Omit<T, keyof LayoutProps>;
+};

package/lib/core/utils/performance.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Performance configuration constants
+ */
+export declare const INPUT_PERFORMANCE_CONFIG: {
+    readonly defaultValidationDebounce: 300;
+    readonly batchFormUpdates: true;
+    readonly lazyLoadThreshold: 10;
+    readonly enableVirtualScrolling: true;
+    readonly virtualScrollThreshold: 50;
+    readonly memoizeInputStyles: true;
+    readonly shallowCompareProps: true;
+    readonly treeShakeValidators: true;
+    readonly splitFormChunks: true;
+};
+export declare const PERFORMANCE_THRESHOLDS: {
+    readonly maxInputRenderTime: 16;
+    readonly maxValidationTime: 100;
+    readonly maxFormSubmissionTime: 1000;
+    readonly maxFormFields: 100;
+    readonly maxValidationRules: 20;
+};
+/**
+ * Production build configuration for input components
+ */
+export declare const buildInputComponents: () => {
+    core: string[];
+    optional: string[];
+    advanced: string[];
+    validation: string[];
+};

package/lib/core/utils/positioning-enhanced.d.ts

@@ -0,0 +1,88 @@
+export declare const clearOverlayPositionCache: () => void;
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Viewport {
+    width: number;
+    height: number;
+    padding: number;
+}
+export interface PositionResult {
+    x: number;
+    y: number;
+    placement: PlacementType;
+    maxWidth?: number;
+    maxHeight?: number;
+    /** Indicates if the popover was flipped to stay in bounds */
+    flipped: boolean;
+    /** Indicates if the popover was shifted to stay in bounds */
+    shifted: boolean;
+    /** Final calculated dimensions that fit in viewport */
+    finalWidth: number;
+    finalHeight: number;
+}
+export type PlacementType = 'top' | 'bottom' | 'left' | 'right' | 'auto' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export interface PositioningOptions {
+    placement?: PlacementType;
+    offset?: number;
+    viewport?: Viewport;
+    strategy?: 'absolute' | 'fixed';
+    /** Enable flipping to opposite side when popover would go off-screen */
+    flip?: boolean;
+    /** Enable shifting within bounds when popover would go off-screen */
+    shift?: boolean;
+    /** Minimum distance from viewport edges */
+    boundary?: number;
+    /** Fallback placements to try if primary placement doesn't fit */
+    fallbackPlacements?: PlacementType[];
+}
+/**
+ * Enhanced overlay positioning that prevents off-screen rendering with intelligent caching
+ */
+export declare function calculateOverlayPositionEnhanced(anchor: Rect, overlay: {
+    width: number;
+    height: number;
+}, options?: PositioningOptions): PositionResult;
+/**
+ * Get current viewport dimensions
+ */
+export declare function getViewport(): Viewport;
+/**
+ * Measure element dimensions and position
+ */
+export declare function measureElement(ref: any): Promise<Rect>;
+/**
+ * Legacy overlay positioning function (simplified interface)
+ *
+ * @deprecated Use calculateOverlayPositionEnhanced for better positioning with flip/shift support
+ */
+export declare function calculateOverlayPosition(anchor: Rect, overlay: {
+    width: number;
+    height: number;
+}, options?: {
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    offset?: number;
+    viewport?: Viewport;
+    strategy?: 'absolute' | 'fixed';
+}): Omit<PositionResult, 'flipped' | 'shifted' | 'finalWidth' | 'finalHeight'>;
+/**
+ * Alias for backward compatibility
+ */
+export { calculateOverlayPosition as calculateOverlayPositionLegacy };
+/**
+ * Check if a point is inside a rectangle
+ */
+export declare function pointInRect(point: {
+    x: number;
+    y: number;
+}, rect: Rect): boolean;
+/**
+ * Get scroll position for web compatibility
+ */
+export declare function getScrollPosition(): {
+    x: number;
+    y: number;
+};

package/lib/core/utils/rtl.d.ts

@@ -0,0 +1,174 @@
+/**
+ * RTL Utility Functions
+ *
+ * Helper functions for handling Right-to-Left (RTL) layouts and styling.
+ * These utilities help components adapt to RTL direction automatically.
+ */
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+/**
+ * Type for flex direction values
+ */
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+/**
+ * Type for alignment values
+ */
+type Alignment = 'left' | 'right' | 'center' | 'flex-start' | 'flex-end';
+/**
+ * Flip horizontal flex direction based on RTL state
+ *
+ * @param direction - The flex direction to potentially flip
+ * @param isRTL - Whether the current direction is RTL
+ * @returns The flipped direction if RTL and horizontal, otherwise original
+ *
+ * @example
+ * ```tsx
+ * const { isRTL } = useDirection();
+ * const flexDirection = flipDirection('row', isRTL); // 'row-reverse' in RTL
+ * ```
+ */
+export declare function flipDirection(direction: FlexDirection, isRTL: boolean): FlexDirection;
+/**
+ * Flip horizontal value (useful for transforms, positions)
+ *
+ * @param value - The numeric value to flip
+ * @param isRTL - Whether the current direction is RTL
+ * @returns Negative value if RTL, positive if LTR
+ *
+ * @example
+ * ```tsx
+ * const translateX = flipHorizontal(100, isRTL); // -100 in RTL
+ * ```
+ */
+export declare function flipHorizontal(value: number, isRTL: boolean): number;
+/**
+ * Get physical property name from logical property
+ *
+ * @param prop - Logical property name ('start' or 'end')
+ * @param isRTL - Whether the current direction is RTL
+ * @returns Physical property name ('left' or 'right')
+ *
+ * @example
+ * ```tsx
+ * const side = getLogicalProperty('start', isRTL); // 'right' in RTL, 'left' in LTR
+ * ```
+ */
+export declare function getLogicalProperty(prop: 'start' | 'end', isRTL: boolean): 'left' | 'right';
+/**
+ * Swap left/right values in a style object for RTL
+ *
+ * @param style - Style object to transform
+ * @param isRTL - Whether the current direction is RTL
+ * @returns Transformed style object
+ *
+ * @example
+ * ```tsx
+ * const style = transformRTLStyle({ marginLeft: 10, marginRight: 20 }, true);
+ * // Returns: { marginLeft: 20, marginRight: 10 }
+ * ```
+ */
+export declare function transformRTLStyle<T extends ViewStyle | TextStyle | ImageStyle>(style: T, isRTL: boolean): T;
+/**
+ * Flip text alignment for RTL
+ *
+ * @param align - The alignment to flip
+ * @param isRTL - Whether the current direction is RTL
+ * @returns Flipped alignment
+ */
+export declare function flipAlignment(align: Alignment, isRTL: boolean): Alignment;
+/**
+ * List of icon names that should be mirrored in RTL
+ * These are directional icons that point left or right
+ */
+declare const DEFAULT_MIRRORABLE_ICONS: string[];
+/**
+ * Check if an icon should be mirrored in RTL
+ *
+ * @param iconName - The name of the icon
+ * @param isRTL - Whether the current direction is RTL
+ * @param customMirrorableIcons - Optional custom list of mirrorable icons
+ * @returns Whether the icon should be mirrored
+ *
+ * @example
+ * ```tsx
+ * const shouldMirror = shouldMirrorIcon('chevron-right', isRTL);
+ * const transform = shouldMirror ? [{ scaleX: -1 }] : undefined;
+ * ```
+ */
+export declare function shouldMirrorIcon(iconName: string, isRTL: boolean, customMirrorableIcons?: string[]): boolean;
+/**
+ * Get transform style for mirroring an icon
+ *
+ * @param iconName - The name of the icon
+ * @param isRTL - Whether the current direction is RTL
+ * @param customMirrorableIcons - Optional custom list of mirrorable icons
+ * @returns Transform array for horizontal flip or undefined
+ *
+ * @example
+ * ```tsx
+ * const transform = getIconMirrorTransform('chevron-right', isRTL);
+ * <Icon style={{ transform }} />
+ * ```
+ */
+export declare function getIconMirrorTransform(iconName: string, isRTL: boolean, customMirrorableIcons?: string[]): {
+    scaleX: number;
+}[] | undefined;
+/**
+ * Swap start and end values in an object
+ * Useful for converting logical property values
+ *
+ * @example
+ * ```tsx
+ * const spacing = { start: 10, end: 20 };
+ * const swapped = swapStartEnd(spacing, isRTL);
+ * // Returns: { start: 20, end: 10 } in RTL
+ * ```
+ */
+export declare function swapStartEnd<T extends Record<string, any>>(obj: T, isRTL: boolean): T;
+/**
+ * Get text writing direction for TextInput
+ *
+ * @param isRTL - Whether the current direction is RTL
+ * @returns 'rtl' or 'ltr'
+ */
+export declare function getWritingDirection(isRTL: boolean): 'rtl' | 'ltr';
+/**
+ * Get default text alignment based on direction
+ *
+ * @param isRTL - Whether the current direction is RTL
+ * @returns 'right' in RTL, 'left' in LTR
+ */
+export declare function getDefaultTextAlign(isRTL: boolean): 'left' | 'right';
+/**
+ * Mirror a placement string (e.g., for tooltips, popovers)
+ *
+ * @param placement - Placement string (e.g., 'left', 'right', 'top-start')
+ * @param isRTL - Whether the current direction is RTL
+ * @returns Mirrored placement
+ *
+ * @example
+ * ```tsx
+ * const placement = mirrorPlacement('left-start', isRTL);
+ * // Returns 'right-start' in RTL
+ * ```
+ */
+export declare function mirrorPlacement(placement: string, isRTL: boolean): string;
+/**
+ * Reverse an array if RTL
+ * Useful for reversing breadcrumbs, pagination, etc.
+ *
+ * @param array - Array to potentially reverse
+ * @param isRTL - Whether the current direction is RTL
+ * @returns Reversed array if RTL, original if LTR
+ *
+ * @example
+ * ```tsx
+ * const items = [1, 2, 3];
+ * const displayed = reverseArray(items, isRTL);
+ * // Returns [3, 2, 1] in RTL
+ * ```
+ */
+export declare function reverseArray<T>(array: T[], isRTL: boolean): T[];
+/**
+ * Export the default list of mirrorable icons for customization
+ */
+export { DEFAULT_MIRRORABLE_ICONS };

package/lib/core/utils/shadow.d.ts

@@ -0,0 +1,13 @@
+import { ShadowProps, COMPONENT_SHADOW_DEFAULTS } from '../theme/shadow';
+import { PlatformBlocksTheme } from '../theme/types';
+/**
+ * Helper to extract shadow props from component props
+ */
+export declare function extractShadowProps<T extends ShadowProps>(props: T): {
+    shadowProps: ShadowProps;
+    otherProps: Omit<T, keyof ShadowProps>;
+};
+/**
+ * Utility function to generate shadow styles from props
+ */
+export declare function getShadowStyles(shadowProps: ShadowProps, theme: PlatformBlocksTheme, componentType?: keyof typeof COMPONENT_SHADOW_DEFAULTS): Record<string, any>;

package/lib/core/utils/spacing.d.ts

@@ -0,0 +1,56 @@
+import { SpacingValue } from '../theme/types';
+import { UniversalSystemProps } from './universal';
+/** Re-export SpacingValue from theme types */
+export type { SpacingValue } from '../theme/types';
+/** Base system props that include universal props */
+export interface BaseSystemProps extends UniversalSystemProps {
+}
+/** Enhanced spacing prop types with CSS value support */
+export interface SpacingProps extends BaseSystemProps {
+    /** All margins */
+    m?: SpacingValue;
+    /** Horizontal margins (left + right) */
+    mx?: SpacingValue;
+    /** Vertical margins (top + bottom) */
+    my?: SpacingValue;
+    /** Margin top */
+    mt?: SpacingValue;
+    /** Margin right */
+    mr?: SpacingValue;
+    /** Margin bottom */
+    mb?: SpacingValue;
+    /** Margin left */
+    ml?: SpacingValue;
+    /** All padding */
+    p?: SpacingValue;
+    /** Horizontal padding (left + right) */
+    px?: SpacingValue;
+    /** Vertical padding (top + bottom) */
+    py?: SpacingValue;
+    /** Padding top */
+    pt?: SpacingValue;
+    /** Padding right */
+    pr?: SpacingValue;
+    /** Padding bottom */
+    pb?: SpacingValue;
+    /** Padding left */
+    pl?: SpacingValue;
+}
+/**
+ * Enhanced utility function to generate spacing styles from props
+ * Now supports RTL-aware spacing using logical properties on web and swapped values on native
+ *
+ * @param props - The spacing props to convert to styles
+ * @param isRTL - Whether the current direction is RTL (optional, defaults to false for backwards compatibility)
+ * @returns A record of CSS style properties
+ */
+export declare function getSpacingStyles(props: SpacingProps, isRTL?: boolean): Record<string, number | string | undefined>;
+/**
+ * Helper to extract spacing props from component props
+ * @param props - The component props to extract spacing props from
+ * @returns An object containing separated spacing props and other props
+ */
+export declare function extractSpacingProps<T extends SpacingProps>(props: T): {
+    spacingProps: SpacingProps;
+    otherProps: Omit<T, keyof SpacingProps>;
+};

package/lib/core/utils/universal.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Universal props system for Platform Blocks components
+ * Provides props that can be applied to all components in the library
+ * Optimized for React Native (Expo) with web compatibility
+ */
+import { ColorScheme } from '../theme/useColorScheme';
+export interface UniversalProps {
+    /** Determines whether component should be hidden in light color scheme */
+    lightHidden?: boolean;
+    /** Determines whether component should be hidden in dark color scheme */
+    darkHidden?: boolean;
+}
+export interface ResponsiveProps {
+    /** Hide component above this breakpoint */
+    hiddenFrom?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Show component only above this breakpoint */
+    visibleFrom?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export interface UniversalSystemProps extends UniversalProps, ResponsiveProps {
+}
+/**
+ * Generates CSS class names based on universal props
+ */
+export declare function getUniversalClasses(props: UniversalSystemProps): string[];
+/**
+ * Extracts universal props from component props
+ */
+export declare function extractUniversalProps<T extends UniversalSystemProps>(props: T): {
+    universalProps: UniversalSystemProps;
+    otherProps: Omit<T, keyof UniversalSystemProps>;
+};
+/**
+ * Determines if a component should be hidden based on responsive breakpoints
+ */
+export declare function shouldHideForBreakpoint(universalProps: ResponsiveProps): boolean;
+/**
+ * Determines if a component should be hidden based on current color scheme
+ * This is the primary method for React Native
+ */
+export declare function shouldHideComponent(universalProps: UniversalSystemProps, colorScheme: ColorScheme): boolean;
+/**
+ * Hook to get universal styles for React Native components
+ * Returns style objects instead of classes
+ */
+export declare function useUniversalStyles(universalProps: UniversalSystemProps, colorScheme: ColorScheme): {
+    display?: 'none' | 'flex';
+};

package/lib/core/utils/universalSimple.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Simple universal props system optimized for React Native (Expo)
+ * Provides lightHidden/darkHidden functionality with React Native compatibility
+ */
+export type ColorScheme = 'light' | 'dark';
+export interface UniversalProps {
+    /** Hide component in light color scheme */
+    lightHidden?: boolean;
+    /** Hide component in dark color scheme */
+    darkHidden?: boolean;
+}
+export interface ResponsiveProps {
+    /** Hide component above this screen width (pixels) */
+    hiddenFrom?: number;
+    /** Show component only above this screen width (pixels) */
+    visibleFrom?: number;
+}
+export interface UniversalSystemProps extends UniversalProps, ResponsiveProps {
+}
+/**
+ * Determines if component should be hidden based on universal props
+ * Primary function for React Native - returns true if component should not render
+ */
+export declare function shouldHideComponent(props: UniversalSystemProps, colorScheme: ColorScheme): boolean;
+/**
+ * Simple hook to check if component should render
+ */
+export declare function useUniversalProps(props: UniversalSystemProps, colorScheme: ColorScheme): {
+    shouldRender: boolean;
+};
+/**
+ * Extract universal props from component props
+ */
+export declare function extractUniversalProps<T extends UniversalSystemProps>(props: T): {
+    universalProps: UniversalSystemProps;
+    componentProps: Omit<T, keyof UniversalSystemProps>;
+};