@idealyst/components 1.2.13 → 1.2.15

package/src/RadioButton/RadioButton.styles.old.tsx

@@ -1,175 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type RadioButtonSize = Size;
-type RadioButtonIntent = Intent;
-type RadioGroupOrientation = 'horizontal' | 'vertical';
-
-type RadioButtonVariants = {
-    size: RadioButtonSize;
-    intent: RadioButtonIntent;
-    checked: boolean;
-    disabled: boolean;
-}
-
-type RadioGroupVariants = {
-    orientation: RadioGroupOrientation;
-}
-
-export type ExpandedRadioButtonStyles = StylesheetStyles<keyof RadioButtonVariants>;
-export type ExpandedRadioGroupStyles = StylesheetStyles<keyof RadioGroupVariants>;
-
-export type RadioButtonStylesheet = {
-    container: ExpandedRadioButtonStyles;
-    radio: ExpandedRadioButtonStyles;
-    radioDot: ExpandedRadioButtonStyles;
-    label: ExpandedRadioButtonStyles;
-    groupContainer: ExpandedRadioGroupStyles;
-}
-
-function createRadioSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'radioButton', (size) => ({
-        width: size.radioSize,
-        height: size.radioSize,
-    }));
-}
-
-function createCheckedVariants(theme: Theme, intent: RadioButtonIntent) {
-    const intentValue = theme.intents[intent];
-    return {
-        true: {
-            borderColor: intentValue.primary,
-        },
-        false: {
-            borderColor: theme.colors.border.primary,
-        },
-    } as const;
-}
-
-function createRadioDotSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'radioButton', (size) => ({
-        width: size.radioDotSize,
-        height: size.radioDotSize,
-    }));
-}
-
-function createRadioDotIntentColor(theme: Theme, intent: RadioButtonIntent) {
-    return theme.intents[intent].primary;
-}
-
-function createRadioStyles(theme: Theme) {
-    return ({ intent }: Partial<RadioButtonVariants>) => {
-        return {
-            borderRadius: 9999,
-            borderWidth: 1.5,
-            borderStyle: 'solid',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors.surface.primary,
-            variants: {
-                size: createRadioSizeVariants(theme),
-                checked: createCheckedVariants(theme, intent),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        backgroundColor: theme.colors.surface.tertiary,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        backgroundColor: theme.colors.surface.primary,
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: {
-                                opacity: 0.8,
-                            },
-                            _active: {
-                                opacity: 0.6,
-                            },
-                        },
-                    },
-                },
-            },
-            _web: {
-                transition: 'all 0.2s ease',
-            },
-        } as const;
-    }
-}
-
-function createRadioDotStyles(theme: Theme) {
-    return ({ intent }: Partial<RadioButtonVariants>) => {
-        return {
-            borderRadius: 9999,
-            backgroundColor: createRadioDotIntentColor(theme, intent),
-            variants: {
-                size: createRadioDotSizeVariants(theme),
-            },
-        } as const;
-    }
-}
-
-// Container style creator for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        paddingVertical: 4,
-        variants: {
-            size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                gap: size.gap,
-            })),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        } 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 radioButtonStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('RadioButton', theme, {container: createContainerStyles(theme),
-        radio: createRadioStyles(theme),
-        radioDot: createRadioDotStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles
-        label: {
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                    fontSize: size.fontSize,
-                })),
-                disabled: {
-                    true: { opacity: 0.5 },
-                    false: { opacity: 1 },
-                },
-            },
-        },
-        groupContainer: {
-            gap: 4,
-            variants: {
-                orientation: {
-                    horizontal: {
-                        flexDirection: 'row',
-                        flexWrap: 'wrap',
-                        gap: 16,
-                    },
-                    vertical: {
-                        flexDirection: 'column',
-                    },
-                },
-            },
-        }});
-});

package/src/SVGImage/SVGImage.styles.old.tsx

@@ -1,86 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent} from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type SVGImageIntent = Intent;
-
-type SVGImageVariants = {
-    intent: SVGImageIntent;
-}
-
-export type ExpandedSVGImageStyles = StylesheetStyles<keyof SVGImageVariants>;
-
-export type SVGImageStylesheet = {
-    container: ExpandedSVGImageStyles;
-    image: ExpandedSVGImageStyles;
-}
-
-function createContainerIntentVariants(theme: Theme) {
-    return {
-        primary: {
-            filter: `brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)`,
-        },
-        success: {
-            filter: `brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)`,
-        },
-        error: {
-            filter: `brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)`,
-        },
-        warning: {
-            filter: `brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)`,
-        },
-        neutral: {
-            filter: `brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)`,
-        },
-        info: {
-            filter: `brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)`,
-        },
-    };
-}
-
-function createContainerNativeIntentVariants(theme: Theme) {
-    const variants: Record<SVGImageIntent, any> = {} as any;
-    for (const intent in theme.intents) {
-        variants[intent as SVGImageIntent] = {
-            tintColor: theme.intents[intent as SVGImageIntent].primary,
-        };
-    }
-    return variants;
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        variants: {
-            intent: createContainerIntentVariants(theme),
-        },
-        _web: {
-            userSelect: 'none',
-        },
-        _native: {
-            variants: {
-                intent: createContainerNativeIntentVariants(theme),
-            },
-        },
-    });
-}
-
-// 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 svgImageStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('SVGImage', theme, {container: createContainerStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        image: {
-            _web: {
-                display: 'block',
-                maxWidth: '100%',
-                height: 'auto',
-            },
-        }});
-});

package/src/Screen/Screen.styles.old.tsx

@@ -1,87 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-function generateBackgroundVariants(theme: Theme) {
-  return {
-    primary: { backgroundColor: theme.colors.surface.primary },
-    secondary: { backgroundColor: theme.colors.surface.secondary },
-    tertiary: { backgroundColor: theme.colors.surface.tertiary },
-    inverse: { backgroundColor: theme.colors.surface.inverse },
-    'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
-    'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
-    transparent: { backgroundColor: 'transparent' },
-  };
-}
-
-/**
- * Create dynamic screen styles.
- * Returns a function to ensure Unistyles can track theme changes.
- */
-function createScreenStyles(theme: Theme) {
-    return (_props?: {}) => ({
-        flex: 1,
-        variants: {
-            background: generateBackgroundVariants(theme),
-            safeArea: {
-                true: {},
-                false: {},
-            },
-            gap: buildGapVariants(theme),
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-        _web: {
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: '100%',
-            boxSizing: 'border-box',
-        },
-    });
-}
-
-/**
- * Create dynamic screen content styles for ScrollView.
- * No flex: 1 so content can grow beyond screen height.
- */
-function createScreenContentStyles(theme: Theme) {
-    return (_props?: {}) => ({
-        variants: {
-            background: generateBackgroundVariants(theme),
-            safeArea: {
-                true: {},
-                false: {},
-            },
-            gap: buildGapVariants(theme),
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-// Styles use applyExtensions to enable theme extensions and ensure proper
-// reactivity with Unistyles' native Shadow Tree updates.
-export const screenStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('Screen', theme, {
-        screen: createScreenStyles(theme),
-        screenContent: createScreenContentStyles(theme),
-    });
-});

package/src/Select/Select.styles.old.tsx

@@ -1,353 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { SelectIntentVariant } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-// Type definitions
-type SelectSize = Size;
-type SelectType = 'outlined' | 'filled';
-
-type SelectTriggerVariants = {
-    type: SelectType;
-    size: SelectSize;
-    intent: SelectIntentVariant;
-    disabled: boolean;
-    error: boolean;
-    focused: boolean;
-}
-
-
-export type ExpandedSelectTriggerStyles = StylesheetStyles<keyof SelectTriggerVariants>;
-export type ExpandedSelectStyles = StylesheetStyles<never>;
-
-function createTriggerTypeVariants(theme: Theme) {
-    return {
-        outlined: {
-            backgroundColor: theme.colors.surface.primary,
-            borderColor: theme.colors.border.primary,
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        filled: {
-            backgroundColor: theme.colors.surface.secondary,
-            borderColor: 'transparent',
-            _web: {
-                border: '1px solid transparent',
-            },
-        },
-    } as const;
-}
-
-function createTriggerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'select', (size) => ({
-        paddingHorizontal: size.paddingHorizontal,
-        minHeight: size.minHeight,
-    }));
-}
-
-function createIntentVariants(theme: Theme, type: SelectType, intent: SelectIntentVariant) {
-    if (intent === 'neutral') {
-        return {};
-    }
-
-    const intentValue = (theme.intents as any)[intent];
-
-    if (type === 'outlined') {
-        return {
-            borderColor: intentValue.primary,
-            _web: {
-                border: `1px solid ${intentValue.primary}`,
-            },
-        } as const;
-    }
-
-    return {} as const;
-}
-
-function buildDynamicTriggerStyles(theme: Theme) {
-    return ({ type, intent }: Partial<SelectTriggerVariants>) => {
-        const intentStyles = createIntentVariants(theme, type, intent);
-
-        return {
-            position: 'relative',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            borderRadius: 8,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            ...intentStyles,
-            variants: {
-                type: createTriggerTypeVariants(theme),
-                size: createTriggerSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.6,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: {
-                                opacity: 0.9,
-                            },
-                            _active: {
-                                opacity: 0.8,
-                            },
-                        },
-                    },
-                },
-                error: {
-                    true: {
-                        borderColor: theme.intents.error.primary,
-                        _web: {
-                            border: `1px solid ${theme.intents.error.primary}`,
-                        },
-                    },
-                    false: {},
-                },
-                focused: {
-                    true: {
-                        borderColor: theme.intents.primary.primary,
-                        _web: {
-                            border: `1px solid ${theme.intents.primary.primary}`,
-                            boxShadow: `0 0 0 2px ${theme.intents.primary.primary}20`,
-                            outline: 'none',
-                        },
-                    },
-                    false: {},
-                },
-            },
-            _web: {
-                display: 'flex',
-                boxSizing: 'border-box',
-                _focus: {
-                    outline: 'none',
-                },
-            },
-        } as const;
-    }
-}
-
-// Main element style creators (wrapped for extension support)
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        position: 'relative' as const,
-        variants: {
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-function createDropdownStyles(theme: Theme) {
-    return () => ({
-        position: 'absolute' as const,
-        top: '100%',
-        left: 0,
-        right: 0,
-        backgroundColor: theme.colors.surface.primary,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-        borderColor: theme.colors.border.primary,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.1,
-        shadowRadius: 24,
-        elevation: 8,
-        zIndex: 9999,
-        maxHeight: 240,
-        minWidth: 200,
-        overflow: 'hidden' as const,
-        _web: {
-            border: `1px solid ${theme.colors.border.primary}`,
-            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)',
-            overflowY: 'auto',
-        },
-    });
-}
-
-function createOptionStyles(theme: Theme) {
-    return () => ({
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        minHeight: 36,
-        _web: {
-            display: 'flex',
-            cursor: 'pointer',
-            _hover: {
-                backgroundColor: theme.colors.surface.secondary,
-            },
-            _active: {
-                opacity: 0.8,
-            },
-        },
-    });
-}
-
-// 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 selectStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('Select', theme, {
-        container: createContainerStyles(theme),
-        trigger: buildDynamicTriggerStyles(theme),
-        dropdown: createDropdownStyles(theme),
-        option: createOptionStyles(theme),
-        // Minor utility styles
-        label: {
-            fontSize: 14,
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-            marginBottom: 4,
-        },
-        triggerContent: {
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-        },
-        triggerText: {
-            color: theme.colors.text.primary,
-            flex: 1,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
-            },
-        },
-        placeholder: {
-            color: theme.colors.text.secondary,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
-            },
-        },
-        icon: {
-            marginLeft: 4,
-            color: theme.colors.text.secondary,
-        },
-        chevron: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginLeft: 4,
-            color: theme.colors.text.secondary,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                })),
-            },
-            _web: {
-                transition: 'transform 0.2s ease',
-            },
-        },
-        chevronOpen: {
-            _web: {
-                transform: 'rotate(180deg)',
-            }
-        },
-        searchContainer: {
-            padding: 8,
-            borderBottomWidth: 1,
-            borderBottomStyle: 'solid',
-            borderBottomColor: theme.colors.border.primary,
-            _web: {
-                borderBottom: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        searchInput: {
-            padding: 4,
-            borderRadius: 4,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            backgroundColor: theme.colors.surface.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
-            },
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-                outline: 'none',
-                _focus: {
-                    borderColor: theme.intents.primary.primary,
-                },
-            },
-        },
-        optionsList: {
-            paddingVertical: 4,
-        },
-        optionFocused: {
-            backgroundColor: theme.interaction.focusedBackground,
-            _web: {
-                outline: `1px solid ${theme.interaction.focusBorder}`,
-                outlineOffset: -1,
-            },
-        },
-        optionDisabled: {
-            opacity: theme.interaction.opacity.disabled,
-            _web: {
-                cursor: 'not-allowed',
-            },
-        },
-        optionContent: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: 1,
-        },
-        optionIcon: {
-            marginRight: 4,
-        },
-        optionText: {
-            color: theme.colors.text.primary,
-            flex: 1,
-            variants: {
-                size: buildSizeVariants(theme, 'select', (size: any) => ({
-                    fontSize: size.fontSize,
-                })),
-            },
-        },
-        optionTextDisabled: {
-            color: theme.colors.text.secondary,
-        },
-        helperText: {
-            fontSize: 12,
-            marginTop: 4,
-            color: theme.colors.text.secondary,
-            variants: {
-                error: {
-                    true: {
-                        color: theme.intents.error.primary,
-                    },
-                    false: {},
-                },
-            },
-        },
-        overlay: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 999,
-            _web: {
-                position: 'fixed',
-            },
-        },
-    });
-});