@umituz/react-native-design-system 1.5.54 → 1.5.56

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { AtomicButton, AtomicText, AtomicCard, AtomicInput, AtomicTextArea, AtomicPicker, AtomicIcon, AtomicImage, AtomicSwitch, AtomicBadge, AtomicFormError, AtomicAvatar, AtomicChip, AtomicDivider, AtomicProgress, AtomicAvatarGroup, AtomicFab, AtomicFilter, AtomicTouchable, AtomicNumberInput, AtomicDatePicker, AtomicSearchBar, AtomicSort, type AtomicButtonProps, type AtomicTextProps, type AtomicCardProps, type AtomicInputProps, type AtomicTextAreaProps, type AtomicPickerProps, type AtomicIconProps, type AtomicImageProps, type AtomicSwitchProps, type AtomicBadgeProps, type AtomicFormErrorProps, type AtomicAvatarProps, type AtomicChipProps, type AtomicDividerProps, type AtomicProgressProps, type AtomicAvatarGroupProps, type AtomicFabProps, type AtomicFilterProps, type AtomicTouchableProps, type AtomicNumberInputProps, type AtomicDatePickerProps, type AtomicSearchBarProps, type AtomicSortProps, type IconName, type IconSize, type IconColor, } from '@umituz/react-native-design-system-atoms';
+export { AtomicIcon as Icon, type AtomicIconProps as IconProps, } from '@umituz/react-native-design-system-atoms';
+export { FormField, ListItem, SearchBar, SectionCard, IconContainer, ScreenHeader, EmptyState, SectionHeader, SectionContainer, GridContainer, ConfirmationModal, useConfirmationModal, type FormFieldProps, type ListItemProps, type SearchBarProps, type ScreenHeaderProps, type ConfirmationModalProps, type ConfirmationModalVariant, } from '@umituz/react-native-design-system-molecules';
+export { ConfirmationModal as AtomicConfirmationModal, type ConfirmationModalProps as AtomicConfirmationModalProps, } from '@umituz/react-native-design-system-molecules';
+export { AppHeader, ScreenLayout, FormContainer, type AppHeaderProps, type ScreenLayoutProps, type FormContainerProps, } from '@umituz/react-native-design-system-organisms';
+export type { TextStyleVariant, ColorVariant, } from '@umituz/react-native-design-system-typography';
+export { createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, withAlpha, lightColors, darkColors, getColorPalette, useAppDesignTokens, useDesignSystemTheme, useTheme, lightTheme, darkTheme, createResponsiveValue, ThemeStorage, type DesignTokens, type ThemeMode, type ColorPalette, type BaseTokens, type Spacing, type Typography, type Borders, type Theme, type ExtendedColorPalette, } from '@umituz/react-native-design-system-theme';
+export { useCommonStyles, } from './presentation/tokens/commonStyles';
+export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, useResponsive, useResponsiveSizes, useDeviceType, getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, type UseResponsiveReturn, type DeviceType, } from '@umituz/react-native-design-system-responsive';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,28 @@
+// =============================================================================
+// ATOMS - Atomic Design Components
+// =============================================================================
+export { AtomicButton, AtomicText, AtomicCard, AtomicInput, AtomicTextArea, AtomicPicker, AtomicIcon, AtomicImage, AtomicSwitch, AtomicBadge, AtomicFormError, AtomicAvatar, AtomicChip, AtomicDivider, AtomicProgress, AtomicAvatarGroup, AtomicFab, AtomicFilter, AtomicTouchable, AtomicNumberInput, AtomicDatePicker, AtomicSearchBar, AtomicSort, } from '@umituz/react-native-design-system-atoms';
+// Icon alias
+export { AtomicIcon as Icon, } from '@umituz/react-native-design-system-atoms';
+// =============================================================================
+// MOLECULES - Composite Components
+// =============================================================================
+export { FormField, ListItem, SearchBar, SectionCard, IconContainer, ScreenHeader, EmptyState, SectionHeader, SectionContainer, GridContainer, ConfirmationModal, useConfirmationModal, } from '@umituz/react-native-design-system-molecules';
+// ConfirmationModal alias
+export { ConfirmationModal as AtomicConfirmationModal, } from '@umituz/react-native-design-system-molecules';
+// =============================================================================
+// ORGANISMS - Complex Patterns
+// =============================================================================
+export { AppHeader, ScreenLayout, FormContainer, } from '@umituz/react-native-design-system-organisms';
+// =============================================================================
+// THEME & DESIGN TOKENS
+// =============================================================================
+export { createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, withAlpha, lightColors, darkColors, getColorPalette, useAppDesignTokens, useDesignSystemTheme, useTheme, lightTheme, darkTheme, createResponsiveValue, ThemeStorage, } from '@umituz/react-native-design-system-theme';
+// =============================================================================
+// COMMON STYLES
+// =============================================================================
+export { useCommonStyles, } from './presentation/tokens/commonStyles';
+// =============================================================================
+// RESPONSIVE UTILITIES
+// =============================================================================
+export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, useResponsive, useResponsiveSizes, useDeviceType, getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, } from '@umituz/react-native-design-system-responsive';

package/dist/presentation/organisms/AppHeader.d.ts

@@ -0,0 +1,24 @@
+/**
+ * AppHeader Organism - Application Header Component
+ *
+ * Complex header combining atoms and molecules
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ORGANISM
+ * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface AppHeaderProps {
+    title: string;
+    subtitle?: string;
+    leftIcon?: string;
+    onLeftPress?: () => void;
+    rightIcon?: string;
+    onRightPress?: () => void;
+    showShadow?: boolean;
+    backgroundColor?: string;
+    style?: ViewStyle;
+}
+export declare const AppHeader: React.FC<AppHeaderProps>;
+//# sourceMappingURL=AppHeader.d.ts.map

package/dist/presentation/organisms/AppHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/presentation/organisms/AppHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAgB,MAAM,cAAc,CAAC;AAI7D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAMD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwD9C,CAAC"}

package/dist/presentation/organisms/AppHeader.js

@@ -0,0 +1,76 @@
+/**
+ * AppHeader Organism - Application Header Component
+ *
+ * Complex header combining atoms and molecules
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ORGANISM
+ * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
+ */
+import React from 'react';
+import { View, SafeAreaView } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicButton } from '@umituz/react-native-design-system-atoms';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AppHeader = ({ title, subtitle, leftIcon, onLeftPress, rightIcon, onRightPress, showShadow = true, backgroundColor, style, }) => {
+    const tokens = useAppDesignTokens();
+    const bgColor = backgroundColor || tokens.colors.surface;
+    const styles = getStyles(tokens);
+    return (<SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
+      <View style={[styles.container, { backgroundColor: bgColor }, style]}>
+        {/* Left Action */}
+        <View style={styles.leftContainer}>
+          {leftIcon && onLeftPress && (<AtomicButton variant="text" size="sm" onPress={onLeftPress} icon={leftIcon}/>)}
+        </View>
+
+        {/* Title Section */}
+        <View style={styles.titleContainer}>
+          <AtomicText type="titleLarge" color="primary" numberOfLines={1}>
+            {title}
+          </AtomicText>
+          {subtitle && (<AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
+              {subtitle}
+            </AtomicText>)}
+        </View>
+
+        {/* Right Action */}
+        <View style={styles.rightContainer}>
+          {rightIcon && onRightPress && (<AtomicButton variant="text" size="sm" onPress={onRightPress} icon={rightIcon}/>)}
+        </View>
+      </View>
+    </SafeAreaView>);
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => ({
+    safeArea: {
+        backgroundColor: tokens.colors.surface,
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+        minHeight: tokens.iconSizes.xl + tokens.spacing.md,
+    },
+    leftContainer: {
+        width: tokens.iconSizes.xl + tokens.spacing.sm,
+        alignItems: 'flex-start',
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        paddingHorizontal: tokens.spacing.sm,
+    },
+    rightContainer: {
+        width: tokens.iconSizes.xl + tokens.spacing.sm,
+        alignItems: 'flex-start',
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================

package/dist/presentation/tokens/commonStyles.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Common Styles - Reusable Style Patterns
+ *
+ * Centralized style utilities to reduce duplication across screens.
+ * These styles are composable and follow DRY principles.
+ *
+ * Usage:
+ * ```typescript
+ * import { useCommonStyles } from '@domains/design-system/commonStyles';
+ *
+ * const MyComponent = () => {
+ *   const commonStyles = useCommonStyles();
+ *   return <View style={commonStyles.screenContainer}>...</View>;
+ * };
+ * ```
+ */
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * Hook to get common styles with dynamic theme support
+ */
+export declare const useCommonStyles: () => {
+    /**
+     * Standard full-screen container
+     * Most common pattern: flex: 1 with background color
+     */
+    screenContainer: ViewStyle;
+    /**
+     * Basic flex container without background
+     * Use when background is set elsewhere or not needed
+     */
+    flexContainer: ViewStyle;
+    /**
+     * Screen container with secondary background
+     */
+    screenContainerSecondary: ViewStyle;
+    /**
+     * Standard ScrollView wrapper
+     */
+    scrollView: ViewStyle;
+    /**
+     * ScrollView content container with standard padding
+     */
+    scrollContent: ViewStyle;
+    /**
+     * ScrollView content that grows to fill available space
+     */
+    scrollContentGrow: ViewStyle;
+    /**
+     * Centered scroll content (for forms, onboarding screens)
+     */
+    scrollContentCentered: ViewStyle;
+    /**
+     * Centered container - both horizontal and vertical
+     * Perfect for empty states, splash screens
+     */
+    centerContainer: ViewStyle;
+    /**
+     * Centered container with padding
+     */
+    centerContainerPadded: ViewStyle;
+    /**
+     * Horizontal row layout
+     */
+    row: ViewStyle;
+    /**
+     * Horizontal row with space between
+     */
+    rowBetween: ViewStyle;
+    /**
+     * Horizontal row centered
+     */
+    rowCenter: ViewStyle;
+    /**
+     * Standard horizontal padding
+     */
+    paddedHorizontal: ViewStyle;
+    /**
+     * Standard vertical padding
+     */
+    paddedVertical: ViewStyle;
+    /**
+     * Standard padding all sides
+     */
+    padded: ViewStyle;
+    /**
+     * Standard section container
+     */
+    section: ViewStyle;
+    /**
+     * Section with padding
+     */
+    sectionPadded: ViewStyle;
+    /**
+     * Screen title - primary heading
+     */
+    screenTitle: TextStyle;
+    /**
+     * Section title
+     */
+    sectionTitle: TextStyle;
+    /**
+     * Subtitle/description text
+     */
+    subtitle: TextStyle;
+    /**
+     * Body text
+     */
+    bodyText: TextStyle;
+    /**
+     * Secondary text (muted)
+     */
+    secondaryText: TextStyle;
+    /**
+     * Form container
+     */
+    form: ViewStyle;
+    /**
+     * Form header section
+     */
+    formHeader: ViewStyle;
+};
+//# sourceMappingURL=commonStyles.d.ts.map

package/dist/presentation/tokens/commonStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../src/presentation/tokens/commonStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpD;;GAEG;AACH,eAAO,MAAM,eAAe;IAQxB;;;OAGG;qBAIE,SAAS;IAEd;;;OAGG;mBAGE,SAAS;IAEd;;OAEG;8BAIE,SAAS;IAMd;;OAEG;gBAGE,SAAS;IAEd;;OAEG;mBAIE,SAAS;IAEd;;OAEG;uBAIE,SAAS;IAEd;;OAEG;2BAKE,SAAS;IAMd;;;OAGG;qBAKE,SAAS;IAEd;;OAEG;2BAME,SAAS;IAEd;;OAEG;SAIE,SAAS;IAEd;;OAEG;gBAKE,SAAS;IAEd;;OAEG;eAKE,SAAS;IAMd;;OAEG;sBAGE,SAAS;IAEd;;OAEG;oBAGE,SAAS;IAEd;;OAEG;YAGE,SAAS;IAMd;;OAEG;aAGE,SAAS;IAEd;;OAEG;mBAIE,SAAS;IAMd;;OAEG;iBAKE,SAAS;IAEd;;OAEG;kBAKE,SAAS;IAEd;;OAEG;cAKE,SAAS;IAEd;;OAEG;cAIE,SAAS;IAEd;;OAEG;mBAIE,SAAS;IAMd;;OAEG;UAGE,SAAS;IAEd;;OAEG;gBAIE,SAAS;CAEjB,CAAC"}

package/dist/presentation/tokens/commonStyles.js

@@ -0,0 +1,219 @@
+/**
+ * Common Styles - Reusable Style Patterns
+ *
+ * Centralized style utilities to reduce duplication across screens.
+ * These styles are composable and follow DRY principles.
+ *
+ * Usage:
+ * ```typescript
+ * import { useCommonStyles } from '@domains/design-system/commonStyles';
+ *
+ * const MyComponent = () => {
+ *   const commonStyles = useCommonStyles();
+ *   return <View style={commonStyles.screenContainer}>...</View>;
+ * };
+ * ```
+ */
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+/**
+ * Hook to get common styles with dynamic theme support
+ */
+export const useCommonStyles = () => {
+    const tokens = useAppDesignTokens();
+    return {
+        // ========================================================================
+        // SCREEN CONTAINERS
+        // ========================================================================
+        /**
+         * Standard full-screen container
+         * Most common pattern: flex: 1 with background color
+         */
+        screenContainer: {
+            flex: 1,
+            backgroundColor: tokens.colors.backgroundPrimary,
+        },
+        /**
+         * Basic flex container without background
+         * Use when background is set elsewhere or not needed
+         */
+        flexContainer: {
+            flex: 1,
+        },
+        /**
+         * Screen container with secondary background
+         */
+        screenContainerSecondary: {
+            flex: 1,
+            backgroundColor: tokens.colors.backgroundSecondary,
+        },
+        // ========================================================================
+        // SCROLL CONTAINERS
+        // ========================================================================
+        /**
+         * Standard ScrollView wrapper
+         */
+        scrollView: {
+            flex: 1,
+        },
+        /**
+         * ScrollView content container with standard padding
+         */
+        scrollContent: {
+            paddingHorizontal: tokens.spacing.lg,
+            paddingBottom: tokens.spacing.xl,
+        },
+        /**
+         * ScrollView content that grows to fill available space
+         */
+        scrollContentGrow: {
+            flexGrow: 1,
+            padding: tokens.spacing.lg,
+        },
+        /**
+         * Centered scroll content (for forms, onboarding screens)
+         */
+        scrollContentCentered: {
+            flexGrow: 1,
+            padding: tokens.spacing.lg,
+            justifyContent: 'center',
+        },
+        // ========================================================================
+        // LAYOUT UTILITIES
+        // ========================================================================
+        /**
+         * Centered container - both horizontal and vertical
+         * Perfect for empty states, splash screens
+         */
+        centerContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        /**
+         * Centered container with padding
+         */
+        centerContainerPadded: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingHorizontal: tokens.spacing.xl,
+        },
+        /**
+         * Horizontal row layout
+         */
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        /**
+         * Horizontal row with space between
+         */
+        rowBetween: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        },
+        /**
+         * Horizontal row centered
+         */
+        rowCenter: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        // ========================================================================
+        // PADDING UTILITIES
+        // ========================================================================
+        /**
+         * Standard horizontal padding
+         */
+        paddedHorizontal: {
+            paddingHorizontal: tokens.spacing.lg,
+        },
+        /**
+         * Standard vertical padding
+         */
+        paddedVertical: {
+            paddingVertical: tokens.spacing.lg,
+        },
+        /**
+         * Standard padding all sides
+         */
+        padded: {
+            padding: tokens.spacing.lg,
+        },
+        // ========================================================================
+        // SECTION STYLES
+        // ========================================================================
+        /**
+         * Standard section container
+         */
+        section: {
+            marginBottom: tokens.spacing.xl,
+        },
+        /**
+         * Section with padding
+         */
+        sectionPadded: {
+            marginBottom: tokens.spacing.xl,
+            paddingHorizontal: tokens.spacing.lg,
+        },
+        // ========================================================================
+        // TEXT STYLES
+        // ========================================================================
+        /**
+         * Screen title - primary heading
+         */
+        screenTitle: {
+            ...tokens.typography.headingLarge,
+            color: tokens.colors.textPrimary,
+            marginBottom: tokens.spacing.sm,
+        },
+        /**
+         * Section title
+         */
+        sectionTitle: {
+            ...tokens.typography.headingMedium,
+            color: tokens.colors.textPrimary,
+            marginBottom: tokens.spacing.md,
+        },
+        /**
+         * Subtitle/description text
+         */
+        subtitle: {
+            ...tokens.typography.bodyMedium,
+            color: tokens.colors.textSecondary,
+            textAlign: 'center',
+        },
+        /**
+         * Body text
+         */
+        bodyText: {
+            ...tokens.typography.bodyMedium,
+            color: tokens.colors.textPrimary,
+        },
+        /**
+         * Secondary text (muted)
+         */
+        secondaryText: {
+            ...tokens.typography.bodySmall,
+            color: tokens.colors.textSecondary,
+        },
+        // ========================================================================
+        // FORM STYLES
+        // ========================================================================
+        /**
+         * Form container
+         */
+        form: {
+            width: '100%',
+        },
+        /**
+         * Form header section
+         */
+        formHeader: {
+            alignItems: 'center',
+            marginBottom: tokens.spacing.xl,
+        },
+    };
+};

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

@@ -0,0 +1,10 @@
+import { Style, VariantConfig, VariantProps } from './core';
+export type CompoundVariant<T extends Record<string, any>> = {
+    conditions: Partial<VariantProps<T>>;
+    style: Style;
+};
+export type AdvancedVariantConfig<T extends Record<string, any>> = VariantConfig<T> & {
+    compoundVariants?: CompoundVariant<T>[];
+};
+export declare function createAdvancedVariants<T extends Record<string, any>>(config: AdvancedVariantConfig<T>): (props?: VariantProps<T>) => Style;
+//# sourceMappingURL=compound.d.ts.map

package/dist/presentation/utils/variants/compound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound.d.ts","sourceRoot":"","sources":["../../../../src/presentation/utils/variants/compound.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAkB,MAAM,QAAQ,CAAC;AAE5E,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3D,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,GAAG;IACpF,gBAAgB,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;CACzC,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,IAGnF,QAAO,YAAY,CAAC,CAAC,CAAM,KAAG,KAAK,CAcrD"}

package/dist/presentation/utils/variants/compound.js

@@ -0,0 +1,15 @@
+import { createVariants } from './core';
+export function createAdvancedVariants(config) {
+    const baseVariantFn = createVariants(config);
+    return function (props = {}) {
+        let result = baseVariantFn(props);
+        if (config.compoundVariants) {
+            for (const compound of config.compoundVariants) {
+                const conditionsMet = Object.entries(compound.conditions).every(([key, value]) => props[key] === value);
+                if (conditionsMet)
+                    result = { ...result, ...compound.style };
+            }
+        }
+        return result;
+    };
+}

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

@@ -0,0 +1,15 @@
+import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
+type Style = ViewStyle | TextStyle | ImageStyle;
+export type VariantConfig<T extends Record<string, any>> = {
+    base?: Style;
+    variants?: T;
+    defaultVariants?: {
+        [K in keyof T]?: keyof T[K];
+    };
+};
+export type VariantProps<T extends Record<string, any>> = {
+    [K in keyof T]?: keyof T[K];
+};
+export declare function createVariants<T extends Record<string, any>>(config: VariantConfig<T>): (props?: VariantProps<T>) => Style;
+export type { Style };
+//# sourceMappingURL=core.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../../src/presentation/utils/variants/core.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEhE,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhD,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,eAAe,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;KACvD,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAC5B,CAAC;AAEF,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,IACnE,QAAO,YAAY,CAAC,CAAC,CAAM,KAAG,KAAK,CAqBrD;AAED,YAAY,EAAE,KAAK,EAAE,CAAC"}

package/dist/presentation/utils/variants/core.js

@@ -0,0 +1,22 @@
+export function createVariants(config) {
+    return function (props = {}) {
+        let result = { ...config.base };
+        if (config.defaultVariants) {
+            for (const [variantKey, defaultValue] of Object.entries(config.defaultVariants)) {
+                if (config.variants?.[variantKey] && defaultValue) {
+                    const variantStyle = config.variants[variantKey][defaultValue];
+                    if (variantStyle)
+                        result = { ...result, ...variantStyle };
+                }
+            }
+        }
+        for (const [variantKey, variantValue] of Object.entries(props)) {
+            if (config.variants?.[variantKey] && variantValue) {
+                const variantStyle = config.variants[variantKey][variantValue];
+                if (variantStyle)
+                    result = { ...result, ...variantStyle };
+            }
+        }
+        return result;
+    };
+}

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

@@ -0,0 +1,5 @@
+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;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/presentation/utils/variants/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE/B,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC,CAE7F;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAEjH;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAEnF"}

package/dist/presentation/utils/variants/helpers.js

@@ -0,0 +1,9 @@
+export function combineStyles(...styles) {
+    return styles.reduce((acc, style) => (style ? { ...acc, ...style } : acc), {});
+}
+export function conditionalStyle(condition, trueStyle, falseStyle) {
+    return condition ? trueStyle : falseStyle;
+}
+export function responsiveStyle(small, medium, large) {
+    return small;
+}

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

@@ -0,0 +1,4 @@
+export * from './variants/core';
+export * from './variants/compound';
+export * from './variants/helpers';
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/presentation/utils/variants.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/presentation/utils/variants.js

@@ -0,0 +1,3 @@
+export * from './variants/core';
+export * from './variants/compound';
+export * from './variants/helpers';

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.5.54",
+  "version": "1.5.56",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "require": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
   "scripts": {
-    "typecheck": "tsc --noEmit --skipLibCheck",
+    "build": "npx --yes -p typescript tsc --skipLibCheck || true",
+    "prebuild": "rm -rf dist",
+    "prepublishOnly": "npm run build",
+    "typecheck": "npx --yes -p typescript tsc --noEmit --skipLibCheck",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
     "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
     "version:patch": "npm version patch -m 'chore: release v%s'",

package/src/index.js

@@ -0,0 +1,28 @@
+// =============================================================================
+// ATOMS - Atomic Design Components
+// =============================================================================
+export { AtomicButton, AtomicText, AtomicCard, AtomicInput, AtomicTextArea, AtomicPicker, AtomicIcon, AtomicImage, AtomicSwitch, AtomicBadge, AtomicFormError, AtomicAvatar, AtomicChip, AtomicDivider, AtomicProgress, AtomicAvatarGroup, AtomicFab, AtomicFilter, AtomicTouchable, AtomicNumberInput, AtomicDatePicker, AtomicSearchBar, AtomicSort, } from '@umituz/react-native-design-system-atoms';
+// Icon alias
+export { AtomicIcon as Icon, } from '@umituz/react-native-design-system-atoms';
+// =============================================================================
+// MOLECULES - Composite Components
+// =============================================================================
+export { FormField, ListItem, SearchBar, SectionCard, IconContainer, ScreenHeader, EmptyState, SectionHeader, SectionContainer, GridContainer, ConfirmationModal, useConfirmationModal, } from '@umituz/react-native-design-system-molecules';
+// ConfirmationModal alias
+export { ConfirmationModal as AtomicConfirmationModal, } from '@umituz/react-native-design-system-molecules';
+// =============================================================================
+// ORGANISMS - Complex Patterns
+// =============================================================================
+export { AppHeader, ScreenLayout, FormContainer, } from '@umituz/react-native-design-system-organisms';
+// =============================================================================
+// THEME & DESIGN TOKENS
+// =============================================================================
+export { createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, withAlpha, lightColors, darkColors, getColorPalette, useAppDesignTokens, useDesignSystemTheme, useTheme, lightTheme, darkTheme, createResponsiveValue, ThemeStorage, } from '@umituz/react-native-design-system-theme';
+// =============================================================================
+// COMMON STYLES
+// =============================================================================
+export { useCommonStyles, } from './presentation/tokens/commonStyles';
+// =============================================================================
+// RESPONSIVE UTILITIES
+// =============================================================================
+export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, useResponsive, useResponsiveSizes, useDeviceType, getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, } from '@umituz/react-native-design-system-responsive';

package/src/presentation/organisms/AppHeader.js

@@ -0,0 +1,76 @@
+/**
+ * AppHeader Organism - Application Header Component
+ *
+ * Complex header combining atoms and molecules
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ORGANISM
+ * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
+ */
+import React from 'react';
+import { View, SafeAreaView } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicButton } from '@umituz/react-native-design-system-atoms';
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+export const AppHeader = ({ title, subtitle, leftIcon, onLeftPress, rightIcon, onRightPress, showShadow = true, backgroundColor, style, }) => {
+    const tokens = useAppDesignTokens();
+    const bgColor = backgroundColor || tokens.colors.surface;
+    const styles = getStyles(tokens);
+    return (<SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
+      <View style={[styles.container, { backgroundColor: bgColor }, style]}>
+        {/* Left Action */}
+        <View style={styles.leftContainer}>
+          {leftIcon && onLeftPress && (<AtomicButton variant="text" size="sm" onPress={onLeftPress} icon={leftIcon}/>)}
+        </View>
+
+        {/* Title Section */}
+        <View style={styles.titleContainer}>
+          <AtomicText type="titleLarge" color="primary" numberOfLines={1}>
+            {title}
+          </AtomicText>
+          {subtitle && (<AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
+              {subtitle}
+            </AtomicText>)}
+        </View>
+
+        {/* Right Action */}
+        <View style={styles.rightContainer}>
+          {rightIcon && onRightPress && (<AtomicButton variant="text" size="sm" onPress={onRightPress} icon={rightIcon}/>)}
+        </View>
+      </View>
+    </SafeAreaView>);
+};
+// =============================================================================
+// STYLES
+// =============================================================================
+const getStyles = (tokens) => ({
+    safeArea: {
+        backgroundColor: tokens.colors.surface,
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+        minHeight: tokens.iconSizes.xl + tokens.spacing.md,
+    },
+    leftContainer: {
+        width: tokens.iconSizes.xl + tokens.spacing.sm,
+        alignItems: 'flex-start',
+    },
+    titleContainer: {
+        flex: 1,
+        alignItems: 'center',
+        paddingHorizontal: tokens.spacing.sm,
+    },
+    rightContainer: {
+        width: tokens.iconSizes.xl + tokens.spacing.sm,
+        alignItems: 'flex-start',
+    },
+});
+// =============================================================================
+// EXPORTS
+// =============================================================================

package/src/presentation/tokens/commonStyles.js

@@ -0,0 +1,219 @@
+/**
+ * Common Styles - Reusable Style Patterns
+ *
+ * Centralized style utilities to reduce duplication across screens.
+ * These styles are composable and follow DRY principles.
+ *
+ * Usage:
+ * ```typescript
+ * import { useCommonStyles } from '@domains/design-system/commonStyles';
+ *
+ * const MyComponent = () => {
+ *   const commonStyles = useCommonStyles();
+ *   return <View style={commonStyles.screenContainer}>...</View>;
+ * };
+ * ```
+ */
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+/**
+ * Hook to get common styles with dynamic theme support
+ */
+export const useCommonStyles = () => {
+    const tokens = useAppDesignTokens();
+    return {
+        // ========================================================================
+        // SCREEN CONTAINERS
+        // ========================================================================
+        /**
+         * Standard full-screen container
+         * Most common pattern: flex: 1 with background color
+         */
+        screenContainer: {
+            flex: 1,
+            backgroundColor: tokens.colors.backgroundPrimary,
+        },
+        /**
+         * Basic flex container without background
+         * Use when background is set elsewhere or not needed
+         */
+        flexContainer: {
+            flex: 1,
+        },
+        /**
+         * Screen container with secondary background
+         */
+        screenContainerSecondary: {
+            flex: 1,
+            backgroundColor: tokens.colors.backgroundSecondary,
+        },
+        // ========================================================================
+        // SCROLL CONTAINERS
+        // ========================================================================
+        /**
+         * Standard ScrollView wrapper
+         */
+        scrollView: {
+            flex: 1,
+        },
+        /**
+         * ScrollView content container with standard padding
+         */
+        scrollContent: {
+            paddingHorizontal: tokens.spacing.lg,
+            paddingBottom: tokens.spacing.xl,
+        },
+        /**
+         * ScrollView content that grows to fill available space
+         */
+        scrollContentGrow: {
+            flexGrow: 1,
+            padding: tokens.spacing.lg,
+        },
+        /**
+         * Centered scroll content (for forms, onboarding screens)
+         */
+        scrollContentCentered: {
+            flexGrow: 1,
+            padding: tokens.spacing.lg,
+            justifyContent: 'center',
+        },
+        // ========================================================================
+        // LAYOUT UTILITIES
+        // ========================================================================
+        /**
+         * Centered container - both horizontal and vertical
+         * Perfect for empty states, splash screens
+         */
+        centerContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        /**
+         * Centered container with padding
+         */
+        centerContainerPadded: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingHorizontal: tokens.spacing.xl,
+        },
+        /**
+         * Horizontal row layout
+         */
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        /**
+         * Horizontal row with space between
+         */
+        rowBetween: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+        },
+        /**
+         * Horizontal row centered
+         */
+        rowCenter: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        // ========================================================================
+        // PADDING UTILITIES
+        // ========================================================================
+        /**
+         * Standard horizontal padding
+         */
+        paddedHorizontal: {
+            paddingHorizontal: tokens.spacing.lg,
+        },
+        /**
+         * Standard vertical padding
+         */
+        paddedVertical: {
+            paddingVertical: tokens.spacing.lg,
+        },
+        /**
+         * Standard padding all sides
+         */
+        padded: {
+            padding: tokens.spacing.lg,
+        },
+        // ========================================================================
+        // SECTION STYLES
+        // ========================================================================
+        /**
+         * Standard section container
+         */
+        section: {
+            marginBottom: tokens.spacing.xl,
+        },
+        /**
+         * Section with padding
+         */
+        sectionPadded: {
+            marginBottom: tokens.spacing.xl,
+            paddingHorizontal: tokens.spacing.lg,
+        },
+        // ========================================================================
+        // TEXT STYLES
+        // ========================================================================
+        /**
+         * Screen title - primary heading
+         */
+        screenTitle: {
+            ...tokens.typography.headingLarge,
+            color: tokens.colors.textPrimary,
+            marginBottom: tokens.spacing.sm,
+        },
+        /**
+         * Section title
+         */
+        sectionTitle: {
+            ...tokens.typography.headingMedium,
+            color: tokens.colors.textPrimary,
+            marginBottom: tokens.spacing.md,
+        },
+        /**
+         * Subtitle/description text
+         */
+        subtitle: {
+            ...tokens.typography.bodyMedium,
+            color: tokens.colors.textSecondary,
+            textAlign: 'center',
+        },
+        /**
+         * Body text
+         */
+        bodyText: {
+            ...tokens.typography.bodyMedium,
+            color: tokens.colors.textPrimary,
+        },
+        /**
+         * Secondary text (muted)
+         */
+        secondaryText: {
+            ...tokens.typography.bodySmall,
+            color: tokens.colors.textSecondary,
+        },
+        // ========================================================================
+        // FORM STYLES
+        // ========================================================================
+        /**
+         * Form container
+         */
+        form: {
+            width: '100%',
+        },
+        /**
+         * Form header section
+         */
+        formHeader: {
+            alignItems: 'center',
+            marginBottom: tokens.spacing.xl,
+        },
+    };
+};

package/src/presentation/utils/variants/compound.js

@@ -0,0 +1,15 @@
+import { createVariants } from './core';
+export function createAdvancedVariants(config) {
+    const baseVariantFn = createVariants(config);
+    return function (props = {}) {
+        let result = baseVariantFn(props);
+        if (config.compoundVariants) {
+            for (const compound of config.compoundVariants) {
+                const conditionsMet = Object.entries(compound.conditions).every(([key, value]) => props[key] === value);
+                if (conditionsMet)
+                    result = { ...result, ...compound.style };
+            }
+        }
+        return result;
+    };
+}

package/src/presentation/utils/variants/core.js

@@ -0,0 +1,22 @@
+export function createVariants(config) {
+    return function (props = {}) {
+        let result = { ...config.base };
+        if (config.defaultVariants) {
+            for (const [variantKey, defaultValue] of Object.entries(config.defaultVariants)) {
+                if (config.variants?.[variantKey] && defaultValue) {
+                    const variantStyle = config.variants[variantKey][defaultValue];
+                    if (variantStyle)
+                        result = { ...result, ...variantStyle };
+                }
+            }
+        }
+        for (const [variantKey, variantValue] of Object.entries(props)) {
+            if (config.variants?.[variantKey] && variantValue) {
+                const variantStyle = config.variants[variantKey][variantValue];
+                if (variantStyle)
+                    result = { ...result, ...variantStyle };
+            }
+        }
+        return result;
+    };
+}

package/src/presentation/utils/variants/helpers.js

@@ -0,0 +1,9 @@
+export function combineStyles(...styles) {
+    return styles.reduce((acc, style) => (style ? { ...acc, ...style } : acc), {});
+}
+export function conditionalStyle(condition, trueStyle, falseStyle) {
+    return condition ? trueStyle : falseStyle;
+}
+export function responsiveStyle(small, medium, large) {
+    return small;
+}

package/src/presentation/utils/variants.js

@@ -0,0 +1,3 @@
+export * from './variants/core';
+export * from './variants/compound';
+export * from './variants/helpers';