@idealyst/components 1.3.3 → 1.3.5

package/package.json

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

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -17,34 +17,26 @@ interface BreadcrumbItemProps {
 }
 
 const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, intent, itemStyle }) => {
-  const isClickable = !!item.onPress && !item.disabled;
   const isDisabled = item.disabled || false;
 
-  // Apply size variant
   breadcrumbStyles.useVariants({
     size,
-  });
-
-  // Get dynamic item text style
-  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
-    isLast,
+    active: isLast,
     disabled: isDisabled,
-    clickable: isClickable,
   });
 
-  const iconStyle = (breadcrumbStyles.icon as any)({});
+  const iconSize = (breadcrumbStyles.icon as any).width || 16;
 
   const renderIcon = () => {
     if (!item.icon) return null;
 
     if (typeof item.icon === 'string') {
-      const iconSize = iconStyle.width || 16;
       return (
         <Icon
           name={item.icon as IconName}
           size={iconSize}
-          style={iconStyle}
+          style={breadcrumbStyles.icon}
         />
       );
     } else if (isValidElement(item.icon)) {
@@ -54,16 +46,14 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     return null;
   };
 
-  const itemContainerStyle = (breadcrumbStyles.item as any)({});
-
   const content = (
-    <View style={[itemContainerStyle, itemStyle]}>
-      {item.icon && <View style={iconStyle}>{renderIcon()}</View>}
-      <Text style={itemTextStyle}>{item.label}</Text>
+    <View style={[breadcrumbStyles.item, itemStyle]}>
+      {item.icon && <View style={breadcrumbStyles.icon}>{renderIcon()}</View>}
+      <Text style={breadcrumbStyles.itemText}>{item.label}</Text>
     </View>
   );
 
-  if (isClickable) {
+  if (!!item.onPress && !item.disabled) {
     return (
       <Pressable
         onPress={item.onPress}
@@ -91,12 +81,10 @@ const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, si
   breadcrumbStyles.useVariants({ size });
 
   if (typeof separator === 'string') {
-    const sepStyle = (breadcrumbStyles.separator as any)({});
-    return <Text style={[sepStyle, separatorStyle]}>{separator}</Text>;
+    return <Text style={[breadcrumbStyles.separator, separatorStyle]}>{separator}</Text>;
   }
 
-  const sepIconStyle = (breadcrumbStyles.separatorIcon as any)({});
-  return <View style={[sepIconStyle, separatorStyle]}>{separator}</View>;
+  return <View style={[breadcrumbStyles.separatorIcon, separatorStyle]}>{separator}</View>;
 };
 
 interface BreadcrumbEllipsisProps {
@@ -105,13 +93,11 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
-  breadcrumbStyles.useVariants({ size });
-  const ellipsisStyle = (breadcrumbStyles.ellipsis as any)({});
-  const iconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
+  breadcrumbStyles.useVariants({ size, intent });
 
   return (
-    <View style={ellipsisStyle}>
-      <Icon name="dots-horizontal" style={iconStyle} />
+    <View style={breadcrumbStyles.ellipsis}>
+      <Icon name="dots-horizontal" style={breadcrumbStyles.ellipsisIcon} />
     </View>
   );
 };
@@ -132,11 +118,7 @@ const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
 }, ref) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // Apply variants
-  breadcrumbStyles.useVariants({ size });
-  const containerStyle = (breadcrumbStyles.container as any)({});
-  const menuButtonStyle = (breadcrumbStyles.menuButton as any)({});
-  const menuIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
+  breadcrumbStyles.useVariants({ size, intent });
 
   // Handle responsive collapsing
   let displayItems = items;
@@ -174,7 +156,7 @@ const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
     <View
       ref={ref as any}
       nativeID={id}
-      style={[containerStyle, style]}
+      style={[breadcrumbStyles.container, style]}
       testID={testID}
       accessibilityLabel="Breadcrumb"
     >
@@ -202,11 +184,11 @@ const Breadcrumb = forwardRef<IdealystElement, BreadcrumbProps>(({
                   size={size}
                 >
                   <Pressable
-                    style={menuButtonStyle}
+                    style={breadcrumbStyles.menuButton}
                     accessibilityRole="button"
                     accessibilityLabel="Show more breadcrumb items"
                   >
-                    <Icon name="dots-horizontal" style={menuIconStyle} />
+                    <Icon name="dots-horizontal" style={breadcrumbStyles.menuButtonIcon} />
                   </Pressable>
                 </Menu>
                 <BreadcrumbSeparator separator={separator} size={size} separatorStyle={separatorStyle} />

package/src/Breadcrumb/Breadcrumb.styles.tsx

@@ -1,9 +1,10 @@
 /**
- * Breadcrumb styles using defineStyle with $iterator expansion.
+ * Breadcrumb styles using defineStyle with static variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
 import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
-import type { Theme as BaseTheme, Size } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
 // Required: Unistyles must see StyleSheet usage in original source to process this file
 void StyleSheet;
@@ -11,65 +12,61 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type BreadcrumbIntent = 'primary' | 'neutral';
-
-export type BreadcrumbDynamicProps = {
-    size?: Size;
-    intent?: BreadcrumbIntent;
+export type BreadcrumbVariants = {
+    size?: ViewStyleSize;
+    intent?: 'primary' | 'neutral';
+    active?: boolean;
     disabled?: boolean;
-    isLast?: boolean;
-    clickable?: boolean;
 };
 
 /**
- * Breadcrumb styles with intent and state handling.
+ * Breadcrumb styles with static variants.
  */
 export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
-    container: (_props: BreadcrumbDynamicProps) => ({
+    container: {
         display: 'flex' as const,
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         flexWrap: 'wrap' as const,
         gap: 4,
-    }),
+    },
 
-    item: (_props: BreadcrumbDynamicProps) => ({
+    item: {
         display: 'flex' as const,
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         gap: 4,
-    }),
-
-    itemText: ({ intent = 'primary', isLast = false, disabled = false, clickable = true }: BreadcrumbDynamicProps) => {
-        // Get color based on state - inline for Unistyles to trace
-        const color = disabled
-            ? theme.colors.text.secondary
-            : isLast
-                ? theme.colors.text.primary
-                : clickable
-                    ? (intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary)
-                    : theme.colors.text.secondary;
+        opacity: 0.7,
+        variants: {
+            active: {
+                true: { opacity: 1 },
+                false: { _web: { _hover: { opacity: 1 } } },
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: {},
+            },
+        },
+        _web: {
+            transition: 'opacity 0.2s ease',
+        },
+    },
 
-        return {
-            color,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                // $iterator expands for each breadcrumb size
-                size: {
-                    fontSize: theme.sizes.$breadcrumb.fontSize,
-                    lineHeight: theme.sizes.$breadcrumb.lineHeight,
-                },
+    itemText: {
+        color: theme.colors.text.primary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$breadcrumb.fontSize,
+                lineHeight: theme.sizes.$breadcrumb.lineHeight,
+            },
+            disabled: {
+                true: { color: theme.colors.text.secondary },
+                false: {},
             },
-            _web: clickable && !isLast && !disabled ? {
-                _hover: {
-                    textDecoration: 'underline',
-                    opacity: 0.8,
-                },
-            } : {},
-        } as const;
+        },
     },
 
-    icon: (_props: BreadcrumbDynamicProps) => ({
+    icon: {
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
@@ -77,23 +74,25 @@ export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
         },
-    }),
+    },
 
-    separator: (_props: BreadcrumbDynamicProps) => ({
+    separator: {
         color: theme.colors.text.tertiary,
+        opacity: 0.9,
         variants: {
             size: {
                 fontSize: theme.sizes.$breadcrumb.fontSize,
                 lineHeight: theme.sizes.$breadcrumb.lineHeight,
             },
         },
-    }),
+    },
 
-    separatorIcon: (_props: BreadcrumbDynamicProps) => ({
+    separatorIcon: {
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         color: theme.colors.text.tertiary,
+        opacity: 0.9,
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
@@ -101,38 +100,46 @@ export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
         },
-    }),
+    },
 
-    ellipsis: (_props: BreadcrumbDynamicProps) => ({
+    ellipsis: {
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-    }),
+    },
 
-    ellipsisIcon: ({ intent = 'primary' }: BreadcrumbDynamicProps) => ({
-        color: intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary,
+    ellipsisIcon: {
+        color: theme.colors.text.secondary,
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
                 height: theme.sizes.$breadcrumb.iconSize,
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
+            intent: {
+                primary: { color: theme.intents.primary.primary },
+                neutral: { color: theme.colors.text.secondary },
+            },
         },
-    }),
+    },
 
-    menuButton: (_props: BreadcrumbDynamicProps) => ({
+    menuButton: {
         paddingVertical: 4,
         paddingHorizontal: 8,
-    }),
+    },
 
-    menuButtonIcon: ({ intent = 'primary' }: BreadcrumbDynamicProps) => ({
-        color: intent === 'primary' ? theme.intents.primary.primary : theme.colors.text.secondary,
+    menuButtonIcon: {
+        color: theme.colors.text.secondary,
         variants: {
             size: {
                 width: theme.sizes.$breadcrumb.iconSize,
                 height: theme.sizes.$breadcrumb.iconSize,
                 fontSize: theme.sizes.$breadcrumb.iconSize,
             },
+            intent: {
+                primary: { color: theme.intents.primary.primary },
+                neutral: { color: theme.colors.text.secondary },
+            },
         },
-    }),
+    },
 }));

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -19,24 +19,16 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
   const isClickable = !!item.onPress && !item.disabled;
   const isDisabled = item.disabled || false;
 
-  // Apply size variant
   breadcrumbStyles.useVariants({
     size,
-  });
-
-  // Get dynamic styles - call as functions for theme reactivity
-  const itemStyle_ = (breadcrumbStyles.item as any)({});
-  const itemTextStyle = (breadcrumbStyles.itemText as any)({
     intent,
-    isLast,
+    active: isLast,
     disabled: isDisabled,
-    clickable: isClickable,
   });
-  const iconStyle = (breadcrumbStyles.icon as any)({});
 
-  const itemProps = getWebProps([itemStyle_]);
-  const itemTextProps = getWebProps([itemTextStyle, itemStyle]);
-  const iconProps = getWebProps([iconStyle]);
+  const itemProps = getWebProps([breadcrumbStyles.item]);
+  const itemTextProps = getWebProps([breadcrumbStyles.itemText, itemStyle]);
+  const iconProps = getWebProps([breadcrumbStyles.icon]);
 
   const handleClick = () => {
     if (!item.disabled && item.onPress) {
@@ -61,30 +53,13 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
     return null;
   };
 
-  const content = (
-    <div {...itemProps}>
-      {item.icon && (
-        <span
-          {...iconProps}
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          {renderIcon()}
-        </span>
-      )}
-      <span {...itemTextProps}>
-        {item.label}
-      </span>
-    </div>
-  );
-
   if (isClickable) {
     return (
       <button
+        {...itemProps}
         onClick={handleClick}
+        disabled={isDisabled}
+        aria-current={isLast ? 'page' : undefined}
         style={{
           background: 'none',
           border: 'none',
@@ -95,17 +70,43 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
           font: 'inherit',
           color: 'inherit',
         }}
-        disabled={isDisabled}
-        aria-current={isLast ? 'page' : undefined}
       >
-        {content}
+        {item.icon && (
+          <span
+            {...iconProps}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {renderIcon()}
+          </span>
+        )}
+        <span {...itemTextProps}>
+          {item.label}
+        </span>
       </button>
     );
   }
 
   return (
-    <div aria-current={isLast ? 'page' : undefined}>
-      {content}
+    <div {...itemProps} aria-current={isLast ? 'page' : undefined}>
+      {item.icon && (
+        <span
+          {...iconProps}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {renderIcon()}
+        </span>
+      )}
+      <span {...itemTextProps}>
+        {item.label}
+      </span>
     </div>
   );
 };
@@ -121,8 +122,7 @@ const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, si
   const isTextSeparator = typeof separator === 'string';
 
   if (isTextSeparator) {
-    const separatorStyle_ = (breadcrumbStyles.separator as any)({});
-    const separatorProps = getWebProps([separatorStyle_, separatorStyle]);
+    const separatorProps = getWebProps([breadcrumbStyles.separator, separatorStyle]);
     return (
       <span {...separatorProps} aria-hidden="true">
         {separator}
@@ -130,8 +130,7 @@ const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, si
     );
   }
 
-  const separatorIconStyle = (breadcrumbStyles.separatorIcon as any)({});
-  const separatorIconProps = getWebProps([separatorIconStyle, separatorStyle]);
+  const separatorIconProps = getWebProps([breadcrumbStyles.separatorIcon, separatorStyle]);
   return (
     <span {...separatorIconProps} aria-hidden="true">
       {separator}
@@ -145,11 +144,9 @@ interface BreadcrumbEllipsisProps {
 }
 
 const BreadcrumbEllipsis: React.FC<BreadcrumbEllipsisProps> = ({ size, intent }) => {
-  breadcrumbStyles.useVariants({ size });
-  const ellipsisStyle = (breadcrumbStyles.ellipsis as any)({});
-  const ellipsisIconStyle = (breadcrumbStyles.ellipsisIcon as any)({ intent });
-  const ellipsisProps = getWebProps([ellipsisStyle]);
-  const iconProps = getWebProps([ellipsisIconStyle]);
+  breadcrumbStyles.useVariants({ size, intent });
+  const ellipsisProps = getWebProps([breadcrumbStyles.ellipsis]);
+  const iconProps = getWebProps([breadcrumbStyles.ellipsisIcon]);
 
   return (
     <span {...ellipsisProps}>
@@ -182,17 +179,10 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  // Get dynamic styles - call as functions for theme reactivity
-  const containerStyle = (breadcrumbStyles.container as any)({});
-  const menuButtonStyle = (breadcrumbStyles.menuButton as any)({});
-  const menuButtonIconStyle = (breadcrumbStyles.menuButtonIcon as any)({ intent });
-
-  const containerProps = getWebProps([containerStyle, style as any]);
-
-  // Apply variants for menu button
-  breadcrumbStyles.useVariants({ size });
-  const menuButtonProps = getWebProps([menuButtonStyle]);
-  const menuIconProps = getWebProps([menuButtonIconStyle]);
+  breadcrumbStyles.useVariants({ size, intent });
+  const containerProps = getWebProps([breadcrumbStyles.container, style as any]);
+  const menuButtonProps = getWebProps([breadcrumbStyles.menuButton]);
+  const menuIconProps = getWebProps([breadcrumbStyles.menuButtonIcon]);
 
   // Handle responsive collapsing
   let displayItems = items;

package/src/Menu/Menu.styles.tsx

@@ -57,12 +57,12 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         backgroundColor: 'transparent' as const,
-        borderRadius: 4,
-        minHeight: 44,
         variants: {
             size: {
                 paddingVertical: theme.sizes.$menu.paddingVertical,
                 paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+                minHeight: theme.sizes.$menu.minHeight,
+                borderRadius: theme.sizes.$menu.borderRadius,
             },
             intent: {
                 neutral: {
@@ -147,13 +147,13 @@ export const menuStyles = defineStyle('Menu', (theme: Theme) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
-        marginRight: 8,
         color: theme.colors.text.primary,
         variants: {
             size: {
                 width: theme.sizes.$menu.iconSize,
                 height: theme.sizes.$menu.iconSize,
                 fontSize: theme.sizes.$menu.iconSize,
+                marginRight: theme.sizes.$menu.iconGap,
             },
             intent: {
                 neutral: {},

package/src/Menu/MenuItem.styles.tsx

@@ -25,12 +25,12 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         backgroundColor: 'transparent' as const,
-        borderRadius: 4,
-        minHeight: 44,
         variants: {
             size: {
                 paddingVertical: theme.sizes.$menu.paddingVertical,
                 paddingHorizontal: theme.sizes.$menu.paddingHorizontal,
+                minHeight: theme.sizes.$menu.minHeight,
+                borderRadius: theme.sizes.$menu.borderRadius,
             },
             intent: {
                 neutral: {
@@ -110,13 +110,13 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
-        marginRight: 12,
         color: theme.colors.text.primary,
         variants: {
             size: {
                 width: theme.sizes.$menu.iconSize,
                 height: theme.sizes.$menu.iconSize,
                 fontSize: theme.sizes.$menu.iconSize,
+                marginRight: theme.sizes.$menu.iconGap,
             },
             intent: {
                 neutral: {},
@@ -135,6 +135,9 @@ export const menuItemStyles = defineStyle('MenuItem', (theme: Theme) => ({
     label: (_props: MenuItemDynamicProps) => ({
         flex: 1,
         color: theme.colors.text.primary,
+        _web: {
+            whiteSpace: 'nowrap',
+        },
         variants: {
             size: {
                 fontSize: theme.sizes.$menu.labelFontSize,

package/src/Menu/MenuItem.web.tsx

@@ -18,6 +18,7 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   // Initialize styles with useVariants (for size and disabled)
   menuItemStyles.useVariants({
     size,
+    intent: item.intent || 'neutral',
     disabled: Boolean(item.disabled),
   });
 
@@ -54,22 +55,10 @@ const MenuItem = forwardRef<IdealystElement, MenuItemProps>(({ item, onPress, si
   // Merge refs
   const mergedRef = useMergeRefs(ref, itemProps.ref);
 
-  // Button reset styles that must be applied directly
-  const buttonResetStyles: React.CSSProperties = {
-    display: 'flex',
-    width: '100%',
-    border: 'none',
-    outline: 'none',
-    cursor: item.disabled ? 'not-allowed' : 'pointer',
-    background: 'transparent',
-    textAlign: 'left',
-  };
-
   return (
     <button
       {...itemProps}
       ref={mergedRef}
-      style={buttonResetStyles}
       onClick={(e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();

package/src/Table/Table.native.tsx

@@ -1,8 +1,11 @@
-import React, { forwardRef, useMemo, ReactNode } from 'react';
-import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
+import React, { forwardRef, useMemo, useState, useCallback, ReactNode } from 'react';
+import { View, ScrollView, Text, TouchableOpacity, Pressable } from 'react-native';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant, SortDirection } from './types';
+import type { MenuItem } from '../Menu/types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import Icon from '../Icon/Icon.native';
+import Menu from '../Menu/Menu.native';
 
 // ============================================================================
 // Sub-component Props
@@ -25,6 +28,10 @@ interface THProps {
   type?: TableType;
   align?: TableAlignVariant;
   width?: number | string;
+  sortable?: boolean;
+  sortDirection?: SortDirection;
+  onSort?: () => void;
+  options?: MenuItem[];
 }
 
 interface TDProps {
@@ -83,29 +90,72 @@ function TH({
   type = 'standard',
   align = 'left',
   width,
+  sortable,
+  sortDirection,
+  onSort,
+  options,
 }: THProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   tableStyles.useVariants({
     size,
     type,
     align,
+    sortable: !!sortable,
+    sortActive: sortDirection != null,
   });
 
   const headerCellStyle = (tableStyles.headerCell as any)({});
+  const sortIndicatorStyle = (tableStyles.sortIndicator as any)({ sortActive: sortDirection != null });
+  const optionsButtonStyle = (tableStyles.optionsButton as any)({});
 
-  return (
+  const sortIconName = sortDirection === 'asc' ? 'arrow-up' :
+    sortDirection === 'desc' ? 'arrow-down' : 'arrow-up-down';
+
+  const content = (
     <View
       style={[
         headerCellStyle,
         { width, flex: width ? undefined : 1 },
       ]}
     >
-      {typeof children === 'string' ? (
-        <Text style={headerCellStyle}>{children}</Text>
-      ) : (
-        children
+      <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, gap: 2 }}>
+        {typeof children === 'string' ? (
+          <Text style={headerCellStyle}>{children}</Text>
+        ) : (
+          children
+        )}
+        {sortable && (
+          <View style={sortIndicatorStyle}>
+            <Icon name={sortIconName} size={size} />
+          </View>
+        )}
+      </View>
+      {options && options.length > 0 && (
+        <Menu
+          items={options}
+          open={menuOpen}
+          onOpenChange={setMenuOpen}
+          placement="bottom-start"
+          size={size}
+        >
+          <Pressable style={optionsButtonStyle}>
+            <Icon name="dots-vertical" size={size} />
+          </Pressable>
+        </Menu>
       )}
     </View>
   );
+
+  if (sortable) {
+    return (
+      <Pressable onPress={onSort}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
 }
 
 // ============================================================================
@@ -193,6 +243,7 @@ function TableInner<T = any>({
   size = 'md',
   stickyHeader: _stickyHeader = false,
   onRowPress,
+  onSort,
   dividers = false,
   emptyState,
   // Spacing variants from ContainerStyleProps
@@ -212,6 +263,26 @@ function TableInner<T = any>({
   accessibilityRole,
   accessibilityHidden,
 }: TableProps<T>, ref: React.Ref<ScrollView>) {
+  // Sort state
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  const handleSort = useCallback((columnKey: string) => {
+    let newDir: SortDirection;
+    if (sortColumn !== columnKey) {
+      newDir = 'asc';
+    } else if (sortDirection === 'asc') {
+      newDir = 'desc';
+    } else {
+      setSortColumn(null);
+      setSortDirection(null);
+      onSort?.(columnKey, null);
+      return;
+    }
+    setSortColumn(columnKey);
+    setSortDirection(newDir);
+    onSort?.(columnKey, newDir);
+  }, [sortColumn, sortDirection, onSort]);
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeAccessibilityProps({
@@ -276,7 +347,17 @@ function TableInner<T = any>({
       <View style={theadStyle}>
         <View style={{ flexDirection: 'row' }}>
           {cols.map((column) => (
-            <TH key={column.key} size={size} type={type} align={column.align} width={column.width}>
+            <TH
+              key={column.key}
+              size={size}
+              type={type}
+              align={column.align}
+              width={column.width}
+              sortable={column.sortable}
+              sortDirection={sortColumn === column.key ? sortDirection : undefined}
+              onSort={column.sortable ? () => handleSort(column.key) : undefined}
+              options={column.options}
+            >
               {column.title}
             </TH>
           ))}

package/src/Table/Table.styles.tsx

@@ -23,6 +23,8 @@ export type TableDynamicProps = {
     even?: boolean;
     sticky?: boolean;
     align?: CellAlign;
+    sortable?: boolean;
+    sortActive?: boolean;
     gap?: ViewStyleSize;
     padding?: ViewStyleSize;
     paddingVertical?: ViewStyleSize;
@@ -178,6 +180,18 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
                 fontSize: theme.sizes.$table.fontSize,
                 lineHeight: theme.sizes.$table.lineHeight,
             },
+            sortable: {
+                true: {
+                    _web: {
+                        cursor: 'pointer',
+                        userSelect: 'none',
+                        transition: 'background-color 0.15s ease',
+                        _hover: {
+                            backgroundColor: theme.colors.surface.hover,
+                        },
+                    },
+                },
+            },
         },
         _web: {
             position: 'relative',
@@ -185,6 +199,53 @@ export const tableStyles = defineStyle('Table', (theme: Theme) => ({
         },
     }),
 
+    sortIndicator: ({ sortActive = false }: TableDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 4,
+        opacity: sortActive ? 1 : 0.4,
+        color: sortActive ? theme.colors.text.primary : theme.colors.text.tertiary,
+        flexShrink: 0,
+        _web: {
+            transition: 'opacity 0.15s ease, color 0.15s ease',
+        },
+        variants: {
+            size: {
+                width: theme.sizes.$table.fontSize,
+                height: theme.sizes.$table.fontSize,
+            },
+        },
+    }),
+
+    optionsButton: (_props: TableDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        marginLeft: 4,
+        borderRadius: 4,
+        padding: 2,
+        opacity: 0.4,
+        flexShrink: 0,
+        color: theme.colors.text.tertiary,
+        _web: {
+            cursor: 'pointer',
+            border: 'none',
+            background: 'transparent',
+            transition: 'opacity 0.15s ease, background-color 0.15s ease',
+            _hover: {
+                opacity: 1,
+                backgroundColor: theme.colors.surface.hover,
+            },
+        },
+        variants: {
+            size: {
+                width: theme.sizes.$table.fontSize,
+                height: theme.sizes.$table.fontSize,
+            },
+        },
+    }),
+
     cell: (_props: TableDynamicProps) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,

package/src/Table/Table.web.tsx

@@ -1,8 +1,11 @@
-import { useMemo, useRef, useCallback, ReactNode } from 'react';
+import { useMemo, useRef, useCallback, useState, ReactNode } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { tableStyles } from './Table.styles';
-import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
+import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant, SortDirection } from './types';
+import type { MenuItem } from '../Menu/types';
 import { getWebAriaProps } from '../utils/accessibility';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import Menu from '../Menu/Menu.web';
 
 // ============================================================================
 // Helpers
@@ -49,6 +52,10 @@ interface THProps {
   onResize?: (width: number) => void;
   minWidth?: number;
   accessibilitySort?: 'ascending' | 'descending' | 'none' | 'other';
+  sortable?: boolean;
+  sortDirection?: SortDirection;
+  onSort?: () => void;
+  options?: MenuItem[];
 }
 
 interface TDProps {
@@ -110,16 +117,37 @@ function TH({
   onResize,
   minWidth = 50,
   accessibilitySort,
+  sortable,
+  sortDirection,
+  onSort,
+  options,
 }: THProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   tableStyles.useVariants({
     size,
     type,
     align,
+    sortable: !!sortable,
+    sortActive: sortDirection != null,
   });
 
   const headerCellProps = getWebProps([(tableStyles.headerCell as any)({})]);
+  const sortIndicatorProps = getWebProps([(tableStyles.sortIndicator as any)({ sortActive: sortDirection != null })]);
+  const optionsButtonProps = getWebProps([(tableStyles.optionsButton as any)({})]);
   const thRef = useRef<HTMLTableCellElement>(null);
 
+  // Derive aria-sort from sortDirection
+  const derivedAriaSort = accessibilitySort ?? (
+    sortDirection === 'asc' ? 'ascending' :
+    sortDirection === 'desc' ? 'descending' :
+    sortable ? 'none' : undefined
+  );
+
+  // Sort indicator icon name
+  const sortIconName = sortDirection === 'asc' ? 'arrow-up' :
+    sortDirection === 'desc' ? 'arrow-down' : 'arrow-up-down';
+
   const handlePointerDown = useCallback((e: React.PointerEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -139,12 +167,10 @@ function TH({
       document.removeEventListener('pointerup', handlePointerUp);
       const finalWidth = th.getBoundingClientRect().width;
       onResize?.(finalWidth);
-      // Remove inline cursor override
       document.body.style.cursor = '';
       document.body.style.userSelect = '';
     };
 
-    // Prevent text selection and set resize cursor globally during drag
     document.body.style.cursor = 'col-resize';
     document.body.style.userSelect = 'none';
     document.addEventListener('pointermove', handlePointerMove);
@@ -156,10 +182,47 @@ function TH({
       {...headerCellProps}
       ref={thRef}
       scope="col"
-      aria-sort={accessibilitySort}
+      aria-sort={derivedAriaSort}
       style={{ width, ...getStickyStyle(sticky, stickyOffset, 11) }}
+      onClick={sortable ? onSort : undefined}
     >
-      {children}
+      <span style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <span style={{ flex: 1, minWidth: 0 }}>
+          {children}
+        </span>
+        {sortable && (
+          <span {...sortIndicatorProps} style={{ display: 'inline-flex', flexShrink: 0 }}>
+            <IconSvg name={sortIconName} size="0.85em" aria-label={sortIconName} />
+          </span>
+        )}
+        {options && options.length > 0 && (
+          <span onClick={(e) => e.stopPropagation()} style={{ display: 'inline-flex', flexShrink: 0 }}>
+            <Menu
+              items={options}
+              open={menuOpen}
+              onOpenChange={setMenuOpen}
+              placement="bottom-start"
+              size={size}
+            >
+              <button
+                {...optionsButtonProps}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: 2,
+                }}
+                aria-label="Column options"
+              >
+                <IconSvg name="dots-vertical" size="0.85em" aria-label="dots-vertical" />
+              </button>
+            </Menu>
+          </span>
+        )}
+      </span>
       {resizable && (
         <span
           onPointerDown={handlePointerDown}
@@ -266,6 +329,7 @@ function Table<T = any>({
   stickyHeader = false,
   onRowPress,
   onColumnResize,
+  onSort,
   dividers = false,
   emptyState,
   // Spacing variants from ContainerStyleProps
@@ -285,6 +349,26 @@ function Table<T = any>({
   accessibilityRole,
   accessibilityHidden,
 }: TableProps<T>) {
+  // Sort state
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  const handleSort = useCallback((columnKey: string) => {
+    let newDir: SortDirection;
+    if (sortColumn !== columnKey) {
+      newDir = 'asc';
+    } else if (sortDirection === 'asc') {
+      newDir = 'desc';
+    } else {
+      setSortColumn(null);
+      setSortDirection(null);
+      onSort?.(columnKey, null);
+      return;
+    }
+    setSortColumn(columnKey);
+    setSortDirection(newDir);
+    onSort?.(columnKey, newDir);
+  }, [sortColumn, sortDirection, onSort]);
   // Generate ARIA props
   const ariaProps = useMemo(() => {
     return getWebAriaProps({
@@ -378,6 +462,10 @@ function Table<T = any>({
                 minWidth={column.minWidth}
                 onResize={onColumnResize ? (w) => onColumnResize(column.key, w) : undefined}
                 accessibilitySort={column.accessibilitySort}
+                sortable={column.sortable}
+                sortDirection={sortColumn === column.key ? sortDirection : undefined}
+                onSort={column.sortable ? () => handleSort(column.key) : undefined}
+                options={column.options}
               >
                 {column.title}
               </TH>

package/src/Table/types.ts

@@ -3,11 +3,13 @@ import type { ReactNode } from 'react';
 import { Size } from '@idealyst/theme';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 import { AccessibilityProps, SortableAccessibilityProps } from '../utils/accessibility';
+import type { MenuItem } from '../Menu/types';
 
 // Component-specific type aliases for future extensibility
 export type TableSizeVariant = Size;
 export type TableType = 'standard' | 'striped';
 export type TableAlignVariant = 'left' | 'center' | 'right';
+export type SortDirection = 'asc' | 'desc' | null;
 
 export interface TableColumn<T = any> extends SortableAccessibilityProps {
   key: string;
@@ -32,6 +34,16 @@ export interface TableColumn<T = any> extends SortableAccessibilityProps {
    * Minimum width when resizing (default: 50).
    */
   minWidth?: number;
+  /**
+   * Enables click-to-sort cycling on this column header.
+   * Cycles: unsorted → ascending → descending → unsorted.
+   */
+  sortable?: boolean;
+  /**
+   * Menu items to show in a column options dropdown.
+   * Uses the existing MenuItem type from the Menu component.
+   */
+  options?: MenuItem[];
 }
 
 /**
@@ -58,6 +70,11 @@ export interface TableProps<T = any> extends ContainerStyleProps, AccessibilityP
    * Receives the column key and the new width in pixels.
    */
   onColumnResize?: (key: string, width: number) => void;
+  /**
+   * Called when sort state changes via header click.
+   * The Table manages sort state internally; the parent handles data ordering.
+   */
+  onSort?: (columnKey: string, direction: SortDirection) => void;
   /**
    * Content to display when `data` is empty.
    * Renders in place of the table body.

package/src/examples/TableExamples.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Screen, View, Text, Badge, Button } from '@idealyst/components';
 import Table from '../Table';
-import type { TableColumn } from '../Table/types';
+import type { TableColumn, SortDirection } from '../Table/types';
 
 interface User {
   id: number;
@@ -287,9 +287,102 @@ export const TableExamples: React.FC = () => {
           No data to display
         </Text>
       </View>
+
+      <SortableTableExample />
+      <OptionsTableExample />
     </View>
     </Screen>
   );
 };
 
+const SortableTableExample: React.FC = () => {
+  const [sortedProducts, setSortedProducts] = useState([
+    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15 },
+    { id: 2, name: 'Mouse', category: 'Electronics', price: 29.99, stock: 150 },
+    { id: 3, name: 'Keyboard', category: 'Electronics', price: 79.99, stock: 75 },
+    { id: 4, name: 'Monitor', category: 'Electronics', price: 299.99, stock: 30 },
+    { id: 5, name: 'Desk', category: 'Furniture', price: 399.99, stock: 10 },
+  ]);
+
+  const handleSort = (columnKey: string, direction: SortDirection) => {
+    if (!direction) {
+      setSortedProducts([...sortedProducts]);
+      return;
+    }
+    const sorted = [...sortedProducts].sort((a, b) => {
+      const aVal = (a as any)[columnKey];
+      const bVal = (b as any)[columnKey];
+      if (typeof aVal === 'number') return direction === 'asc' ? aVal - bVal : bVal - aVal;
+      return direction === 'asc'
+        ? String(aVal).localeCompare(String(bVal))
+        : String(bVal).localeCompare(String(aVal));
+    });
+    setSortedProducts(sorted);
+  };
+
+  const columns: TableColumn<typeof sortedProducts[0]>[] = [
+    { key: 'name', title: 'Product', dataIndex: 'name', sortable: true },
+    { key: 'category', title: 'Category', dataIndex: 'category', width: '150px', sortable: true },
+    { key: 'price', title: 'Price', dataIndex: 'price', width: '120px', align: 'right', sortable: true, render: (price: number) => `$${price.toFixed(2)}` },
+    { key: 'stock', title: 'Stock', dataIndex: 'stock', width: '100px', align: 'center', sortable: true },
+  ];
+
+  return (
+    <View gap="md">
+      <Text typography="h5">Sortable Table</Text>
+      <Table columns={columns} data={sortedProducts} onSort={handleSort} dividers />
+      <Text typography="caption" color="secondary">
+        Click column headers to cycle sort: unsorted, ascending, descending
+      </Text>
+    </View>
+  );
+};
+
+const OptionsTableExample: React.FC = () => {
+  const data = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
+  ];
+
+  const columns: TableColumn<typeof data[0]>[] = [
+    {
+      key: 'name',
+      title: 'Name',
+      dataIndex: 'name',
+      sortable: true,
+      options: [
+        { id: 'sort-asc', label: 'Sort A-Z', icon: 'sort-ascending', onClick: () => console.log('Sort A-Z') },
+        { id: 'sort-desc', label: 'Sort Z-A', icon: 'sort-descending', onClick: () => console.log('Sort Z-A') },
+        { id: 'sep', label: '', separator: true },
+        { id: 'hide', label: 'Hide Column', icon: 'eye-off', onClick: () => console.log('Hide column') },
+      ],
+    },
+    {
+      key: 'email',
+      title: 'Email',
+      dataIndex: 'email',
+      options: [
+        { id: 'copy', label: 'Copy All Emails', icon: 'content-copy', onClick: () => console.log('Copy emails') },
+      ],
+    },
+    {
+      key: 'role',
+      title: 'Role',
+      dataIndex: 'role',
+      width: '120px',
+    },
+  ];
+
+  return (
+    <View gap="md">
+      <Text typography="h5">Column Options Menu</Text>
+      <Table columns={columns} data={data} dividers />
+      <Text typography="caption" color="secondary">
+        Columns with options show a kebab menu icon in the header
+      </Text>
+    </View>
+  );
+};
+
 export default TableExamples;