@idealyst/components 1.2.142 → 1.2.143

package/package.json

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

package/src/Switch/Switch.styles.tsx

@@ -49,6 +49,7 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
 
     switchContainer: (_props: SwitchDynamicProps) => ({
         justifyContent: 'center' as const,
+        alignItems: 'center' as const,
         variants: {
             disabled: {
                 true: { _web: { cursor: 'not-allowed' } },
@@ -56,10 +57,12 @@ export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
             },
         },
         _web: {
+            display: 'inline-flex',
             border: 'none',
             padding: 0,
             backgroundColor: 'transparent',
             width: 'fit-content',
+            verticalAlign: 'middle',
         },
     }),
 

package/src/Table/Table.native.tsx

@@ -13,6 +13,7 @@ interface TRProps {
   size?: TableSizeVariant;
   type?: TableType;
   clickable?: boolean;
+  dividers?: boolean;
   onPress?: () => void;
   testID?: string;
 }
@@ -42,6 +43,7 @@ function TR({
   size = 'md',
   type = 'standard',
   clickable = false,
+  dividers = false,
   onPress,
   testID,
 }: TRProps) {
@@ -49,6 +51,7 @@ function TR({
     size,
     type,
     clickable,
+    dividers,
   });
 
   const rowStyle = (tableStyles.row as any)({});
@@ -187,6 +190,7 @@ function TableInner<T = any>({
   size = 'md',
   stickyHeader: _stickyHeader = false,
   onRowPress,
+  dividers = false,
   emptyState,
   // Spacing variants from ContainerStyleProps
   gap,
@@ -289,6 +293,7 @@ function TableInner<T = any>({
               size={size}
               type={type}
               clickable={isClickable}
+              dividers={dividers}
               onPress={() => onRowPress?.(row, rowIndex)}
               testID={testID ? `${testID}-row-${rowIndex}` : undefined}
             >

package/src/Table/Table.styles.tsx

@@ -19,6 +19,7 @@ export type TableDynamicProps = {
     size?: Size;
     type?: TableType;
     clickable?: boolean;
+    dividers?: boolean;
     sticky?: boolean;
     align?: CellAlign;
     gap?: ViewStyleSize;
@@ -116,8 +117,8 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
             variants: {
                 size: {
                     padding: theme.sizes.$table.padding,
-                    fontSize: theme.sizes.$table.fontSize,
-                    lineHeight: theme.sizes.$table.lineHeight,
+                    fontSize: theme.sizes.$table.headerFontSize,
+                    lineHeight: theme.sizes.$table.headerLineHeight,
                 },
             },
             _web: {
@@ -128,8 +129,9 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         } as const;
     },
 
-    row: ({ type = 'standard', clickable = false }: TableDynamicProps) => {
-        const typeStyles = type === 'bordered' || type === 'striped' ? {
+    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,
         } : {};
@@ -138,7 +140,7 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
             ...typeStyles,
             _web: {
                 transition: 'background-color 0.15s ease',
-                borderBottom: (type === 'bordered' || type === 'striped')
+                borderBottom: showBorder
                     ? `1px solid ${theme.colors.border.primary}`
                     : undefined,
                 cursor: clickable ? 'pointer' : undefined,
@@ -173,8 +175,8 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
             },
             size: {
                 padding: theme.sizes.$table.padding,
-                fontSize: theme.sizes.$table.fontSize,
-                lineHeight: theme.sizes.$table.lineHeight,
+                fontSize: theme.sizes.$table.headerFontSize,
+                lineHeight: theme.sizes.$table.headerLineHeight,
             },
         },
         _web: {

package/src/Table/Table.web.tsx

@@ -32,6 +32,7 @@ interface TRProps {
   size?: TableSizeVariant;
   type?: TableType;
   clickable?: boolean;
+  dividers?: boolean;
   onClick?: () => void;
   testID?: string;
 }
@@ -69,6 +70,7 @@ function TR({
   size = 'md',
   type = 'standard',
   clickable = false,
+  dividers = false,
   onClick,
   testID,
 }: TRProps) {
@@ -76,6 +78,7 @@ function TR({
     size,
     type,
     clickable,
+    dividers,
   });
 
   const rowProps = getWebProps([(tableStyles.row as any)({})]);
@@ -263,6 +266,7 @@ function Table<T = any>({
   stickyHeader = false,
   onRowPress,
   onColumnResize,
+  dividers = false,
   emptyState,
   // Spacing variants from ContainerStyleProps
   gap,
@@ -394,6 +398,7 @@ function Table<T = any>({
                 size={size}
                 type={type}
                 clickable={isClickable}
+                dividers={dividers}
                 onClick={() => onRowPress?.(row, rowIndex)}
                 testID={testID ? `${testID}-row-${rowIndex}` : undefined}
               >

package/src/Table/types.ts

@@ -47,6 +47,11 @@ export interface TableProps<T = any> extends ContainerStyleProps, AccessibilityP
   type?: TableType;
   size?: TableSizeVariant;
   stickyHeader?: boolean;
+  /**
+   * Show dividers (horizontal borders) between rows.
+   * Works with any table `type`.
+   */
+  dividers?: boolean;
   onRowPress?: (row: T, index: number) => void;
   /**
    * Called when a column is resized via drag handle.