@idealyst/components 1.1.8 → 1.2.0

package/src/Select/Select.web.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 // @ts-ignore - web-specific import
 import { getWebProps } from 'react-native-unistyles/web';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { selectStyles } from './Select.styles';
@@ -175,14 +174,31 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
     setFocusedIndex(0);
   };
 
-  const containerWebProps = getWebProps([
-    (selectStyles.container as any)({}),
-    style as any
-  ]);
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (selectStyles.container as any)({});
+  const labelStyle = (selectStyles.label as any)({});
+  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, error, focused: isOpen });
+  const triggerContentStyle = (selectStyles.triggerContent as any)({});
+  const triggerTextStyle = (selectStyles.triggerText as any)({});
+  const placeholderStyle = (selectStyles.placeholder as any)({});
+  const iconStyle = (selectStyles.icon as any)({});
+  const chevronStyle = (selectStyles.chevron as any)({});
+  const chevronOpenStyle = (selectStyles.chevronOpen as any)({});
+  const dropdownStyle = (selectStyles.dropdown as any)({});
+  const searchContainerStyle = (selectStyles.searchContainer as any)({});
+  const searchInputStyle = (selectStyles.searchInput as any)({});
+  const optionsListStyle = (selectStyles.optionsList as any)({});
+  const optionStyle = (selectStyles.option as any)({});
+  const optionFocusedStyle = (selectStyles.optionFocused as any)({});
+  const optionDisabledStyle = (selectStyles.optionDisabled as any)({});
+  const optionContentStyle = (selectStyles.optionContent as any)({});
+  const optionIconStyle = (selectStyles.optionIcon as any)({});
+  const optionTextStyle = (selectStyles.optionText as any)({});
+  const optionTextDisabledStyle = (selectStyles.optionTextDisabled as any)({});
+  const helperTextStyle = (selectStyles.helperText as any)({ error });
 
-  const triggerWebProps = getWebProps([
-    (selectStyles.trigger as any)({ type, intent }),
-  ]);
+  const containerWebProps = getWebProps([containerStyle, style as any]);
+  const triggerWebProps = getWebProps([triggerStyle]);
 
   const handleClose = () => {
     setIsOpen(false);
@@ -194,7 +210,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
   return (
     <div {...containerWebProps} ref={mergedRef} id={id} data-testid={testID}>
       {label && (
-        <label {...getWebProps([selectStyles.label])}>
+        <label {...getWebProps([labelStyle])}>
           {label}
         </label>
       )}
@@ -211,15 +227,15 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           aria-haspopup="listbox"
           type="button"
         >
-          <div {...getWebProps([selectStyles.triggerContent])}>
+          <div {...getWebProps([triggerContentStyle])}>
             {selectedOption?.icon && (
-              <span {...getWebProps([selectStyles.icon])}>
+              <span {...getWebProps([iconStyle])}>
                 {selectedOption.icon}
               </span>
             )}
             <span
               {...getWebProps([
-                selectedOption ? selectStyles.triggerText : selectStyles.placeholder
+                selectedOption ? triggerTextStyle : placeholderStyle
               ])}
             >
               {selectedOption ? selectedOption.label : placeholder}
@@ -227,10 +243,10 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           </div>
 
           <IconSvg
-            path={resolveIconPath('chevron-down')}
+            name="chevron-down"
             {...getWebProps([
-              selectStyles.chevron,
-              isOpen && selectStyles.chevronOpen
+              chevronStyle,
+              isOpen && chevronOpenStyle
             ])}
             aria-label="chevron-down"
           />
@@ -247,7 +263,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
         zIndex={1000}
       >
         <div
-          {...getWebProps([(selectStyles.dropdown as any)({})])}
+          {...getWebProps([dropdownStyle])}
           style={{
             maxHeight: maxHeight,
             position: 'relative',
@@ -258,19 +274,19 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
           role="listbox"
         >
             {searchable && (
-              <div {...getWebProps([selectStyles.searchContainer])}>
+              <div {...getWebProps([searchContainerStyle])}>
                 <input
                   ref={searchInputRef}
                   type="text"
                   placeholder="Search options..."
                   value={searchTerm}
                   onChange={handleSearchChange}
-                  {...getWebProps([selectStyles.searchInput])}
+                  {...getWebProps([searchInputStyle])}
                 />
               </div>
             )}
 
-            <div {...getWebProps([selectStyles.optionsList])}>
+            <div {...getWebProps([optionsListStyle])}>
               {filteredOptions.map((option, index) => {
                 const isFocused = index === focusedIndex;
 
@@ -282,20 +298,20 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     aria-selected={option.value === value}
                     onMouseEnter={() => setFocusedIndex(index)}
                     {...getWebProps([
-                      (selectStyles.option as any)({}),
-                      isFocused && selectStyles.optionFocused,
-                      option.disabled && selectStyles.optionDisabled,
+                      optionStyle,
+                      isFocused && optionFocusedStyle,
+                      option.disabled && optionDisabledStyle,
                     ])}
                   >
-                    <div {...getWebProps([selectStyles.optionContent])}>
+                    <div {...getWebProps([optionContentStyle])}>
                       {option.icon && (
-                        <span {...getWebProps([selectStyles.optionIcon])}>
+                        <span {...getWebProps([optionIconStyle])}>
                           {option.icon}
                         </span>
                       )}
                       <span {...getWebProps([
-                        selectStyles.optionText,
-                        option.disabled && selectStyles.optionTextDisabled
+                        optionTextStyle,
+                        option.disabled && optionTextDisabledStyle
                       ])}>
                         {option.label}
                       </span>
@@ -305,8 +321,8 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
               })}
 
               {filteredOptions.length === 0 && (
-                <div {...getWebProps([(selectStyles.option as any)({})])} style={{ cursor: 'default' }}>
-                  <span {...getWebProps([selectStyles.optionText])}>
+                <div {...getWebProps([optionStyle])} style={{ cursor: 'default' }}>
+                  <span {...getWebProps([optionTextStyle])}>
                     No options found
                   </span>
                 </div>
@@ -316,11 +332,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
       </PositionedPortal>
 
       {helperText && (
-        <div
-          {...getWebProps([
-            selectStyles.helperText,
-          ])}
-        >
+        <div {...getWebProps([helperTextStyle])}>
           {helperText}
         </div>
       )}

package/src/Slider/Slider.web.tsx

@@ -3,7 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { sliderStyles } from './Slider.styles';
 import type { SliderProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebRangeAriaProps, generateAccessibilityId, SLIDER_KEYS } from '../utils/accessibility';
 
@@ -223,11 +223,9 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
     if (!icon) return null;
 
     if (isIconName(icon)) {
-      // Resolve icon name to path and render with IconSvg
-      const iconPath = resolveIconPath(icon);
       return (
         <IconSvg
-          path={iconPath}
+          name={icon}
           {...thumbIconProps}
           aria-label={icon}
         />

package/src/Switch/Switch.native.tsx

@@ -44,8 +44,8 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
 
   React.useEffect(() => {
     progress.value = withSpring(checked ? 1 : 0, {
-      damping: 15,
-      stiffness: 150,
+      damping: 40,
+      stiffness: 200,
     });
   }, [checked, progress]);
 

package/src/Switch/Switch.web.tsx

@@ -3,7 +3,7 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { switchStyles } from './Switch.styles';
 import type { SwitchProps } from './types';
 import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebSelectionAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
@@ -93,10 +93,9 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
     if (!iconToRender) return null;
 
     if (isIconName(iconToRender)) {
-      const iconPath = resolveIconPath(iconToRender);
       return (
         <IconSvg
-          path={iconPath}
+          name={iconToRender}
           {...thumbIconProps}
           aria-label={iconToRender}
         />

package/src/Table/Table.native.tsx

@@ -1,9 +1,140 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, ReactNode } from 'react';
 import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
 
+// ============================================================================
+// Sub-component Props
+// ============================================================================
+
+interface TRProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  clickable?: boolean;
+  onPress?: () => void;
+  testID?: string;
+}
+
+interface THProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+interface TDProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+// ============================================================================
+// TR Component
+// ============================================================================
+
+function TR({
+  children,
+  size = 'md',
+  type = 'standard',
+  clickable = false,
+  onPress,
+  testID,
+}: TRProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    clickable,
+  });
+
+  const rowStyle = (tableStyles.row as any)({});
+  const RowComponent = clickable ? TouchableOpacity : View;
+
+  return (
+    <RowComponent
+      style={rowStyle}
+      onPress={clickable ? onPress : undefined}
+      testID={testID}
+    >
+      <View style={{ flexDirection: 'row' }}>
+        {children}
+      </View>
+    </RowComponent>
+  );
+}
+
+// ============================================================================
+// TH Component
+// ============================================================================
+
+function TH({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: THProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const headerCellStyle = (tableStyles.headerCell as any)({});
+
+  return (
+    <View
+      style={[
+        headerCellStyle,
+        { width, flex: width ? undefined : 1 },
+      ]}
+    >
+      <Text style={headerCellStyle}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+// ============================================================================
+// TD Component
+// ============================================================================
+
+function TD({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: TDProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const cellStyle = (tableStyles.cell as any)({});
+
+  return (
+    <View
+      style={[
+        cellStyle,
+        { width, flex: width ? undefined : 1 },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+// ============================================================================
+// Main Table Component
+// ============================================================================
+
 function TableInner<T = any>({
   columns,
   data,
@@ -37,7 +168,8 @@ function TableInner<T = any>({
       accessibilityHidden,
     });
   }, [accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityHidden]);
-  // Apply variants
+
+  // Apply variants for container
   tableStyles.useVariants({
     type,
     size,
@@ -55,8 +187,6 @@ function TableInner<T = any>({
   const tableStyle = (tableStyles.table as any)({});
   const theadStyle = (tableStyles.thead as any)({});
   const tbodyStyle = (tableStyles.tbody as any)({});
-  const rowStyle = (tableStyles.row as any)({});
-  const headerCellStyle = (tableStyles.headerCell as any)({});
   const cellStyle = (tableStyles.cell as any)({});
 
   // Helper to get cell value
@@ -84,71 +214,44 @@ function TableInner<T = any>({
         {/* Header */}
         <View style={theadStyle}>
           <View style={{ flexDirection: 'row' }}>
-            {columns.map((column) => {
-              tableStyles.useVariants({
-                size,
-                align: column.align || 'left',
-                type,
-              });
-
-              return (
-                <View
-                  key={column.key}
-                  style={[
-                    headerCellStyle,
-                    { width: column.width, flex: column.width ? undefined : 1 },
-                  ]}
-                >
-                  <Text style={headerCellStyle}>
-                    {column.title}
-                  </Text>
-                </View>
-              );
-            })}
+            {columns.map((column) => (
+              <TH
+                key={column.key}
+                size={size}
+                type={type}
+                align={column.align}
+                width={column.width}
+              >
+                {column.title}
+              </TH>
+            ))}
           </View>
         </View>
 
         {/* Body */}
         <View style={tbodyStyle}>
-          {data.map((row, rowIndex) => {
-            tableStyles.useVariants({
-              type,
-              clickable: isClickable,
-            });
-
-            const RowComponent = isClickable ? TouchableOpacity : View;
-
-            return (
-              <RowComponent
-                key={rowIndex}
-                style={rowStyle}
-                onPress={isClickable ? () => onRowPress?.(row, rowIndex) : undefined}
-                testID={`${testID}-row-${rowIndex}`}
-              >
-                <View style={{ flexDirection: 'row' }}>
-                  {columns.map((column) => {
-                    tableStyles.useVariants({
-                      size,
-                      align: column.align || 'left',
-                      type,
-                    });
-
-                    return (
-                      <View
-                        key={column.key}
-                        style={[
-                          cellStyle,
-                          { width: column.width, flex: column.width ? undefined : 1 },
-                        ]}
-                      >
-                        {getCellValue(column, row, rowIndex)}
-                      </View>
-                    );
-                  })}
-                </View>
-              </RowComponent>
-            );
-          })}
+          {data.map((row, rowIndex) => (
+            <TR
+              key={rowIndex}
+              size={size}
+              type={type}
+              clickable={isClickable}
+              onPress={() => onRowPress?.(row, rowIndex)}
+              testID={testID ? `${testID}-row-${rowIndex}` : undefined}
+            >
+              {columns.map((column) => (
+                <TD
+                  key={column.key}
+                  size={size}
+                  type={type}
+                  align={column.align}
+                  width={column.width}
+                >
+                  {getCellValue(column, row, rowIndex)}
+                </TD>
+              ))}
+            </TR>
+          ))}
         </View>
       </View>
     </ScrollView>

package/src/Table/Table.styles.tsx

@@ -113,41 +113,34 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         } as const;
     },
 
-    headerCell: ({ type = 'standard', align = 'left' }: TableDynamicProps) => {
-        const alignStyles = {
-            left: { textAlign: 'left' as const, justifyContent: 'flex-start' as const },
-            center: { textAlign: 'center' as const, justifyContent: 'center' as const },
-            right: { textAlign: 'right' as const, justifyContent: 'flex-end' as const },
-        }[align];
-
-        const borderStyles = type === 'bordered' ? {
-            borderRightWidth: 1,
-            borderRightColor: theme.colors.border.primary,
-        } : {};
-
-        return {
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            fontWeight: '600' as const,
-            color: theme.colors.text.primary,
-            borderBottomWidth: 2,
-            borderBottomColor: theme.colors.border.primary,
-            ...alignStyles,
-            ...borderStyles,
-            variants: {
-                size: {
-                    padding: theme.sizes.$table.padding,
-                    fontSize: theme.sizes.$table.fontSize,
-                    lineHeight: theme.sizes.$table.lineHeight,
-                },
+    headerCell: ({ type = 'standard', align = 'left' }: TableDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        fontWeight: '600' as const,
+        color: theme.colors.text.primary,
+        borderBottomWidth: 2,
+        borderBottomColor: theme.colors.border.primary,
+        variants: {
+            type: {
+                bordered: { borderRightWidth: 1, borderRightColor: theme.colors.border.primary },
             },
-            _web: {
-                borderBottom: `2px solid ${theme.colors.border.primary}`,
-                borderRight: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
-                ':last-child': type === 'bordered' ? { borderRight: 'none' } : {},
+            align: {
+                left: { textAlign: 'left' as const, justifyContent: 'flex-start' as const },
+                center: { textAlign: 'center' as const, justifyContent: 'center' as const },
+                right: { textAlign: 'right' as const, justifyContent: 'flex-end' as const },
             },
-        } as const;
-    },
+            size: {
+                padding: theme.sizes.$table.padding,
+                fontSize: theme.sizes.$table.fontSize,
+                lineHeight: theme.sizes.$table.lineHeight,
+            },
+        },
+        _web: {
+            borderBottom: `2px solid ${theme.colors.border.primary}`,
+            borderRight: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
+            ':last-child': type === 'bordered' ? { borderRight: 'none' } : {},
+        },
+    }),
 
     cell: ({ type = 'standard', align = 'left' }: TableDynamicProps) => {
         const alignStyles = {