@idealyst/components 1.2.143 → 1.2.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.143",
+  "version": "1.2.145",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.143",
+    "@idealyst/theme": "^1.2.145",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.143",
-    "@idealyst/tooling": "^1.2.143",
+    "@idealyst/theme": "^1.2.145",
+    "@idealyst/tooling": "^1.2.145",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Table/Table.native.tsx

@@ -14,6 +14,7 @@ interface TRProps {
   type?: TableType;
   clickable?: boolean;
   dividers?: boolean;
+  even?: boolean;
   onPress?: () => void;
   testID?: string;
 }
@@ -44,6 +45,7 @@ function TR({
   type = 'standard',
   clickable = false,
   dividers = false,
+  even = false,
   onPress,
   testID,
 }: TRProps) {
@@ -52,6 +54,7 @@ function TR({
     type,
     clickable,
     dividers,
+    even,
   });
 
   const rowStyle = (tableStyles.row as any)({});
@@ -293,7 +296,8 @@ function TableInner<T = any>({
               size={size}
               type={type}
               clickable={isClickable}
-              dividers={dividers}
+              dividers={dividers && rowIndex < data.length - 1}
+              even={rowIndex % 2 === 1}
               onPress={() => onRowPress?.(row, rowIndex)}
               testID={testID ? `${testID}-row-${rowIndex}` : undefined}
             >

package/src/Table/Table.styles.tsx

@@ -12,7 +12,7 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type TableType = 'standard' | 'bordered' | 'striped';
+type TableType = 'standard' | 'striped';
 type CellAlign = 'left' | 'center' | 'right';
 
 export type TableDynamicProps = {
@@ -20,6 +20,7 @@ export type TableDynamicProps = {
     type?: TableType;
     clickable?: boolean;
     dividers?: boolean;
+    even?: boolean;
     sticky?: boolean;
     align?: CellAlign;
     gap?: ViewStyleSize;
@@ -93,71 +94,73 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         backgroundColor: theme.colors.surface.secondary,
     }),
 
-    footerCell: ({ 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,
-        } : {};
+    footerCell: (_props: TableDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        fontWeight: '600' as const,
+        color: theme.colors.text.primary,
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.border.primary,
+        variants: {
+            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 },
+            },
+            size: {
+                paddingVertical: theme.sizes.$table.headerPadding,
+                paddingHorizontal: theme.sizes.$table.padding,
+                fontSize: theme.sizes.$table.headerFontSize,
+                lineHeight: theme.sizes.$table.headerLineHeight,
+            },
+        },
+        _web: {
+            borderTop: `1px solid ${theme.colors.border.primary}`,
+        },
+    }),
 
-        return {
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            fontWeight: '600' as const,
-            color: theme.colors.text.primary,
-            borderTopWidth: 2,
-            borderTopColor: theme.colors.border.primary,
-            ...alignStyles,
-            ...borderStyles,
-            variants: {
-                size: {
-                    padding: theme.sizes.$table.padding,
-                    fontSize: theme.sizes.$table.headerFontSize,
-                    lineHeight: theme.sizes.$table.headerLineHeight,
+    row: (_props: TableDynamicProps) => ({
+        variants: {
+            type: {
+                striped: {
+                    _web: {
+                        ':nth-child(even)': {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                    },
                 },
             },
-            _web: {
-                borderTop: `2px solid ${theme.colors.border.primary}`,
-                borderRight: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
-                ':last-child': type === 'bordered' ? { borderRight: 'none' } : {},
+            clickable: {
+                true: { _web: { cursor: 'pointer' } },
             },
-        } as const;
-    },
-
-    row: ({ type = 'standard', clickable = false, dividers = false }: TableDynamicProps) => {
-        const showBorder = type === 'bordered' || type === 'striped' || dividers;
-        const typeStyles = showBorder ? {
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border.primary,
-        } : {};
-
-        return {
-            ...typeStyles,
-            _web: {
-                transition: 'background-color 0.15s ease',
-                borderBottom: showBorder
-                    ? `1px solid ${theme.colors.border.primary}`
-                    : undefined,
-                cursor: clickable ? 'pointer' : undefined,
-                _hover: {
+            dividers: {
+                true: {
+                    borderBottomWidth: 1,
+                    borderBottomColor: theme.colors.border.primary,
+                    _web: {
+                        borderBottom: `1px solid ${theme.colors.border.primary}`,
+                    },
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                type: 'striped',
+                even: true,
+                styles: {
                     backgroundColor: theme.colors.surface.secondary,
                 },
-                // Striped rows handled via CSS pseudo-selector
-                ...(type === 'striped' ? {
-                    ':nth-child(even)': {
-                        backgroundColor: theme.colors.surface.secondary,
-                    },
-                } : {}),
             },
-        } as const;
-    },
+        ],
+        _web: {
+            transition: 'background-color 0.15s ease',
+            _hover: {
+                backgroundColor: theme.colors.surface.hover,
+            },
+        },
+    }),
 
-    headerCell: ({ type = 'standard', align: _align = 'left' }: TableDynamicProps) => ({
+    headerCell: (_props: TableDynamicProps) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         fontWeight: '600' as const,
@@ -165,57 +168,39 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         borderBottomWidth: 1,
         borderBottomColor: theme.colors.border.primary,
         variants: {
-            type: {
-                bordered: { borderRightWidth: 1, borderRightColor: theme.colors.border.primary },
-            },
             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 },
             },
             size: {
-                padding: theme.sizes.$table.padding,
+                paddingVertical: theme.sizes.$table.headerPadding,
+                paddingHorizontal: theme.sizes.$table.padding,
                 fontSize: theme.sizes.$table.headerFontSize,
                 lineHeight: theme.sizes.$table.headerLineHeight,
             },
         },
         _web: {
             position: 'relative',
-            borderBottom: `2px solid ${theme.colors.border.primary}`,
-            borderRight: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
-            ':last-child': type === 'bordered' ? { borderRight: 'none' } : {},
+            borderBottom: `1px solid ${theme.colors.border.primary}`,
         },
     }),
 
-    cell: ({ 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,
-            color: theme.colors.text.primary,
-            ...alignStyles,
-            ...borderStyles,
-            variants: {
-                size: {
-                    padding: theme.sizes.$table.padding,
-                    fontSize: theme.sizes.$table.fontSize,
-                    lineHeight: theme.sizes.$table.lineHeight,
-                },
+    cell: (_props: TableDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            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 },
             },
-            _web: {
-                borderRight: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
-                ':last-child': type === 'bordered' ? { borderRight: 'none' } : {},
+            size: {
+                padding: theme.sizes.$table.padding,
+                fontSize: theme.sizes.$table.fontSize,
+                lineHeight: theme.sizes.$table.lineHeight,
             },
-        } as const;
-    },
+        },
+    }),
 }));

package/src/Table/Table.web.tsx

@@ -398,7 +398,7 @@ function Table<T = any>({
                 size={size}
                 type={type}
                 clickable={isClickable}
-                dividers={dividers}
+                dividers={dividers && rowIndex < data.length - 1}
                 onClick={() => onRowPress?.(row, rowIndex)}
                 testID={testID ? `${testID}-row-${rowIndex}` : undefined}
               >

package/src/Table/types.ts

@@ -6,7 +6,7 @@ import { AccessibilityProps, SortableAccessibilityProps } from '../utils/accessi
 
 // Component-specific type aliases for future extensibility
 export type TableSizeVariant = Size;
-export type TableType = 'standard' | 'bordered' | 'striped';
+export type TableType = 'standard' | 'striped';
 export type TableAlignVariant = 'left' | 'center' | 'right';
 
 export interface TableColumn<T = any> extends SortableAccessibilityProps {

package/src/examples/TableExamples.tsx

@@ -156,19 +156,34 @@ export const TableExamples: React.FC = () => {
             />
           </View>
           <View gap="xs">
-            <Text typography="body2">Bordered</Text>
+            <Text typography="body2">Striped</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="striped"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View gap="md">
+        <Text typography="h5">With Dividers</Text>
+        <View gap="sm">
+          <View gap="xs">
+            <Text typography="body2">Standard + Dividers</Text>
             <Table
               columns={userColumns}
               data={users}
-              type="bordered"
+              dividers
             />
           </View>
           <View gap="xs">
-            <Text typography="body2">Striped</Text>
+            <Text typography="body2">Striped + Dividers</Text>
             <Table
               columns={userColumns}
               data={users}
               type="striped"
+              dividers
             />
           </View>
         </View>
@@ -183,7 +198,7 @@ export const TableExamples: React.FC = () => {
               columns={userColumns}
               data={users.slice(0, 2)}
               size="sm"
-              type="bordered"
+              dividers
             />
           </View>
           <View gap="xs">
@@ -192,7 +207,7 @@ export const TableExamples: React.FC = () => {
               columns={userColumns}
               data={users.slice(0, 2)}
               size="md"
-              type="bordered"
+              dividers
             />
           </View>
           <View gap="xs">
@@ -201,7 +216,7 @@ export const TableExamples: React.FC = () => {
               columns={userColumns}
               data={users.slice(0, 2)}
               size="lg"
-              type="bordered"
+              dividers
             />
           </View>
         </View>