@idealyst/components 1.2.124 → 1.2.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.124",
+  "version": "1.2.126",
   "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.124",
+    "@idealyst/theme": "^1.2.126",
     "@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.124",
-    "@idealyst/tooling": "^1.2.124",
+    "@idealyst/theme": "^1.2.126",
+    "@idealyst/tooling": "^1.2.126",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/TabBar/TabBar.styles.tsx

@@ -125,17 +125,13 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
             opacity: disabled ? 0.5 : 1,
             ...tabPadding,
             variants: {
-                size: type === 'pills'
-                    ? {
-                        fontSize: theme.sizes.$tabBar.fontSize,
-                        lineHeight: theme.sizes.$tabBar.lineHeight,
-                    }
-                    : {
-                        fontSize: theme.sizes.$tabBar.fontSize,
-                        paddingVertical: theme.sizes.$tabBar.padding,
-                        paddingHorizontal: theme.sizes.$tabBar.padding,
-                        lineHeight: theme.sizes.$tabBar.lineHeight,
-                    },
+                size: {
+                    fontSize: theme.sizes.$tabBar.fontSize,
+                    lineHeight: theme.sizes.$tabBar.lineHeight,
+                    paddingTop: type === 'pills' ? undefined : theme.sizes.$tabBar.padding,
+                    paddingBottom: type === 'pills' ? undefined : theme.sizes.$tabBar.paddingBottom,
+                    paddingHorizontal: type === 'pills' ? undefined : theme.sizes.$tabBar.padding,
+                },
             },
             _web: {
                 border: 'none',

package/src/TabBar/TabBar.web.tsx

@@ -66,6 +66,16 @@ const Tab: React.FC<TabProps> = ({
 }) => {
   const iconSize = ICON_SIZES[size || 'md'] || 18;
 
+  // Apply tab variants (size) for variant expansion (padding, fontSize, lineHeight)
+  tabBarTabStyles.useVariants({
+    size,
+  });
+
+  // Apply label variants (size) for variant expansion
+  tabBarLabelStyles.useVariants({
+    size,
+  });
+
   // Apply icon variants (size, disabled, iconPosition)
   tabBarIconStyles.useVariants({
     size,

package/src/Table/Table.native.tsx

@@ -93,9 +93,11 @@ function TH({
         { width, flex: width ? undefined : 1 },
       ]}
     >
-      <Text style={headerCellStyle}>
-        {children}
-      </Text>
+      {typeof children === 'string' ? (
+        <Text style={headerCellStyle}>{children}</Text>
+      ) : (
+        children
+      )}
     </View>
   );
 }
@@ -131,6 +133,49 @@ function TD({
   );
 }
 
+// ============================================================================
+// TF Component (Footer Cell)
+// ============================================================================
+
+interface TFProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+function TF({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: TFProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const footerCellStyle = (tableStyles.footerCell as any)({});
+
+  return (
+    <View
+      style={[
+        footerCellStyle,
+        { width, flex: width ? undefined : 1 },
+      ]}
+    >
+      {typeof children === 'string' ? (
+        <Text style={footerCellStyle}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
 // ============================================================================
 // Main Table Component
 // ============================================================================
@@ -200,6 +245,15 @@ function TableInner<T = any>({
   };
 
   const isClickable = !!onRowPress;
+  const hasFooter = columns.some((col) => col.footer !== undefined);
+
+  // Helper to resolve footer content
+  const getFooterContent = (column: TableColumn<T>) => {
+    if (typeof column.footer === 'function') {
+      return column.footer(data);
+    }
+    return column.footer;
+  };
 
   return (
     <ScrollView
@@ -253,6 +307,25 @@ function TableInner<T = any>({
             </TR>
           ))}
         </View>
+
+        {/* Footer */}
+        {hasFooter && (
+          <View style={(tableStyles.tfoot as any)({})}>
+            <View style={{ flexDirection: 'row' }}>
+              {columns.map((column) => (
+                <TF
+                  key={column.key}
+                  size={size}
+                  type={type}
+                  align={column.align}
+                  width={column.width}
+                >
+                  {getFooterContent(column) ?? null}
+                </TF>
+              ))}
+            </View>
+          </View>
+        )}
       </View>
     </ScrollView>
   );

package/src/Table/Table.styles.tsx

@@ -88,6 +88,46 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
 
     tbody: (_props: TableDynamicProps) => ({}),
 
+    tfoot: (_props: TableDynamicProps) => ({
+        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,
+        } : {};
+
+        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.fontSize,
+                    lineHeight: theme.sizes.$table.lineHeight,
+                },
+            },
+            _web: {
+                borderTop: `2px solid ${theme.colors.border.primary}`,
+                borderRight: type === 'bordered' ? `1px solid ${theme.colors.border.primary}` : undefined,
+                ':last-child': type === 'bordered' ? { borderRight: 'none' } : {},
+            },
+        } as const;
+    },
+
     row: ({ type = 'standard', clickable = false }: TableDynamicProps) => {
         const typeStyles = type === 'bordered' || type === 'striped' ? {
             borderBottomWidth: 1,

package/src/Table/Table.web.tsx

@@ -126,6 +126,43 @@ function TD({
   );
 }
 
+// ============================================================================
+// TF Component (Footer Cell)
+// ============================================================================
+
+interface TFProps {
+  children: ReactNode;
+  size?: TableSizeVariant;
+  type?: TableType;
+  align?: TableAlignVariant;
+  width?: number | string;
+}
+
+function TF({
+  children,
+  size = 'md',
+  type = 'standard',
+  align = 'left',
+  width,
+}: TFProps) {
+  tableStyles.useVariants({
+    size,
+    type,
+    align,
+  });
+
+  const footerCellProps = getWebProps([(tableStyles.footerCell as any)({})]);
+
+  return (
+    <td
+      {...footerCellProps}
+      style={{ width }}
+    >
+      {children}
+    </td>
+  );
+}
+
 // ============================================================================
 // Main Table Component
 // ============================================================================
@@ -194,6 +231,15 @@ function Table<T = any>({
   };
 
   const isClickable = !!onRowPress;
+  const hasFooter = columns.some((col) => col.footer !== undefined);
+
+  // Helper to resolve footer content
+  const getFooterContent = (column: TableColumn<T>) => {
+    if (typeof column.footer === 'function') {
+      return column.footer(data);
+    }
+    return column.footer;
+  };
 
   return (
     <div {...containerProps} {...ariaProps} id={id} data-testid={testID}>
@@ -238,6 +284,23 @@ function Table<T = any>({
             </TR>
           ))}
         </tbody>
+        {hasFooter && (
+          <tfoot {...getWebProps([(tableStyles.tfoot as any)({})])}>
+            <tr>
+              {columns.map((column) => (
+                <TF
+                  key={column.key}
+                  size={size}
+                  type={type}
+                  align={column.align}
+                  width={column.width}
+                >
+                  {getFooterContent(column) ?? null}
+                </TF>
+              ))}
+            </tr>
+          </tfoot>
+        )}
       </table>
     </div>
   );

package/src/Table/types.ts

@@ -11,9 +11,10 @@ export type TableAlignVariant = 'left' | 'center' | 'right';
 
 export interface TableColumn<T = any> extends SortableAccessibilityProps {
   key: string;
-  title: string;
+  title: ReactNode;
   dataIndex?: string;
   render?: (value: any, row: T, index: number) => ReactNode;
+  footer?: ReactNode | ((data: T[]) => ReactNode);
   width?: number | string;
   align?: TableAlignVariant;
 }