@idealyst/components 1.1.6 → 1.1.7

package/src/Image/Image.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type ImageVariants = {}
 
@@ -13,45 +14,60 @@ export type ImageStylesheet = {
     loadingIndicator: ExpandedImageStyles;
 }
 
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
+        backgroundColor: theme.colors['gray.200'],
+    });
+}
+
+function createImageStyles() {
+    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 imageStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundColor: theme.colors['gray.200'],
-    },
-    image: {
-        width: '100%',
-        height: '100%',
-    },
-    placeholder: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: theme.colors['gray.200'],
-    },
-    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'],
-    },
-    loadingIndicator: {
-        color: theme.colors['gray.600'],
-    },
-  };
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Image', theme, {
+        container: createContainerStyles(theme),
+        image: createImageStyles(),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        placeholder: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.200'],
+        },
+        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'],
+        },
+        loadingIndicator: {
+            color: theme.colors['gray.600'],
+        },
+    };
 });

package/src/Input/Input.native.tsx

@@ -82,18 +82,17 @@ const Input = React.forwardRef<TextInput, InputProps>(({
     setIsPasswordVisible(!isPasswordVisible);
   };
 
-  // Apply variants to the stylesheet
+  // Apply variants to the stylesheet (for size and spacing)
   inputStyles.useVariants({
     size,
-    type,
-    focused: isFocused,
-    hasError,
-    disabled,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
+  // Compute dynamic container styles
+  const containerStyle = (inputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     // Derive invalid state from hasError or explicit accessibilityInvalid
@@ -161,7 +160,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
   };
 
   return (
-    <View style={[inputStyles.container, style]} testID={testID} nativeID={id}>
+    <View style={[containerStyle, style]} testID={testID} nativeID={id}>
       {/* Left Icon */}
       {leftIcon && (
         <View style={inputStyles.leftIconContainer}>
@@ -182,7 +181,7 @@ const Input = React.forwardRef<TextInput, InputProps>(({
         autoCapitalize={autoCapitalize}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        style={inputStyles.input}
+        style={(inputStyles.input as any)({})}
         placeholderTextColor="#999999"
         {...nativeA11yProps}
       />

package/src/Input/Input.styles.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Size, CompoundVariants} from '@idealyst/theme';
+import { Theme, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
 import {
   buildMarginVariants,
@@ -7,6 +7,7 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { InputSize, InputType } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 
 export type InputVariants = {
@@ -17,182 +18,157 @@ export type InputVariants = {
     disabled: boolean;
 }
 
+type InputDynamicProps = {
+    type?: InputType;
+    focused?: boolean;
+    hasError?: boolean;
+    disabled?: boolean;
+};
+
 /**
- * Create type variants for container
+ * Get container border/background styles based on type, focused, hasError, disabled
  */
-function createContainerTypeVariants(theme: Theme) {
+function getContainerDynamicStyles(theme: Theme, props: InputDynamicProps) {
+    const { type = 'outlined', focused = false, hasError = false, disabled = false } = props;
+    const focusColor = theme.intents.primary.primary;
+    const errorColor = theme.intents.error.primary;
+
+    // Base styles by type
+    let backgroundColor = 'transparent';
+    let borderWidth = 1;
+    let borderColor = theme.colors.border.primary;
+    let borderStyle = 'solid' as const;
+
+    if (type === 'filled') {
+        backgroundColor = theme.colors.surface.secondary;
+        borderWidth = 0;
+    } else if (type === 'bare') {
+        backgroundColor = 'transparent';
+        borderWidth = 0;
+    }
+
+    // Error state takes precedence
+    if (hasError) {
+        borderColor = errorColor;
+        borderWidth = 1;
+    }
+
+    // Focus state (error still takes precedence for color)
+    if (focused && !hasError) {
+        borderColor = focusColor;
+        borderWidth = 1;
+    }
+
+    // Disabled state
+    if (disabled) {
+        backgroundColor = theme.colors.surface.secondary;
+    }
+
     return {
-        outlined: {
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderColor: theme.colors.border.primary,
-            borderStyle: 'solid' as const,
-            _web: {
-                border: `1px solid ${theme.colors.border.primary}`,
-            },
-        },
-        filled: {
-            backgroundColor: theme.colors.surface.secondary,
-            borderWidth: 0,
-            _web: {
-                border: 'none',
-            },
-        },
-        bare: {
-            backgroundColor: 'transparent',
-            borderWidth: 0,
-            _web: {
-                border: 'none',
-            },
-        },
-    } as const;
+        backgroundColor,
+        borderWidth,
+        borderColor,
+        borderStyle,
+    };
 }
 
 /**
- * Create compound variants for focused + type + hasError combinations
+ * Create dynamic container styles
  */
-function createFocusedCompoundVariants(theme: Theme) {
-    const compoundVariants = [] as CompoundVariants<keyof InputVariants>;
-    const focusColor = theme.intents.primary.primary;
-    const errorColor = theme.intents.error.primary;
+function createContainerStyles(theme: Theme) {
+    return (props: InputDynamicProps) => {
+        const { type = 'outlined', focused = false, hasError = false, disabled = false } = props;
+        const dynamicStyles = getContainerDynamicStyles(theme, props);
+        const focusColor = theme.intents.primary.primary;
+        const errorColor = theme.intents.error.primary;
 
-    // Error state takes precedence
-    compoundVariants.push({
-        focused: true,
-        hasError: true,
-        styles: {
-            borderColor: errorColor,
-            _web: {
-                border: `1px solid ${errorColor}`,
-                boxShadow: `0 0 0 2px ${errorColor}20`,
-            },
-        },
-    });
+        // Web-specific border and shadow
+        let webBorder = `1px solid ${dynamicStyles.borderColor}`;
+        let webBoxShadow = 'none';
 
-    // Default type + focused (no error)
-    compoundVariants.push({
-        type: 'default',
-        focused: true,
-        hasError: false,
-        styles: {
-            borderColor: focusColor,
-            _web: {
-                border: `1px solid ${focusColor}`,
-                boxShadow: `0 0 0 2px ${focusColor}20`,
-            },
-        },
-    });
+        if (type === 'filled' || type === 'bare') {
+            webBorder = 'none';
+        }
 
-    // Outlined type + focused (no error)
-    compoundVariants.push({
-        type: 'outlined',
-        focused: true,
-        hasError: false,
-        styles: {
-            borderColor: focusColor,
-            _web: {
-                border: `1px solid ${focusColor}`,
-                boxShadow: `0 0 0 2px ${focusColor}20`,
-            },
-        },
-    });
+        if (hasError) {
+            webBorder = `1px solid ${errorColor}`;
+            if (focused) {
+                webBoxShadow = `0 0 0 2px ${errorColor}20`;
+            }
+        } else if (focused) {
+            webBorder = `1px solid ${focusColor}`;
+            webBoxShadow = `0 0 0 2px ${focusColor}20`;
+        }
 
-    // Filled type + focused (no error)
-    compoundVariants.push({
-        type: 'filled',
-        focused: true,
-        hasError: false,
-        styles: {
+        return {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+            minWidth: 0,
+            borderRadius: 8,
+            ...dynamicStyles,
+            opacity: disabled ? 0.6 : 1,
+            variants: {
+                size: buildSizeVariants(theme, 'input', (size) => ({
+                    height: size.height,
+                    paddingHorizontal: size.paddingHorizontal,
+                })),
+                // Spacing variants from FormInputStyleProps
+                margin: buildMarginVariants(theme),
+                marginVertical: buildMarginVerticalVariants(theme),
+                marginHorizontal: buildMarginHorizontalVariants(theme),
+            },
             _web: {
-                boxShadow: `0 0 0 2px ${focusColor}20`,
+                boxSizing: 'border-box',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                border: webBorder,
+                boxShadow: webBoxShadow,
+                cursor: disabled ? 'not-allowed' : 'text',
             },
-        },
-    });
-
-    return compoundVariants;
+        } 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 inputStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        width: '100%',
-        minWidth: 0,
-        borderRadius: 8,
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                height: size.height,
-                paddingHorizontal: size.paddingHorizontal,
-            })),
-            type: createContainerTypeVariants(theme),
-            focused: {
-                true: {},
-                false: {},
-            },
-            hasError: {
-                true: {
-                    borderColor: theme.intents.error.primary,
-                    _web: {
-                        border: `1px solid ${theme.intents.error.primary}`,
-                    },
-                },
-                false: {},
-            },
-            disabled: {
-                true: {
-                    opacity: 0.6,
-                    backgroundColor: theme.colors.surface.secondary,
-                    _web: {
-                        cursor: 'not-allowed',
-                    },
-                },
-                false: {
-                    _web: {
-                        cursor: 'text',
-                        _hover: {
-                            borderColor: theme.intents.primary.primary,
-                        },
-                    },
-                },
-            },
-            // Spacing variants from FormInputStyleProps
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
-        },
-        compoundVariants: createFocusedCompoundVariants(theme),
-        _web: {
-            boxSizing: 'border-box',
-            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-        },
-    },
-    leftIconContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+/**
+ * Create left icon container styles
+ */
+function createLeftIconContainerStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({
                 marginRight: size.iconMargin,
             })),
         },
-    },
-    rightIconContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    });
+}
+
+/**
+ * Create right icon container styles
+ */
+function createRightIconContainerStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({
                 marginLeft: size.iconMargin,
             })),
         },
-    },
-    leftIcon: {
+    });
+}
+
+/**
+ * Create left icon styles
+ */
+function createLeftIconStyles(theme: Theme) {
+    return () => ({
         color: theme.colors.text.secondary,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({
@@ -201,25 +177,37 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
                 height: size.iconSize,
             })),
         },
-    },
-    rightIcon: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    });
+}
+
+/**
+ * Create right icon styles
+ */
+function createRightIconStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         color: theme.colors.text.secondary,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({
-            fontSize: size.iconSize,
-            width: size.iconSize,
-            height: size.iconSize,
-        })),
+                fontSize: size.iconSize,
+                width: size.iconSize,
+                height: size.iconSize,
+            })),
         },
-    },
-    passwordToggle: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    });
+}
+
+/**
+ * Create password toggle styles
+ */
+function createPasswordToggleStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         padding: 0,
         variants: {
@@ -238,11 +226,17 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
                 opacity: 0.5,
             },
         },
-    },
-    passwordToggleIcon: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    });
+}
+
+/**
+ * Create password toggle icon styles
+ */
+function createPasswordToggleIconStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         color: theme.colors.text.secondary,
         variants: {
@@ -252,13 +246,19 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
                 height: size.iconSize,
             })),
         },
-    },
-    input: {
+    });
+}
+
+/**
+ * Create input styles
+ */
+function createInputStyles(theme: Theme) {
+    return () => ({
         flex: 1,
         minWidth: 0,
         backgroundColor: 'transparent',
         color: theme.colors.text.primary,
-        fontWeight: '400',
+        fontWeight: '400' as const,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({
                 fontSize: size.fontSize,
@@ -269,6 +269,26 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
             outline: 'none',
             fontFamily: 'inherit',
         },
-    },
+    });
+}
+
+// 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 inputStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+  const extended = applyExtensions('Input', theme, {
+    container: createContainerStyles(theme),
+    input: createInputStyles(theme),
+  });
+
+  return {
+    ...extended,
+    // Minor utility styles (not extended)
+    leftIconContainer: createLeftIconContainerStyles(theme)(),
+    rightIconContainer: createRightIconContainerStyles(theme)(),
+    leftIcon: createLeftIconStyles(theme)(),
+    rightIcon: createRightIconStyles(theme)(),
+    passwordToggle: createPasswordToggleStyles(theme)(),
+    passwordToggleIcon: createPasswordToggleIconStyles(theme)(),
   };
-});
+});

package/src/Input/Input.web.tsx

@@ -111,20 +111,17 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     setIsPasswordVisible(!isPasswordVisible);
   };
 
-  // Apply variants for container
+  // Apply variants (for size and spacing)
   inputStyles.useVariants({
     size,
-    type,
-    focused: isFocused,
-    hasError,
-    disabled,
     margin,
     marginVertical,
     marginHorizontal,
   });
 
-  // Get web props for all styled elements
-  const {ref: containerStyleRef, ...containerProps} = getWebProps([inputStyles.container, style]);
+  // Get web props for all styled elements (container uses dynamic function)
+  const dynamicContainerStyle = (inputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
+  const {ref: containerStyleRef, ...containerProps} = getWebProps([dynamicContainerStyle, style]);
   const leftIconContainerProps = getWebProps([inputStyles.leftIconContainer]);
   const rightIconContainerProps = getWebProps([inputStyles.rightIconContainer]);
   const leftIconProps = getWebProps([inputStyles.leftIcon]);
@@ -133,7 +130,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   const passwordToggleIconProps = getWebProps([inputStyles.passwordToggleIcon]);
 
   // Get input props
-  const inputWebProps = getWebProps([inputStyles.input]);
+  const inputWebProps = getWebProps([(inputStyles.input as any)({})]);
 
   // Generate accessibility props
   const ariaProps = useMemo(() => {

package/src/Link/Link.native.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useNavigator } from '@idealyst/navigation';
 import { Pressable } from '../Pressable';
 import type { LinkProps } from './types';
+import { Text } from 'react-native';
 
 const Link: React.FC<LinkProps> = ({
   to,
@@ -22,6 +23,8 @@ const Link: React.FC<LinkProps> = ({
     onPress?.();
     navigator.navigate({ path: to, vars });
   };
+  
+  console.log("Rendering Link to:", to, "children:", children);
 
   return (
     <Pressable
@@ -33,7 +36,7 @@ const Link: React.FC<LinkProps> = ({
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="link"
     >
-      {children}
+      {typeof children === 'string' ? <Text>{children}</Text> : children}
     </Pressable>
   );
 };