@umituz/react-native-design-system 4.25.99 → 4.25.101

package/dist/organisms/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @umituz/react-native-design-system-organisms - Public API
+ *
+ * Organism design components for React Native - Complex UI patterns
+ * Built from atoms and molecules following atomic design principles
+ *
+ * Usage:
+ * ```typescript
+ * import { ScreenLayout, AppHeader, FormContainer } from '@umituz/react-native-design-system-organisms';
+ * ```
+ */
+export { FormContainer } from './FormContainer';
+export type { FormContainerProps } from './FormContainer';
+import type { FormContainerProps } from './FormContainer';
+export type OrganismComponentProps = {
+    type: 'FormContainer';
+    props: FormContainerProps;
+};

package/dist/presentation/utils/variants/core.d.ts

@@ -0,0 +1,13 @@
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+export type Style = ViewStyle | TextStyle | ImageStyle;
+export interface VariantConfig<T extends Record<string, Record<string, Style>>> {
+    base?: Style;
+    variants?: T;
+    defaultVariants?: Partial<{
+        [K in keyof T]: keyof T[K];
+    }>;
+}
+export type VariantProps<T extends Record<string, Record<string, Style>>> = {
+    [K in keyof T]?: keyof T[K];
+};
+export declare function createVariants<T extends Record<string, Record<string, Style>>>(config: VariantConfig<T>): (props?: VariantProps<T>) => Style;

package/dist/presentation/utils/variants/helpers.d.ts

@@ -0,0 +1,4 @@
+import { Style } from './core';
+export declare function combineStyles<T extends Style>(...styles: (T | undefined | null | false)[]): T;
+export declare function conditionalStyle<T extends Style>(condition: boolean, trueStyle: T, falseStyle?: T): T | undefined;
+export declare function responsiveStyle<T extends Style>(small: T, medium?: T, large?: T): T;

package/dist/presentation/utils/variants/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Variant utilities for style management
+ */
+export * from './core';
+export * from './helpers';

package/dist/responsive/compute/computeDeviceInfo.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Device Info Computation
+ */
+import type { DeviceType } from '../../device/detection';
+export interface ComputedDeviceInfo {
+    readonly isSmallDevice: boolean;
+    readonly isTabletDevice: boolean;
+    readonly isLandscapeDevice: boolean;
+    readonly deviceType: DeviceType;
+    readonly spacingMultiplier: number;
+}
+export declare const computeDeviceInfo: (dimensions?: {
+    width: number;
+    height: number;
+}) => ComputedDeviceInfo;

package/dist/responsive/compute/computeResponsivePositioning.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Responsive Positioning Computation
+ */
+import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout, ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsive';
+export interface ComputedResponsivePositioning {
+    readonly horizontalPadding: number;
+    readonly verticalPadding: number;
+    readonly bottomPosition: number;
+    readonly fabPosition: {
+        readonly bottom: number;
+        readonly right: number;
+    };
+    readonly screenLayoutConfig: ScreenLayoutConfig;
+    readonly tabBarConfig: ResponsiveTabBarConfig;
+    readonly modalLayout: ResponsiveModalLayout;
+    readonly bottomSheetLayout: ResponsiveBottomSheetLayout;
+    readonly dialogLayout: ResponsiveDialogLayout;
+}
+export declare const computeResponsivePositioning: (insets: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}, dimensions?: {
+    width: number;
+    height: number;
+}) => ComputedResponsivePositioning;

package/dist/responsive/compute/computeResponsiveSizes.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Responsive Sizes Computation
+ */
+import type { ComputedDeviceInfo } from './computeDeviceInfo';
+export interface ComputedResponsiveSizes {
+    readonly logoSize: number;
+    readonly inputHeight: number;
+    readonly iconContainerSize: number;
+    readonly maxContentWidth: number;
+    readonly minTouchTarget: number;
+    readonly modalMaxHeight: string;
+    readonly modalMinHeight: number;
+    readonly gridColumns: number;
+}
+export declare const computeResponsiveSizes: (dimensions?: {
+    width: number;
+    height: number;
+}) => ComputedResponsiveSizes;
+export declare const computeOnboardingSizes: (deviceInfo: ComputedDeviceInfo) => {
+    onboardingIconSize: number;
+    onboardingIconMarginTop: number;
+    onboardingIconMarginBottom: number;
+    onboardingTitleMarginBottom: number;
+    onboardingDescriptionMarginTop: number;
+    onboardingTextPadding: number;
+};

package/dist/responsive/config.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Responsive Design Configuration
+ *
+ * Centralized configuration for responsive design system.
+ * All magic numbers and breakpoints are defined here for maintainability.
+ */
+/**
+ * Device breakpoints based on standard device sizes
+ * These values determine when responsive behaviors change
+ */
+export declare const DEVICE_BREAKPOINTS: {
+    readonly SMALL_PHONE: 375;
+    readonly MEDIUM_PHONE: 414;
+    readonly LARGE_PHONE: 500;
+    readonly SMALL_TABLET: 768;
+    readonly TABLET: 1024;
+};
+/**
+ * Responsive sizing percentages
+ * These percentages control how elements scale relative to screen dimensions
+ */
+export declare const RESPONSIVE_PERCENTAGES: {
+    readonly LOGO_SMALL_PHONE_MAX: 0.28;
+    readonly LOGO_TABLET_MAX: 0.15;
+    readonly ICON_CONTAINER_SMALL_PHONE: 0.3;
+    readonly ICON_CONTAINER_TABLET: 0.2;
+    readonly CONTENT_SMALL_PHONE: 0.9;
+    readonly CONTENT_PHONE: 0.85;
+    readonly CONTENT_TABLET: 0.6;
+    readonly INPUT_SMALL_DEVICE: 0.15;
+    readonly INPUT_MEDIUM_DEVICE: 0.18;
+    readonly FONT_SMALL_PHONE: 0.9;
+    readonly FONT_TABLET: 1.1;
+};
+/**
+ * Size constraints and limits
+ * These values define minimum and maximum sizes for responsive elements
+ */
+export declare const SIZE_CONSTRAINTS: {
+    readonly LOGO_MIN_SMALL: 100;
+    readonly LOGO_MAX_SMALL: 120;
+    readonly LOGO_MIN_TABLET: 140;
+    readonly LOGO_MAX_TABLET: 200;
+    readonly INPUT_MAX_SMALL: 120;
+    readonly INPUT_MAX_MEDIUM: 150;
+    readonly INPUT_MAX_LARGE: 200;
+    readonly ICON_MAX_SMALL: 120;
+    readonly ICON_MAX_TABLET: 180;
+    readonly CONTENT_MAX_TABLET: 600;
+    readonly MODAL_MIN_SMALL: 250;
+    readonly MODAL_MIN_STANDARD: 300;
+    readonly MODAL_MIN_TABLET: 350;
+    readonly MODAL_MAX_TABLET: 500;
+    readonly FONT_MIN_SIZE: 11;
+};
+/**
+ * Modal layout configuration
+ * Responsive values for modal/overlay components
+ */
+export declare const MODAL_CONFIG: {
+    readonly WIDTH_PERCENT_PHONE: 0.92;
+    readonly WIDTH_PERCENT_TABLET: 0.75;
+    readonly HEIGHT_PERCENT_SMALL: 0.75;
+    readonly HEIGHT_PERCENT_STANDARD: 0.78;
+    readonly HEIGHT_PERCENT_TABLET: 0.7;
+    readonly MIN_HEIGHT_PERCENT_SMALL: 0.4;
+    readonly MIN_HEIGHT_PERCENT_STANDARD: 0.45;
+    readonly MIN_HEIGHT_PERCENT_TABLET: 0.35;
+    readonly MAX_WIDTH_PHONE: 480;
+    readonly MAX_WIDTH_TABLET: 600;
+    readonly BORDER_RADIUS_PHONE: 32;
+    readonly BORDER_RADIUS_TABLET: 24;
+    readonly BACKDROP_OPACITY_DEFAULT: 0.85;
+    readonly BOTTOM_SHEET_MIN_HEIGHT: 400;
+    readonly BOTTOM_SHEET_MAX_HEIGHT_PERCENT: 0.9;
+    readonly DIALOG_WIDTH_PERCENT: 0.94;
+    readonly DIALOG_MAX_WIDTH: 500;
+    readonly DIALOG_MAX_HEIGHT_PERCENT: 0.85;
+};
+/**
+ * Layout spacing and positioning
+ * These values control spacing, padding, and positioning
+ */
+export declare const LAYOUT_CONSTANTS: {
+    readonly SPACING_MULTIPLIER_SMALL: 0.9;
+    readonly SPACING_MULTIPLIER_TABLET: 1.2;
+    readonly SPACING_MULTIPLIER_STANDARD: 1;
+    readonly HORIZONTAL_PADDING_BASE: 16;
+    readonly VERTICAL_PADDING_SMALL: 12;
+    readonly VERTICAL_PADDING_STANDARD: 16;
+    readonly VERTICAL_PADDING_TABLET: 24;
+    readonly BOTTOM_POSITION_BASE: 32;
+    readonly SAFE_AREA_OFFSET: 16;
+    readonly TAB_BAR_OFFSET: 90;
+    readonly FAB_BOTTOM_TABLET: 100;
+    readonly FAB_RIGHT_TABLET: 24;
+    readonly FAB_RIGHT_PHONE: 20;
+    readonly MODAL_HEIGHT_SMALL: "75%";
+    readonly MODAL_HEIGHT_STANDARD: "70%";
+    readonly MODAL_HEIGHT_TABLET: "60%";
+};
+/**
+ * Device height thresholds
+ * These values determine responsive behavior based on screen height
+ */
+export declare const HEIGHT_THRESHOLDS: {
+    readonly SMALL_DEVICE: 667;
+    readonly MEDIUM_DEVICE: 844;
+    readonly LARGE_DEVICE: 1024;
+};
+/**
+ * Grid layout configuration
+ * Controls responsive grid behavior
+ */
+export declare const GRID_CONFIG: {
+    readonly DEFAULT_MOBILE_COLUMNS: 2;
+    readonly DEFAULT_TABLET_COLUMNS: 4;
+};
+/**
+ * Input validation constraints
+ * Defines valid ranges for input parameters
+ */
+export declare const VALIDATION_CONSTRAINTS: {
+    readonly MIN_BASE_SIZE: 0;
+    readonly MAX_BASE_SIZE: 1000;
+    readonly MIN_BASE_FONT_SIZE: 1;
+    readonly MAX_BASE_FONT_SIZE: 1000;
+    readonly MIN_SCREEN_DIMENSION: 100;
+    readonly MAX_SCREEN_DIMENSION: 5000;
+};

package/dist/responsive/gridUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Grid Utilities
+ * Responsive grid sizing and column calculations
+ */
+/**
+ * Responsive grid columns
+ * Returns number of columns for grid layouts
+ *
+ * @param mobileColumns - Number of columns for mobile devices (default: 2)
+ * @param tabletColumns - Number of columns for tablet devices (default: 4)
+ * @returns Responsive number of grid columns
+ */
+export declare const getResponsiveGridColumns: (mobileColumns?: number, tabletColumns?: number) => number;
+export interface GridCellSizeConfig {
+    columns: number;
+    rows: number;
+    horizontalPadding?: number;
+    verticalPadding?: number;
+    gap?: number;
+    headerHeight?: number;
+    tabBarHeight?: number;
+    statusBarHeight?: number;
+}
+/**
+ * Responsive grid cell size
+ * Calculates optimal square cell size for a grid that fills available space
+ *
+ * @param config - Grid configuration
+ * @param dimensions - Optional dimensions override
+ * @returns Responsive cell size (width = height for square cells)
+ */
+export declare const getResponsiveGridCellSize: (config: GridCellSizeConfig, dimensions?: {
+    width: number;
+    height: number;
+}) => number;

package/dist/responsive/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @umituz/react-native-design-system/responsive - Public API
+ *
+ * Responsive sizing and layout utilities for React Native.
+ * For device detection, use '@umituz/react-native-design-system/device'.
+ */
+export { useResponsive } from './useResponsive';
+export type { UseResponsiveReturn } from './useResponsive';
+export { getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveVerticalPadding, getScreenLayoutConfig, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveTabBarHeight, getResponsiveTabBarConfig, type ResponsiveTabBarConfig, type ScreenLayoutConfig, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveModalWidth, getResponsiveModalHeight, getResponsiveModalBorderRadius, getResponsiveModalMaxWidth, getResponsiveBackdropOpacity, getResponsiveModalLayout, getResponsiveBottomSheetLayout, getResponsiveDialogLayout, type ResponsiveModalLayout, type ResponsiveBottomSheetLayout, type ResponsiveDialogLayout, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveGridCellSize, type GridCellSizeConfig, getResponsiveMaxWidth, getResponsiveFontSize, MODAL_CONFIG, } from './responsive';
+export { IOS_HIG, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, } from './platformConstants';
+export { DEVICE_BREAKPOINTS } from './config';
+export { useScreenWidth, useScreenHeight, useScreenDimensions, } from './useScreenDimensions';

package/dist/responsive/padding/paddingUtils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Padding Utilities
+ */
+export declare const getResponsiveVerticalPadding: (insets?: {
+    top?: number;
+    bottom?: number;
+}) => number;
+export declare const getResponsiveHorizontalPadding: (basePadding?: number, insets?: {
+    left?: number;
+    right?: number;
+}) => number;

package/dist/responsive/platformConstants.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Platform-Specific Constants
+ *
+ * Design system constants that ensure compliance with platform guidelines.
+ * These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
+ */
+/**
+ * iOS Human Interface Guidelines (HIG) Constants
+ *
+ * @see https://developer.apple.com/design/human-interface-guidelines/layout
+ */
+export declare const IOS_HIG: {
+    /**
+     * Minimum Touch Target Size
+     *
+     * Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
+     * This is enforced during App Store review.
+     *
+     * @critical Violating this can result in App Store rejection
+     */
+    readonly MIN_TOUCH_TARGET: 44;
+    /**
+     * Recommended Minimum Touch Target Size
+     *
+     * For better accessibility and usability, Apple recommends 48pt x 48pt.
+     */
+    readonly RECOMMENDED_TOUCH_TARGET: 48;
+    /**
+     * Minimum Text Size
+     *
+     * Minimum font size for body text to ensure readability.
+     */
+    readonly MIN_TEXT_SIZE: 17;
+};
+/**
+ * Universal Platform Constants
+ *
+ * These values work across both iOS and Android, taking the more restrictive requirement.
+ */
+export declare const PLATFORM_CONSTANTS: {
+    /**
+     * Minimum Touch Target Size
+     *
+     * Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
+     * This ensures compliance on both platforms.
+     */
+    readonly MIN_TOUCH_TARGET: number;
+    /**
+     * Recommended Touch Target Size
+     *
+     * Uses the higher value between iOS and Android recommendations.
+     */
+    readonly RECOMMENDED_TOUCH_TARGET: 48;
+    /**
+     * Minimum Text Size
+     *
+     * Uses iOS requirement as it's larger.
+     */
+    readonly MIN_TEXT_SIZE: number;
+};
+/**
+ * Helper function to validate touch target size
+ *
+ * @param size - The size to validate (in pt/dp)
+ * @returns true if size meets platform requirements
+ */
+export declare const isValidTouchTarget: (size: number) => boolean;
+/**
+ * Helper function to get minimum touch target for component
+ *
+ * @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
+ * @returns The minimum touch target size for that component type
+ */
+export declare const getMinTouchTarget: (componentType?: "button" | "input" | "icon" | "generic") => number;

package/dist/responsive/positioning/positioningUtils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Positioning Utilities
+ */
+export declare const getResponsiveBottomPosition: (basePosition?: number, insets?: {
+    bottom?: number;
+}) => number;
+export declare const getResponsiveFABPosition: (insets?: {
+    bottom?: number;
+    right?: number;
+}) => {
+    bottom: number;
+    right: number;
+};

package/dist/responsive/responsive.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Responsive Design Utilities
+ *
+ * Centralized responsive sizing and spacing utilities.
+ */
+export { getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveIconContainerSize, getResponsiveMaxWidth, getResponsiveFontSize, getResponsiveGridColumns, getResponsiveGridCellSize, type GridCellSizeConfig, } from './responsiveSizing';
+export { getResponsiveHorizontalPadding, getResponsiveVerticalPadding, getScreenLayoutConfig, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveTabBarHeight, getResponsiveTabBarConfig, type ResponsiveTabBarConfig, type ScreenLayoutConfig, } from './responsiveLayout';
+export { getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveModalWidth, getResponsiveModalHeight, getResponsiveModalBorderRadius, getResponsiveModalMaxWidth, getResponsiveBackdropOpacity, getResponsiveModalLayout, getResponsiveBottomSheetLayout, getResponsiveDialogLayout, type ResponsiveModalLayout, type ResponsiveBottomSheetLayout, type ResponsiveDialogLayout, } from './responsiveModal';
+export { DEVICE_BREAKPOINTS, RESPONSIVE_PERCENTAGES, SIZE_CONSTRAINTS, LAYOUT_CONSTANTS, HEIGHT_THRESHOLDS, GRID_CONFIG, VALIDATION_CONSTRAINTS, MODAL_CONFIG, } from './config';

package/dist/responsive/responsiveLayout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Responsive Layout Utilities - Barrel Export
+ */
+export { getScreenLayoutConfig } from './screen/screenLayoutConfig';
+export type { ScreenLayoutConfig } from './screen/screenLayoutConfig';
+export { getResponsiveVerticalPadding, getResponsiveHorizontalPadding } from './padding/paddingUtils';
+export { getResponsiveBottomPosition, getResponsiveFABPosition } from './positioning/positioningUtils';
+export { getResponsiveTabBarHeight, getResponsiveTabBarConfig } from './tabbar/tabBarConfig';
+export type { ResponsiveTabBarConfig } from './tabbar/tabBarConfig';

package/dist/responsive/responsiveModal.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Responsive Modal Utilities
+ * Modal, bottom sheet, and dialog layout utilities.
+ */
+export interface ResponsiveModalLayout {
+    width: number;
+    height: number;
+    maxWidth: number;
+    borderRadius: number;
+    backdropOpacity: number;
+    horizontalPadding: number;
+}
+export interface ResponsiveBottomSheetLayout {
+    minHeight: number;
+    maxHeight: number;
+    borderRadius: number;
+}
+export interface ResponsiveDialogLayout {
+    width: number;
+    maxHeight: number;
+    borderRadius: number;
+}
+export declare const getResponsiveModalMaxHeight: (dimensions?: {
+    height: number;
+}) => string;
+export declare const getResponsiveMinModalHeight: (dimensions?: {
+    height: number;
+}) => number;
+export declare const getResponsiveModalWidth: (dimensions?: {
+    width: number;
+}) => number;
+export declare const getResponsiveModalHeight: (dimensions?: {
+    height: number;
+}) => number;
+export declare const getResponsiveModalBorderRadius: () => number;
+export declare const getResponsiveModalMaxWidth: () => number;
+export declare const getResponsiveBackdropOpacity: () => number;
+export declare const getResponsiveModalLayout: (dimensions?: {
+    width: number;
+    height: number;
+}) => ResponsiveModalLayout;
+export declare const getResponsiveBottomSheetLayout: (dimensions?: {
+    width: number;
+    height: number;
+}) => ResponsiveBottomSheetLayout;
+export declare const getResponsiveDialogLayout: (dimensions?: {
+    width: number;
+    height: number;
+}) => ResponsiveDialogLayout;

package/dist/responsive/responsiveSizing.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Responsive Sizing Utilities
+ * Responsive sizing utilities for UI components.
+ */
+export { getResponsiveGridColumns, getResponsiveGridCellSize, type GridCellSizeConfig, } from './gridUtils';
+/**
+ * Responsive logo/icon size
+ * @param baseSize - Base logo size (default: 140)
+ */
+/**
+ * Responsive logo/icon size
+ * @param baseSize - Base logo size (default: 140)
+ * @param dimensions - Optional dimensions override
+ */
+export declare const getResponsiveLogoSize: (baseSize?: number, dimensions?: {
+    width: number;
+}) => number;
+/**
+ * Responsive multiline input height
+ * @param baseHeight - Base input height (default: 200)
+ * @param dimensions - Optional dimensions override
+ */
+export declare const getResponsiveInputHeight: (baseHeight?: number, dimensions?: {
+    height: number;
+}) => number;
+/**
+ * Responsive icon container size
+ * @param baseSize - Base container size (default: 140)
+ * @param dimensions - Optional dimensions override
+ */
+export declare const getResponsiveIconContainerSize: (baseSize?: number, dimensions?: {
+    width: number;
+}) => number;
+/**
+ * Responsive max width for content
+ * @param baseWidth - Base content width (default: 400)
+ * @param dimensions - Optional dimensions override
+ */
+export declare const getResponsiveMaxWidth: (baseWidth?: number, dimensions?: {
+    width: number;
+}) => number;
+/**
+ * Responsive font size
+ * @param baseFontSize - Base font size
+ * @param dimensions - Optional dimensions override
+ */
+export declare const getResponsiveFontSize: (baseFontSize: number, dimensions?: {
+    width: number;
+}) => number;

package/dist/responsive/screen/screenLayoutConfig.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Screen Layout Configuration
+ */
+export interface ScreenLayoutConfig {
+    readonly maxContentWidth: number | undefined;
+    readonly horizontalPadding: number;
+    readonly verticalPadding: number;
+    readonly spacingMultiplier: number;
+}
+export declare const getScreenLayoutConfig: (insets?: {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+}) => ScreenLayoutConfig;

package/dist/responsive/tabbar/tabBarConfig.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Tab Bar Configuration
+ */
+export interface ResponsiveTabBarConfig {
+    readonly height: number;
+    readonly paddingBottom: number;
+    readonly paddingTop: number;
+    readonly iconSize: number;
+    readonly fabSize: number;
+    readonly fabOffsetY: number;
+}
+export declare const getResponsiveTabBarHeight: (insets?: {
+    bottom?: number;
+}) => number;
+export declare const getResponsiveTabBarConfig: (insets?: {
+    bottom?: number;
+}) => ResponsiveTabBarConfig;

package/dist/responsive/types/responsiveTypes.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Responsive Hook Type Definitions
+ */
+import type { DeviceType, IPadLayoutInfo } from '../../device/detection';
+import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout } from '../responsive';
+import type { ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsiveLayout';
+export interface UseResponsiveReturn {
+    readonly width: number;
+    readonly height: number;
+    readonly isSmallDevice: boolean;
+    readonly isTabletDevice: boolean;
+    readonly isLandscapeDevice: boolean;
+    readonly deviceType: DeviceType;
+    readonly insets: {
+        readonly top: number;
+        readonly bottom: number;
+        readonly left: number;
+        readonly right: number;
+    };
+    readonly iPadLayout: IPadLayoutInfo | null;
+    readonly logoSize: number;
+    readonly inputHeight: number;
+    readonly iconContainerSize: number;
+    readonly maxContentWidth: number;
+    readonly minTouchTarget: number;
+    readonly horizontalPadding: number;
+    readonly verticalPadding: number;
+    readonly bottomPosition: number;
+    readonly fabPosition: {
+        readonly bottom: number;
+        readonly right: number;
+    };
+    readonly screenLayoutConfig: ScreenLayoutConfig;
+    readonly modalMaxHeight: string;
+    readonly modalMinHeight: number;
+    readonly gridColumns: number;
+    readonly spacingMultiplier: number;
+    readonly tabBarConfig: ResponsiveTabBarConfig;
+    readonly modalLayout: ResponsiveModalLayout;
+    readonly bottomSheetLayout: ResponsiveBottomSheetLayout;
+    readonly dialogLayout: ResponsiveDialogLayout;
+    readonly onboardingIconSize: number;
+    readonly onboardingIconMarginTop: number;
+    readonly onboardingIconMarginBottom: number;
+    readonly onboardingTitleMarginBottom: number;
+    readonly onboardingDescriptionMarginTop: number;
+    readonly onboardingTextPadding: number;
+    readonly getLogoSize: (baseSize?: number) => number;
+    readonly getInputHeight: (baseHeight?: number) => number;
+    readonly getIconSize: (baseSize?: number) => number;
+    readonly getMaxWidth: (baseWidth?: number) => number;
+    readonly getFontSize: (baseFontSize: number) => number;
+    readonly getGridCols: (mobile?: number, tablet?: number) => number;
+}

package/dist/responsive/useResponsive.d.ts

@@ -0,0 +1,7 @@
+/**
+ * useResponsive Hook
+ * Refactored: Extracted compute functions
+ */
+import type { UseResponsiveReturn } from "./types/responsiveTypes";
+export declare const useResponsive: () => UseResponsiveReturn;
+export type { UseResponsiveReturn } from './types/responsiveTypes';

package/dist/responsive/useScreenDimensions.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Screen dimension hooks — single source of truth for screen width/height.
+ *
+ * Always import from here instead of calling useWindowDimensions() inline
+ * or Dimensions.get() at module level (which is static and never updates on
+ * orientation change, iPad Split View, or Stage Manager).
+ */
+/**
+ * Returns the current window width (reactive — updates on orientation change).
+ * Use inside React components / hooks instead of Dimensions.get("window").width.
+ */
+export declare function useScreenWidth(): number;
+/**
+ * Returns the current window height (reactive — updates on orientation change).
+ * Use inside React components / hooks instead of Dimensions.get("window").height.
+ */
+export declare function useScreenHeight(): number;
+/**
+ * Returns both width and height (reactive).
+ * Convenience wrapper for components that need both dimensions.
+ */
+export declare function useScreenDimensions(): {
+    width: number;
+    height: number;
+};