@idealyst/components 1.1.7 → 1.1.9

package/src/Text/Text.styles.tsx

@@ -1,13 +1,17 @@
-import { StyleSheet } from "react-native-unistyles";
-import { Theme, Typography } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
+/**
+ * Text styles using defineStyle with $iterator expansion.
+ */
+import { StyleSheet } from 'react-native-unistyles';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import type { TextStyle, ViewStyle } from 'react-native';
 import { TextAlignVariant, TextColorVariant, TextWeightVariant, TextTypographyVariant } from "./types";
-import { applyExtensions } from '../extensions/applyExtension';
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
 export type TextVariants = {
     typography: TextTypographyVariant;
@@ -16,87 +20,93 @@ export type TextVariants = {
 }
 
 /**
- * Create typography variants from theme
+ * All props available to dynamic Text style functions.
+ * Extensions and overrides receive these to make conditional styling decisions.
  */
-function createTypographyVariants(theme: Theme) {
-    const variants: Record<string, object> = {};
+export type TextStyleParams = {
+    /** Text color variant */
+    color?: TextColorVariant;
+    /** Typography variant (h1, h2, body1, etc.) */
+    typography?: TextTypographyVariant;
+    /** Font weight override */
+    weight?: TextWeightVariant;
+    /** Text alignment */
+    align?: TextAlignVariant;
+}
 
-    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,
+/**
+ * Text style definition type for use with extendStyle/overrideStyle.
+ */
+export interface TextStyleDef {
+    text: (params: TextStyleParams) => TextStyle & {
+        variants?: {
+            typography?: Record<string, TextStyle>;
+            weight?: Record<string, TextStyle>;
+            align?: Record<string, TextStyle>;
+            gap?: Record<string, ViewStyle>;
+            padding?: Record<string, ViewStyle>;
+            paddingVertical?: Record<string, ViewStyle>;
+            paddingHorizontal?: Record<string, ViewStyle>;
         };
-    }
-
-    return variants;
+    };
 }
 
-type TextStyleParams = {
-    color?: TextColorVariant;
+// Register Text style types for type-safe extendStyle/overrideStyle
+declare module '@idealyst/theme' {
+    interface ComponentStyleRegistry {
+        Text: TextStyleDef;
+    }
 }
 
-function createTextStyles(theme: Theme) {
-    return ({ color }: TextStyleParams) => {
-        const colorValue = theme.colors.text[color ?? 'primary'] || theme.colors.text.primary;
-
-        return {
-            margin: 0,
-            padding: 0,
-            color: colorValue,
-            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,
-                // Spacing variants from TextSpacingStyleProps
-                gap: buildGapVariants(theme),
-                padding: buildPaddingVariants(theme),
-                paddingVertical: buildPaddingVerticalVariants(theme),
-                paddingHorizontal: buildPaddingHorizontalVariants(theme),
+/**
+ * Text styles with $iterator expansion.
+ *
+ * Babel expands:
+ * - theme.sizes.$typography.X → all typography keys (h1, h2, body1, etc.)
+ * - theme.sizes.$view.X → all view size keys (xs, sm, md, lg, xl)
+ */
+// @ts-ignore - $iterator patterns are expanded by Babel
+export const textStyles = defineStyle('Text', (theme: Theme) => ({
+    text: ({ color, typography, weight, align }: TextStyleParams) => ({
+        margin: 0,
+        padding: 0,
+        // Base color - can be overridden by extensions using any of the params
+        color: theme.colors.text[color ?? 'primary'] || theme.colors.text.primary,
+        variants: {
+            // Typography variants - $iterator expands for each typography key
+            typography: {
+                fontSize: theme.sizes.$typography.fontSize,
+                lineHeight: theme.sizes.$typography.lineHeight,
+                fontWeight: theme.sizes.$typography.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,
-            _web: {
-                fontFamily: 'inherit',
+            // Spacing variants - $iterator expands for each view size key
+            gap: {
+                gap: theme.sizes.$view.spacing,
             },
-        };
-    }
-}
-
-// 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 textStyles = StyleSheet.create((theme: Theme) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Text', theme, {
-        text: createTextStyles(theme),
-    });
-
-    return {
-        ...extended,
-    };
-});
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+        } as const,
+        _web: {
+            fontFamily: 'inherit',
+        },
+    }),
+}));

package/src/Text/Text.web.tsx

@@ -10,6 +10,7 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
   weight,
   color = 'primary',
   align = 'left',
+  pre = false,
   // Spacing variants from TextSpacingStyleProps
   gap,
   padding,
@@ -29,9 +30,9 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
     paddingHorizontal,
   });
 
-  // Create the style array
+  // Create the style array - pass all style-affecting props to dynamic style function
   const textStyleArray = [
-    (textStyles.text as any)({ color }),
+    (textStyles.text as any)({ color, typography, weight, align }),
     style,
   ];
 

package/src/Text/index.ts

@@ -3,3 +3,4 @@ import TextComponent from './Text.web';
 export default TextComponent;
 export { TextComponent as Text };
 export * from './types';
+export type { TextStyleDef, TextStyleParams, TextVariants } from './Text.styles';

package/src/TextArea/TextArea.native.tsx

@@ -129,20 +129,33 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
 
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyleComputed = (textAreaStyles.container as any)({});
+  const labelStyleComputed = (textAreaStyles.label as any)({ disabled });
+  const textareaContainerStyleComputed = (textAreaStyles.textareaContainer as any)({});
+  const textareaStyleComputed = (textAreaStyles.textarea as any)({ intent, disabled, hasError });
+  const footerStyleComputed = (textAreaStyles.footer as any)({});
+  const helperTextStyleComputed = (textAreaStyles.helperText as any)({ hasError });
+  const characterCountStyleComputed = (textAreaStyles.characterCount as any)({
+    isNearLimit: maxLength ? value.length >= maxLength * 0.9 : false,
+    isAtLimit: maxLength ? value.length >= maxLength : false,
+  });
+
   return (
-    <View nativeID={id} style={[textAreaStyles.container, style]} testID={testID}>
+    <View nativeID={id} style={[containerStyleComputed, style]} testID={testID}>
       {label && (
-        <Text style={textAreaStyles.label}>{label}</Text>
+        <Text style={labelStyleComputed}>{label}</Text>
       )}
 
-      <View style={textAreaStyles.textareaContainer}>
+      <View style={textareaContainerStyleComputed}>
         <TextInput
           ref={ref}
           {...nativeA11yProps}
           style={[
-            textAreaStyles.textarea({ intent, disabled, hasError }),
+            textareaStyleComputed,
             {
               textAlignVertical: 'top',
+              backgroundColor: 'transparent',
             },
             maxHeight && { maxHeight },
             { height: autoGrow ? contentHeight : rows * 24 },
@@ -161,22 +174,22 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
       </View>
 
       {showFooter && (
-        <View style={textAreaStyles.footer}>
+        <View style={footerStyleComputed}>
           <View style={{ flex: 1 }}>
             {error && (
-              <Text style={textAreaStyles.helperText}>
+              <Text style={helperTextStyleComputed}>
                 {error}
               </Text>
             )}
             {!error && helperText && (
-              <Text style={textAreaStyles.helperText}>
+              <Text style={helperTextStyleComputed}>
                 {helperText}
               </Text>
             )}
           </View>
 
           {showCharacterCount && maxLength && (
-            <Text style={textAreaStyles.characterCount}>
+            <Text style={characterCountStyleComputed}>
               {value.length}/{maxLength}
             </Text>
           )}

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

@@ -0,0 +1,213 @@
+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)()});
+});