@idealyst/components 1.1.6 → 1.1.8

package/src/TabBar/TabBar.styles.tsx

@@ -1,503 +1,213 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { TabBarPillMode, TabBarSizeVariant, TabBarType, TabBarIconPosition, TabBarJustify } from './types';
-
-type TabBarContainerVariants = {
-    type: TabBarType;
-    size: TabBarSizeVariant;
-    pillMode: TabBarPillMode;
-    justify: TabBarJustify;
-}
-
-type TabBarTabVariants = {
-    size: TabBarSizeVariant;
-    type: TabBarType;
-    active: boolean;
-    disabled: boolean;
-    pillMode: TabBarPillMode;
-    iconPosition: TabBarIconPosition;
-    justify: TabBarJustify;
-}
-
-type TabBarIconVariants = {
-    size: TabBarSizeVariant;
-    active: boolean;
-    disabled: boolean;
-    iconPosition: TabBarIconPosition;
-}
-
-type TabBarLabelVariants = {
-    size: TabBarSizeVariant;
-    type: TabBarType;
-    active: boolean;
-    disabled: boolean;
-    pillMode: TabBarPillMode;
-}
-
-type TabBarIndicatorVariants = {
-    type: TabBarType;
-    pillMode: TabBarPillMode;
-}
-
-/**
- * Create compound variants for container
- */
-function createContainerCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarContainerVariants> {
-    return [
-        {
-            type: 'pills',
-            pillMode: 'light',
-            styles: {
-                backgroundColor: theme.colors.surface.secondary,
-            },
-        },
-        {
-            type: 'pills',
-            pillMode: 'dark',
-            styles: {
-                backgroundColor: theme.colors.surface.inverse,
-            },
-        },
-    ];
-}
-
-/**
- * Create size variants for tab
- */
-function createTabSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tabBar', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create compound variants for tab
- */
-function createTabCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarTabVariants> {
-    return [
-        // Pills variant - compact padding for all sizes
-        {
-            type: 'pills',
-            size: 'xs',
-            styles: {
-                paddingVertical: 2,
-                paddingHorizontal: 10,
-            },
-        },
-        {
-            type: 'pills',
-            size: 'sm',
-            styles: {
-                paddingVertical: 4,
-                paddingHorizontal: 12,
-            },
-        },
-        {
-            type: 'pills',
-            size: 'md',
-            styles: {
-                paddingVertical: 6,
-                paddingHorizontal: 16,
-            },
-        },
-        {
-            type: 'pills',
-            size: 'lg',
-            styles: {
-                paddingVertical: 8,
-                paddingHorizontal: 20,
-            },
-        },
-        {
-            type: 'pills',
-            size: 'xl',
-            styles: {
-                paddingVertical: 10,
-                paddingHorizontal: 24,
-            },
-        },
-        // Pills variant - active text color
-        {
-            type: 'pills',
-            active: true,
-            styles: {
-                color: theme.intents.primary.contrast,
-            },
-        },
-        // Underline variant - active text color
-        {
-            type: 'underline',
-            active: true,
-            styles: {
-                color: theme.intents.primary.primary,
-            },
-        },
-    ] as const;
-}
-
 /**
- * Create size variants for label
+ * TabBar styles using defineStyle with dynamic props.
  */
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tabBar', (size) => ({
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create compound variants for label
- */
-function createLabelCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarLabelVariants> {
-    return [
-        // Pills light mode - light text on active (dark pill)
-        {
-            type: 'pills',
-            pillMode: 'light',
-            active: true,
-            styles: {
-                color: theme.colors.text.primary,
-            },
-        },
-        // Pills dark mode - dark text on active (light pill)
-        {
-            type: 'pills',
-            pillMode: 'dark',
-            active: true,
-            styles: {
-                color: theme.colors.text.primary,
-            },
-        },
-        // Underline variant - active text color
-        {
-            type: 'underline',
-            active: true,
-            styles: {
-                color: theme.intents.primary.primary,
-            },
-        },
-    ] as const;
-}
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type TabBarType = 'standard' | 'underline' | 'pills';
+type TabBarPillMode = 'light' | 'dark';
+type TabBarIconPosition = 'left' | 'top';
+type TabBarJustify = 'start' | 'center' | 'equal' | 'space-between';
+
+export type TabBarDynamicProps = {
+    size?: Size;
+    type?: TabBarType;
+    pillMode?: TabBarPillMode;
+    active?: boolean;
+    disabled?: boolean;
+    iconPosition?: TabBarIconPosition;
+    justify?: TabBarJustify;
+    gap?: ViewStyleSize;
+    padding?: ViewStyleSize;
+    paddingVertical?: ViewStyleSize;
+    paddingHorizontal?: ViewStyleSize;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
 /**
- * Create compound variants for indicator
+ * TabBar styles with type/pillMode/active handling.
  */
-function createIndicatorCompoundVariants(theme: Theme): CompoundVariants<keyof TabBarIndicatorVariants> {
-    return [
-        // Pills light mode - darker pill
-        {
-            type: 'pills',
-            pillMode: 'light',
-            styles: {
-                backgroundColor: theme.colors.surface.tertiary,
-            },
-        },
-        // Pills dark mode - lighter pill
-        {
-            type: 'pills',
-            pillMode: 'dark',
-            styles: {
-                backgroundColor: theme.colors.surface.secondary,
-            },
-        },
-    ] as const;
-}
-
-const createContainerStyles = (theme: Theme) => {
-    return {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 0,
-        position: 'relative',
-        borderBottomWidth: 1,
-        borderBottomStyle: 'solid',
-        borderBottomColor: theme.colors.border.primary,
+export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
+    container: ({ type = 'standard', pillMode = 'light', justify = 'start' }: TabBarDynamicProps) => {
+        const backgroundColor = type === 'pills'
+            ? (pillMode === 'dark' ? theme.colors.surface.inverse : theme.colors.surface.secondary)
+            : undefined;
+
+        const justifyContent = {
+            start: 'flex-start',
+            center: 'center',
+            equal: 'stretch',
+            'space-between': 'space-between',
+        }[justify];
+
+        return {
+            display: 'flex' as const,
+            flexDirection: 'row' as const,
+            gap: type === 'pills' ? 4 : 0,
+            position: 'relative' as const,
+            borderBottomWidth: type === 'pills' ? 0 : 1,
+            borderBottomStyle: 'solid' as const,
+            borderBottomColor: theme.colors.border.primary,
+            padding: type === 'pills' ? 4 : undefined,
+            backgroundColor: backgroundColor || (type === 'pills' ? theme.colors.surface.secondary : undefined),
+            overflow: type === 'pills' ? ('hidden' as const) : undefined,
+            alignSelf: type === 'pills' ? ('flex-start' as const) : undefined,
+            width: type === 'pills' ? undefined : '100%',
+            borderRadius: type === 'pills' ? 9999 : undefined,
+            justifyContent: justifyContent as any,
+            variants: {
+                gap: {
+                    gap: theme.sizes.$view.padding,
+                },
+                padding: {
+                    padding: theme.sizes.$view.padding,
+                },
+                paddingVertical: {
+                    paddingVertical: theme.sizes.$view.padding,
+                },
+                paddingHorizontal: {
+                    paddingHorizontal: theme.sizes.$view.padding,
+                },
+                margin: {
+                    margin: theme.sizes.$view.padding,
+                },
+                marginVertical: {
+                    marginVertical: theme.sizes.$view.padding,
+                },
+                marginHorizontal: {
+                    marginHorizontal: theme.sizes.$view.padding,
+                },
+            },
+        } as const;
+    },
+
+    tab: ({ type = 'standard', size = 'md', active = false, pillMode = 'light', disabled = false, iconPosition = 'left', justify = 'start' }: TabBarDynamicProps) => {
+        // Tab padding for pills
+        const paddingMap: Record<Size, { paddingVertical: number; paddingHorizontal: number }> = {
+            xs: { paddingVertical: 2, paddingHorizontal: 10 },
+            sm: { paddingVertical: 4, paddingHorizontal: 12 },
+            md: { paddingVertical: 6, paddingHorizontal: 16 },
+            lg: { paddingVertical: 8, paddingHorizontal: 20 },
+            xl: { paddingVertical: 10, paddingHorizontal: 24 },
+        };
+        const tabPadding = type === 'pills' ? paddingMap[size] : {};
+
+        // Color based on type and active state
+        let color = active ? theme.colors.text.primary : theme.colors.text.secondary;
+        if (active) {
+            if (type === 'pills') color = theme.intents.primary.contrast;
+            else if (type === 'underline') color = theme.intents.primary.primary;
+        }
+
+        return {
+            display: 'flex' as const,
+            flexDirection: iconPosition === 'top' ? ('column' as const) : ('row' as const),
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
+            fontWeight: '500' as const,
+            flex: justify === 'equal' ? 1 : undefined,
+            color,
+            position: 'relative' as const,
+            zIndex: 2,
+            backgroundColor: 'transparent' as const,
+            gap: 6,
+            borderRadius: type === 'pills' ? 9999 : undefined,
+            opacity: disabled ? 0.5 : 1,
+            ...tabPadding,
+            variants: {
+                size: {
+                    fontSize: theme.sizes.$tabBar.fontSize,
+                    padding: theme.sizes.$tabBar.padding,
+                    lineHeight: theme.sizes.$tabBar.lineHeight,
+                },
+            },
+            _web: {
+                border: 'none',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                outline: 'none',
+                transition: 'color 0.2s ease',
+                _hover: disabled ? {} : { color: theme.colors.text.primary },
+            },
+        } as const;
+    },
+
+    tabLabel: ({ type = 'standard', active = false, pillMode = 'light', disabled = false }: TabBarDynamicProps) => {
+        let color = active ? theme.colors.text.primary : theme.colors.text.secondary;
+        if (active) {
+            if (type === 'pills') color = theme.colors.text.primary;
+            else if (type === 'underline') color = theme.intents.primary.primary;
+        }
+
+        return {
+            position: 'relative' as const,
+            zIndex: 3,
+            fontWeight: '500' as const,
+            color,
+            opacity: disabled ? 0.5 : 1,
+            variants: {
+                size: {
+                    fontSize: theme.sizes.$tabBar.fontSize,
+                    lineHeight: theme.sizes.$tabBar.lineHeight,
+                },
+            },
+        } as const;
+    },
+
+    tabIcon: ({ active = false, disabled = false, iconPosition = 'left' }: TabBarDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        opacity: disabled ? 0.5 : 1,
+        marginBottom: iconPosition === 'top' ? 2 : 0,
         variants: {
-            type: {
-                standard: {},
-                pills: {
-                    borderBottomWidth: 0,
-                    padding: 4,
-                    gap: 4,
-                    backgroundColor: theme.colors.surface.secondary,
-                    overflow: 'hidden',
-                    alignSelf: 'flex-start',
-                },
-                underline: {},
-            },
             size: {
-                xs: {},
-                sm: {},
-                md: {},
-                lg: {},
-                xl: {},
-            },
-            pillMode: {
-                light: {},
-                dark: {},
-            },
-            justify: {
-                start: {
-                    justifyContent: 'flex-start',
-                },
-                center: {
-                    justifyContent: 'center',
-                },
-                equal: {
-                    justifyContent: 'stretch',
-                    width: '100%',
-                },
-                'space-between': {
-                    justifyContent: 'space-between',
-                    width: '100%',
-                },
-            },
-            // Spacing variants from ContainerStyleProps
-            gap: buildGapVariants(theme),
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        } as const,
-        compoundVariants: createContainerCompoundVariants(theme),
-    } as const;
-}
-
-const createTabStyles = (theme: Theme) => {
-    return {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: '500',
-        color: theme.colors.text.secondary,
-        position: 'relative',
-        zIndex: 2,
-        backgroundColor: 'transparent',
-        gap: 6,
-        variants: {
-            size: createTabSizeVariants(theme),
-            type: {
-                standard: {},
-                pills: {
-                    borderRadius: 9999,
-                    marginRight: 0,
-                    backgroundColor: 'transparent',
-                },
-                underline: {},
-            },
-            active: {
-                true: {
-                    color: theme.colors.text.primary,
-                },
-                false: {},
-            },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                    _web: {
-                        cursor: 'not-allowed',
-                    },
-                },
-                false: {
-                    _web: {
-                        _hover: {
-                            color: theme.colors.text.primary,
-                        },
-                    },
-                },
-            },
-            pillMode: {
-                light: {},
-                dark: {},
-            },
-            iconPosition: {
-                left: {
-                    flexDirection: 'row',
-                },
-                top: {
-                    flexDirection: 'column',
-                },
-            },
-            justify: {
-                start: {},
-                center: {},
-                equal: {
-                    flex: 1,
-                },
-                'space-between': {},
-            },
-        } as const,
-        compoundVariants: createTabCompoundVariants(theme),
-        _web: {
-            border: 'none',
-            cursor: 'pointer',
-            outline: 'none',
-            transition: 'color 0.2s ease',
-        },
-    } as const;
-}
-
-const createTabLabelStyles = (theme: Theme) => {
-    return {
-        position: 'relative',
-        zIndex: 3,
-        fontWeight: '500',
-        color: theme.colors.text.secondary,
-        variants: {
-            size: createLabelSizeVariants(theme),
-            type: {
-                standard: {},
-                pills: {},
-                underline: {},
-            },
-            active: {
-                true: {
-                    color: theme.colors.text.primary,
-                },
-                false: {},
-            },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {},
-            },
-            pillMode: {
-                light: {},
-                dark: {},
-            },
-        },
-        compoundVariants: createLabelCompoundVariants(theme),
-    } as const;
-}
-
-const createIndicatorStyles = (theme: Theme) => {
-    return {
-        position: 'absolute',
-        pointerEvents: 'none',
-        zIndex: 1,
-        variants: {
-            type: {
-                standard: {
-                    bottom: -1,
-                    height: 2,
-                    backgroundColor: theme.intents.primary.primary,
-                },
-                pills: {
-                    borderRadius: 9999,
-                    bottom: 4,
-                    top: 4,
-                    left: 0,
-                },
-                underline: {
-                    bottom: -1,
-                    height: 2,
-                    backgroundColor: theme.intents.primary.primary,
-                },
-            },
-            pillMode: {
-                light: {},
-                dark: {},
-            },
-        },
-        compoundVariants: createIndicatorCompoundVariants(theme),
-        _web: {
-            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        },
-    } as const;
-}
-
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tabBar', (size) => ({
-        width: size.iconSize || size.fontSize,
-        height: size.iconSize || size.fontSize,
-    }));
-}
-
-const createIconStyles = (theme: Theme) => {
-    return {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        variants: {
-            size: createIconSizeVariants(theme),
-            active: {
-                true: {},
-                false: {},
-            },
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {},
-            },
-            iconPosition: {
-                left: {},
-                top: {
-                    marginBottom: 2,
-                },
-            },
-        } as const,
-    } as const;
-}
-
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const tabBarStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: createContainerStyles(theme),
-        tab: createTabStyles(theme),
-        tabLabel: createTabLabelStyles(theme),
-        tabIcon: createIconStyles(theme),
-        indicator: createIndicatorStyles(theme),
-    };
-});
+                width: theme.sizes.$tabBar.fontSize,
+                height: theme.sizes.$tabBar.fontSize,
+            },
+        },
+    }),
+
+    indicator: ({ type = 'standard', pillMode = 'light' }: TabBarDynamicProps) => {
+        const backgroundColor = type === 'pills'
+            ? (pillMode === 'dark' ? theme.colors.surface.secondary : theme.colors.surface.tertiary)
+            : theme.intents.primary.primary;
+
+        const typeStyles = type === 'pills' ? {
+            borderRadius: 9999,
+            bottom: 4,
+            top: 4,
+            left: 0,
+        } : {
+            bottom: -1,
+            height: 2,
+        };
+
+        return {
+            position: 'absolute' as const,
+            pointerEvents: 'none' as const,
+            zIndex: 1,
+            backgroundColor,
+            ...typeStyles,
+            _web: {
+                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+        } as const;
+    },
+}));
 
 // Export individual style sheets for backwards compatibility
-export const tabBarContainerStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: createContainerStyles(theme),
-    } as const;
-});
-
-export const tabBarTabStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        tab: createTabStyles(theme),
-    } as const;
-});
-
-export const tabBarLabelStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        tabLabel: createTabLabelStyles(theme),
-    } as const;
-});
-
-export const tabBarIndicatorStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        indicator: createIndicatorStyles(theme),
-    } as const;
-});
-
-export const tabBarIconStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        tabIcon: createIconStyles(theme),
-    } as const;
-});
+export const tabBarContainerStyles = tabBarStyles;
+export const tabBarTabStyles = tabBarStyles;
+export const tabBarLabelStyles = tabBarStyles;
+export const tabBarIndicatorStyles = tabBarStyles;
+export const tabBarIconStyles = tabBarStyles;