@idealyst/components 1.2.13 → 1.2.15

package/src/TabBar/TabBar.styles.old.tsx

@@ -1,343 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme } 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';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ContainerDynamicProps = {
-    type?: TabBarType;
-    pillMode?: TabBarPillMode;
-};
-
-type TabDynamicProps = {
-    type?: TabBarType;
-    size?: TabBarSizeVariant;
-    active?: boolean;
-    pillMode?: TabBarPillMode;
-};
-
-type LabelDynamicProps = {
-    type?: TabBarType;
-    active?: boolean;
-    pillMode?: TabBarPillMode;
-};
-
-type IndicatorDynamicProps = {
-    type?: TabBarType;
-    pillMode?: TabBarPillMode;
-};
-
-/**
- * Get container background color based on type and pillMode
- */
-function getContainerBackgroundColor(theme: Theme, type: TabBarType, pillMode: TabBarPillMode): string | undefined {
-    if (type === 'pills') {
-        return pillMode === 'dark' ? theme.colors.surface.inverse : theme.colors.surface.secondary;
-    }
-    return undefined;
-}
-
-/**
- * Get tab padding based on type and size (pills have compact padding)
- */
-function getTabPadding(type: TabBarType, size: TabBarSizeVariant): { paddingVertical?: number; paddingHorizontal?: number } {
-    if (type !== 'pills') return {};
-
-    const paddingMap: Record<TabBarSizeVariant, { 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 },
-    };
-    return paddingMap[size] || paddingMap.md;
-}
-
-/**
- * Get tab text color based on type and active state
- */
-function getTabColor(theme: Theme, type: TabBarType, active: boolean): string | undefined {
-    if (!active) return undefined;
-    if (type === 'pills') return theme.intents.primary.contrast;
-    if (type === 'underline') return theme.intents.primary.primary;
-    return theme.colors.text.primary;
-}
-
-/**
- * Get label color based on type, pillMode, and active state
- */
-function getLabelColor(theme: Theme, type: TabBarType, pillMode: TabBarPillMode, active: boolean): string | undefined {
-    if (!active) return undefined;
-    if (type === 'pills') return theme.colors.text.primary;
-    if (type === 'underline') return theme.intents.primary.primary;
-    return theme.colors.text.primary;
-}
-
-/**
- * Get indicator background color based on type and pillMode
- */
-function getIndicatorBackgroundColor(theme: Theme, type: TabBarType, pillMode: TabBarPillMode): string | undefined {
-    if (type === 'pills') {
-        return pillMode === 'dark' ? theme.colors.surface.secondary : theme.colors.surface.tertiary;
-    }
-    return undefined;
-}
-
-/**
- * Create size variants for tab
- */
-function createTabSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tabBar', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create size variants for label
- */
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tabBar', (size) => ({
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tabBar', (size) => ({
-        width: size.fontSize,
-        height: size.fontSize,
-    }));
-}
-
-/**
- * Create dynamic container styles
- */
-function createContainerStyles(theme: Theme) {
-    return ({ type = 'standard', pillMode = 'light' }: ContainerDynamicProps) => {
-        const bgColor = getContainerBackgroundColor(theme, type, pillMode);
-
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: type === 'pills' ? 4 : 0,
-            position: 'relative',
-            borderBottomWidth: type === 'pills' ? 0 : 1,
-            borderBottomStyle: 'solid' as const,
-            borderBottomColor: theme.colors.border.primary,
-            padding: type === 'pills' ? 4 : undefined,
-            backgroundColor: bgColor || (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,
-            variants: {
-                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,
-        } as const;
-    };
-}
-
-/**
- * Create dynamic tab styles
- */
-function createTabStyles(theme: Theme) {
-    return ({ type = 'standard', size = 'md', active = false, pillMode = 'light', justify = 'start' }: TabDynamicProps) => {
-        const tabPadding = getTabPadding(type, size);
-        const color = getTabColor(theme, type, active);
-
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: '500',
-            flex: justify === 'equal' ? 1 : undefined,
-            color: color || (active ? theme.colors.text.primary : theme.colors.text.secondary),
-            position: 'relative',
-            zIndex: 2,
-            backgroundColor: 'transparent',
-            gap: 6,
-            borderRadius: type === 'pills' ? 9999 : undefined,
-            ...tabPadding,
-            variants: {
-                size: createTabSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: { cursor: 'not-allowed' },
-                    },
-                    false: {
-                        _web: { _hover: { color: theme.colors.text.primary } },
-                    },
-                },
-                iconPosition: {
-                    left: { flexDirection: 'row' },
-                    top: { flexDirection: 'column' },
-                },
-                justify: {
-                    start: {},
-                    center: {},
-                    equal: { flex: 1 },
-                    'space-between': {},
-                },
-            } as const,
-            _web: {
-                border: 'none',
-                cursor: 'pointer',
-                outline: 'none',
-                transition: 'color 0.2s ease',
-            },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic tab label styles
- */
-function createTabLabelStyles(theme: Theme) {
-    return ({ type = 'standard', active = false, pillMode = 'light' }: LabelDynamicProps) => {
-        const color = getLabelColor(theme, type, pillMode, active);
-
-        return {
-            position: 'relative',
-            zIndex: 3,
-            fontWeight: '500',
-            color: color || (active ? theme.colors.text.primary : theme.colors.text.secondary),
-            variants: {
-                size: createLabelSizeVariants(theme),
-                disabled: {
-                    true: { opacity: 0.5 },
-                    false: {},
-                },
-            },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic indicator styles
- */
-function createIndicatorStyles(theme: Theme) {
-    return ({ type = 'standard', pillMode = 'light' }: IndicatorDynamicProps) => {
-        const bgColor = getIndicatorBackgroundColor(theme, type, pillMode);
-
-        const typeStyles = type === 'pills' ? {
-            borderRadius: 9999,
-            bottom: 4,
-            top: 4,
-            left: 0,
-            backgroundColor: bgColor,
-        } : {
-            bottom: -1,
-            height: 2,
-            backgroundColor: theme.intents.primary.primary,
-        };
-
-        return {
-            position: 'absolute',
-            pointerEvents: 'none',
-            zIndex: 1,
-            ...typeStyles,
-            _web: {
-                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            },
-        } as const;
-    };
-}
-
-/**
- * Create icon styles (static, no compound variants)
- */
-function 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.
-export const tabBarStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('TabBar', theme, {container: createContainerStyles(theme),
-        tab: createTabStyles(theme),
-        indicator: createIndicatorStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        tabLabel: createTabLabelStyles(theme),
-        tabIcon: createIconStyles(theme)});
-});
-
-// 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;
-});

package/src/Table/Table.styles.old.tsx

@@ -1,311 +0,0 @@
-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 { applyExtensions } from '../extensions/applyExtension';
-
-type TableType = 'default' | 'bordered' | 'striped';
-
-type TableRowVariants = {
-    type: TableType;
-    clickable: boolean;
-}
-/**
- * Create type variants for container
- */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        standard: {
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            overflow: 'hidden',
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        bordered: {
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            overflow: 'hidden',
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        striped: {
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            overflow: 'hidden',
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-    } as const;
-}
-
-/**
- * Create type variants for row
- */
-function createRowTypeVariants(theme: Theme) {
-    return {
-        standard: {},
-        bordered: {
-            borderBottomWidth: 1,
-            borderBottomStyle: 'solid',
-            borderBottomColor: theme.colors.border.primary,
-            _web: {
-                borderBottom: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        striped: {
-            borderBottomWidth: 1,
-            borderBottomStyle: 'solid',
-            borderBottomColor: theme.colors.border.primary,
-            _web: {
-                borderBottom: `1px solid ${theme.colors.border.primary}`,
-                ':nth-child(even)': {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-            },
-        },
-    } as const;
-}
-
-/**
- * Create compound variants for row
- */
-function createRowCompoundVariants(theme: Theme): CompoundVariants<keyof TableRowVariants> {
-    return [
-        {
-            type: 'striped',
-            clickable: true,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: theme.colors.surface.tertiary,
-                    },
-                },
-            },
-        },
-    ] as const;
-}
-
-/**
- * Create size variants for header cell
- */
-function createHeaderCellSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'table', (size) => ({
-        padding: size.padding,
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create type variants for header cell
- */
-function createHeaderCellTypeVariants(theme: Theme) {
-    return {
-        standard: {},
-        bordered: {
-            borderRightWidth: 1,
-            borderRightStyle: 'solid',
-            borderRightColor: theme.colors.border.primary,
-            _web: {
-                borderRight: `1px solid ${theme.colors.border.primary}`,
-                ':last-child': {
-                    borderRight: 'none',
-                },
-            },
-        },
-        striped: {},
-    } as const;
-}
-
-/**
- * Create size variants for cell
- */
-function createCellSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'table', (size) => ({
-        padding: size.padding,
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Create type variants for cell
- */
-function createCellTypeVariants(theme: Theme) {
-    return {
-        standard: {},
-        bordered: {
-            borderRightWidth: 1,
-            borderRightStyle: 'solid',
-            borderRightColor: theme.colors.border.primary,
-            _web: {
-                borderRight: `1px solid ${theme.colors.border.primary}`,
-                ':last-child': {
-                    borderRight: 'none',
-                },
-            },
-        },
-        striped: {},
-    } as const;
-}
-
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        width: '100%',
-        _web: {
-            overflow: 'auto',
-        },
-        variants: {
-            type: createContainerTypeVariants(theme),
-            // 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),
-        },
-    });
-}
-
-const createTableStyles = (theme: Theme) => {
-    return {
-        width: '100%',
-        _web: {
-            borderCollapse: 'collapse',
-        },
-    } as const;
-}
-
-const createTheadStyles = (theme: Theme) => {
-    return {
-        backgroundColor: theme.colors.surface.secondary,
-        variants: {
-            sticky: {
-                true: {
-                    _web: {
-                            position: 'sticky',
-                            top: 0,
-                            zIndex: 10,
-                    }
-                },
-                false: {},
-            },
-        },
-    } as const;
-}
-
-const createRowStyles = (theme: Theme) => {
-    return {
-        variants: {
-            type: createRowTypeVariants(theme),
-            clickable: {
-                true: {
-                    _web: {
-                        cursor: 'pointer',
-                        _hover: {
-                            backgroundColor: theme.colors.surface.secondary,
-                        },
-                    },
-                },
-                false: {},
-            },
-        },
-        compoundVariants: createRowCompoundVariants(theme),
-        _web: {
-            transition: 'background-color 0.2s ease',
-        },
-    } as const;
-}
-
-const createHeaderCellStyles = (theme: Theme) => {
-    return {
-        flexDirection: 'row',
-        alignItems: 'center',
-        textAlign: 'left',
-        fontWeight: '600',
-        color: theme.colors.text.primary,
-        borderBottomWidth: 2,
-        borderBottomStyle: 'solid',
-        borderBottomColor: theme.colors.border.primary,
-        _web: {
-            borderBottom: `2px solid ${theme.colors.border.primary}`,
-        },
-        variants: {
-            size: createHeaderCellSizeVariants(theme),
-            align: {
-                left: {
-                    textAlign: 'left',
-                    justifyContent: 'flex-start',
-                },
-                center: {
-                    textAlign: 'center',
-                    justifyContent: 'center',
-                },
-                right: {
-                    textAlign: 'right',
-                    justifyContent: 'flex-end',
-                },
-            },
-            type: createHeaderCellTypeVariants(theme),
-        },
-    } as const;
-}
-
-const createCellStyles = (theme: Theme) => {
-    return {
-        flexDirection: 'row',
-        alignItems: 'center',
-        textAlign: 'left',
-        color: theme.colors.text.primary,
-        variants: {
-            size: createCellSizeVariants(theme),
-            align: {
-                left: {
-                    textAlign: 'left',
-                    justifyContent: 'flex-start',
-                },
-                center: {
-                    textAlign: 'center',
-                    justifyContent: 'center',
-                },
-                right: {
-                    textAlign: 'right',
-                    justifyContent: 'flex-end',
-                },
-            },
-            type: createCellTypeVariants(theme),
-        },
-    } as const;
-}
-
-export const tableStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('Table', theme, {
-        container: createContainerStyles(theme),
-        table: createTableStyles(theme),
-        thead: createTheadStyles(theme),
-        tbody: {},
-        row: createRowStyles(theme),
-        headerCell: createHeaderCellStyles(theme),
-        cell: createCellStyles(theme),
-    });
-});