@idealyst/components 1.2.12 → 1.2.14

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

package/src/Card/Card.styles.old.tsx

@@ -1,160 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Radius } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { ViewStyleSize } from '../utils/viewStyleProps';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type CardType = 'outlined' | 'elevated' | 'filled';
-type CardRadius = Radius;
-type CardIntent = Intent | 'info' | 'neutral';
-
-/**
- * Get border radius value from theme
- */
-export function getCardBorderRadius(theme: Theme, radius: CardRadius): number {
-  return theme.radii[radius];
-}
-
-export type CardVariants = {
-  type: CardType;
-  radius: CardRadius;
-  intent: CardIntent;
-  clickable: boolean;
-  disabled: boolean;
-  // Spacing variants from ContainerStyleProps
-  gap: ViewStyleSize;
-  padding: ViewStyleSize;
-  paddingVertical: ViewStyleSize;
-  paddingHorizontal: ViewStyleSize;
-  margin: ViewStyleSize;
-  marginVertical: ViewStyleSize;
-  marginHorizontal: ViewStyleSize;
-};
-
-type CardDynamicProps = {
-  intent?: CardIntent;
-  type?: CardType;
-};
-
-/**
- * Get the border color based on intent (only used for outlined type)
- */
-function getBorderColor(theme: Theme, intent: CardIntent): string {
-  if (intent === 'info' || intent === 'neutral') {
-    return theme.colors.border.secondary;
-  }
-  if (intent in theme.intents) {
-    return theme.intents[intent as Intent].primary;
-  }
-  return theme.colors.border.secondary;
-}
-
-/**
- * Get type-specific styles
- */
-function getTypeStyles(theme: Theme, type: CardType, intent: CardIntent) {
-  switch (type) {
-    case 'outlined':
-      return {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
-        borderStyle: 'solid' as const,
-        borderColor: getBorderColor(theme, intent),
-      };
-    case 'elevated':
-      return {
-        backgroundColor: theme.colors.surface.primary,
-        borderWidth: 0,
-        ...theme.shadows.md,
-      };
-    case 'filled':
-      return {
-        backgroundColor: theme.colors.surface.secondary,
-        borderWidth: 0,
-      };
-    default:
-      return {};
-  }
-}
-
-/**
- * Create dynamic card styles
- */
-function createCardStyles(theme: Theme) {
-  return ({ intent = 'neutral', type = 'elevated' }: CardDynamicProps) => {
-    const typeStyles = getTypeStyles(theme, type, intent);
-    return {
-      ...typeStyles,
-      position: 'relative',
-      overflow: 'hidden',
-      variants: {
-        radius: {
-          none: { borderRadius: 0 },
-          xs: { borderRadius: 2 },
-          sm: { borderRadius: 4 },
-          md: { borderRadius: 8 },
-          lg: { borderRadius: 12 },
-          xl: { borderRadius: 16 },
-        },
-        clickable: {
-          true: {
-            _web: {
-              cursor: 'pointer',
-              transition: 'all 0.2s ease',
-              _hover: {
-                transform: 'translateY(-2px)',
-                boxShadow:
-                  '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
-              },
-            },
-          },
-          false: {
-            _web: {
-              cursor: 'default',
-            },
-          },
-        },
-        disabled: {
-          true: {
-            opacity: 0.6,
-            _web: {
-              cursor: 'not-allowed',
-            },
-          },
-          false: {
-            opacity: 1,
-          },
-        },
-        // Spacing variants from ContainerStyleProps
-        gap: buildGapVariants(theme),
-        padding: buildPaddingVariants(theme),
-        paddingVertical: buildPaddingVerticalVariants(theme),
-        paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        margin: buildMarginVariants(theme),
-        marginVertical: buildMarginVerticalVariants(theme),
-        marginHorizontal: buildMarginHorizontalVariants(theme),
-      },
-      _web: {
-        display: 'flex',
-        flexDirection: 'column',
-        boxSizing: 'border-box',
-      },
-    } 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 cardStyles = StyleSheet.create((theme: Theme) => {
-  return applyExtensions('Card', theme, {
-    card: createCardStyles(theme),
-  });
-});

package/src/Checkbox/Checkbox.styles.old.tsx

@@ -1,271 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type CheckboxSize = Size;
-type CheckboxIntent = Intent | 'info';
-type CheckboxType = 'default' | 'outlined';
-
-type CheckboxVariants = {
-    size: CheckboxSize;
-    intent: CheckboxIntent;
-    type: CheckboxType;
-    checked: boolean;
-    disabled: boolean;
-    visible: boolean;
-    error: boolean;
-}
-
-export type ExpandedCheckboxStyles = StylesheetStyles<keyof CheckboxVariants>;
-
-export type CheckboxStylesheet = {
-    wrapper: ExpandedCheckboxStyles;
-    container: ExpandedCheckboxStyles;
-    checkbox: ExpandedCheckboxStyles;
-    label: ExpandedCheckboxStyles;
-    checkmark: ExpandedCheckboxStyles;
-    helperText: ExpandedCheckboxStyles;
-}
-
-/**
- * Helper to get intent colors, mapping 'info' to 'primary'
- */
-function getIntentColors(theme: Theme, intent: CheckboxIntent) {
-    const actualIntent = intent === 'info' ? 'primary' : intent;
-    return theme.intents[actualIntent as Intent];
-}
-
-/**
- * Create size variants for checkbox
- */
-function createCheckboxSizeVariants() {
-    return {
-        xs: { width: 14, height: 14 },
-        sm: { width: 16, height: 16 },
-        md: { width: 20, height: 20 },
-        lg: { width: 24, height: 24 },
-        xl: { width: 28, height: 28 },
-    } as const;
-}
-
-/**
- * Create type variants for checkbox
- */
-function createCheckboxTypeVariants(theme: Theme) {
-    return {
-        default: {
-            borderWidth: 1,
-            borderColor: theme.colors.border.primary,
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        outlined: {
-            borderWidth: 2,
-            borderColor: theme.colors.border.primary,
-            _web: {
-                border: `2px solid ${theme.colors.border.primary}`,
-            },
-        },
-    } as const;
-}
-
-/**
- * Create checked state variants dynamically based on intent
- */
-function createCheckedVariants(theme: Theme, intent: CheckboxIntent) {
-    const colors = getIntentColors(theme, intent);
-
-    return {
-        true: {
-            backgroundColor: colors.primary,
-            borderColor: colors.primary,
-            _web: {
-                border: `1px solid ${colors.primary}`,
-            },
-        },
-        false: {
-            backgroundColor: 'transparent',
-        },
-    } as const;
-}
-
-/**
- * Create size variants for label
- */
-function createLabelSizeVariants() {
-    return {
-        xs: { fontSize: 12 },
-        sm: { fontSize: 14 },
-        md: { fontSize: 16 },
-        lg: { fontSize: 18 },
-        xl: { fontSize: 20 },
-    } as const;
-}
-
-/**
- * Create size variants for checkmark
- */
-function createCheckmarkSizeVariants() {
-    return {
-        xs: { width: 10, height: 10 },
-        sm: { width: 12, height: 12 },
-        md: { width: 14, height: 14 },
-        lg: { width: 16, height: 16 },
-        xl: { width: 20, height: 20 },
-    } as const;
-}
-
-function createCheckboxStyles(theme: Theme) {
-    return ({ intent }: Partial<CheckboxVariants>) => {
-        return {
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 4,
-            position: 'relative',
-            backgroundColor: 'transparent',
-            borderColor: theme.colors.border.primary,
-            variants: {
-                size: createCheckboxSizeVariants(),
-                type: createCheckboxTypeVariants(theme),
-                checked: createCheckedVariants(theme, intent),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: { opacity: 0.8 },
-                            _active: { opacity: 0.6 },
-                        },
-                    },
-                },
-            },
-            _web: {
-                outline: 'none',
-                display: 'flex',
-                boxSizing: 'border-box',
-                userSelect: 'none',
-                WebkitAppearance: 'none',
-                MozAppearance: 'none',
-                appearance: 'none',
-                transition: 'all 0.2s ease',
-                _focus: {
-                    outline: `2px solid ${theme.intents.primary.primary}`,
-                    outlineOffset: '2px',
-                },
-            },
-        } as const;
-    }
-}
-
-function createCheckmarkStyles(_theme: Theme) {
-    return () => ({
-        position: 'absolute' as const,
-        display: 'flex' as const,
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        color: '#ffffff',
-        variants: {
-            size: createCheckmarkSizeVariants(),
-            visible: {
-                true: { opacity: 1 },
-                false: { opacity: 0 },
-            },
-        },
-    });
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createWrapperStyles(theme: Theme) {
-    return () => ({
-        flexDirection: 'column' as const,
-        gap: 4,
-        variants: {
-            // Spacing variants from FormInputStyleProps
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-        _web: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            width: 'auto',
-        },
-    });
-}
-
-function createContainerStyles() {
-    return () => ({
-        flexDirection: 'row' as const,
-        alignItems: 'center' as const,
-        gap: 8,
-        _web: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-            width: 'fit-content',
-            cursor: 'pointer',
-        },
-    });
-}
-
-function createLabelStyles(theme: Theme) {
-    return () => ({
-        color: theme.colors.text.primary,
-        variants: {
-            size: createLabelSizeVariants(),
-            disabled: {
-                true: { opacity: 0.5 },
-                false: { opacity: 1 },
-            },
-        },
-        _web: {
-            display: 'block',
-            textAlign: 'left',
-            margin: 0,
-            padding: 0,
-        },
-    });
-}
-
-function createHelperTextStyles(theme: Theme) {
-    return () => ({
-        fontSize: 14,
-        color: theme.colors.text.secondary,
-        marginTop: 2,
-        variants: {
-            error: {
-                true: { color: theme.intents.error.primary },
-                false: { color: theme.colors.text.secondary },
-            },
-        },
-    });
-}
-
-// 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 checkboxStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Checkbox', theme, {container: createContainerStyles(),
-        checkbox: createCheckboxStyles(theme),
-        checkmark: createCheckmarkStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        wrapper: createWrapperStyles(theme)(),
-        label: createLabelStyles(theme)(),
-        helperText: createHelperTextStyles(theme)()});
-});