@idealyst/components 1.2.12 → 1.2.14

package/src/Chip/Chip.styles.old.tsx

@@ -1,184 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type ChipType = 'filled' | 'outlined' | 'soft';
-type ChipIntent = Intent;
-
-type ChipDynamicProps = {
-    size: ChipSize;
-    intent: ChipIntent;
-    type: ChipType;
-    selected: boolean;
-    disabled?: boolean;
-};
-
-type ChipDeleteButtonProps = {
-    size: ChipSize;
-};
-
-/**
- * Create container styles
- */
-function createContainerStyles(theme: Theme) {
-    return ({ size, intent, type, selected, disabled = false }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Compute colors based on type and selected state
-        let backgroundColor: string;
-        let borderColor: string;
-        let borderWidth: number;
-
-        if (type === 'filled') {
-            borderWidth = 1;
-            backgroundColor = selected ? intentValue.contrast : intentValue.primary;
-            borderColor = selected ? intentValue.primary : 'transparent';
-        } else if (type === 'outlined') {
-            borderWidth = 1;
-            backgroundColor = selected ? intentValue.primary : 'transparent';
-            borderColor = intentValue.primary;
-        } else { // soft
-            borderWidth = 0;
-            backgroundColor = selected ? intentValue.primary : intentValue.light;
-            borderColor = 'transparent';
-        }
-
-        return {
-            display: 'flex' as const,
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            gap: 4,
-            paddingHorizontal: sizeValue.paddingHorizontal as number,
-            paddingVertical: sizeValue.paddingVertical as number,
-            minHeight: sizeValue.minHeight as number,
-            borderRadius: sizeValue.borderRadius as number,
-            backgroundColor,
-            borderColor,
-            borderWidth,
-            borderStyle: borderWidth > 0 ? ('solid' as const) : undefined,
-            opacity: disabled ? 0.5 : 1,
-        } as const;
-    };
-}
-
-/**
- * Create label styles
- */
-function createLabelStyles(theme: Theme) {
-    return ({ size, intent, type, selected }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Compute color based on type and selected state
-        let color: string;
-
-        if (type === 'filled') {
-            color = selected ? intentValue.primary : intentValue.contrast;
-        } else if (type === 'outlined') {
-            color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else { // soft
-            color = selected ? theme.colors.text.inverse : intentValue.dark;
-        }
-
-        return {
-            fontFamily: 'inherit',
-            fontWeight: '500' as const,
-            fontSize: sizeValue.fontSize as number,
-            lineHeight: sizeValue.lineHeight as number,
-            color,
-        } as const;
-    };
-}
-
-/**
- * Create icon styles
- */
-function createIconStyles(theme: Theme) {
-    return ({ size, intent, type, selected }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Compute color based on type and selected state (same logic as label)
-        let color: string;
-
-        if (type === 'filled') {
-            color = selected ? intentValue.primary : intentValue.contrast;
-        } else if (type === 'outlined') {
-            color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else { // soft
-            color = selected ? theme.colors.text.inverse : intentValue.dark;
-        }
-
-        return {
-            display: 'flex' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            width: sizeValue.iconSize as number,
-            height: sizeValue.iconSize as number,
-            color,
-        } as const;
-    };
-}
-
-/**
- * Create delete button styles
- */
-function createDeleteButtonStyles(theme: Theme) {
-    return ({ size }: ChipDeleteButtonProps) => {
-        const sizeValue = theme.sizes.chip[size];
-
-        return {
-            display: 'flex' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            padding: 0,
-            marginLeft: 4,
-            borderRadius: 12,
-            width: sizeValue.iconSize as number,
-            height: sizeValue.iconSize as number,
-        } as const;
-    };
-}
-
-/**
- * Create delete icon styles
- */
-function createDeleteIconStyles(theme: Theme) {
-    return ({ size, intent, type, selected }: ChipDynamicProps) => {
-        const intentValue = theme.intents[intent];
-        const sizeValue = theme.sizes.chip[size];
-
-        // Compute color based on type and selected state (same logic as label/icon)
-        let color: string;
-
-        if (type === 'filled') {
-            color = selected ? intentValue.primary : intentValue.contrast;
-        } else if (type === 'outlined') {
-            color = selected ? theme.colors.text.inverse : intentValue.primary;
-        } else { // soft
-            color = selected ? theme.colors.text.inverse : intentValue.dark;
-        }
-
-        return {
-            fontSize: sizeValue.iconSize as number,
-            color,
-        } 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 chipStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Chip', theme, {container: createContainerStyles(theme),
-        label: createLabelStyles(theme),
-        icon: createIconStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        deleteButton: createDeleteButtonStyles(theme),
-        deleteIcon: createDeleteIconStyles(theme)});
-});

package/src/Dialog/Dialog.styles.old.tsx

@@ -1,202 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen';
-type DialogType = 'default' | 'alert' | 'confirmation';
-
-type DialogVariants = {
-    size: DialogSize;
-    type: DialogType;
-}
-
-export type ExpandedDialogStyles = StylesheetStyles<keyof DialogVariants>;
-
-export type DialogStylesheet = {
-    backdrop: ExpandedDialogStyles;
-    container: ExpandedDialogStyles;
-    header: ExpandedDialogStyles;
-    title: ExpandedDialogStyles;
-    closeButton: ExpandedDialogStyles;
-    closeButtonText: ExpandedDialogStyles;
-    content: ExpandedDialogStyles;
-    modal: ExpandedDialogStyles;
-}
-
-/**
- * Create size variants for container
- */
-function createContainerSizeVariants() {
-    return {
-        sm: {
-            width: '90%',
-            maxWidth: 400,
-        },
-        md: {
-            width: '90%',
-            maxWidth: 600,
-        },
-        lg: {
-            width: '90%',
-            maxWidth: 800,
-        },
-        fullscreen: {
-            width: '100%',
-            height: '100%',
-            borderRadius: 0,
-            maxHeight: '100%',
-        },
-    } as const;
-}
-
-/**
- * Create type variants for container
- */
-function createContainerTypeVariants(theme: Theme) {
-    return {
-        standard: {},
-        alert: {
-            borderTopWidth: 4,
-            borderTopColor: theme.colors.border.primary,
-        },
-        confirmation: {
-            borderTopWidth: 4,
-            borderTopColor: theme.colors.border.primary,
-        },
-    } as const;
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createBackdropStyles() {
-    return () => ({
-        position: 'absolute' as const,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        zIndex: 1000,
-        _web: {
-            position: 'fixed',
-            transition: 'opacity 150ms ease-out',
-        },
-    });
-}
-
-function createDialogContainerStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: theme.colors.surface.primary,
-        borderRadius: 12,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 10 },
-        shadowOpacity: 0.25,
-        shadowRadius: 20,
-        elevation: 10,
-        maxHeight: '90%',
-        variants: {
-            size: createContainerSizeVariants(),
-            type: createContainerTypeVariants(theme),
-        },
-        _web: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'auto',
-            boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-            transition: 'opacity 150ms ease-out, transform 150ms ease-out',
-            transformOrigin: 'center center',
-        },
-    });
-}
-
-function createHeaderStyles(theme: Theme) {
-    return () => ({
-        borderBottomWidth: 1,
-        borderBottomColor: theme.colors.border.primary,
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'space-between' as const,
-        _web: {
-            borderBottomStyle: 'solid',
-        },
-    });
-}
-
-function createTitleStyles(theme: Theme) {
-    return () => ({
-        marginLeft: 24,
-        fontSize: 18,
-        paddingVertical: 16,
-        fontWeight: '600' as const,
-        color: theme.colors.text.primary,
-        flex: 1,
-        _web: {
-            paddingVertical: 4,
-        },
-    });
-}
-
-function createCloseButtonStyles(theme: Theme) {
-    return () => ({
-        width: 32,
-        height: 32,
-        marginRight: 16,
-        borderRadius: 16,
-        backgroundColor: 'transparent' as const,
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        _web: {
-            border: 'none',
-            cursor: 'pointer',
-            _hover: {
-                backgroundColor: theme.colors.surface.secondary,
-            },
-        },
-    });
-}
-
-function createCloseButtonTextStyles(theme: Theme) {
-    return () => ({
-        fontSize: 18,
-        color: theme.colors.text.secondary,
-        fontWeight: '500' as const,
-    });
-}
-
-function createContentStyles() {
-    return () => ({
-        padding: 24,
-        _web: {
-            overflow: 'visible',
-            maxHeight: 'none',
-        },
-    });
-}
-
-function createModalStyles() {
-    return () => ({
-        margin: 0,
-        justifyContent: 'center' as const,
-        alignItems: 'center' 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 dialogStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Dialog', theme, {backdrop: createBackdropStyles(),
-        container: createDialogContainerStyles(theme),
-        header: createHeaderStyles(theme),
-        content: createContentStyles(),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        title: createTitleStyles(theme)(),
-        closeButton: createCloseButtonStyles(theme)(),
-        closeButtonText: createCloseButtonTextStyles(theme)(),
-        modal: createModalStyles()()});
-});

package/src/Divider/Divider.styles.old.tsx

@@ -1,172 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type DividerOrientation = 'horizontal' | 'vertical';
-type DividerThickness = 'thin' | 'md' | 'thick';
-type DividerType = 'solid' | 'dashed' | 'dotted';
-type DividerIntent = Intent | 'secondary' | 'neutral' | 'info';
-type DividerLength = 'full' | 'auto';
-type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
-
-type DividerDynamicProps = {
-    orientation?: DividerOrientation;
-    thickness?: DividerThickness;
-    type?: DividerType;
-    intent?: DividerIntent;
-    spacing?: DividerSpacing;
-};
-
-type LineDynamicProps = {
-    orientation?: DividerOrientation;
-    thickness?: DividerThickness;
-};
-
-function getIntentColor(theme: Theme, intent: DividerIntent): string {
-    if (intent === 'secondary') return theme.colors.border.primary;
-    if (intent === 'neutral') return theme.colors.border.secondary;
-    if (intent === 'info') return theme.intents.primary.primary;
-    return theme.intents[intent as Intent].primary;
-}
-
-function getThicknessValue(thickness: DividerThickness): number {
-    switch (thickness) {
-        case 'thin': return 1;
-        case 'md': return 2;
-        case 'thick': return 4;
-        default: return 1;
-    }
-}
-
-function getSpacingValue(spacing: DividerSpacing): number {
-    switch (spacing) {
-        case 'none': return 0;
-        case 'sm': return 8;
-        case 'md': return 16;
-        case 'lg': return 24;
-        default: return 0;
-    }
-}
-
-/**
- * Create dynamic divider styles
- */
-function createDividerStyles(theme: Theme) {
-    return ({
-        orientation = 'horizontal',
-        thickness = 'thin',
-        type = 'solid',
-        intent = 'neutral',
-        spacing = 'md'
-    }: DividerDynamicProps) => {
-        const color = getIntentColor(theme, intent);
-        const thicknessValue = getThicknessValue(thickness);
-        const spacingValue = getSpacingValue(spacing);
-
-        const isHorizontal = orientation === 'horizontal';
-        const isDashedOrDotted = type === 'dashed' || type === 'dotted';
-
-        // Base dimension styles based on orientation and thickness
-        const dimensionStyles = isHorizontal
-            ? { width: '100%', height: thicknessValue, flexDirection: 'row' as const }
-            : { width: thicknessValue, height: '100%', flexDirection: 'column' as const };
-
-        // Spacing styles based on orientation
-        const spacingStyles = isHorizontal
-            ? { marginVertical: spacingValue }
-            : { marginHorizontal: spacingValue };
-
-        // Web-specific border styles for dashed/dotted
-        const webBorderStyles = isDashedOrDotted ? {
-            border: 'none',
-            backgroundColor: 'transparent',
-            ...(isHorizontal
-                ? { borderTop: `${thicknessValue}px ${type} ${color}` }
-                : { borderLeft: `${thicknessValue}px ${type} ${color}` }
-            ),
-        } : {};
-
-        return {
-            backgroundColor: isDashedOrDotted ? 'transparent' : color,
-            ...dimensionStyles,
-            ...spacingStyles,
-            variants: {
-                length: {
-                    full: {},
-                    auto: {},
-                },
-            },
-            _web: webBorderStyles,
-        } as const;
-    };
-}
-
-/**
- * Create dynamic line styles (for dividers with content)
- */
-function createLineStyles(theme: Theme) {
-    return ({ orientation = 'horizontal', thickness = 'thin' }: LineDynamicProps) => {
-        const thicknessValue = getThicknessValue(thickness);
-        const isHorizontal = orientation === 'horizontal';
-
-        return {
-            backgroundColor: theme.colors.border.secondary,
-            flex: 1,
-            ...(isHorizontal
-                ? { height: thicknessValue }
-                : { width: thicknessValue }
-            ),
-        } 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 dividerStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Divider', theme, {divider: createDividerStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        container: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            display: 'flex',
-            variants: {
-                orientation: {
-                    horizontal: {
-                        flexDirection: 'row',
-                        width: '100%',
-                    },
-                    vertical: {
-                        flexDirection: 'column',
-                        height: '100%',
-                    },
-                },
-                spacing: {
-                    none: { gap: 0 },
-                    xs: { gap: 4 },
-                    sm: { gap: 8 },
-                    md: { gap: 16 },
-                    lg: { gap: 24 },
-                    xl: { gap: 32 },
-                },
-            },
-        },
-        content: {
-            backgroundColor: theme.colors.surface.primary,
-            color: theme.colors.text.secondary,
-            fontSize: 14,
-            variants: {
-                orientation: {
-                    horizontal: {
-                        paddingHorizontal: 8,
-                    },
-                    vertical: {
-                        paddingVertical: 8,
-                    },
-                },
-            },
-        },
-        line: createLineStyles(theme)});
-});

package/src/Icon/Icon.styles.old.tsx

@@ -1,81 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Color, getColorFromString } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { IconSizeVariant } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type IconVariants = {
-    size: IconSizeVariant;
-    intent?: Intent;
-    color?: Color;
-}
-
-export type ExpandedIconStyles = StylesheetStyles<keyof IconVariants>;
-
-export type IconStylesheet = {
-    icon: ExpandedIconStyles;
-}
-
-/**
- * Create color variants for icon
- */
-function getIconColor(theme: Theme, color?: Color, intent?: Intent): string {
-    if (intent) {
-        return theme.intents[intent]?.primary
-    } else if (color) {
-        return getColorFromString(theme, color);
-    }
-    return theme.colors.text.primary;
-}
-
-export function buildIconSize(theme: Theme, size?: IconSizeVariant) {
-    // Handle direct numeric sizes
-    if (typeof size === 'number') {
-        return {
-            width: size,
-            height: size,
-        };
-    }
-
-    // Default to 'md' if size is undefined
-    const sizeKey = size || 'md';
-    const iconSize = theme.sizes.icon[sizeKey];
-
-    if (typeof iconSize === 'number') {
-        return {
-            width: iconSize,
-            height: iconSize,
-        };
-    }
-
-    return buildSizeVariants(theme, 'icon', (size) => ({
-        width: size.width,
-        height: size.height,
-    }))[sizeKey];
-}
-
-function createIconStyles(theme: Theme) {
-    return ({ color, intent, size }: Partial<IconVariants>) => {
-        const iconSize = buildIconSize(theme, size);
-        return {
-            width: iconSize.width,
-            height: iconSize.height,
-            color: getIconColor(theme, color, intent),
-            _web: {
-                display: 'inline-block',
-                verticalAlign: 'middle',
-                flexShrink: 0,
-                lineHeight: 0,
-            },
-        } 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 iconStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    return applyExtensions('Icon', theme, {
-        icon: createIconStyles(theme),
-    });
-});

package/src/Image/Image.styles.old.tsx

@@ -1,69 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ImageVariants = {}
-
-export type ExpandedImageStyles = StylesheetStyles<keyof ImageVariants>;
-
-export type ImageStylesheet = {
-    container: ExpandedImageStyles;
-    image: ExpandedImageStyles;
-    placeholder: ExpandedImageStyles;
-    fallback: ExpandedImageStyles;
-    loadingIndicator: ExpandedImageStyles;
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        position: 'relative' as const,
-        overflow: 'hidden' as const,
-        backgroundColor: theme.colors['gray.200'],
-    });
-}
-
-function createImageStyles() {
-    return () => ({
-        width: '100%' as const,
-        height: '100%' 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 imageStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Image', theme, {container: createContainerStyles(theme),
-        image: createImageStyles(),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        placeholder: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors['gray.200'],
-        },
-        fallback: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors['gray.300'],
-            color: theme.colors['gray.600'],
-        },
-        loadingIndicator: {
-            color: theme.colors['gray.600'],
-        }});
-});