@idealyst/components 1.1.6 → 1.1.8

package/src/TabBar/TabBar.web.tsx

@@ -9,7 +9,7 @@ import {
 } from './TabBar.styles';
 import type { TabBarProps, TabBarItem } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
-import { getWebAriaProps, generateAccessibilityId, TAB_KEYS } from '../utils/accessibility';
+import { getWebAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 // Icon size mapping based on size variant
 const ICON_SIZES: Record<string, number> = {
@@ -66,23 +66,7 @@ const Tab: React.FC<TabProps> = ({
 }) => {
   const iconSize = ICON_SIZES[size || 'md'] || 18;
 
-  // Apply tab and label types for this specific tab
-  tabBarTabStyles.useVariants({
-    size,
-    type,
-    active: isActive,
-    disabled: Boolean(item.disabled),
-    pillMode,
-    iconPosition,
-    justify,
-  });
-  tabBarLabelStyles.useVariants({
-    size,
-    type,
-    pillMode,
-    active: isActive,
-    disabled: Boolean(item.disabled),
-  });
+  // Apply icon variants (size, disabled, iconPosition)
   tabBarIconStyles.useVariants({
     size,
     active: isActive,
@@ -90,9 +74,13 @@ const Tab: React.FC<TabProps> = ({
     iconPosition,
   });
 
-  const tabProps = getWebProps([tabBarTabStyles.tab]);
-  const labelProps = getWebProps([tabBarLabelStyles.tabLabel]);
-  const iconProps = getWebProps([tabBarIconStyles.tabIcon]);
+  // Compute dynamic styles for this tab
+  const tabStyle = (tabBarTabStyles.tab as any)({ type, size, active: isActive, pillMode, justify });
+  const labelStyle = (tabBarLabelStyles.tabLabel as any)({ type, active: isActive, pillMode });
+
+  const tabProps = getWebProps([tabStyle]);
+  const labelProps = getWebProps([labelStyle]);
+  const iconProps = getWebProps([tabBarIconStyles.tabIcon as any]);
 
   // Merge refs from getWebProps with our tracking ref
   const mergedRef = useMergeRefs<HTMLButtonElement>(
@@ -174,16 +162,16 @@ const TabBar: React.FC<TabBarProps> = ({
     const currentIndex = enabledItems.findIndex(item => item.value === itemValue);
     let nextIndex = -1;
 
-    if (TAB_KEYS.next.includes(key)) {
+    if (key === 'ArrowRight') {
       e.preventDefault();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
-    } else if (TAB_KEYS.prev.includes(key)) {
+    } else if (key === 'ArrowLeft') {
       e.preventDefault();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
-    } else if (TAB_KEYS.first.includes(key)) {
+    } else if (key === 'Home') {
       e.preventDefault();
       nextIndex = 0;
-    } else if (TAB_KEYS.last.includes(key)) {
+    } else if (key === 'End') {
       e.preventDefault();
       nextIndex = enabledItems.length - 1;
     }
@@ -255,11 +243,8 @@ const TabBar: React.FC<TabBarProps> = ({
     onChange?.(itemValue);
   };
 
-  // Apply container and indicator types
-  tabBarContainerStyles.useVariants({
-    type,
-    size,
-    pillMode,
+  // Apply container variants (for spacing only)
+  (tabBarContainerStyles.useVariants as any)({
     justify,
     gap,
     padding,
@@ -269,10 +254,13 @@ const TabBar: React.FC<TabBarProps> = ({
     marginVertical,
     marginHorizontal,
   });
-  const containerProps = getWebProps([tabBarContainerStyles.container, style as any]);
 
-  tabBarIndicatorStyles.useVariants({ type, pillMode });
-  const indicatorProps = getWebProps([tabBarIndicatorStyles.indicator]);
+  // Compute dynamic container and indicator styles
+  const containerStyle = (tabBarContainerStyles.container as any)({ type, pillMode });
+  const containerProps = getWebProps([containerStyle, style as any]);
+
+  const indicatorVisualStyle = (tabBarIndicatorStyles.indicator as any)({ type, pillMode });
+  const indicatorProps = getWebProps([indicatorVisualStyle]);
 
   // Merge container ref with getWebProps ref
   const mergedContainerRef = useMergeRefs<HTMLDivElement>(

package/src/Table/Table.native.tsx

@@ -50,6 +50,15 @@ function TableInner<T = any>({
     marginHorizontal,
   });
 
+  // Call styles as functions to get theme-reactive styles
+  const containerStyle = (tableStyles.container as 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
   const getCellValue = (column: TableColumn<T>, row: T, rowIndex: number) => {
     if (column.render) {
@@ -57,7 +66,7 @@ function TableInner<T = any>({
       return column.render(value, row, rowIndex);
     }
     const value = column.dataIndex ? (row as any)[column.dataIndex] : '';
-    return <Text style={tableStyles.cell}>{String(value)}</Text>;
+    return <Text style={cellStyle}>{String(value)}</Text>;
   };
 
   const isClickable = !!onRowPress;
@@ -67,13 +76,13 @@ function TableInner<T = any>({
       ref={ref}
       nativeID={id}
       horizontal
-      style={[tableStyles.container, style]}
+      style={[containerStyle, style]}
       testID={testID}
       {...nativeA11yProps}
     >
-      <View style={tableStyles.table}>
+      <View style={tableStyle}>
         {/* Header */}
-        <View style={tableStyles.thead}>
+        <View style={theadStyle}>
           <View style={{ flexDirection: 'row' }}>
             {columns.map((column) => {
               tableStyles.useVariants({
@@ -86,11 +95,11 @@ function TableInner<T = any>({
                 <View
                   key={column.key}
                   style={[
-                    tableStyles.headerCell,
+                    headerCellStyle,
                     { width: column.width, flex: column.width ? undefined : 1 },
                   ]}
                 >
-                  <Text style={tableStyles.headerCell}>
+                  <Text style={headerCellStyle}>
                     {column.title}
                   </Text>
                 </View>
@@ -100,7 +109,7 @@ function TableInner<T = any>({
         </View>
 
         {/* Body */}
-        <View style={tableStyles.tbody}>
+        <View style={tbodyStyle}>
           {data.map((row, rowIndex) => {
             tableStyles.useVariants({
               type,
@@ -112,7 +121,7 @@ function TableInner<T = any>({
             return (
               <RowComponent
                 key={rowIndex}
-                style={tableStyles.row}
+                style={rowStyle}
                 onPress={isClickable ? () => onRowPress?.(row, rowIndex) : undefined}
                 testID={`${testID}-row-${rowIndex}`}
               >
@@ -128,7 +137,7 @@ function TableInner<T = any>({
                       <View
                         key={column.key}
                         style={[
-                          tableStyles.cell,
+                          cellStyle,
                           { width: column.width, flex: column.width ? undefined : 1 },
                         ]}
                       >

package/src/Table/Table.styles.old.tsx

@@ -0,0 +1,311 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, CompoundVariants, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type TableType = 'default' | 'bordered' | 'striped';
+
+type TableRowVariants = {
+    type: TableType;
+    clickable: boolean;
+}
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
+        standard: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        bordered: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        striped: {
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: theme.colors.border.primary,
+            borderRadius: 8,
+            overflow: 'hidden',
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create type variants for row
+ */
+function createRowTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        bordered: {
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            _web: {
+                borderBottom: `1px solid ${theme.colors.border.primary}`,
+            },
+        },
+        striped: {
+            borderBottomWidth: 1,
+            borderBottomStyle: 'solid',
+            borderBottomColor: theme.colors.border.primary,
+            _web: {
+                borderBottom: `1px solid ${theme.colors.border.primary}`,
+                ':nth-child(even)': {
+                    backgroundColor: theme.colors.surface.secondary,
+                },
+            },
+        },
+    } as const;
+}
+
+/**
+ * Create compound variants for row
+ */
+function createRowCompoundVariants(theme: Theme): CompoundVariants<keyof TableRowVariants> {
+    return [
+        {
+            type: 'striped',
+            clickable: true,
+            styles: {
+                _web: {
+                    _hover: {
+                        backgroundColor: theme.colors.surface.tertiary,
+                    },
+                },
+            },
+        },
+    ] as const;
+}
+
+/**
+ * Create size variants for header cell
+ */
+function createHeaderCellSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'table', (size) => ({
+        padding: size.padding,
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create type variants for header cell
+ */
+function createHeaderCellTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        bordered: {
+            borderRightWidth: 1,
+            borderRightStyle: 'solid',
+            borderRightColor: theme.colors.border.primary,
+            _web: {
+                borderRight: `1px solid ${theme.colors.border.primary}`,
+                ':last-child': {
+                    borderRight: 'none',
+                },
+            },
+        },
+        striped: {},
+    } as const;
+}
+
+/**
+ * Create size variants for cell
+ */
+function createCellSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'table', (size) => ({
+        padding: size.padding,
+        fontSize: size.fontSize,
+        lineHeight: size.lineHeight,
+    }));
+}
+
+/**
+ * Create type variants for cell
+ */
+function createCellTypeVariants(theme: Theme) {
+    return {
+        standard: {},
+        bordered: {
+            borderRightWidth: 1,
+            borderRightStyle: 'solid',
+            borderRightColor: theme.colors.border.primary,
+            _web: {
+                borderRight: `1px solid ${theme.colors.border.primary}`,
+                ':last-child': {
+                    borderRight: 'none',
+                },
+            },
+        },
+        striped: {},
+    } as const;
+}
+
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        width: '100%',
+        _web: {
+            overflow: 'auto',
+        },
+        variants: {
+            type: createContainerTypeVariants(theme),
+            // Spacing variants from ContainerStyleProps
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+const createTableStyles = (theme: Theme) => {
+    return {
+        width: '100%',
+        _web: {
+            borderCollapse: 'collapse',
+        },
+    } as const;
+}
+
+const createTheadStyles = (theme: Theme) => {
+    return {
+        backgroundColor: theme.colors.surface.secondary,
+        variants: {
+            sticky: {
+                true: {
+                    _web: {
+                            position: 'sticky',
+                            top: 0,
+                            zIndex: 10,
+                    }
+                },
+                false: {},
+            },
+        },
+    } as const;
+}
+
+const createRowStyles = (theme: Theme) => {
+    return {
+        variants: {
+            type: createRowTypeVariants(theme),
+            clickable: {
+                true: {
+                    _web: {
+                        cursor: 'pointer',
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                    },
+                },
+                false: {},
+            },
+        },
+        compoundVariants: createRowCompoundVariants(theme),
+        _web: {
+            transition: 'background-color 0.2s ease',
+        },
+    } as const;
+}
+
+const createHeaderCellStyles = (theme: Theme) => {
+    return {
+        flexDirection: 'row',
+        alignItems: 'center',
+        textAlign: 'left',
+        fontWeight: '600',
+        color: theme.colors.text.primary,
+        borderBottomWidth: 2,
+        borderBottomStyle: 'solid',
+        borderBottomColor: theme.colors.border.primary,
+        _web: {
+            borderBottom: `2px solid ${theme.colors.border.primary}`,
+        },
+        variants: {
+            size: createHeaderCellSizeVariants(theme),
+            align: {
+                left: {
+                    textAlign: 'left',
+                    justifyContent: 'flex-start',
+                },
+                center: {
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                },
+                right: {
+                    textAlign: 'right',
+                    justifyContent: 'flex-end',
+                },
+            },
+            type: createHeaderCellTypeVariants(theme),
+        },
+    } as const;
+}
+
+const createCellStyles = (theme: Theme) => {
+    return {
+        flexDirection: 'row',
+        alignItems: 'center',
+        textAlign: 'left',
+        color: theme.colors.text.primary,
+        variants: {
+            size: createCellSizeVariants(theme),
+            align: {
+                left: {
+                    textAlign: 'left',
+                    justifyContent: 'flex-start',
+                },
+                center: {
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                },
+                right: {
+                    textAlign: 'right',
+                    justifyContent: 'flex-end',
+                },
+            },
+            type: createCellTypeVariants(theme),
+        },
+    } as const;
+}
+
+export const tableStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Table', theme, {
+        container: createContainerStyles(theme),
+        table: createTableStyles(theme),
+        thead: createTheadStyles(theme),
+        tbody: {},
+        row: createRowStyles(theme),
+        headerCell: createHeaderCellStyles(theme),
+        cell: createCellStyles(theme),
+    });
+});