@idealyst/components 1.2.13 → 1.2.15

package/src/Alert/Alert.styles.old.tsx

@@ -1,209 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent } from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type AlertType = 'filled' | 'outlined' | 'soft';
-type AlertIntent = Intent;
-
-export type AlertVariants = {
-    type: AlertType;
-    intent: AlertIntent;
-}
-
-type AlertDynamicProps = {
-    intent?: AlertIntent;
-    type?: AlertType;
-};
-
-/**
- * Get the intent value, mapping 'info' to 'primary' for backwards compatibility
- */
-function getIntentValue(theme: Theme, intent: AlertIntent) {
-    return theme.intents[intent];
-}
-
-/**
- * Get container background color based on intent and type
- */
-function getContainerBackgroundColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
-    const intentValue = getIntentValue(theme, intent);
-    if (type === 'filled') {
-        return intentValue.primary;
-    }
-    if (type === 'soft') {
-        return intentValue.light;
-    }
-    return 'transparent'; // outlined
-}
-
-/**
- * Get container border color based on intent and type
- */
-function getContainerBorderColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
-    const intentValue = getIntentValue(theme, intent);
-    if (type === 'filled' || type === 'outlined') {
-        return intentValue.primary;
-    }
-    return intentValue.light; // soft
-}
-
-/**
- * Get icon/title color based on intent and type
- */
-function getIconTitleColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
-    const intentValue = getIntentValue(theme, intent);
-    if (type === 'filled') {
-        return intentValue.contrast;
-    }
-    return intentValue.primary; // outlined, soft
-}
-
-/**
- * Get message color based on intent and type
- */
-function getMessageColor(theme: Theme, intent: AlertIntent, type: AlertType): string {
-    const intentValue = getIntentValue(theme, intent);
-    if (type === 'filled') {
-        return intentValue.contrast;
-    }
-    return theme.colors.text.primary; // outlined, soft
-}
-
-/**
- * Create dynamic container styles
- */
-function createContainerStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-            gap: 8,
-            padding: 16,
-            borderRadius: 8,
-            borderWidth: 1,
-            borderStyle: 'solid' as const,
-            backgroundColor: getContainerBackgroundColor(theme, intent, type),
-            borderColor: getContainerBorderColor(theme, intent, type),
-        } as const;
-    };
-}
-
-/**
- * Create dynamic icon container styles
- */
-function createIconContainerStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-            width: 24,
-            height: 24,
-            color: getIconTitleColor(theme, intent, type),
-        } as const;
-    };
-}
-
-/**
- * Create dynamic title styles
- */
-function createTitleStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
-        return {
-            fontSize: 16,
-            lineHeight: 24,
-            fontWeight: '600',
-            color: getIconTitleColor(theme, intent, type),
-        } as const;
-    };
-}
-
-/**
- * Create dynamic message styles
- */
-function createMessageStyles(theme: Theme) {
-    return ({ intent = 'neutral', type = 'soft' }: AlertDynamicProps) => {
-        return {
-            fontSize: 14,
-            lineHeight: 20,
-            color: getMessageColor(theme, intent, type),
-        } as const;
-    };
-}
-
-/**
- * Create content styles
- */
-function createContentStyles() {
-    return () => ({
-        flex: 1,
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        gap: 4,
-    });
-}
-
-/**
- * Create actions styles
- */
-function createActionsStyles() {
-    return () => ({
-        marginTop: 4,
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        gap: 8,
-    });
-}
-
-/**
- * Create close button styles
- */
-function createCloseButtonStyles() {
-    return () => ({
-        padding: 4,
-        backgroundColor: 'transparent',
-        borderRadius: 4,
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        flexShrink: 0,
-        _web: {
-            border: 'none',
-            cursor: 'pointer',
-            outline: 'none',
-            _hover: {
-                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-            },
-        },
-    });
-}
-
-/**
- * Create close icon styles
- */
-function createCloseIconStyles() {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        width: 16,
-        height: 16,
-    });
-}
-
-export const alertStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Alert', theme, {container: createContainerStyles(theme),
-        iconContainer: createIconContainerStyles(theme),
-        title: createTitleStyles(theme),
-        message: createMessageStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        content: createContentStyles()(),
-        actions: createActionsStyles()(),
-        closeButton: createCloseButtonStyles()(),
-        closeIcon: createCloseIconStyles()()});
-});

package/src/Avatar/Avatar.styles.old.tsx

@@ -1,99 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type AvatarSize = Size;
-type AvatarShape = 'circle' | 'square';
-
-type AvatarVariants = {
-    size: AvatarSize;
-    shape: AvatarShape;
-}
-
-export type ExpandedAvatarStyles = StylesheetStyles<keyof AvatarVariants>;
-
-export type AvatarStylesheet = {
-    avatar: ExpandedAvatarStyles;
-    image: ExpandedAvatarStyles;
-    fallback: ExpandedAvatarStyles;
-}
-
-function createAvatarSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'avatar', (size) => ({
-        width: size.width,
-        height: size.height,
-    }));
-}
-
-function createAvatarShapeVariants(theme: Theme) {
-    return {
-        circle: {
-            borderRadius: 9999,
-        },
-        square: {
-            borderRadius: 8,
-        },
-    } as const;
-}
-
-function createFallbackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'avatar', (size) => ({
-        fontSize: size.fontSize,
-    }));
-}
-
-/**
- * Create container styles
- */
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        backgroundColor: theme.colors.surface.secondary,
-        overflow: 'hidden' as const,
-        variants: {
-            size: createAvatarSizeVariants(theme),
-            shape: createAvatarShapeVariants(theme),
-        },
-    });
-}
-
-/**
- * Create image styles
- */
-function createImageStyles() {
-    return () => ({
-        width: '100%' as const,
-        height: '100%' as const,
-    });
-}
-
-/**
- * Create fallback styles
- */
-function createFallbackStyles(theme: Theme) {
-    return () => ({
-        color: theme.colors.text.primary,
-        fontWeight: '600' as const,
-        variants: {
-            size: createFallbackSizeVariants(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 avatarStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-
-  return applyExtensions('Avatar', theme, {avatar: createContainerStyles(theme),
-    fallback: createFallbackStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-    image: {
-        width: '100%',
-        height: '100%',
-    }});
-});

package/src/Badge/Badge.styles.old.tsx

@@ -1,157 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, getColorFromString, Size, Color } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type BadgeType = 'filled' | 'outlined' | 'dot';
-
-type BadgeVariants = {
-    size: Size;
-    type: BadgeType;
-    color: Color;
-}
-
-export type ExpandedBadgeStyles = StylesheetStyles<keyof BadgeVariants>;
-
-export type BadgeStylesheet = {
-    badge: ExpandedBadgeStyles;
-    content: ExpandedBadgeStyles;
-    icon: ExpandedBadgeStyles;
-    text: ExpandedBadgeStyles;
-}
-
-/**
- * Create type variants for badge
- */
-function createBadgeTypeVariants(theme: Theme, color: Color) {
-    const colorValue = getColorFromString(theme, color);
-    return {
-        filled: {
-            borderWidth: 0,
-            backgroundColor: colorValue,
-        },
-        outlined: {
-            backgroundColor: 'transparent',
-            borderWidth: 2,
-            borderStyle: 'solid',
-            borderColor: colorValue,
-        },
-        dot: {
-            minWidth: 8,
-            width: 8,
-            height: 8,
-            paddingHorizontal: 0,
-            paddingVertical: 0,
-            backgroundColor: colorValue,
-        },
-    } as const;
-}
-
-/**
- * Create type variants for badge text
- */
-function createTextTypeVariants(theme: Theme, color: Color){
-    const colorValue = getColorFromString(theme, color);
-    return {
-        filled: {
-            color: theme.colors.text.inverse,
-        },
-        outlined: {
-            color: colorValue,
-        },
-        dot: {
-            display: 'none',
-        },
-    } as const;
-}
-
-/**
- * Generate badge container styles
- */
-function createBadgeStyles(theme: Theme) {
-    return ({ color }: Partial<BadgeVariants>) => {
-        return {
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 9999,
-            variants: {
-                size: buildSizeVariants(theme, 'badge', (size) => ({
-                    minWidth: size.minWidth,
-                    height: size.height,
-                    paddingHorizontal: size.paddingHorizontal,
-                })),
-                type: createBadgeTypeVariants(theme, color),
-            },
-            _web: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                boxSizing: 'border-box',
-                fontWeight: '600',
-                lineHeight: 1,
-            },
-        } as const;
-    }
-}
-
-/**
- * Generate badge text styles
- */
-function createTextStyles(theme: Theme) {
-    return ({ color }: Partial<BadgeVariants>) => {
-        return {
-            fontWeight: '600',
-            textAlign: 'center',
-            variants: {
-                size: buildSizeVariants(theme, 'badge', (size) => ({
-                    fontSize: size.fontSize,
-                    lineHeight: size.lineHeight,
-                })),
-                type: createTextTypeVariants(theme, color),
-            },
-        } as const;
-    };
-}
-
-/**
- * Create content styles
- */
-function createContentStyles() {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        gap: 4,
-    });
-}
-
-/**
- * Create icon styles
- */
-function createIconStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        variants: {
-            size: buildSizeVariants(theme, 'badge', (size) => ({
-                width: size.iconSize,
-                height: size.iconSize,
-            })),
-        },
-    });
-}
-
-// 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 badgeStyles = StyleSheet.create((theme: Theme) => {
-  // Apply extensions to main visual elements
-
-  return applyExtensions('Badge', theme, {badge: createBadgeStyles(theme),
-    text: createTextStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-    content: createContentStyles()(),
-    icon: createIconStyles(theme)()});
-});

package/src/Breadcrumb/Breadcrumb.styles.old.tsx

@@ -1,231 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type BreadcrumbSize = Size;
-type BreadcrumbIntent = 'primary' | 'neutral';
-
-type BreadcrumbVariants = {
-    size: BreadcrumbSize;
-    intent: BreadcrumbIntent;
-    disabled: boolean;
-    isLast: boolean;
-    clickable: boolean;
-}
-
-export type ExpandedBreadcrumbStyles = StylesheetStyles<keyof BreadcrumbVariants>;
-
-export type BreadcrumbStylesheet = {
-    container: ExpandedBreadcrumbStyles;
-    item: ExpandedBreadcrumbStyles;
-    itemText: ExpandedBreadcrumbStyles;
-    icon: ExpandedBreadcrumbStyles;
-    separator: ExpandedBreadcrumbStyles;
-    ellipsis: ExpandedBreadcrumbStyles;
-    ellipsisIcon: ExpandedBreadcrumbStyles;
-    menuButton: ExpandedBreadcrumbStyles;
-    menuButtonIcon: ExpandedBreadcrumbStyles;
-}
-
-type ItemTextDynamicProps = {
-    intent?: BreadcrumbIntent;
-    isLast?: boolean;
-    disabled?: boolean;
-    clickable?: boolean;
-};
-
-/**
- * Create size variants for item text
- */
-function createItemTextSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
-}
-
-/**
- * Get item text color based on state
- */
-function getItemTextColor(theme: Theme, intent: BreadcrumbIntent, isLast: boolean, disabled: boolean, clickable: boolean): string {
-    if (disabled) {
-        return theme.colors.text.secondary;
-    }
-    if (isLast) {
-        return theme.colors.text.primary;
-    }
-    if (clickable) {
-        return intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary;
-    }
-    return theme.colors.text.secondary;
-}
-
-/**
- * Create size variants for icons
- */
-function createIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'breadcrumb', (size) => ({
-        width: size.iconSize,
-        height: size.iconSize,
-    }));
-}
-
-/**
- * Get icon color based on intent
- */
-function getIconColor(theme: Theme, intent: BreadcrumbIntent) {
-    if (intent === 'primary') {
-        return theme.intents.primary.primary;
-    }
-    return theme.colors.text.secondary;
-}
-
-const createItemTextStyles = (theme: Theme) => {
-    return ({ intent = 'primary', isLast = false, disabled = false, clickable = true }: ItemTextDynamicProps) => {
-        const color = getItemTextColor(theme, intent, isLast, disabled, clickable);
-        return {
-            color,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: createItemTextSizeVariants(theme),
-            },
-        } as const;
-    };
-}
-
-const createIconStyles = (theme: Theme) => {
-    return {
-        variants: {
-            size: createIconSizeVariants(theme),
-        },
-    } as const;
-}
-
-const createSeparatorStyles = (theme: Theme) => {
-    return {
-        color: theme.colors.text.tertiary,
-        variants: {
-            size: createItemTextSizeVariants(theme),
-        },
-    } as const;
-}
-
-const createEllipsisIconStyles = (theme: Theme) => {
-    return ({ intent }: Partial<BreadcrumbVariants>) => {
-        return {
-            color: getIconColor(theme, intent),
-            variants: {
-                size: createIconSizeVariants(theme),
-            },
-        } as const;
-    }
-}
-
-const createMenuButtonIconStyles = (theme: Theme) => {
-    return ({ intent }: Partial<BreadcrumbVariants>) => {
-        return {
-            color: getIconColor(theme, intent),
-            variants: {
-                size: createIconSizeVariants(theme),
-            },
-        } as const;
-    }
-}
-
-// Style creators for extension support
-function createContainerStyles() {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        flexWrap: 'wrap' as const,
-        gap: 8,
-    });
-}
-
-function createItemStyles() {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        gap: 4,
-    });
-}
-
-// 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 breadcrumbStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Breadcrumb', theme, {container: createContainerStyles(),
-        item: createItemStyles(),
-        itemText: createItemTextStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        icon: createIconStyles(theme),
-        separator: createSeparatorStyles(theme),
-        ellipsis: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        ellipsisIcon: createEllipsisIconStyles(theme),
-        menuButton: {
-            paddingVertical: 4,
-            paddingHorizontal: 8,
-        },
-        menuButtonIcon: createMenuButtonIconStyles(theme)});
-});
-
-// Export individual style sheets for backwards compatibility
-export const breadcrumbContainerStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            gap: 8,
-        },
-    };
-});
-
-export const breadcrumbItemStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        item: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
-        },
-        itemText: createItemTextStyles(theme),
-        icon: createIconStyles(theme),
-    } as const;
-});
-
-export const breadcrumbSeparatorStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        separator: createSeparatorStyles(theme),
-    } as const;
-});
-
-export const breadcrumbEllipsisStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        ellipsis: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        icon: createEllipsisIconStyles(theme),
-    } as const;
-});
-
-export const breadcrumbMenuButtonStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        button: {
-            paddingVertical: 4,
-            paddingHorizontal: 8,
-        },
-        icon: createMenuButtonIconStyles(theme),
-    } as const;
-});