@idealyst/components 1.2.13 → 1.2.14

package/src/Text/Text.styles.old.tsx

@@ -1,219 +0,0 @@
-import { StyleSheet } from "react-native-unistyles";
-import { Theme, Typography } from '@idealyst/theme';
-import { TextAlignVariant, TextColorVariant, TextWeightVariant, TextTypographyVariant } from "./types";
-import { applyExtensions } from '../extensions/applyExtension';
-
-export type TextVariants = {
-    typography: TextTypographyVariant;
-    weight: TextWeightVariant;
-    align: TextAlignVariant;
-}
-
-type TextStyleParams = {
-    color?: TextColorVariant;
-}
-
-/**
- * Create typography variants from theme
- */
-function createTypographyVariants(theme: Theme) {
-    const variants: Record<string, object> = {};
-    for (const key in theme.sizes.typography) {
-        const typo = theme.sizes.typography[key as Typography];
-        variants[key] = {
-            fontSize: typo.fontSize,
-            lineHeight: typo.lineHeight,
-            fontWeight: typo.fontWeight,
-        };
-    }
-    return variants;
-}
-
-/**
- * Create spacing variants from theme
- */
-function createSpacingVariants(theme: Theme) {
-    return {
-        gap: {
-            xs: { gap: theme.sizes.view.xs.spacing },
-            sm: { gap: theme.sizes.view.sm.spacing },
-            md: { gap: theme.sizes.view.md.spacing },
-            lg: { gap: theme.sizes.view.lg.spacing },
-            xl: { gap: theme.sizes.view.xl.spacing },
-        },
-        padding: {
-            xs: { padding: theme.sizes.view.xs.padding },
-            sm: { padding: theme.sizes.view.sm.padding },
-            md: { padding: theme.sizes.view.md.padding },
-            lg: { padding: theme.sizes.view.lg.padding },
-            xl: { padding: theme.sizes.view.xl.padding },
-        },
-        paddingVertical: {
-            xs: { paddingVertical: theme.sizes.view.xs.padding },
-            sm: { paddingVertical: theme.sizes.view.sm.padding },
-            md: { paddingVertical: theme.sizes.view.md.padding },
-            lg: { paddingVertical: theme.sizes.view.lg.padding },
-            xl: { paddingVertical: theme.sizes.view.xl.padding },
-        },
-        paddingHorizontal: {
-            xs: { paddingHorizontal: theme.sizes.view.xs.padding },
-            sm: { paddingHorizontal: theme.sizes.view.sm.padding },
-            md: { paddingHorizontal: theme.sizes.view.md.padding },
-            lg: { paddingHorizontal: theme.sizes.view.lg.padding },
-            xl: { paddingHorizontal: theme.sizes.view.xl.padding },
-        },
-    };
-}
-
-/**
- * Create text styles
- */
-function createTextStyles(theme: Theme) {
-    const spacingVariants = createSpacingVariants(theme);
-
-    return ({ color }: TextStyleParams) => ({
-        margin: 0,
-        padding: 0,
-        color: theme.colors.text[color ?? 'primary'] || theme.colors.text.primary,
-        variants: {
-            typography: createTypographyVariants(theme),
-            weight: {
-                light: { fontWeight: '300' },
-                normal: { fontWeight: '400' },
-                medium: { fontWeight: '500' },
-                semibold: { fontWeight: '600' },
-                bold: { fontWeight: '700' },
-            } as const,
-            align: {
-                left: { textAlign: 'left' },
-                center: { textAlign: 'center' },
-                right: { textAlign: 'right' },
-            } as const,
-            ...spacingVariants,
-        } as const,
-        _web: {
-            fontFamily: 'inherit',
-        },
-    });
-}
-
-// Babel plugin transforms applyExtensions to inline theme.__extensions access
-export const textStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('Text', theme, {
-        text: createTextStyles(theme),
-    });
-});
-
-// =============================================================================
-// TEST: buildStyles approach
-// =============================================================================
-
-// This is what DEVELOPERS would write (nice API with helpers):
-// export const textStylesDef = buildStyles('Text', (theme) => ({
-//     text: createTextStyles(theme),
-// }));
-
-// This is what BABEL would generate (flat ObjectExpression, direct theme access):
-// The key is ALL theme accesses are directly visible - no function calls hiding them
-export const testTextStyles = StyleSheet.create((theme: Theme) => ({
-    text: ({ color }: TextStyleParams) => ({
-        margin: 0,
-        padding: 0,
-        // Direct theme access - Unistyles can trace this
-        color: theme.colors.text[color ?? 'primary'] || theme.colors.text.primary,
-        variants: {
-            // Typography variants - all expanded inline
-            typography: {
-                h1: {
-                    fontSize: theme.sizes.typography.h1.fontSize,
-                    lineHeight: theme.sizes.typography.h1.lineHeight,
-                    fontWeight: theme.sizes.typography.h1.fontWeight,
-                },
-                h2: {
-                    fontSize: theme.sizes.typography.h2.fontSize,
-                    lineHeight: theme.sizes.typography.h2.lineHeight,
-                    fontWeight: theme.sizes.typography.h2.fontWeight,
-                },
-                h3: {
-                    fontSize: theme.sizes.typography.h3.fontSize,
-                    lineHeight: theme.sizes.typography.h3.lineHeight,
-                    fontWeight: theme.sizes.typography.h3.fontWeight,
-                },
-                h4: {
-                    fontSize: theme.sizes.typography.h4.fontSize,
-                    lineHeight: theme.sizes.typography.h4.lineHeight,
-                    fontWeight: theme.sizes.typography.h4.fontWeight,
-                },
-                h5: {
-                    fontSize: theme.sizes.typography.h5.fontSize,
-                    lineHeight: theme.sizes.typography.h5.lineHeight,
-                    fontWeight: theme.sizes.typography.h5.fontWeight,
-                },
-                h6: {
-                    fontSize: theme.sizes.typography.h6.fontSize,
-                    lineHeight: theme.sizes.typography.h6.lineHeight,
-                    fontWeight: theme.sizes.typography.h6.fontWeight,
-                },
-                body1: {
-                    fontSize: theme.sizes.typography.body1.fontSize,
-                    lineHeight: theme.sizes.typography.body1.lineHeight,
-                    fontWeight: theme.sizes.typography.body1.fontWeight,
-                },
-                body2: {
-                    fontSize: theme.sizes.typography.body2.fontSize,
-                    lineHeight: theme.sizes.typography.body2.lineHeight,
-                    fontWeight: theme.sizes.typography.body2.fontWeight,
-                },
-                caption: {
-                    fontSize: theme.sizes.typography.caption.fontSize,
-                    lineHeight: theme.sizes.typography.caption.lineHeight,
-                    fontWeight: theme.sizes.typography.caption.fontWeight,
-                },
-            },
-            weight: {
-                light: { fontWeight: '300' },
-                normal: { fontWeight: '400' },
-                medium: { fontWeight: '500' },
-                semibold: { fontWeight: '600' },
-                bold: { fontWeight: '700' },
-            } as const,
-            align: {
-                left: { textAlign: 'left' },
-                center: { textAlign: 'center' },
-                right: { textAlign: 'right' },
-            } as const,
-            // Spacing variants - all expanded inline
-            gap: {
-                xs: { gap: theme.sizes.view.xs.spacing },
-                sm: { gap: theme.sizes.view.sm.spacing },
-                md: { gap: theme.sizes.view.md.spacing },
-                lg: { gap: theme.sizes.view.lg.spacing },
-                xl: { gap: theme.sizes.view.xl.spacing },
-            },
-            padding: {
-                xs: { padding: theme.sizes.view.xs.padding },
-                sm: { padding: theme.sizes.view.sm.padding },
-                md: { padding: theme.sizes.view.md.padding },
-                lg: { padding: theme.sizes.view.lg.padding },
-                xl: { padding: theme.sizes.view.xl.padding },
-            },
-            paddingVertical: {
-                xs: { paddingVertical: theme.sizes.view.xs.padding },
-                sm: { paddingVertical: theme.sizes.view.sm.padding },
-                md: { paddingVertical: theme.sizes.view.md.padding },
-                lg: { paddingVertical: theme.sizes.view.lg.padding },
-                xl: { paddingVertical: theme.sizes.view.xl.padding },
-            },
-            paddingHorizontal: {
-                xs: { paddingHorizontal: theme.sizes.view.xs.padding },
-                sm: { paddingHorizontal: theme.sizes.view.sm.padding },
-                md: { paddingHorizontal: theme.sizes.view.md.padding },
-                lg: { paddingHorizontal: theme.sizes.view.lg.padding },
-                xl: { paddingHorizontal: theme.sizes.view.xl.padding },
-            },
-        } as const,
-        _web: {
-            fontFamily: 'inherit',
-        },
-    }),
-}));

package/src/TextArea/TextArea.styles.old.tsx

@@ -1,213 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { TextAreaIntentVariant } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
-
-/**
- * Create size variants for textarea
- */
-function createTextareaSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'textarea', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-        lineHeight: size.lineHeight,
-        minHeight: size.minHeight,
-    }));
-}
-
-/**
- * Get textarea styles based on intent, disabled, and hasError state
- */
-function getTextareaIntentStyles(theme: Theme, intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean) {
-    if (disabled || hasError) {
-        return {} as const;
-    }
-
-    const intentValue = theme.intents[intent];
-    const baseStyles: any = {};
-
-    // For success and warning, set border color
-    if (intent === 'success' || intent === 'warning') {
-        baseStyles.borderColor = intentValue.primary;
-    }
-
-    // Focus styles for all intents when not disabled and not in error
-    baseStyles._web = {
-        _focus: {
-            borderColor: intentValue.primary,
-            boxShadow: `0 0 0 2px ${intentValue.primary}33`,
-        },
-    };
-
-    return baseStyles;
-}
-
-const createTextareaStyles = (theme: Theme) => {
-    return ({ intent, disabled, hasError }: { intent: TextAreaIntentVariant, disabled: boolean, hasError: boolean }) => {
-        const intentStyles = getTextareaIntentStyles(theme, intent, disabled, hasError);
-
-        return {
-            width: '100%',
-            color: theme.colors.text.primary,
-            backgroundColor: theme.colors.surface.primary,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: theme.colors.border.primary,
-            borderRadius: 8,
-            lineHeight: 'normal',
-            ...intentStyles,
-            variants: {
-                size: createTextareaSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        backgroundColor: theme.colors.surface.secondary,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {},
-                },
-                hasError: {
-                    true: {
-                        borderColor: theme.intents.error.primary,
-                    },
-                    false: {},
-                },
-                resize: {
-                    none: {
-                        _web: {
-                            resize: 'none',
-                        },
-                    },
-                    vertical: {
-                        _web: {
-                            resize: 'vertical',
-                        },
-                    },
-                    horizontal: {
-                        _web: {
-                            resize: 'horizontal',
-                        },
-                    },
-                    both: {
-                        _web: {
-                            resize: 'both',
-                        },
-                    },
-                },
-            },
-            _web: {
-                fontFamily: 'inherit',
-                outline: 'none',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                boxSizing: 'border-box',
-                overflowY: 'hidden',
-            },
-        } as const;
-    }
-}
-
-// Helper functions to create static styles wrapped in dynamic functions
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'column' as const,
-        gap: 4,
-        variants: {
-            // Spacing variants from FormInputStyleProps
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-    });
-}
-
-function createLabelStyles(theme: Theme) {
-    return () => ({
-        fontSize: 14,
-        fontWeight: '500' as const,
-        color: theme.colors.text.primary,
-        variants: {
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {},
-            },
-        },
-    });
-}
-
-function createTextareaContainerStyles() {
-    return () => ({
-        position: 'relative' as const,
-    });
-}
-
-function createHelperTextStyles(theme: Theme) {
-    return () => ({
-        fontSize: 12,
-        color: theme.colors.text.secondary,
-        variants: {
-            hasError: {
-                true: {
-                    color: theme.intents.error.primary,
-                },
-                false: {},
-            },
-        },
-    });
-}
-
-function createFooterStyles() {
-    return () => ({
-        display: 'flex' as const,
-        flexDirection: 'row' as const,
-        justifyContent: 'space-between' as const,
-        alignItems: 'center' as const,
-        gap: 4,
-    });
-}
-
-function createCharacterCountStyles(theme: Theme) {
-    return () => ({
-        fontSize: 12,
-        color: theme.colors.text.secondary,
-        variants: {
-            isNearLimit: {
-                true: {
-                    color: theme.intents.warning.primary,
-                },
-                false: {},
-            },
-            isAtLimit: {
-                true: {
-                    color: theme.intents.error.primary,
-                },
-                false: {},
-            },
-        },
-    });
-}
-
-// 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 textAreaStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('TextArea', theme, {container: createContainerStyles(theme),
-        textarea: createTextareaStyles(theme),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        label: createLabelStyles(theme)(),
-        textareaContainer: createTextareaContainerStyles()(),
-        helperText: createHelperTextStyles(theme)(),
-        footer: createFooterStyles()(),
-        characterCount: createCharacterCountStyles(theme)()});
-});

package/src/Tooltip/Tooltip.styles.old.tsx

@@ -1,82 +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 TooltipSize = Size;
-type TooltipIntent = Intent;
-
-type TooltipTooltipVariants = {
-    size: TooltipSize;
-    intent: TooltipIntent;
-}
-
-export type ExpandedTooltipTooltipStyles = StylesheetStyles<keyof TooltipTooltipVariants>;
-export type ExpandedTooltipStyles = StylesheetStyles<never>;
-
-export type TooltipStylesheet = {
-    container: ExpandedTooltipStyles;
-    tooltip: ExpandedTooltipTooltipStyles;
-}
-
-function createTooltipSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'tooltip', (size) => ({
-        fontSize: size.fontSize,
-        padding: size.padding,
-    }));
-}
-
-function createTooltipIntentVariants(theme: Theme) {
-    const intents: Record<string, any> = {};
-
-    for (const [intentName, intentValue] of Object.entries(theme.intents)) {
-        intents[intentName] = {
-            backgroundColor: intentValue.primary,
-            color: intentValue.contrast,
-        };
-    }
-
-    return intents;
-}
-
-// Style creators for extension support
-function createContainerStyles() {
-    return () => ({
-        position: 'relative' as const,
-        _web: {
-            display: 'inline-flex',
-            width: 'fit-content',
-        },
-    });
-}
-
-function createTooltipStyles(theme: Theme) {
-    return () => ({
-        borderRadius: 8,
-        maxWidth: 300,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.15,
-        shadowRadius: 8,
-        elevation: 4,
-        variants: {
-            size: createTooltipSizeVariants(theme),
-            intent: createTooltipIntentVariants(theme),
-        },
-        _web: {
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-            pointerEvents: 'none',
-            width: 'max-content',
-            wordWrap: 'break-word',
-        },
-    });
-}
-
-// 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 tooltipStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('Tooltip', theme, {
-        container: createContainerStyles(),
-        tooltip: createTooltipStyles(theme),
-    });
-});

package/src/Video/Video.styles.old.tsx

@@ -1,51 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
-import { applyExtensions } from '../extensions/applyExtension';
-
-export type ExpandedVideoStyles = StylesheetStyles<never>;
-
-export type VideoStylesheet = {
-    container: ExpandedVideoStyles;
-    video: ExpandedVideoStyles;
-    fallback: ExpandedVideoStyles;
-}
-
-// Style creators for extension support
-function createContainerStyles(theme: Theme) {
-    return () => ({
-        position: 'relative' as const,
-        overflow: 'hidden' as const,
-        backgroundColor: theme.colors['black'],
-    });
-}
-
-function createVideoStyles() {
-    return () => ({
-        width: '100%' as const,
-        height: '100%' 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.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const videoStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-
-    return applyExtensions('Video', theme, {container: createContainerStyles(theme),
-        video: createVideoStyles(),
-        // Additional styles (merged from return)
-        // Minor utility styles (not extended)
-        fallback: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: theme.colors['gray.300'],
-            color: theme.colors['gray.600'],
-        }});
-});

package/src/View/View.styles.old.tsx

@@ -1,125 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Surface } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { ViewBackgroundVariant, ViewBorderVariant, ViewRadiusVariant } from './types';
-import { ViewStyleSize } from '../utils/viewStyleProps';
-import { applyExtensions } from '../extensions/applyExtension';
-
-type ViewVariants = {
-  background: ViewBackgroundVariant;
-  radius: ViewRadiusVariant;
-  border: ViewBorderVariant;
-  gap: ViewStyleSize;
-  padding: ViewStyleSize;
-  paddingVertical: ViewStyleSize;
-  paddingHorizontal: ViewStyleSize;
-  margin: ViewStyleSize;
-  marginVertical: ViewStyleSize;
-  marginHorizontal: ViewStyleSize;
-};
-
-export type ExpandedViewStyles = StylesheetStyles<keyof ViewVariants>;
-
-export type ViewStylesheet = {
-  view: ExpandedViewStyles;
-};
-
-/**
- * Create background variants for view
- */
-function createBackgroundVariants(theme: Theme) {
-  const variants: any = {
-    transparent: {
-      backgroundColor: 'transparent',
-    },
-  };
-
-  // Add all surface colors programmatically
-  for (const surface in theme.colors.surface) {
-    variants[surface] = {
-      backgroundColor: theme.colors.surface[surface as Surface],
-    };
-  }
-
-  return variants;
-}
-
-/**
- * Create radius variants for view
- */
-function createRadiusVariants() {
-  return {
-    none: { borderRadius: 0 },
-    xs: { borderRadius: 2 },
-    sm: { borderRadius: 4 },
-    md: { borderRadius: 8 },
-    lg: { borderRadius: 12 },
-    xl: { borderRadius: 16 },
-  } as const;
-}
-
-/**
- * Create border variants for view
- */
-function createBorderVariants(theme: Theme) {
-  return {
-    none: {
-      borderWidth: 0,
-    },
-    thin: {
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: theme.colors['gray.300'],
-    },
-    thick: {
-      borderWidth: 2,
-      borderStyle: 'solid',
-      borderColor: theme.colors['gray.300'],
-    },
-  } as const;
-}
-
-/**
- * Create dynamic view styles.
- * Returns a function to ensure Unistyles can track theme changes.
- * All styles must be dynamic functions (not static objects) to work with
- * Unistyles' Babel transform and theme reactivity on native.
- */
-function createViewStyles(theme: Theme) {
-    return (_props?: {}) => ({
-        display: 'flex' as const,
-        variants: {
-            background: createBackgroundVariants(theme),
-            radius: createRadiusVariants(),
-            border: createBorderVariants(theme),
-            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',
-        },
-    });
-}
-
-// Styles use applyExtensions to enable theme extensions and ensure proper
-// reactivity with Unistyles' native Shadow Tree updates.
-export const viewStyles = StyleSheet.create((theme: Theme) => {
-    return applyExtensions('View', theme, {
-        view: createViewStyles(theme),
-    });
-});