@idealyst/components 1.2.13 → 1.2.14

package/src/ActivityIndicator/ActivityIndicator.styles.old.tsx

@@ -1,94 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ActivityIndicatorSize = Size;
-type ActivityIndicatorIntent = Intent;
-
-type ActivityIndicatorVariants = {
-    size: ActivityIndicatorSize;
-    intent: ActivityIndicatorIntent;
-    animating: boolean;
-}
-
-export type ExpandedActivityIndicatorStyles = StylesheetStyles<keyof ActivityIndicatorVariants>;
-
-export type ActivityIndicatorStylesheet = {
-    container: ExpandedActivityIndicatorStyles;
-    spinner: ExpandedActivityIndicatorStyles;
-}
-
-function createContainerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
-        width: size.size,
-        height: size.size,
-    }));
-}
-
-function createSpinnerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
-        width: size.size,
-        height: size.size,
-        borderWidth: size.borderWidth,
-    }));
-}
-
-function getSpinnerColor(theme: Theme, intent: ActivityIndicatorIntent) {
-    return theme.intents[intent].primary;
-}
-
-function createSpinnerStyles(theme: Theme) {
-    return ({ intent }: Partial<ActivityIndicatorVariants>) => {
-        const color = getSpinnerColor(theme, intent);
-        return {
-            borderRadius: 9999,
-            borderStyle: 'solid',
-            color,
-            variants: {
-                size: createSpinnerSizeVariants(theme),
-                animating: {
-                    true: {},
-                    false: {},
-                },
-            },
-            _web: {
-                borderColor: 'transparent',
-                borderTopColor: color,
-                borderRightColor: color,
-                animation: 'spin 1s linear infinite',
-                boxSizing: 'border-box',
-            },
-        } as const;
-    }
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        variants: {
-            size: createContainerSizeVariants(theme),
-            animating: {
-                true: {
-                    opacity: 1,
-                },
-                false: {
-                    opacity: 0,
-                },
-            },
-        },
-    });
-}
-
-// 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 activityIndicatorStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    return applyExtensions('ActivityIndicator', theme, {
-        container: createContainerStyles(theme),
-        spinner: createSpinnerStyles(theme),
-    });
-});

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)()});
-});