@idealyst/components 1.2.13 → 1.2.15

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

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