@idealyst/components 1.1.6 → 1.1.8

package/src/Input/Input.styles.tsx

@@ -1,274 +1,223 @@
+/**
+ * Input styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Size, CompoundVariants} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { InputSize, InputType } from './types';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-export type InputVariants = {
-    size: InputSize;
-    type: InputType;
-    focused: boolean;
-    hasError: boolean;
-    disabled: boolean;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-/**
- * Create type variants for container
- */
-function createContainerTypeVariants(theme: Theme) {
-    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;
-}
+type InputType = 'outlined' | 'filled' | 'bare';
+
+export type InputDynamicProps = {
+    type?: InputType;
+    focused?: boolean;
+    hasError?: boolean;
+    disabled?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
 /**
- * Create compound variants for focused + type + hasError combinations
+ * Input styles with type/state handling.
  */
-function createFocusedCompoundVariants(theme: Theme) {
-    const compoundVariants = [] as CompoundVariants<keyof InputVariants>;
-    const focusColor = theme.intents.primary.primary;
-    const errorColor = theme.intents.error.primary;
+export const inputStyles = defineStyle('Input', (theme: Theme) => ({
+    container: ({ type = 'outlined', focused = false, hasError = false, disabled = false }: InputDynamicProps) => {
+        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`,
-            },
-        },
-    });
+        // Base styles by type
+        let backgroundColor = 'transparent';
+        let borderWidth = 1;
+        let borderColor = theme.colors.border.primary;
 
-    // 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') {
+            backgroundColor = theme.colors.surface.secondary;
+            borderWidth = 0;
+        } else if (type === 'bare') {
+            backgroundColor = 'transparent';
+            borderWidth = 0;
+        }
 
-    // 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`,
-            },
-        },
-    });
+        // Error state takes precedence
+        if (hasError) {
+            borderColor = errorColor;
+            borderWidth = 1;
+        }
 
-    // Filled type + focused (no error)
-    compoundVariants.push({
-        type: 'filled',
-        focused: true,
-        hasError: false,
-        styles: {
-            _web: {
-                boxShadow: `0 0 0 2px ${focusColor}20`,
-            },
-        },
-    });
+        // Focus state (error still takes precedence for color)
+        if (focused && !hasError) {
+            borderColor = focusColor;
+            borderWidth = 1;
+        }
 
-    return compoundVariants;
-}
+        // Disabled state
+        if (disabled) {
+            backgroundColor = theme.colors.surface.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 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}`,
-                    },
+        // Web-specific border and shadow
+        let webBorder = `1px solid ${borderColor}`;
+        let webBoxShadow = 'none';
+
+        if (type === 'filled' || type === 'bare') {
+            webBorder = 'none';
+        }
+
+        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`;
+        }
+
+        return {
+            display: 'flex' as const,
+            flexDirection: 'row' as const,
+            alignItems: 'center' as const,
+            width: '100%',
+            minWidth: 0,
+            borderRadius: 8,
+            backgroundColor,
+            borderWidth,
+            borderColor,
+            borderStyle: 'solid' as const,
+            opacity: disabled ? 0.6 : 1,
+            variants: {
+                // $iterator expands for each input size
+                size: {
+                    height: theme.sizes.$input.height,
+                    paddingHorizontal: theme.sizes.$input.paddingHorizontal,
                 },
-                false: {},
-            },
-            disabled: {
-                true: {
-                    opacity: 0.6,
-                    backgroundColor: theme.colors.surface.secondary,
-                    _web: {
-                        cursor: 'not-allowed',
-                    },
+                margin: {
+                    margin: theme.sizes.$view.padding,
                 },
-                false: {
-                    _web: {
-                        cursor: 'text',
-                        _hover: {
-                            borderColor: theme.intents.primary.primary,
-                        },
-                    },
+                marginVertical: {
+                    marginVertical: theme.sizes.$view.padding,
                 },
+                marginHorizontal: {
+                    marginHorizontal: theme.sizes.$view.padding,
+                },
+            },
+            _web: {
+                boxSizing: 'border-box',
+                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                border: webBorder,
+                boxShadow: webBoxShadow,
+                cursor: disabled ? 'not-allowed' : 'text',
+            },
+        } as const;
+    },
+
+    input: (_props: InputDynamicProps) => ({
+        flex: 1,
+        minWidth: 0,
+        backgroundColor: 'transparent' as const,
+        color: theme.colors.text.primary,
+        fontWeight: '400' as const,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$input.fontSize,
             },
-            // 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',
+            border: 'none',
+            outline: 'none',
+            fontFamily: 'inherit',
         },
-    },
-    leftIconContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    }),
+
+    leftIconContainer: (_props: InputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                marginRight: size.iconMargin,
-            })),
+            size: {
+                marginRight: theme.sizes.$input.iconMargin,
+            },
         },
-    },
-    rightIconContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    }),
+
+    rightIconContainer: (_props: InputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                marginLeft: size.iconMargin,
-            })),
+            size: {
+                marginLeft: theme.sizes.$input.iconMargin,
+            },
         },
-    },
-    leftIcon: {
+    }),
+
+    leftIcon: (_props: InputDynamicProps) => ({
         color: theme.colors.text.secondary,
         variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                fontSize: size.iconSize,
-                width: size.iconSize,
-                height: size.iconSize,
-            })),
+            size: {
+                fontSize: theme.sizes.$input.iconSize,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
         },
-    },
-    rightIcon: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    }),
+
+    rightIcon: (_props: InputDynamicProps) => ({
+        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,
-        })),
+            size: {
+                fontSize: theme.sizes.$input.iconSize,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
         },
-    },
-    passwordToggle: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    }),
+
+    passwordToggle: (_props: InputDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
         flexShrink: 0,
         padding: 0,
         variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                marginLeft: size.iconMargin,
-            })),
+            size: {
+                marginLeft: theme.sizes.$input.iconMargin,
+            },
         },
         _web: {
             background: 'transparent',
             border: 'none',
             cursor: 'pointer',
-            _hover: {
-                opacity: 0.7,
-            },
-            _active: {
-                opacity: 0.5,
-            },
+            _hover: { opacity: 0.7 },
+            _active: { opacity: 0.5 },
         },
-    },
-    passwordToggleIcon: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    }),
+
+    passwordToggleIcon: (_props: InputDynamicProps) => ({
+        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,
-            })),
-        },
-    },
-    input: {
-        flex: 1,
-        minWidth: 0,
-        backgroundColor: 'transparent',
-        color: theme.colors.text.primary,
-        fontWeight: '400',
-        variants: {
-            size: buildSizeVariants(theme, 'input', (size) => ({
-                fontSize: size.fontSize,
-            })),
-        },
-        _web: {
-            border: 'none',
-            outline: 'none',
-            fontFamily: 'inherit',
+            size: {
+                fontSize: theme.sizes.$input.iconSize,
+                width: theme.sizes.$input.iconSize,
+                height: theme.sizes.$input.iconSize,
+            },
         },
-    },
-  };
-});
+    }),
+}));

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

package/src/List/List.native.tsx

@@ -37,7 +37,7 @@ const List = forwardRef<View, ListProps>(({
       accessibilityHidden,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
-  // Apply types
+  // Apply variants
   listStyles.useVariants({
     size,
     scrollable,
@@ -50,8 +50,11 @@ const List = forwardRef<View, ListProps>(({
     marginHorizontal,
   });
 
+  // Call container style as function to get theme-reactive styles
+  const containerBaseStyle = (listStyles.container as any)({ type, scrollable });
+
   const containerStyle = [
-    listStyles.container,
+    containerBaseStyle,
     maxHeight ? { maxHeight } : undefined,
     style,
   ];