@idealyst/components 1.0.82 → 1.0.84

package/src/Input/index.web.ts

@@ -1,3 +1,5 @@
-// Web-specific Input export
-export { default } from './Input.web';
-export * from './types'; 
+import InputComponent from './Input.web';
+
+export default InputComponent;
+export { InputComponent as Input };
+export * from './types';

package/src/Input/types.ts

@@ -1,77 +1,100 @@
-import type { IntentVariant } from '../theme/variants';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type InputIntent = Intent;
+export type InputSize = Size;
+export type InputType = 'outlined' | 'filled' | 'bare';
+export type InputInputType = 'text' | 'email' | 'password' | 'number';
 
 export interface InputProps {
   /**
    * The current value of the input
    */
   value?: string;
-  
+
   /**
    * Called when the text changes
    */
   onChangeText?: (text: string) => void;
-  
+
   /**
    * Called when the input receives focus
    */
   onFocus?: () => void;
-  
+
   /**
    * Called when the input loses focus
    */
   onBlur?: () => void;
-  
+
   /**
    * Placeholder text
    */
   placeholder?: string;
-  
+
   /**
    * Whether the input is disabled
    */
   disabled?: boolean;
-  
+
   /**
    * The type of input (affects keyboard type on mobile)
    */
-  inputType?: 'text' | 'email' | 'password' | 'number';
-  
+  inputType?: InputInputType;
+
   /**
    * Whether to show the password
    */
   secureTextEntry?: boolean;
-  
+
+  /**
+   * Icon to display on the left side of the input
+   */
+  leftIcon?: IconName | React.ReactNode;
+
+  /**
+   * Icon to display on the right side of the input
+   */
+  rightIcon?: IconName | React.ReactNode;
+
+  /**
+   * Show password visibility toggle for password inputs (defaults to true for password type)
+   */
+  showPasswordToggle?: boolean;
+
   /**
    * Auto-capitalization behavior
    */
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  
+
   /**
    * Size variant of the input
    */
-  size?: 'small' | 'medium' | 'large';
-  
+  size?: InputSize;
+
   /**
    * Style variant of the input
    */
-  variant?: 'default' | 'outlined' | 'filled' | 'bare';
-  
+  type?: InputType;
+
   /**
    * The intent/color scheme of the input (for focus states, validation, etc.)
    */
-  intent?: IntentVariant;
-  
+  intent?: InputIntent;
+
   /**
    * Whether the input has an error state
    * @deprecated Use intent="error" instead
    */
   hasError?: boolean;
-  
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */

package/src/List/List.native.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import { View, ScrollView } from 'react-native';
+import { listStyles } from './List.styles';
+import type { ListProps } from './types';
+import { ListProvider } from './ListContext';
+
+const List = forwardRef<View, ListProps>(({
+  children,
+  type = 'default',
+  size = 'md',
+  style,
+  testID,
+  scrollable = false,
+  maxHeight,
+}, ref) => {
+  // Apply types
+  listStyles.useVariants({
+    size,
+    scrollable,
+  });
+
+  const containerStyle = [
+    listStyles.container,
+    maxHeight ? { maxHeight } : undefined,
+    style,
+  ];
+
+  const content = (
+    <ListProvider value={{ type, size }}>
+      {children}
+    </ListProvider>
+  );
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        ref={ref as any}
+        style={containerStyle as any}
+        testID={testID}
+        showsVerticalScrollIndicator={true}
+      >
+        {content}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View ref={ref} style={containerStyle as any} testID={testID}>
+      {content}
+    </View>
+  );
+});
+
+List.displayName = 'List';
+
+export default List;

package/src/List/List.styles.tsx

@@ -0,0 +1,257 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, CompoundVariants } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { ListSizeVariant, ListType } from './types';
+
+type ListVariants = {
+    type: ListType;
+    size: ListSizeVariant;
+    scrollable: boolean;
+    active: boolean;
+    selected: boolean;
+    disabled: boolean;
+    clickable: boolean;
+};
+
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
+        default: {
+            backgroundColor: 'transparent',
+        },
+        bordered: {
+            backgroundColor: theme.colors.surface.primary,
+            borderWidth: 1,
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            _web: {
+                overflow: 'hidden',
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        divided: {
+            backgroundColor: 'transparent',
+        },
+    };
+}
+
+
+/**
+ * Create compound variants for item
+ */
+function createItemCompoundVariants(theme: Theme): CompoundVariants<keyof ListVariants> {
+    return [
+        {
+            type: 'divided',
+            styles: {
+                _web: {
+                    ':last-child': {
+                        borderBottom: 'none',
+                    },
+                },
+            },
+        },
+        {
+            disabled: true,
+            styles: {
+                _web: {
+                    _hover: {
+                        backgroundColor: 'transparent',
+                        borderRadius: 0,
+                    },
+                },
+            },
+        },
+        {
+            clickable: false,
+            styles: {
+                _web: {
+                    _hover: {
+                        backgroundColor: 'transparent',
+                        borderRadius: 0,
+                    },
+                },
+            },
+        },
+    ];
+}
+
+
+export const listStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            variants: {
+                type: createContainerTypeVariants(theme),
+                scrollable: {
+                    true: {
+                        _web: {
+                            overflow: 'auto',
+                        },
+                    },
+                    false: {},
+                },
+            },
+        },
+        item: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'transparent',
+            textAlign: 'left',
+            variants: {
+                size: buildSizeVariants(theme, 'list', (size) => ({
+                    paddingVertical: size.paddingVertical,
+                    paddingHorizontal: size.paddingHorizontal,
+                    minHeight: size.minHeight,
+                })),
+                type: {
+                    default: {},
+                    bordered: {},
+                    divided: {
+                        borderBottomWidth: 1,
+                        borderBottomStyle: 'solid',
+                        borderBottomColor: theme.colors.border.primary,
+                        _web: {
+                            borderBottom: `1px solid ${theme.colors.border.primary}`,
+                        },
+                    },
+                },
+                active: {
+                    true: {
+                        backgroundColor: theme.colors.surface.secondary,
+                    },
+                    false: {},
+                },
+                selected: {
+                    true: {
+                        backgroundColor: theme.intents.primary.light + '20',
+                        borderLeftWidth: 3,
+                        borderLeftColor: theme.intents.primary.primary,
+                        _web: {
+                            borderLeft: `3px solid ${theme.intents.primary.primary}`,
+                        },
+                    },
+                    false: {},
+                },
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {},
+                },
+                clickable: {
+                    true: {},
+                    false: {
+                        _web: {
+                            cursor: 'default',
+                        },
+                    },
+                },
+            } as const,
+            compoundVariants: createItemCompoundVariants(theme),
+            _web: {
+                border: 'none',
+                cursor: 'pointer',
+                outline: 'none',
+                transition: 'background-color 0.2s ease, border-color 0.2s ease',
+                _hover: {
+                    backgroundColor: theme.colors.surface.secondary,
+                    borderRadius: 4,
+                },
+            },
+        } as const,
+        itemContent: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+            gap: 8,
+        },
+        leading: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginRight: 8,
+            color: theme.colors.text.secondary,
+            variants: {
+                size: buildSizeVariants(theme, 'list', (size) => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                })),
+            } as const,
+        } as const,
+        labelContainer: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        label: {
+            fontWeight: '500',
+            color: theme.colors.text.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'list', (size) => ({
+                    fontSize: size.labelFontSize,
+                    lineHeight: size.labelLineHeight,
+                })),
+                disabled: {
+                    true: {
+                        color: theme.colors.text.secondary,
+                    },
+                false: {},
+            },
+            selected: {
+                true: {
+                    color: theme.intents.primary.primary,
+                    fontWeight: '600',
+                },
+                false: {},
+            },
+        },
+        },
+        trailing: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: 8,
+            color: theme.colors.text.secondary,
+            flexShrink: 0,
+        },
+        trailingIcon: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'list', (size) => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                })),
+            },
+        },
+        section: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        sectionTitle: {
+            fontWeight: '600',
+            fontSize: 12,
+            lineHeight: 16,
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+            color: theme.colors.text.secondary,
+            padding: 8,
+            paddingBottom: 4,
+        },
+        sectionContent: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    };
+});

package/src/List/List.web.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { listStyles } from './List.styles';
+import type { ListProps } from './types';
+import { ListProvider } from './ListContext';
+
+const List: React.FC<ListProps> = ({
+  children,
+  type = 'default',
+  size = 'md',
+  style,
+  testID,
+  scrollable = false,
+  maxHeight,
+}) => {
+  // Apply types
+  listStyles.useVariants({
+    size,
+    scrollable,
+  });
+
+  const containerStyle = [
+    listStyles.container,
+    maxHeight ? { maxHeight } : undefined,
+    style as any,
+  ];
+
+  const containerProps = getWebProps(containerStyle);
+
+  return (
+    <ListProvider value={{ type, size }}>
+      <div
+        {...containerProps}
+        role="list"
+        data-testid={testID}
+      >
+        {children}
+      </div>
+    </ListProvider>
+  );
+};
+
+export default List;

package/src/List/ListContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import type { ListSizeVariant, ListType } from './types';
+
+interface ListContextValue {
+  type?: ListType;
+  size?: ListSizeVariant;
+}
+
+const ListContext = createContext<ListContextValue>({
+  type: 'default',
+  size: 'md',
+});
+
+export const ListProvider = ListContext.Provider;
+
+export const useListContext = () => useContext(ListContext);

package/src/List/ListItem.native.tsx

@@ -0,0 +1,111 @@
+import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { listStyles } from './List.styles';
+import type { ListItemProps } from './types';
+import { useListContext } from './ListContext';
+
+const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof TouchableOpacity>, ListItemProps>(({
+  id,
+  label,
+  children,
+  leading,
+  trailing,
+  active = false,
+  selected = false,
+  disabled = false,
+  indent = 0,
+  size,
+  onPress,
+  style,
+  testID,
+}, ref) => {
+  const listContext = useListContext();
+  const isClickable = !disabled && !!onPress;
+
+  // Use explicit size prop, fallback to context size, then default
+  const effectiveSize = size ?? listContext.size ?? 'md';
+  const effectiveVariant = listContext.type ?? 'default';
+
+  // Apply types
+  listStyles.useVariants({
+    size: effectiveSize,
+    active,
+    selected,
+    disabled,
+    clickable: isClickable,
+  });
+
+  // Helper to render leading/trailing icons
+  const renderElement = (element: typeof leading | typeof trailing, styleKey: 'leading' | 'trailingIcon') => {
+    if (!element) return null;
+
+    // If it's a string, treat it as an icon name
+    if (typeof element === 'string') {
+      const iconStyle = styleKey === 'leading' ? listStyles.leading : listStyles.trailingIcon;
+      return (
+        <MaterialCommunityIcons
+          name={element}
+          size={iconStyle.width}
+          color={iconStyle.color}
+        />
+      );
+    } else if (isValidElement(element)) {
+      // Custom React element
+      return element;
+    }
+
+    return null;
+  };
+
+  const content = (
+    <>
+      {leading && (
+        <View style={listStyles.leading}>
+          {renderElement(leading, 'leading')}
+        </View>
+      )}
+
+      <View style={listStyles.labelContainer}>
+        {label && (
+          <Text style={listStyles.label}>{label}</Text>
+        )}
+        {children}
+      </View>
+
+      {trailing && (
+        <View style={listStyles.trailing}>
+          {renderElement(trailing, 'trailingIcon')}
+        </View>
+      )}
+    </>
+  );
+
+  const indentStyle = indent > 0 ? { paddingLeft: indent * 16 } : {};
+  const combinedStyle = [listStyles.item, indentStyle, style];
+
+  if (isClickable) {
+    return (
+      <TouchableOpacity
+        ref={ref as any}
+        style={combinedStyle}
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.7}
+        testID={testID}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <View ref={ref as any} style={combinedStyle} testID={testID}>
+      {content}
+    </View>
+  );
+});
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;