@idealyst/components 1.2.6 → 1.2.8

package/src/Input/Input.web.tsx

@@ -1,5 +1,6 @@
 import React, { isValidElement, useState, useMemo, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
+import { useUnistyles } from 'react-native-unistyles';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
@@ -59,6 +60,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   const isPasswordField = inputType === 'password' || secureTextEntry;
   const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
 
+  // Get theme for icon sizes and colors
+  const { theme } = useUnistyles();
+  const iconSize = theme.sizes.input[size].iconSize;
+  const iconColor = theme.colors.text.secondary;
+
   const [isFocused, setIsFocused] = useState(false);
 
   const getInputType = () => {
@@ -123,15 +129,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     marginHorizontal,
   });
 
-  // Get web props for all styled elements (container uses dynamic function)
+  // Get web props for all styled elements (all styles are dynamic functions)
   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]);
-  const rightIconProps = getWebProps([inputStyles.rightIcon]);
-  const passwordToggleProps = getWebProps([inputStyles.passwordToggle]);
-  const passwordToggleIconProps = getWebProps([inputStyles.passwordToggleIcon]);
+  const leftIconContainerProps = getWebProps([(inputStyles.leftIconContainer as any)({})]);
+  const rightIconContainerProps = getWebProps([(inputStyles.rightIconContainer as any)({})]);
+  const passwordToggleProps = getWebProps([(inputStyles.passwordToggle as any)({})]);
 
   // Get input props
   const inputWebProps = getWebProps([(inputStyles.input as any)({})]);
@@ -191,12 +194,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
       return (
         <IconSvg
           name={leftIcon}
-          {...leftIconProps}
+          size={iconSize}
+          color={iconColor}
           aria-label={leftIcon}
         />
       );
     } else if (isValidElement(leftIcon)) {
-      return <span {...leftIconProps}>{leftIcon}</span>;
+      return <span {...leftIconContainerProps}>{leftIcon}</span>;
     }
 
     return null;
@@ -210,12 +214,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
       return (
         <IconSvg
           name={rightIcon}
-          {...rightIconProps}
+          size={iconSize}
+          color={iconColor}
           aria-label={rightIcon}
         />
       );
     } else if (isValidElement(rightIcon)) {
-      return <span {...rightIconProps}>{rightIcon}</span>;
+      return <span {...rightIconContainerProps}>{rightIcon}</span>;
     }
 
     return null;
@@ -227,7 +232,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
     return (
       <IconSvg
         name={iconName}
-        {...passwordToggleIconProps}
+        size={iconSize}
+        color={iconColor}
         aria-label={iconName}
       />
     );

package/src/List/List.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
 import { View, ScrollView } from 'react-native';
 import { listStyles } from './List.styles';
 import type { ListProps } from './types';
@@ -59,9 +59,21 @@ const List = forwardRef<View, ListProps>(({
     style,
   ];
 
+  // Process children to add isLast prop to the last child
+  const childArray = Children.toArray(children);
+  const processedChildren = childArray.map((child, index) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...child.props,
+        isLast: index === childArray.length - 1,
+      });
+    }
+    return child;
+  });
+
   const content = (
     <ListProvider value={{ type, size }}>
-      {children}
+      {processedChildren}
     </ListProvider>
   );
 

package/src/List/List.styles.tsx

@@ -22,6 +22,7 @@ export type ListDynamicProps = {
     selected?: boolean;
     disabled?: boolean;
     clickable?: boolean;
+    isLast?: boolean;
     gap?: ViewStyleSize;
     padding?: ViewStyleSize;
     paddingVertical?: ViewStyleSize;
@@ -80,7 +81,7 @@ export const listStyles = defineStyle('List', (theme: Theme) => ({
         } as const;
     },
 
-    item: ({ type = 'default', active = false, selected = false, disabled = false, clickable = true }: ListDynamicProps) => {
+    item: ({ type = 'default', active = false, selected = false, disabled = false, clickable = true, isLast = false }: ListDynamicProps) => {
         const baseStyles = {
             display: 'flex' as const,
             flexDirection: 'row' as const,
@@ -90,7 +91,8 @@ export const listStyles = defineStyle('List', (theme: Theme) => ({
             opacity: disabled ? 0.5 : 1,
         };
 
-        const dividerStyles = type === 'divided' ? {
+        // Don't add divider on last item
+        const dividerStyles = (type === 'divided' && !isLast) ? {
             borderBottomWidth: 1,
             borderBottomColor: theme.colors.border.primary,
         } : {};
@@ -117,7 +119,8 @@ export const listStyles = defineStyle('List', (theme: Theme) => ({
                 cursor: disabled ? 'not-allowed' : (clickable ? 'pointer' : 'default'),
                 outline: 'none',
                 transition: 'background-color 0.2s ease, border-color 0.2s ease',
-                borderBottom: type === 'divided' ? `1px solid ${theme.colors.border.primary}` : undefined,
+                // Don't add divider on last item
+                borderBottom: (type === 'divided' && !isLast) ? `1px solid ${theme.colors.border.primary}` : undefined,
                 borderLeft: selected ? `3px solid ${theme.intents.primary.primary}` : undefined,
                 _hover: (disabled || !clickable) ? {} : {
                     backgroundColor: theme.colors.surface.secondary,

package/src/List/List.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Children, isValidElement, cloneElement } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { listStyles } from './List.styles';
 import type { ListProps } from './types';
@@ -47,6 +47,18 @@ const List: React.FC<ListProps> = ({
 
   const containerProps = getWebProps(containerStyle);
 
+  // Process children to add isLast prop to the last child
+  const childArray = Children.toArray(children);
+  const processedChildren = childArray.map((child, index) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
+        ...child.props,
+        isLast: index === childArray.length - 1,
+      });
+    }
+    return child;
+  });
+
   return (
     <ListProvider value={{ type, size }}>
       <div
@@ -55,7 +67,7 @@ const List: React.FC<ListProps> = ({
         id={id}
         data-testid={testID}
       >
-        {children}
+        {processedChildren}
       </div>
     </ListProvider>
   );

package/src/List/ListItem.native.tsx

@@ -8,7 +8,7 @@ import type { ListItemProps } from './types';
 import { useListContext } from './ListContext';
 import { getNativeSelectableAccessibilityProps } from '../utils/accessibility';
 
-const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, ListItemProps>(({
+const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pressable>, ListItemProps & { isLast?: boolean }>(({
   id,
   label,
   children,
@@ -23,6 +23,7 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
   onPress,
   style,
   testID,
+  isLast = false,
   // Accessibility props
   accessibilityLabel,
   accessibilityHint,
@@ -60,7 +61,7 @@ const ListItem = forwardRef<ComponentRef<typeof View> | ComponentRef<typeof Pres
   });
 
   // Get dynamic styles - call as functions to get theme-reactive styles
-  const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable });
+  const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable, isLast });
   const labelStyle = (listStyles.label as any)({ disabled, selected });
   const leadingStyle = (listStyles.leading as any)({});
   const trailingStyle = (listStyles.trailing as any)({});

package/src/List/ListItem.web.tsx

@@ -8,7 +8,7 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import { useListContext } from './ListContext';
 
-const ListItem: React.FC<ListItemProps> = ({
+const ListItem: React.FC<ListItemProps & { isLast?: boolean }> = ({
   id,
   label,
   children,
@@ -23,6 +23,7 @@ const ListItem: React.FC<ListItemProps> = ({
   onPress,
   style,
   testID,
+  isLast = false,
 }) => {
   const { theme } = useUnistyles() as { theme: Theme };
   const listContext = useListContext();
@@ -41,7 +42,7 @@ const ListItem: React.FC<ListItemProps> = ({
   });
 
   // Get dynamic styles - call as functions for theme reactivity
-  const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable });
+  const itemStyle = (listStyles.item as any)({ type: effectiveVariant, disabled, clickable: isClickable, isLast });
   const labelStyle = (listStyles.label as any)({ disabled, selected });
   const leadingStyle = (listStyles.leading as any)({});
   const trailingStyle = (listStyles.trailing as any)({});

package/src/examples/ButtonExamples.tsx

@@ -403,7 +403,117 @@ export const ButtonExamples = () => {
           </Button>
         </View>
       </View>
+
+      {/* Loading State */}
+      <View gap="md">
+        <Text typography="subtitle1">Loading State</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            loading
+            onPress={() => handlePress('loading-contained')}
+          >
+            Loading
+          </Button>
+          <Button
+            type="outlined"
+            intent="primary"
+            loading
+            onPress={() => handlePress('loading-outlined')}
+          >
+            Loading
+          </Button>
+          <Button
+            type="text"
+            intent="primary"
+            loading
+            onPress={() => handlePress('loading-text')}
+          >
+            Loading
+          </Button>
+        </View>
+      </View>
+
+      {/* Loading with Different Intents */}
+      <View gap="md">
+        <Text typography="subtitle1">Loading Intents</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            type="contained"
+            intent="primary"
+            loading
+            onPress={() => handlePress('loading-primary')}
+          >
+            Primary
+          </Button>
+          <Button
+            type="contained"
+            intent="success"
+            loading
+            onPress={() => handlePress('loading-success')}
+          >
+            Success
+          </Button>
+          <Button
+            type="contained"
+            intent="error"
+            loading
+            onPress={() => handlePress('loading-error')}
+          >
+            Error
+          </Button>
+          <Button
+            type="contained"
+            intent="warning"
+            loading
+            onPress={() => handlePress('loading-warning')}
+          >
+            Warning
+          </Button>
+        </View>
+      </View>
+
+      {/* Interactive Loading Example */}
+      <View gap="md">
+        <Text typography="subtitle1">Interactive Loading</Text>
+        <InteractiveLoadingButton />
+      </View>
     </View>
     </Screen>
   );
+};
+
+// Interactive loading button component
+const InteractiveLoadingButton = () => {
+  const [loading, setLoading] = React.useState(false);
+
+  const handlePress = async () => {
+    setLoading(true);
+    // Simulate async operation
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setLoading(false);
+  };
+
+  return (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+      <Button
+        type="contained"
+        intent="primary"
+        loading={loading}
+        onPress={handlePress}
+      >
+        {loading ? 'Saving...' : 'Save'}
+      </Button>
+      <Button
+        type="outlined"
+        intent="success"
+        loading={loading}
+        leftIcon="check"
+        onPress={handlePress}
+      >
+        {loading ? 'Processing...' : 'Submit'}
+      </Button>
+    </View>
+  );
 }; 

package/src/examples/IconExamples.tsx

@@ -122,6 +122,44 @@ export const IconExamples = () => {
           </View>
         </View>
 
+        {/* Text Colors */}
+        <View gap="md">
+          <Text typography="subtitle1">Text Colors</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="account" size="md" textColor="primary" />
+              <Text typography="body2">Primary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="account" size="md" textColor="secondary" />
+              <Text typography="body2">Secondary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="account" size="md" textColor="tertiary" />
+              <Text typography="body2">Tertiary</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Inverse Text Colors */}
+        <View gap="md">
+          <Text typography="subtitle1">Inverse Text Colors</Text>
+          <View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap', alignItems: 'center', backgroundColor: '#333', padding: 12, borderRadius: 8 }}>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="account" size="md" textColor="inverse" />
+              <Text typography="body2" color="inverse">Inverse</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="account" size="md" textColor="inverse-secondary" />
+              <Text typography="body2" color="inverse-secondary">Inverse Secondary</Text>
+            </View>
+            <View style={{ alignItems: 'center', gap: 4 }}>
+              <Icon name="account" size="md" textColor="inverse-tertiary" />
+              <Text typography="body2" color="inverse-tertiary">Inverse Tertiary</Text>
+            </View>
+          </View>
+        </View>
+
         {/* Color Shades */}
         <View gap="md">
           <Text typography="subtitle1">Color Shades</Text>