@idealyst/components 1.2.12 → 1.2.14

package/src/Skeleton/Skeleton.styles.old.tsx

@@ -1,67 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type SkeletonShape = 'rectangle' | 'rounded' | 'circle';
-type SkeletonAnimation = 'pulse' | 'wave' | 'none';
-
-type SkeletonVariants = {
-    shape: SkeletonShape;
-    animation: SkeletonAnimation;
-}
-
-export type ExpandedSkeletonStyles = StylesheetStyles<keyof SkeletonVariants>;
-export type ExpandedSkeletonGroupStyles = StylesheetStyles<never>;
-
-export type SkeletonStylesheet = {
-    skeleton: ExpandedSkeletonStyles;
-    group: ExpandedSkeletonGroupStyles;
-}
-
-/**
- * Create shape variants for skeleton
- */
-function createShapeVariants(theme: Theme) {
-    return {
-        rectangle: {
-            borderRadius: 0,
-        },
-        rounded: {
-            borderRadius: 8,
-        },
-        circle: {
-            borderRadius: 9999,
-        },
-    } as const;
-}
-
-// Style creators for extension support
-function createSkeletonStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: theme.colors.surface.tertiary,
-        overflow: 'hidden' as const,
-        variants: {
-            shape: createShapeVariants(theme),
-            animation: {
-                pulse: {},
-                wave: {},
-                none: {},
-            },
-        },
-    });
-}
-
-// 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 skeletonStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Skeleton', theme, {skeleton: createSkeletonStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        group: {
-            display: 'flex',
-            flexDirection: 'column',
-        }});
-});

package/src/Slider/Slider.styles.old.tsx

@@ -1,259 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Size, Styles} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { SliderIntentVariant } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-/**
- * Create size variants for track
- */
-function createTrackSizeVariants(theme: Theme) {
-    const variants = {} as Record<Size, Styles>;
-    for (const sizeKey in theme.sizes.slider) {
-        const size = sizeKey as Size;
-        variants[size] = {
-            height: theme.sizes.slider[size].trackHeight,
-        };
-    }
-    return variants;
-}
-
-/**
- * Get filled track color based on intent
- */
-function getFilledTrackColor(theme: Theme, intent: SliderIntentVariant) {
-    return theme.intents[intent].primary;
-}
-
-/**
- * Create size variants for thumb
- */
-function createThumbSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'slider', (size) => ({
-        width: size.thumbSize,
-        height: size.thumbSize,
-    }));
-}
-
-/**
- * Get thumb border color based on intent
- */
-function getThumbBorderColor(theme: Theme, intent: SliderIntentVariant) {
-    return theme.intents[intent].primary;
-}
-
-/**
- * Create size variants for thumb icon
- */
-function createThumbIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'slider', (size) => ({
-        width: size.thumbIconSize,
-        height: size.thumbIconSize,
-        minWidth: size.thumbIconSize,
-        maxWidth: size.thumbIconSize,
-        minHeight: size.thumbIconSize,
-        maxHeight: size.thumbIconSize,
-    }));
-}
-
-/**
- * Get thumb icon color based on intent
- */
-function getThumbIconColor(theme: Theme, intent: SliderIntentVariant){
-    return theme.intents[intent].primary;
-}
-
-/**
- * Create size variants for mark
- */
-function createMarkSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'slider', (size) => ({
-        height: size.markHeight,
-    }));
-}
-
-const createFilledTrackStyles = (theme: Theme) => {
-    return ({ intent }: { intent: SliderIntentVariant }) => {
-        return {
-            position: 'absolute',
-            height: '100%',
-            borderRadius: 9999,
-            top: 0,
-            left: 0,
-            backgroundColor: getFilledTrackColor(theme, intent),
-        } as const;
-    }
-}
-
-const createThumbStyles = (theme: Theme) => {
-    return ({ intent, disabled }: { intent: SliderIntentVariant, disabled: boolean }) => {
-        return {
-            position: 'absolute',
-            backgroundColor: theme.colors.surface.primary,
-            borderRadius: 9999,
-            borderWidth: 2,
-            borderStyle: 'solid',
-            borderColor: getThumbBorderColor(theme, intent),
-            top: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.2,
-            shadowRadius: 4,
-            elevation: 2,
-            variants: {
-                size: createThumbSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.6,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'grab',
-                            _hover: {
-                                transform: 'translate(-50%, -50%) scale(1.05)',
-                            },
-                            _active: {
-                                cursor: 'grabbing',
-                                transform: 'translate(-50%, -50%) scale(1.1)',
-                            },
-                        },
-                    },
-                },
-            },
-            _web: {
-                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-                transform: 'translate(-50%, -50%)',
-                transition: 'transform 0.15s ease, box-shadow 0.2s ease',
-            },
-        } as const;
-    }
-}
-
-const createThumbIconStyles = (theme: Theme) => {
-    return ({ intent }: { intent: SliderIntentVariant }) => {
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            color: getThumbIconColor(theme, intent),
-            variants: {
-                size: createThumbIconSizeVariants(theme),
-            },
-        } as const;
-    }
-}
-
-// Container style creator for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        gap: 4,
-        paddingVertical: 8,
-        variants: {
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-// Track style creator for extension support
-function createTrackStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: theme.colors.surface.tertiary,
-        borderRadius: 9999,
-        position: 'relative' as const,
-        variants: {
-            size: createTrackSizeVariants(theme),
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                    _web: { cursor: 'not-allowed' },
-                },
-                false: {
-                    opacity: 1,
-                    _web: { cursor: 'pointer' },
-                },
-            },
-        } 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 sliderStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Slider', theme, {container: createContainerStyles(theme),
-        track: createTrackStyles(theme),
-        filledTrack: createFilledTrackStyles(theme),
-        thumb: createThumbStyles(theme),
-        thumbIcon: createThumbIconStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles
-        sliderWrapper: {
-            position: 'relative',
-            paddingVertical: 4,
-        },
-        thumbActive: {
-            _web: {
-                transform: 'translate(-50%, -50%) scale(1.1)',
-            },
-        },
-        valueLabel: {
-            fontSize: 12,
-            fontWeight: '600',
-            color: theme.colors.text.primary,
-            textAlign: 'center',
-        },
-        minMaxLabels: {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            marginTop: 4,
-        },
-        minMaxLabel: {
-            fontSize: 12,
-            color: theme.colors.text.secondary,
-        },
-        mark: {
-            position: 'absolute',
-            width: 2,
-            backgroundColor: theme.colors.border.secondary,
-            top: '50%',
-            variants: {
-                size: createMarkSizeVariants(theme),
-            },
-            _web: {
-                transform: 'translate(-50%, -50%)',
-            },
-        },
-        marks: {
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            left: 0,
-        },
-        markLabel: {
-            position: 'absolute',
-            fontSize: 10,
-            color: theme.colors.text.secondary,
-            top: '100%',
-            marginTop: 4,
-            _web: {
-                transform: 'translateX(-50%)',
-                whiteSpace: 'nowrap',
-            },
-        }});
-});

package/src/Switch/Switch.styles.old.tsx

@@ -1,203 +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 { SwitchIntentVariant, SwitchSizeVariant } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-function createTrackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'switch', (size) => ({
-        width: size.trackWidth,
-        height: size.trackHeight,
-    }));
-}
-
-function getTrackBackgroundColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
-    if (checked) {
-        return theme.intents[intent].primary;
-    }
-    return theme.colors.border.secondary;
-}
-
-function createThumbSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'switch', (size) => ({
-        width: size.thumbSize,
-        height: size.thumbSize,
-        left: 2,
-    }));
-}
-
-function getThumbTransform(theme: Theme, size: SwitchSizeVariant, checked: boolean) {
-    const sizeValue = theme.sizes.switch[size];
-    const translateX = checked ? sizeValue.translateX : 0;
-    return `translateY(-50%) translateX(${translateX}px)`;
-}
-
-function createThumbIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'switch', (size) => ({
-        width: size.thumbIconSize,
-        height: size.thumbIconSize,
-    }));
-}
-
-function getThumbIconColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
-    if (checked) {
-        return theme.intents[intent].primary;
-    }
-    return theme.colors.border.secondary;
-}
-
-function createSwitchTrackStyles(theme: Theme) {
-    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
-        return {
-            borderRadius: 9999,
-            position: 'relative',
-            backgroundColor: getTrackBackgroundColor(theme, checked, intent),
-            variants: {
-                size: createTrackSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: {
-                                opacity: 0.9,
-                            },
-                            _active: {
-                                opacity: 0.8,
-                            },
-                        },
-                    },
-                },
-            } as const,
-            _web: {
-                transition: 'background-color 0.2s ease',
-            },
-        } as const;
-    }
-}
-
-function createSwitchThumbStyles(theme: Theme) {
-    return ({ size, checked }: { size: SwitchSizeVariant, checked: boolean }) => {
-        return {
-            position: 'absolute',
-            backgroundColor: theme.colors.surface.primary,
-            borderRadius: 9999,
-            top: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.2,
-            shadowRadius: 3,
-            elevation: 2,
-            variants: {
-                size: createThumbSizeVariants(theme),
-            },
-            _web: {
-                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
-                transition: 'transform 0.2s ease',
-                transform: getThumbTransform(theme, size, checked),
-            },
-        } as const;
-    }
-}
-
-function createThumbIconStyles(theme: Theme) {
-    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: getThumbIconColor(theme, checked, intent),
-            variants: {
-                size: createThumbIconSizeVariants(theme),
-            },
-        } as const;
-    }
-}
-
-/**
- * Create container styles
- */
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        gap: 8,
-        variants: {
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-/**
- * Create switch container styles
- */
-function createSwitchContainerStyles() {
-    return () => ({
-        justifyContent: 'center' as const,
-        _web: {
-            border: 'none',
-            padding: 0,
-            backgroundColor: 'transparent',
-            width: 'fit-content',
-        },
-    });
-}
-
-/**
- * Create label styles
- */
-function createLabelStyles(theme: Theme) {
-    return () => ({
-        fontSize: 14,
-        color: theme.colors.text.primary,
-        variants: {
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {
-                    opacity: 1,
-                },
-            },
-            position: {
-                left: {
-                    marginRight: 8,
-                },
-                right: {
-                    marginLeft: 8,
-                },
-            },
-        } 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 switchStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-
-  return applyExtensions('Switch', theme, {container: createContainerStyles(theme),
-    switchTrack: createSwitchTrackStyles(theme),
-    switchThumb: createSwitchThumbStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-    switchContainer: createSwitchContainerStyles()(),
-    thumbIcon: createThumbIconStyles(theme),
-    label: createLabelStyles(theme)()});
-});