@idealyst/components 1.1.7 → 1.1.9

package/src/Input/Input.styles.tsx

@@ -1,294 +1,196 @@
+/**
+ * Input styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Size } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { InputSize, InputType } from './types';
-import { applyExtensions } from '../extensions/applyExtension';
+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;
 
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type InputVariants = {
-    size: InputSize;
-    type: InputType;
-    focused: boolean;
-    hasError: boolean;
-    disabled: boolean;
-}
+type InputType = 'outlined' | 'filled' | 'bare';
 
-type InputDynamicProps = {
+export type InputDynamicProps = {
     type?: InputType;
     focused?: boolean;
     hasError?: boolean;
     disabled?: boolean;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
 };
 
 /**
- * Get container border/background styles based on type, focused, hasError, disabled
- */
-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 {
-        backgroundColor,
-        borderWidth,
-        borderColor,
-        borderStyle,
-    };
-}
-
-/**
- * Create dynamic container styles
+ * Input styles with type/state handling.
  */
-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;
-
-        // Web-specific border and shadow
-        let webBorder = `1px solid ${dynamicStyles.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`;
+export const inputStyles = defineStyle('Input', (theme: Theme) => ({
+    container: ({ type = 'outlined', focused = false, hasError = false, disabled = false }: InputDynamicProps) => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        width: '100%',
+        minWidth: 0,
+        borderRadius: theme.radii.md,
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+        borderColor: theme.colors.border.primary,
+        variants: {
+            type: {
+                outlined: {
+                    backgroundColor: theme.colors.surface.primary,
+                    borderColor: theme.colors.border.primary,
+                },
+                filled: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    borderColor: 'transparent',
+                },
+                bare: {
+                    backgroundColor: 'transparent',
+                    borderWidth: 0,
+                    borderColor: 'transparent',
+                },
+            },
+            focused: {
+                true: {
+                    borderColor: theme.intents.primary.primary,
+                },
+                false: {
+                    
+                },
+            },
+            disabled: {
+                true: { opacity: 0.8, _web: { cursor: 'not-allowed' } },
+                false: { opacity: 1 }
+            },
+            hasError: {
+                true: { borderColor: theme.intents.error.primary },
+                false: { borderColor: theme.colors.border.primary },
+            },
+            // $iterator expands for each input size
+            size: {
+                height: theme.sizes.$input.height,
+                paddingHorizontal: theme.sizes.$input.paddingHorizontal,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            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',
         }
+    }),
 
-        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: {
-                boxSizing: 'border-box',
-                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-                border: webBorder,
-                boxShadow: webBoxShadow,
-                cursor: disabled ? 'not-allowed' : 'text',
+    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,
             },
-        } as const;
-    };
-}
+        },
+        _web: {
+            border: 'none',
+            outline: 'none',
+            fontFamily: 'inherit',
+        },
+    }),
 
-/**
- * Create left icon container styles
- */
-function createLeftIconContainerStyles(theme: Theme) {
-    return () => ({
+    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,
+            },
         },
-    });
-}
+    }),
 
-/**
- * Create right icon container styles
- */
-function createRightIconContainerStyles(theme: Theme) {
-    return () => ({
+    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,
+            },
         },
-    });
-}
+    }),
 
-/**
- * Create left icon styles
- */
-function createLeftIconStyles(theme: Theme) {
-    return () => ({
+    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,
+            },
         },
-    });
-}
+    }),
 
-/**
- * Create right icon styles
- */
-function createRightIconStyles(theme: Theme) {
-    return () => ({
+    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,
+            },
         },
-    });
-}
+    }),
 
-/**
- * Create password toggle styles
- */
-function createPasswordToggleStyles(theme: Theme) {
-    return () => ({
+    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 },
         },
-    });
-}
+    }),
 
-/**
- * Create password toggle icon styles
- */
-function createPasswordToggleIconStyles(theme: Theme) {
-    return () => ({
+    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,
-            })),
-        },
-    });
-}
-
-/**
- * Create input styles
- */
-function createInputStyles(theme: Theme) {
-    return () => ({
-        flex: 1,
-        minWidth: 0,
-        backgroundColor: 'transparent',
-        color: theme.colors.text.primary,
-        fontWeight: '400' as const,
-        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,
+            },
         },
-    });
-}
-
-// 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

@@ -1,7 +1,7 @@
 import React, { isValidElement, useState, useMemo, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { isIconName, resolveIconPath } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { inputStyles } from './Input.styles';
 import { InputProps } from './types';
@@ -184,10 +184,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     if (!leftIcon) return null;
 
     if (isIconName(leftIcon)) {
-      const iconPath = resolveIconPath(leftIcon);
       return (
         <IconSvg
-          path={iconPath}
+          name={leftIcon}
           {...leftIconProps}
           aria-label={leftIcon}
         />
@@ -204,10 +203,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     if (!rightIcon) return null;
 
     if (isIconName(rightIcon)) {
-      const iconPath = resolveIconPath(rightIcon);
       return (
         <IconSvg
-          path={iconPath}
+          name={rightIcon}
           {...rightIconProps}
           aria-label={rightIcon}
         />
@@ -222,10 +220,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   // Helper to render password toggle icon
   const renderPasswordToggleIcon = () => {
     const iconName = isPasswordVisible ? 'eye-off' : 'eye';
-    const iconPath = resolveIconPath(iconName);
     return (
       <IconSvg
-        path={iconPath}
+        name={iconName}
         {...passwordToggleIconProps}
         aria-label={iconName}
       />
@@ -290,4 +287,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
 
 Input.displayName = 'Input';
 
-export default Input; 
+export default Input;

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,
   ];