@idealyst/components 1.2.13 → 1.2.14

package/src/Input/Input.styles.old.tsx

@@ -1,289 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { InputSize, InputType } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-export type InputVariants = {
-    size: InputSize;
-    type: InputType;
-    focused: boolean;
-    hasError: boolean;
-    disabled: boolean;
-}
-
-type InputDynamicProps = {
-    type?: InputType;
-    focused?: boolean;
-    hasError?: boolean;
-    disabled?: boolean;
-};
-
-/**
- * Get container border/background styles based on type, focused, hasError, disabled
- */
-function getContainerDynamicStyles(theme: Theme, props: InputDynamicProps) {
-    const { type = 'outlined', focused = false, hasError = false, disabled = false } = props;
-    const focusColor = theme.intents.primary.primary;
-    const errorColor = theme.intents.error.primary;
-
-    // Base styles by type
-    let backgroundColor = 'transparent';
-    let borderWidth = 1;
-    let borderColor = theme.colors.border.primary;
-    let borderStyle = 'solid' as const;
-
-    if (type === 'filled') {
-        backgroundColor = theme.colors.surface.secondary;
-        borderWidth = 0;
-    } else if (type === 'bare') {
-        backgroundColor = 'transparent';
-        borderWidth = 0;
-    }
-
-    // Error state takes precedence
-    if (hasError) {
-        borderColor = errorColor;
-        borderWidth = 1;
-    }
-
-    // Focus state (error still takes precedence for color)
-    if (focused && !hasError) {
-        borderColor = focusColor;
-        borderWidth = 1;
-    }
-
-    // Disabled state
-    if (disabled) {
-        backgroundColor = theme.colors.surface.secondary;
-    }
-
-    return {
-        backgroundColor,
-        borderWidth,
-        borderColor,
-        borderStyle,
-    };
-}
-
-/**
- * Create dynamic container styles
- */
-function createContainerStyles(theme: Theme) {
-    return (props: InputDynamicProps) => {
-        const { type = 'outlined', focused = false, hasError = false, disabled = false } = props;
-        const dynamicStyles = getContainerDynamicStyles(theme, props);
-        const focusColor = theme.intents.primary.primary;
-        const errorColor = theme.intents.error.primary;
-
-        // Web-specific border and shadow
-        let webBorder = `1px solid ${dynamicStyles.borderColor}`;
-        let webBoxShadow = 'none';
-
-        if (type === 'filled' || type === 'bare') {
-            webBorder = 'none';
-        }
-
-        if (hasError) {
-            webBorder = `1px solid ${errorColor}`;
-            if (focused) {
-                webBoxShadow = `0 0 0 2px ${errorColor}20`;
-            }
-        } else if (focused) {
-            webBorder = `1px solid ${focusColor}`;
-            webBoxShadow = `0 0 0 2px ${focusColor}20`;
-        }
-
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            minWidth: 0,
-            borderRadius: 8,
-            ...dynamicStyles,
-            opacity: disabled ? 0.6 : 1,
-            variants: {
-                size: buildSizeVariants(theme, 'input', (size) => ({
-                    height: size.height,
-                    paddingHorizontal: size.paddingHorizontal,
-                })),
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
-            },
-            _web: {
-                boxSizing: 'border-box',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                border: webBorder,
-                boxShadow: webBoxShadow,
-                cursor: disabled ? 'not-allowed' : 'text',
-            },
-        } as const;
-    };
-}
-
-/**
- * Create left icon container styles
- */
-function createLeftIconContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        flexShrink: 0,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                marginRight: size.iconMargin,
-            })),
-        },
-    });
-}
-
-/**
- * Create right icon container styles
- */
-function createRightIconContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        flexShrink: 0,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                marginLeft: size.iconMargin,
-            })),
-        },
-    });
-}
-
-/**
- * Create left icon styles
- */
-function createLeftIconStyles(theme: Theme) {
-    return () => ({
-        color: theme.colors.text.secondary,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                fontSize: size.iconSize,
-                width: size.iconSize,
-                height: size.iconSize,
-            })),
-        },
-    });
-}
-
-/**
- * Create right icon styles
- */
-function createRightIconStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        flexShrink: 0,
-        color: theme.colors.text.secondary,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                fontSize: size.iconSize,
-                width: size.iconSize,
-                height: size.iconSize,
-            })),
-        },
-    });
-}
-
-/**
- * Create password toggle styles
- */
-function createPasswordToggleStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        flexShrink: 0,
-        padding: 0,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                marginLeft: size.iconMargin,
-            })),
-        },
-        _web: {
-            background: 'transparent',
-            border: 'none',
-            cursor: 'pointer',
-            _hover: {
-                opacity: 0.7,
-            },
-            _active: {
-                opacity: 0.5,
-            },
-        },
-    });
-}
-
-/**
- * Create password toggle icon styles
- */
-function createPasswordToggleIconStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        flexShrink: 0,
-        color: theme.colors.text.secondary,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                fontSize: size.iconSize,
-                width: size.iconSize,
-                height: size.iconSize,
-            })),
-        },
-    });
-}
-
-/**
- * Create input styles
- */
-function createInputStyles(theme: Theme) {
-    return () => ({
-        flex: 1,
-        minWidth: 0,
-        backgroundColor: 'transparent',
-        color: theme.colors.text.primary,
-        fontWeight: '400' as const,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                fontSize: size.fontSize,
-            })),
-        },
-        _web: {
-            border: 'none',
-            outline: 'none',
-            fontFamily: 'inherit',
-        },
-    });
-}
-
-// 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 inputStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-
-  return applyExtensions('Input', theme, {container: createContainerStyles(theme),
-    input: createInputStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-    leftIconContainer: createLeftIconContainerStyles(theme)(),
-    rightIconContainer: createRightIconContainerStyles(theme)(),
-    leftIcon: createLeftIconStyles(theme)(),
-    rightIcon: createRightIconStyles(theme)(),
-    passwordToggle: createPasswordToggleStyles(theme)(),
-    passwordToggleIcon: createPasswordToggleIconStyles(theme)()});
-});

package/src/List/List.styles.old.tsx

@@ -1,242 +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 { ListSizeVariant, ListType } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ListVariants = {
-    type: ListType;
-    size: ListSizeVariant;
-    scrollable: boolean;
-    active: boolean;
-    selected: boolean;
-    disabled: boolean;
-    clickable: boolean;
-};
-
-/**
- * Create type variants for container
- */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        default: {
-            backgroundColor: 'transparent',
-        },
-        bordered: {
-            backgroundColor: theme.colors.surface.primary,
-            borderWidth: 1,
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            _web: {
-                overflow: 'hidden',
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        divided: {
-            backgroundColor: 'transparent',
-        },
-    };
-}
-
-type ItemDynamicProps = {
-    type?: ListType;
-    disabled?: boolean;
-    clickable?: boolean;
-};
-
-/**
- * Get item hover styles based on disabled and clickable state
- */
-function getItemHoverStyles(theme: Theme, disabled: boolean, clickable: boolean) {
-    if (disabled || !clickable) {
-        return {
-            backgroundColor: 'transparent',
-            borderRadius: 0,
-        };
-    }
-    return {
-        backgroundColor: theme.colors.surface.secondary,
-        borderRadius: 4,
-    };
-}
-
-// Container style creator for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        width: '100%',
-        variants: {
-            type: createContainerTypeVariants(theme),
-            scrollable: {
-                true: {
-                    _web: {
-                        overflow: 'auto',
-                    },
-                },
-                false: {},
-            },
-            // 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),
-        },
-    });
-}
-
-// Item style creator for extension support
-function createItemStyles(theme: Theme) {
-    return ({ type = 'default', disabled = false, clickable = true }: ItemDynamicProps) => {
-        const hoverStyles = getItemHoverStyles(theme, disabled, clickable);
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            textAlign: 'left',
-            borderBottomWidth: type === 'divided' ? 1 : 0,
-            borderBottomStyle: type === 'divided' ? 'solid' as const : undefined,
-            borderBottomColor: type === 'divided' ? theme.colors.border.primary : undefined,
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                    minHeight: size.minHeight,
-                })),
-                active: {
-                    true: {
-                        backgroundColor: theme.colors.surface.secondary,
-                    },
-                    false: {},
-                },
-                selected: {
-                    true: {
-                        backgroundColor: theme.intents.primary.light + '20',
-                        borderLeftWidth: 3,
-                        borderLeftColor: theme.intents.primary.primary,
-                        _web: {
-                            borderLeft: `3px solid ${theme.intents.primary.primary}`,
-                        },
-                    },
-                    false: {},
-                },
-            } as const,
-            opacity: disabled ? 0.5 : 1,
-            _web: {
-                border: 'none',
-                cursor: disabled ? 'not-allowed' : (clickable ? 'pointer' : 'default'),
-                outline: 'none',
-                transition: 'background-color 0.2s ease, border-color 0.2s ease',
-                borderBottom: type === 'divided' ? `1px solid ${theme.colors.border.primary}` : undefined,
-                _hover: hoverStyles,
-            },
-        } as const;
-    };
-}
-
-export const listStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('List', theme, {container: createContainerStyles(theme),
-        item: createItemStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        itemContent: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: 1,
-            gap: 8,
-        },
-        leading: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginRight: 8,
-            color: theme.colors.text.secondary,
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
-            } as const,
-        } as const,
-        labelContainer: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        label: {
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    fontSize: size.labelFontSize,
-                    lineHeight: size.labelLineHeight,
-                })),
-                disabled: {
-                    true: {
-                        color: theme.colors.text.secondary,
-                    },
-                    false: {},
-                },
-                selected: {
-                    true: {
-                        color: theme.intents.primary.primary,
-                        fontWeight: '600',
-                    },
-                    false: {},
-                },
-            },
-        },
-        trailing: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginLeft: 8,
-            color: theme.colors.text.secondary,
-            flexShrink: 0,
-        },
-        trailingIcon: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'list', (size) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
-            },
-        },
-        section: {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        sectionTitle: {
-            fontWeight: '600',
-            fontSize: 12,
-            lineHeight: 16,
-            textTransform: 'uppercase',
-            letterSpacing: 0.5,
-            color: theme.colors.text.secondary,
-            padding: 8,
-            paddingBottom: 4,
-        },
-        sectionContent: {
-            display: 'flex',
-            flexDirection: 'column',
-        }});
-});