@idealyst/components 1.2.13 → 1.2.14

package/src/Menu/Menu.styles.old.tsx

@@ -1,197 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, CompoundVariants, Intent, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type MenuSize = Size;
-type MenuIntent = Intent;
-
-type MenuVariants = {
-    size: MenuSize;
-    intent: MenuIntent;
-    disabled: boolean;
-}
-
-export type ExpandedMenuStyles = StylesheetStyles<keyof MenuVariants>;
-
-export type MenuStylesheet = {
-    overlay: ExpandedMenuStyles;
-    menu: ExpandedMenuStyles;
-    separator: ExpandedMenuStyles;
-    item: ExpandedMenuStyles;
-    icon: ExpandedMenuStyles;
-    label: ExpandedMenuStyles;
-}
-
-/**
- * Create size variants for menu item
- */
-function createItemSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        paddingVertical: size.paddingVertical,
-        paddingHorizontal: size.paddingHorizontal,
-    }));
-}
-
-/**
- * Get hover styles for menu item based on intent
- */
-function getItemHoverStyles(theme: Theme, intent: MenuIntent) {
-    if (intent === 'neutral') {
-        return {};
-    }
-    const intentValue = theme.intents[intent];
-    return {
-        _web: {
-            _hover: {
-                backgroundColor: intentValue.light + '20',
-                color: intentValue.primary,
-            },
-        },
-    } as const;
-}
-
-/**
- * Create compound variants for menu item
- */
-function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof MenuVariants> {
-    return [
-        {
-            disabled: true,
-            styles: {
-                _web: {
-                    _hover: {
-                        backgroundColor: 'transparent',
-                    },
-                },
-            },
-        },
-    ] as const;
-}
-
-/**
- * Create size variants for icon
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-        fontSize: size.iconSize,
-    }));
-}
-
-/**
- * Create size variants for label
- */
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'menu', (size) => ({
-        fontSize: size.labelFontSize,
-    }));
-}
-
-// Main element style creators (for extension support)
-function createOverlayStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: 'transparent',
-        _web: {
-            position: 'fixed' as const,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 999,
-        },
-    });
-}
-
-function createMenuStyles(theme: Theme) {
-    return () => ({
-        position: 'absolute' as const,
-        zIndex: 1000,
-        backgroundColor: theme.colors.surface.primary,
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-        borderColor: theme.colors.border.primary,
-        borderRadius: 8,
-        minWidth: 120,
-        maxWidth: 400,
-        padding: 4,
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        _web: {
-            border: `1px solid ${theme.colors.border.primary}`,
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-            width: 'fit-content',
-        },
-    });
-}
-
-function createItemStyles(theme: Theme) {
-    return ({ intent }: Partial<MenuVariants>) => {
-        const hoverStyles = getItemHoverStyles(theme, intent ?? 'neutral');
-        return {
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            borderRadius: 4,
-            minHeight: 44,
-            variants: {
-                size: createItemSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
-                },
-            },
-            compoundVariants: createItemCompoundVariants(theme),
-            _web: {
-                cursor: 'pointer',
-                border: 'none',
-                outline: 'none',
-                transition: 'background-color 0.2s ease',
-                textAlign: 'left',
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-            },
-            ...hoverStyles,
-        } 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 menuStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Menu', theme, {overlay: createOverlayStyles(theme),
-        menu: createMenuStyles(theme),
-        item: createItemStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        separator: {
-            height: 1,
-            backgroundColor: theme.colors.border.primary,
-            marginTop: 4,
-            marginBottom: 4,
-        },
-        icon: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            marginRight: 8,
-            variants: {
-                size: createIconSizeVariants(theme),
-            } as const,
-        } as const,
-        label: {
-            flex: 1,
-            color: theme.colors.text.primary,
-            variants: {
-                size: createLabelSizeVariants(theme),
-            } as const,
-        } as const});
-});

package/src/Menu/MenuItem.styles.old.tsx

@@ -1,114 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type MenuItemDynamicProps = {
-    intent?: Intent;
-};
-
-/**
- * Get hover styles for menu item based on intent
- */
-function getItemHoverStyles(theme: Theme, intent: Intent) {
-    if (intent === 'neutral') {
-        return {
-            _web: {
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-            },
-        } as const;
-    }
-    const intentValue = theme.intents[intent];
-    return {
-        _web: {
-            _hover: {
-                backgroundColor: intentValue.light,
-                color: intentValue.primary,
-            },
-        },
-    } as const;
-}
-
-/**
- * Create dynamic item styles
- */
-function createItemStyles(theme: Theme) {
-    return ({ intent = 'neutral' }: MenuItemDynamicProps) => {
-        const hoverStyles = getItemHoverStyles(theme, intent);
-        return {
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: 'transparent',
-            borderRadius: 4,
-            minHeight: 44,
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    paddingVertical: size.paddingVertical,
-                    paddingHorizontal: size.paddingHorizontal,
-                })),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                            _hover: {
-                                backgroundColor: 'transparent',
-                            },
-                        },
-                    },
-                    false: {},
-                },
-            },
-            _web: {
-                display: 'flex',
-                width: '100%',
-                cursor: 'pointer',
-                border: 'none',
-                borderWidth: 0,
-                outline: 'none',
-                transition: 'background-color 0.2s ease',
-                textAlign: 'left',
-                _hover: {
-                    backgroundColor: theme.colors.surface.secondary,
-                },
-            },
-            ...hoverStyles,
-        } 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 menuItemStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('MenuItem', theme, {item: createItemStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        icon: {
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            marginRight: 12,
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    width: size.iconSize,
-                    height: size.iconSize,
-                    fontSize: size.iconSize,
-                }))
-            },
-            _web: {
-                display: 'flex',
-            },
-        },
-        label: {
-            flex: 1,
-            color: theme.colors.text.primary,
-            variants: {
-                size: buildSizeVariants(theme, 'menu', (size) => ({
-                    fontSize: size.labelFontSize,
-                })),
-            },
-        }});
-});

package/src/Popover/Popover.styles.old.tsx

@@ -1,135 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
-
-type PopoverVariants = {
-    placement: PopoverPlacement;
-}
-
-export type ExpandedPopoverStyles = StylesheetStyles<keyof PopoverVariants>;
-
-export type PopoverStylesheet = {
-    container: ExpandedPopoverStyles;
-    content: ExpandedPopoverStyles;
-    arrow: ExpandedPopoverStyles;
-    backdrop: ExpandedPopoverStyles;
-}
-
-function createArrowPlacementVariants(theme: Theme) {
-    return {
-        top: {
-            bottom: -6,
-            _web: {
-                left: '50%',
-                marginLeft: -6,
-            },
-        },
-        'top-start': {
-            bottom: -6,
-            left: 16,
-        },
-        'top-end': {
-            bottom: -6,
-            right: 16,
-        },
-        bottom: {
-            top: -6,
-            _web: {
-                left: '50%',
-                marginLeft: -6,
-            },
-        },
-        'bottom-start': {
-            top: -6,
-            left: 16,
-        },
-        'bottom-end': {
-            top: -6,
-            right: 16,
-        },
-        left: {
-            right: -6,
-            _web: {
-                top: '50%',
-                marginTop: -6,
-            },
-        },
-        'left-start': {
-            right: -6,
-            top: 16,
-        },
-        'left-end': {
-            right: -6,
-            bottom: 16,
-        },
-        right: {
-            left: -6,
-            _web: {
-                top: '50%',
-                marginTop: -6,
-            },
-        },
-        'right-start': {
-            left: -6,
-            top: 16,
-        },
-        'right-end': {
-            left: -6,
-            bottom: 16,
-        },
-    };
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: theme.colors.surface.primary,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: theme.colors.border.primary,
-        borderStyle: 'solid' as const,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.1,
-        shadowRadius: 12,
-        elevation: 8,
-        _web: {
-            border: `1px solid ${theme.colors.border.primary}`,
-            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-            transition: 'opacity 150ms ease-out, transform 150ms ease-out',
-            transformOrigin: 'center center',
-        },
-    });
-}
-
-// 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 popoverStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Popover', theme, {container: createContainerStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        content: {
-            padding: 16,
-        },
-        arrow: {
-            position: 'absolute',
-            width: 12,
-            height: 12,
-            backgroundColor: theme.colors.surface.primary,
-            variants: {
-                placement: createArrowPlacementVariants(theme),
-            },
-            _web: {
-                transform: 'rotate(45deg)',
-                boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
-            },
-        },
-        backdrop: {
-            flex: 1,
-            backgroundColor: 'transparent',
-        }});
-});

package/src/Pressable/Pressable.styles.old.tsx

@@ -1,27 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
-import {
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-// Style creators for extension support
-function createPressableStyles(theme: Theme) {
-    return () => ({
-        variants: {
-            // Spacing variants from PressableSpacingStyleProps
-            padding: buildPaddingVariants(theme),
-            paddingVertical: buildPaddingVerticalVariants(theme),
-            paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        },
-    });
-}
-
-export const pressableStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    return applyExtensions('Pressable', theme, {
-        pressable: createPressableStyles(theme),
-    });
-});

package/src/Progress/Progress.styles.old.tsx

@@ -1,200 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ProgressSize = Size;
-type ProgressIntent = Intent;
-
-export type ProgressVariants = {
-    size: ProgressSize;
-    intent: ProgressIntent;
-    rounded: boolean;
-}
-
-type ProgressDynamicProps = {
-    intent?: ProgressIntent;
-};
-
-function createLinearTrackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        height: size.linearHeight,
-    }));
-}
-
-function createCircularContainerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        width: size.circularSize,
-        height: size.circularSize,
-    }));
-}
-
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        fontSize: size.labelFontSize,
-    }));
-}
-
-function createCircularLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        fontSize: size.circularLabelFontSize,
-    }));
-}
-
-/**
- * Get bar background color based on intent
- */
-function getBarBackgroundColor(theme: Theme, intent: ProgressIntent): string {
-    return theme.intents[intent].primary;
-}
-
-/**
- * Create dynamic linear bar styles
- */
-function createLinearBarStyles(theme: Theme) {
-    return ({ intent = 'primary' }: ProgressDynamicProps) => {
-        return {
-            height: '100%' as const,
-            backgroundColor: getBarBackgroundColor(theme, intent),
-            variants: {
-                rounded: {
-                    true: { borderRadius: 9999 },
-                    false: { borderRadius: 0 },
-                },
-            },
-            _web: {
-                transition: 'width 0.3s ease' as const,
-            },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic indeterminate bar styles
- */
-function createIndeterminateBarStyles(theme: Theme) {
-    return ({ intent = 'primary' }: ProgressDynamicProps) => {
-        return {
-            position: 'absolute' as const,
-            height: '100%' as const,
-            width: '40%' as const,
-            backgroundColor: getBarBackgroundColor(theme, intent),
-            variants: {
-                rounded: {
-                    true: { borderRadius: 9999 },
-                    false: { borderRadius: 0 },
-                },
-            },
-        } as const;
-    };
-}
-
-/**
- * Create dynamic circular bar styles
- */
-function createCircularBarStyles(theme: Theme) {
-    return ({ intent = 'primary' }: ProgressDynamicProps) => {
-        return {
-            _web: {
-                stroke: getBarBackgroundColor(theme, intent),
-            },
-        } as const;
-    };
-}
-
-/**
- * Create container styles
- */
-function createContainerStyles() {
-    return () => ({
-        gap: 4 as const,
-    });
-}
-
-/**
- * Create linear track styles
- */
-function createLinearTrackStyles(theme: Theme) {
-    return () => ({
-        backgroundColor: theme.colors.border.secondary,
-        overflow: 'hidden' as const,
-        position: 'relative' as const,
-        variants: {
-            size: createLinearTrackSizeVariants(theme),
-            rounded: {
-                true: { borderRadius: 9999 },
-                false: { borderRadius: 0 },
-            },
-        },
-    });
-}
-
-/**
- * Create circular container styles
- */
-function createCircularContainerStyles(theme: Theme) {
-    return () => ({
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        position: 'relative' as const,
-        variants: {
-            size: createCircularContainerSizeVariants(theme),
-        } as const,
-    });
-}
-
-/**
- * Create circular track styles
- */
-function createCircularTrackStyles(theme: Theme) {
-    return () => ({
-        _web: {
-            stroke: theme.colors.border.secondary,
-        },
-    });
-}
-
-/**
- * Create label styles
- */
-function createLabelStyles(theme: Theme) {
-    return () => ({
-        color: theme.colors.text.primary,
-        textAlign: 'center' as const,
-        variants: {
-            size: createLabelSizeVariants(theme),
-        },
-    });
-}
-
-/**
- * Create circular label styles
- */
-function createCircularLabelStyles(theme: Theme) {
-    return () => ({
-        position: 'absolute' as const,
-        fontWeight: '600' as const,
-        color: theme.colors.text.primary,
-        variants: {
-            size: createCircularLabelSizeVariants(theme),
-        },
-    });
-}
-
-// 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 progressStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-
-  return applyExtensions('Progress', theme, {container: createContainerStyles(),
-    linearTrack: createLinearTrackStyles(theme),
-    linearBar: createLinearBarStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-    indeterminateBar: createIndeterminateBarStyles(theme),
-    circularContainer: createCircularContainerStyles(theme)(),
-    circularTrack: createCircularTrackStyles(theme)(),
-    circularBar: createCircularBarStyles(theme),
-    label: createLabelStyles(theme)(),
-    circularLabel: createCircularLabelStyles(theme)()});
-});