@idealyst/components 1.3.2 → 1.3.3

package/package.json

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

package/src/Breadcrumb/Breadcrumb.native.tsx

@@ -89,12 +89,14 @@ interface BreadcrumbSeparatorProps {
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
   breadcrumbStyles.useVariants({ size });
-  const sepStyle = (breadcrumbStyles.separator as any)({});
 
   if (typeof separator === 'string') {
+    const sepStyle = (breadcrumbStyles.separator as any)({});
     return <Text style={[sepStyle, separatorStyle]}>{separator}</Text>;
   }
-  return <View style={[sepStyle, separatorStyle]}>{separator}</View>;
+
+  const sepIconStyle = (breadcrumbStyles.separatorIcon as any)({});
+  return <View style={[sepIconStyle, separatorStyle]}>{separator}</View>;
 };
 
 interface BreadcrumbEllipsisProps {

package/src/Breadcrumb/Breadcrumb.styles.tsx

@@ -30,7 +30,7 @@ export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
         flexDirection: 'row' as const,
         alignItems: 'center' as const,
         flexWrap: 'wrap' as const,
-        gap: 8,
+        gap: 4,
     }),
 
     item: (_props: BreadcrumbDynamicProps) => ({
@@ -60,6 +60,12 @@ export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
                     lineHeight: theme.sizes.$breadcrumb.lineHeight,
                 },
             },
+            _web: clickable && !isLast && !disabled ? {
+                _hover: {
+                    textDecoration: 'underline',
+                    opacity: 0.8,
+                },
+            } : {},
         } as const;
     },
 
@@ -83,6 +89,20 @@ export const breadcrumbStyles = defineStyle('Breadcrumb', (theme: Theme) => ({
         },
     }),
 
+    separatorIcon: (_props: BreadcrumbDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        color: theme.colors.text.tertiary,
+        variants: {
+            size: {
+                width: theme.sizes.$breadcrumb.iconSize,
+                height: theme.sizes.$breadcrumb.iconSize,
+                fontSize: theme.sizes.$breadcrumb.iconSize,
+            },
+        },
+    }),
+
     ellipsis: (_props: BreadcrumbDynamicProps) => ({
         display: 'flex' as const,
         alignItems: 'center' as const,

package/src/Breadcrumb/Breadcrumb.web.tsx

@@ -89,8 +89,11 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast, size, int
           background: 'none',
           border: 'none',
           padding: 0,
+          margin: 0,
           cursor: 'pointer',
           textDecoration: 'none',
+          font: 'inherit',
+          color: 'inherit',
         }}
         disabled={isDisabled}
         aria-current={isLast ? 'page' : undefined}
@@ -115,11 +118,22 @@ interface BreadcrumbSeparatorProps {
 
 const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = ({ separator, size, separatorStyle }) => {
   breadcrumbStyles.useVariants({ size });
-  const separatorStyle_ = (breadcrumbStyles.separator as any)({});
-  const separatorProps = getWebProps([separatorStyle_, separatorStyle]);
+  const isTextSeparator = typeof separator === 'string';
 
+  if (isTextSeparator) {
+    const separatorStyle_ = (breadcrumbStyles.separator as any)({});
+    const separatorProps = getWebProps([separatorStyle_, separatorStyle]);
+    return (
+      <span {...separatorProps} aria-hidden="true">
+        {separator}
+      </span>
+    );
+  }
+
+  const separatorIconStyle = (breadcrumbStyles.separatorIcon as any)({});
+  const separatorIconProps = getWebProps([separatorIconStyle, separatorStyle]);
   return (
-    <span {...separatorProps} aria-hidden="true">
+    <span {...separatorIconProps} aria-hidden="true">
       {separator}
     </span>
   );

package/src/Button/Button.styles.tsx

@@ -81,6 +81,14 @@ export const buttonStyles = defineStyle('Button', (theme: Theme) => ({
                     backgroundColor: 'transparent',
                     borderColor: 'transparent',
                     borderWidth: 0,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                        _active: {
+                            backgroundColor: theme.colors.surface.tertiary,
+                        },
+                    },
                 }
             },
             size: {

package/src/IconButton/IconButton.styles.tsx

@@ -76,6 +76,14 @@ export const iconButtonStyles = defineStyle('IconButton', (theme: Theme) => ({
                     backgroundColor: 'transparent',
                     borderColor: 'transparent',
                     borderWidth: 0,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.colors.surface.secondary,
+                        },
+                        _active: {
+                            backgroundColor: theme.colors.surface.tertiary,
+                        },
+                    },
                 }
             },
             // Size variants - circular so width equals height

package/src/IconButton/docs.ts

@@ -0,0 +1,11 @@
+/**
+ * IconButton Documentation Sample Props
+ */
+
+import type { SampleProps } from '@idealyst/tooling';
+
+export const sampleProps: SampleProps = {
+  props: {
+    icon: 'heart',
+  },
+};

package/src/TabBar/TabBar.native.tsx

@@ -34,6 +34,77 @@ function renderIcon(
   return icon;
 }
 
+/**
+ * Individual tab component to isolate useVariants calls per tab.
+ */
+const TabItem = ({
+  item,
+  isActive,
+  size,
+  type,
+  iconPosition,
+  justify,
+  onPress,
+  onLayout,
+  testID,
+}: {
+  item: TabBarItem;
+  isActive: boolean;
+  size: TabBarProps['size'];
+  type: TabBarProps['type'];
+  iconPosition: TabBarProps['iconPosition'];
+  justify: TabBarProps['justify'];
+  onPress: () => void;
+  onLayout: (e: LayoutChangeEvent) => void;
+  testID?: string;
+}) => {
+  const iconSize = ICON_SIZES[size || 'md'] || 18;
+
+  // Apply tab variants per tab (active/disabled differ per item)
+  tabBarTabStyles.useVariants({
+    size,
+    type,
+    active: isActive,
+    disabled: Boolean(item.disabled),
+    iconPosition,
+    justify,
+  });
+
+  // Apply label variants
+  tabBarLabelStyles.useVariants({
+    size,
+    type,
+    active: isActive,
+    disabled: Boolean(item.disabled),
+  });
+
+  // Apply icon variants
+  tabBarIconStyles.useVariants({
+    size,
+    disabled: Boolean(item.disabled),
+    iconPosition,
+  });
+
+  const icon = renderIcon(item.icon, isActive, iconSize);
+
+  return (
+    <TouchableOpacity
+      onLayout={onLayout}
+      style={tabBarTabStyles.tab as any}
+      onPress={onPress}
+      disabled={item.disabled}
+      activeOpacity={0.7}
+      testID={`${testID}-tab-${item.value}`}
+      accessibilityRole="tab"
+      accessibilityLabel={item.label}
+      accessibilityState={{ selected: isActive, disabled: item.disabled }}
+    >
+      {icon && <View style={tabBarIconStyles.tabIcon as any}>{icon}</View>}
+      <Text style={tabBarLabelStyles.tabLabel as any}>{item.label}</Text>
+    </TouchableOpacity>
+  );
+};
+
 const TabBar = forwardRef<IdealystElement, TabBarProps>(({
   items,
   value: controlledValue,
@@ -129,8 +200,10 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
     };
   });
 
-  // Apply container variants (for spacing only)
+  // Apply container variants
   tabBarContainerStyles.useVariants({
+    type,
+    pillMode,
     justify,
     gap,
     padding,
@@ -141,9 +214,11 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
     marginHorizontal,
   });
 
-  // Compute dynamic container and indicator styles
-  const containerStyle = (tabBarContainerStyles.container as any)({ type, pillMode });
-  const indicatorStyle = (tabBarIndicatorStyles.indicator as any)({ type, pillMode });
+  // Apply indicator variants
+  tabBarIndicatorStyles.useVariants({
+    type,
+    pillMode,
+  });
 
   return (
     <ScrollView
@@ -155,11 +230,11 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
       }}
       style={{ width: '100%' }}
     >
-      <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
+      <View ref={ref as any} nativeID={id} style={[tabBarContainerStyles.container as any, style]} testID={testID} {...nativeA11yProps}>
         {/* Animated indicator - render first so it's behind */}
         <Animated.View
           style={[
-            indicatorStyle,
+            tabBarIndicatorStyles.indicator as any,
             indicatorAnimatedStyle,
           ]}
         />
@@ -168,40 +243,23 @@ const TabBar = forwardRef<IdealystElement, TabBarProps>(({
         <View style={{ flexDirection: 'row', flex: 1 }}>
           {items.map((item) => {
             const isActive = value === item.value;
-            const iconSize = ICON_SIZES[size] || 18;
-
-            // Apply icon variants (size, disabled, iconPosition)
-            tabBarIconStyles.useVariants({
-              size,
-              disabled: Boolean(item.disabled),
-              iconPosition,
-            });
-
-            // Compute dynamic styles for this tab - call as functions for theme reactivity
-            const tabStyle = (tabBarTabStyles.tab as any)({ type, size, active: isActive, pillMode, justify });
-            const labelStyle = (tabBarLabelStyles.tabLabel as any)({ type, active: isActive, pillMode });
-
-            const icon = renderIcon(item.icon, isActive, iconSize);
 
             return (
-              <TouchableOpacity
+              <TabItem
                 key={item.value}
+                item={item}
+                isActive={isActive}
+                size={size}
+                type={type}
+                iconPosition={iconPosition}
+                justify={justify}
+                onPress={() => handleTabClick(item.value, item.disabled)}
                 onLayout={(event: LayoutChangeEvent) => {
                   const { x, width } = event.nativeEvent.layout;
                   handleTabLayout(item.value, x, width);
                 }}
-                style={tabStyle}
-                onPress={() => handleTabClick(item.value, item.disabled)}
-                disabled={item.disabled}
-                activeOpacity={0.7}
-                testID={`${testID}-tab-${item.value}`}
-                accessibilityRole="tab"
-                accessibilityLabel={item.label}
-                accessibilityState={{ selected: isActive, disabled: item.disabled }}
-              >
-                {icon && <View style={tabBarIconStyles.tabIcon as any}>{icon}</View>}
-                <Text style={labelStyle}>{item.label}</Text>
-              </TouchableOpacity>
+                testID={testID}
+              />
             );
           })}
         </View>

package/src/TabBar/TabBar.styles.tsx

@@ -1,9 +1,9 @@
 /**
- * TabBar styles using defineStyle with dynamic props.
+ * TabBar styles using defineStyle with static variants + compoundVariants.
  */
 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
@@ -12,19 +12,14 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-type TabBarType = 'standard' | 'underline' | 'pills';
-type TabBarPillMode = 'light' | 'dark';
-type TabBarIconPosition = 'left' | 'top';
-type TabBarJustify = 'start' | 'center' | 'equal' | 'space-between';
-
-export type TabBarDynamicProps = {
-    size?: Size;
-    type?: TabBarType;
-    pillMode?: TabBarPillMode;
+export type TabBarVariants = {
+    size?: ViewStyleSize;
+    type?: 'standard' | 'underline' | 'pills';
+    pillMode?: 'light' | 'dark';
     active?: boolean;
     disabled?: boolean;
-    iconPosition?: TabBarIconPosition;
-    justify?: TabBarJustify;
+    iconPosition?: 'left' | 'top';
+    justify?: 'start' | 'center' | 'equal' | 'space-between';
     gap?: ViewStyleSize;
     padding?: ViewStyleSize;
     paddingVertical?: ViewStyleSize;
@@ -35,140 +30,158 @@ export type TabBarDynamicProps = {
 };
 
 /**
- * TabBar styles with type/pillMode/active handling.
+ * TabBar styles with static variants and compoundVariants.
  */
 export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
-    container: ({ type = 'standard', pillMode = 'light', justify = 'start' }: TabBarDynamicProps) => {
-        const backgroundColor = type === 'pills'
-            ? (pillMode === 'dark' ? theme.colors.surface.inverse : theme.colors.surface.secondary)
-            : undefined;
-
-        const justifyContent = {
-            start: 'flex-start',
-            center: 'center',
-            equal: 'stretch',
-            'space-between': 'space-between',
-        }[justify];
-
-        return {
-            display: 'flex' as const,
-            flexDirection: 'row' as const,
-            gap: type === 'pills' ? 4 : 0,
-            position: 'relative' as const,
-            borderBottomWidth: type === 'pills' ? 0 : 1,
-            borderBottomStyle: 'solid' as const,
-            borderBottomColor: theme.colors.border.primary,
-            padding: type === 'pills' ? 4 : undefined,
-            backgroundColor: backgroundColor || (type === 'pills' ? theme.colors.surface.secondary : undefined),
-            overflow: type === 'pills' ? ('hidden' as const) : undefined,
-            alignSelf: type === 'pills' ? ('flex-start' as const) : undefined,
-            width: type === 'pills' ? undefined : '100%',
-            borderRadius: type === 'pills' ? 9999 : undefined,
-            justifyContent: justifyContent as any,
-            variants: {
-                gap: {
-                    gap: theme.sizes.$view.padding,
-                },
-                padding: {
-                    padding: theme.sizes.$view.padding,
-                },
-                paddingVertical: {
-                    paddingVertical: theme.sizes.$view.padding,
-                },
-                paddingHorizontal: {
-                    paddingHorizontal: theme.sizes.$view.padding,
-                },
-                margin: {
-                    margin: theme.sizes.$view.padding,
-                },
-                marginVertical: {
-                    marginVertical: theme.sizes.$view.padding,
-                },
-                marginHorizontal: {
-                    marginHorizontal: theme.sizes.$view.padding,
+    container: {
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        position: 'relative' as const,
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid' as const,
+        borderBottomColor: theme.colors.border.primary,
+        width: '100%',
+        variants: {
+            type: {
+                standard: {},
+                underline: {},
+                pills: {
+                    gap: 4,
+                    borderBottomWidth: 0,
+                    padding: 4,
+                    backgroundColor: theme.colors.surface.secondary,
+                    overflow: 'hidden' as const,
+                    alignSelf: 'flex-start' as const,
+                    width: undefined,
+                    borderRadius: 9999,
                 },
             },
-        } as const;
+            justify: {
+                start: { justifyContent: 'flex-start' as const },
+                center: { justifyContent: 'center' as const },
+                equal: { justifyContent: 'stretch' as const },
+                'space-between': { justifyContent: 'space-between' as const },
+            },
+            gap: {
+                gap: theme.sizes.$view.padding,
+            },
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+        compoundVariants: [
+            { type: 'pills', pillMode: 'dark', styles: { backgroundColor: theme.colors.surface.inverse } },
+        ],
     },
 
-    tab: ({ type = 'standard', size = 'md', active = false, pillMode: _pillMode = 'light', disabled = false, iconPosition = 'left', justify = 'start' }: TabBarDynamicProps) => {
-        // Resolve padding at runtime — can't use $iterator with runtime `type` check
-        // Use explicit top/bottom/left/right for cross-platform compatibility
-        const pillsPaddingMap: Record<Size, { paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number }> = {
-            xs: { paddingTop: 2, paddingBottom: 2, paddingLeft: 8, paddingRight: 8 },
-            sm: { paddingTop: 3, paddingBottom: 3, paddingLeft: 10, paddingRight: 10 },
-            md: { paddingTop: 4, paddingBottom: 4, paddingLeft: 12, paddingRight: 12 },
-            lg: { paddingTop: 6, paddingBottom: 6, paddingLeft: 16, paddingRight: 16 },
-            xl: { paddingTop: 8, paddingBottom: 8, paddingLeft: 20, paddingRight: 20 },
-        };
-        const sizeValues = theme.sizes.tabBar[size];
-        const tabPadding = type === 'pills'
-            ? pillsPaddingMap[size]
-            : {
-                paddingTop: sizeValues.padding,
-                paddingBottom: sizeValues.padding,
-                paddingLeft: sizeValues.padding,
-                paddingRight: sizeValues.padding,
-            };
-
-        // Color based on type and active state
-        let color = active ? theme.colors.text.primary : theme.colors.text.secondary;
-        if (active) {
-            if (type === 'pills') color = theme.intents.primary.contrast;
-            else if (type === 'underline') color = theme.intents.primary.primary;
-        }
-
-        return {
-            display: 'flex' as const,
-            flexDirection: iconPosition === 'top' ? ('column' as const) : ('row' as const),
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            fontWeight: '500' as const,
-            flex: justify === 'equal' ? 1 : undefined,
-            color,
-            position: 'relative' as const,
-            zIndex: 2,
-            backgroundColor: 'transparent' as const,
-            gap: 6,
-            borderRadius: type === 'pills' ? 9999 : undefined,
-            opacity: disabled ? 0.5 : 1,
-            ...tabPadding,
-            variants: {
-                size: {
-                    fontSize: theme.sizes.$tabBar.fontSize,
-                    lineHeight: theme.sizes.$tabBar.lineHeight,
+    tab: {
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        fontWeight: '500' as const,
+        color: theme.colors.text.secondary,
+        position: 'relative' as const,
+        zIndex: 2,
+        backgroundColor: 'transparent' as const,
+        gap: 6,
+        opacity: 0.9,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$tabBar.fontSize,
+                lineHeight: theme.sizes.$tabBar.lineHeight,
+                paddingTop: theme.sizes.$tabBar.padding,
+                paddingBottom: theme.sizes.$tabBar.padding,
+                paddingLeft: theme.sizes.$tabBar.padding,
+                paddingRight: theme.sizes.$tabBar.padding,
+            },
+            type: {
+                standard: {},
+                underline: {},
+                pills: {
+                    borderRadius: 9999,
+                },
+            },
+            active: {
+                true: {
+                    color: theme.colors.text.primary,
+                    opacity: 1,
                 },
+                false: {},
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: {},
+            },
+            iconPosition: {
+                top: { flexDirection: 'column' as const },
+                left: { flexDirection: 'row' as const },
             },
-            _web: {
-                border: 'none',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                outline: 'none',
-                transition: 'color 0.2s ease',
-                _hover: disabled ? {} : { color: theme.colors.text.primary },
+            justify: {
+                start: {},
+                center: {},
+                equal: { flex: 1 },
+                'space-between': {},
             },
-        } as const;
+        },
+        compoundVariants: [
+            // Active + underline: use primary intent color
+            { type: 'underline', active: true, styles: { color: theme.intents.primary.primary } },
+            // Active + pills: use contrast color
+            { type: 'pills', active: true, styles: { color: theme.intents.primary.contrast } },
+            // Pills type: tighter padding per size (from theme)
+            { type: 'pills', size: 'xs', styles: { paddingTop: theme.sizes.tabBar.xs.pillPaddingVertical, paddingBottom: theme.sizes.tabBar.xs.pillPaddingVertical, paddingLeft: theme.sizes.tabBar.xs.pillPaddingHorizontal, paddingRight: theme.sizes.tabBar.xs.pillPaddingHorizontal } },
+            { type: 'pills', size: 'sm', styles: { paddingTop: theme.sizes.tabBar.sm.pillPaddingVertical, paddingBottom: theme.sizes.tabBar.sm.pillPaddingVertical, paddingLeft: theme.sizes.tabBar.sm.pillPaddingHorizontal, paddingRight: theme.sizes.tabBar.sm.pillPaddingHorizontal } },
+            { type: 'pills', size: 'md', styles: { paddingTop: theme.sizes.tabBar.md.pillPaddingVertical, paddingBottom: theme.sizes.tabBar.md.pillPaddingVertical, paddingLeft: theme.sizes.tabBar.md.pillPaddingHorizontal, paddingRight: theme.sizes.tabBar.md.pillPaddingHorizontal } },
+            { type: 'pills', size: 'lg', styles: { paddingTop: theme.sizes.tabBar.lg.pillPaddingVertical, paddingBottom: theme.sizes.tabBar.lg.pillPaddingVertical, paddingLeft: theme.sizes.tabBar.lg.pillPaddingHorizontal, paddingRight: theme.sizes.tabBar.lg.pillPaddingHorizontal } },
+            { type: 'pills', size: 'xl', styles: { paddingTop: theme.sizes.tabBar.xl.pillPaddingVertical, paddingBottom: theme.sizes.tabBar.xl.pillPaddingVertical, paddingLeft: theme.sizes.tabBar.xl.pillPaddingHorizontal, paddingRight: theme.sizes.tabBar.xl.pillPaddingHorizontal } },
+        ],
+        _web: {
+            border: 'none',
+            cursor: 'pointer',
+            outline: 'none',
+            transition: 'color 0.2s ease, opacity 0.2s ease',
+        },
     },
 
-    tabLabel: ({ type = 'standard', active = false, pillMode: _pillMode = 'light', disabled = false }: TabBarDynamicProps) => {
-        let color = active ? theme.colors.text.primary : theme.colors.text.secondary;
-        if (active) {
-            if (type === 'pills') color = theme.colors.text.primary;
-            else if (type === 'underline') color = theme.intents.primary.primary;
-        }
-
-        return {
-            position: 'relative' as const,
-            zIndex: 3,
-            fontWeight: '500' as const,
-            color,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    fontSize: theme.sizes.$tabBar.fontSize,
-                    lineHeight: theme.sizes.$tabBar.lineHeight,
-                },
+    tabLabel: {
+        position: 'relative' as const,
+        zIndex: 3,
+        fontWeight: '500' as const,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: {
+                fontSize: theme.sizes.$tabBar.fontSize,
+                lineHeight: theme.sizes.$tabBar.lineHeight,
             },
-        } as const;
+            active: {
+                true: { color: theme.colors.text.primary },
+                false: {},
+            },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+        compoundVariants: [
+            { type: 'underline', active: true, styles: { color: theme.intents.primary.primary } },
+            { type: 'pills', active: true, styles: { color: theme.colors.text.primary } },
+        ],
     },
 
     tabIcon: {
@@ -191,31 +204,33 @@ export const tabBarStyles = defineStyle('TabBar', (theme: Theme) => ({
         },
     },
 
-    indicator: ({ type = 'standard', pillMode = 'light' }: TabBarDynamicProps) => {
-        const backgroundColor = type === 'pills'
-            ? (pillMode === 'dark' ? theme.colors.surface.secondary : theme.colors.surface.tertiary)
-            : theme.intents.primary.primary;
-
-        const typeStyles = type === 'pills' ? {
-            borderRadius: 9999,
-            top: 4,
-            bottom: 4,
-            left: 0,
-        } : {
-            bottom: -1,
-            height: 2,
-        };
-
-        return {
-            position: 'absolute' as const,
-            pointerEvents: 'none' as const,
-            zIndex: 1,
-            backgroundColor,
-            ...typeStyles,
-            _web: {
-                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-            },
-        } as const;
+    indicator: {
+        position: 'absolute' as const,
+        pointerEvents: 'none' as const,
+        zIndex: 1,
+        backgroundColor: theme.intents.primary.primary,
+        bottom: -1,
+        height: 2,
+        variants: {
+            type: {
+                standard: {},
+                underline: {},
+                pills: {
+                    borderRadius: 9999,
+                    top: 4,
+                    bottom: 4,
+                    height: undefined,
+                    left: 0,
+                    backgroundColor: theme.colors.surface.tertiary,
+                },
+            },
+        },
+        compoundVariants: [
+            { type: 'pills', pillMode: 'dark', styles: { backgroundColor: theme.colors.surface.secondary } },
+        ],
+        _web: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        },
     },
 }));
 

package/src/TabBar/TabBar.web.tsx

@@ -66,29 +66,33 @@ const Tab: React.FC<TabProps> = ({
 }) => {
   const iconSize = ICON_SIZES[size || 'md'] || 18;
 
-  // Apply tab variants (size) for variant expansion (padding, fontSize, lineHeight)
+  // Apply tab variants
   tabBarTabStyles.useVariants({
     size,
+    type,
+    active: isActive,
+    disabled: Boolean(item.disabled),
+    iconPosition,
+    justify,
   });
 
-  // Apply label variants (size) for variant expansion
+  // Apply label variants
   tabBarLabelStyles.useVariants({
     size,
+    type,
+    active: isActive,
+    disabled: Boolean(item.disabled),
   });
 
-  // Apply icon variants (size, disabled, iconPosition)
+  // Apply icon variants
   tabBarIconStyles.useVariants({
     size,
     disabled: Boolean(item.disabled),
     iconPosition,
   });
 
-  // 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 tabProps = getWebProps([tabBarTabStyles.tab as any]);
+  const labelProps = getWebProps([tabBarLabelStyles.tabLabel as any]);
   const iconProps = getWebProps([tabBarIconStyles.tabIcon as any]);
 
   // Merge refs from getWebProps with our tracking ref
@@ -262,8 +266,10 @@ const TabBar: React.FC<TabBarProps> = ({
     onChange?.(itemValue);
   };
 
-  // Apply container variants (for spacing only)
-  (tabBarContainerStyles.useVariants as any)({
+  // Apply container variants
+  tabBarContainerStyles.useVariants({
+    type,
+    pillMode,
     justify,
     gap,
     padding,
@@ -274,12 +280,14 @@ const TabBar: React.FC<TabBarProps> = ({
     marginHorizontal,
   });
 
-  // Compute dynamic container and indicator styles
-  const containerStyle = (tabBarContainerStyles.container as any)({ type, pillMode });
-  const containerProps = getWebProps([containerStyle, style as any]);
+  // Apply indicator variants
+  tabBarIndicatorStyles.useVariants({
+    type,
+    pillMode,
+  });
 
-  const indicatorVisualStyle = (tabBarIndicatorStyles.indicator as any)({ type, pillMode });
-  const indicatorProps = getWebProps([indicatorVisualStyle]);
+  const containerProps = getWebProps([tabBarContainerStyles.container as any, style as any]);
+  const indicatorProps = getWebProps([tabBarIndicatorStyles.indicator as any]);
 
   // Merge container ref with getWebProps ref
   const mergedContainerRef = useMergeRefs<HTMLDivElement>(

package/src/examples/IconButtonExamples.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { Screen, View, IconButton, Text } from '@idealyst/components';
+import { useUnistyles } from 'react-native-unistyles';
+
+export const IconButtonExamples = () => {
+  const handlePress = (label: string) => {
+    console.log(`IconButton pressed: ${label}`);
+  };
+
+  const { theme } = useUnistyles();
+
+  return (
+    <Screen background="primary">
+      <View gap="xl">
+        <Text typography="h4" align="center">
+          IconButton Examples
+        </Text>
+
+        {/* Type Variants */}
+        <View gap="md">
+          <Text typography="subtitle1">Variants</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton
+              icon="heart"
+              type="contained"
+              intent="primary"
+              onPress={() => handlePress('contained')}
+            />
+            <IconButton
+              icon="heart"
+              type="outlined"
+              intent="primary"
+              onPress={() => handlePress('outlined')}
+            />
+            <IconButton
+              icon="heart"
+              type="text"
+              intent="primary"
+              onPress={() => handlePress('text')}
+            />
+          </View>
+        </View>
+
+        {/* All Intents */}
+        <View gap="md">
+          <Text typography="subtitle1">All Intents</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            {(Object.keys(theme.intents) as Array<keyof typeof theme.intents>).map((intent) => (
+              <IconButton
+                key={intent}
+                icon="star"
+                type="contained"
+                intent={intent}
+                onPress={() => handlePress(`intent-${intent}`)}
+              />
+            ))}
+          </View>
+        </View>
+
+        {/* Outlined Intents */}
+        <View gap="md">
+          <Text typography="subtitle1">Outlined Intents</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="information" type="outlined" intent="primary" onPress={() => handlePress('outlined-primary')} />
+            <IconButton icon="check-circle" type="outlined" intent="success" onPress={() => handlePress('outlined-success')} />
+            <IconButton icon="alert" type="outlined" intent="warning" onPress={() => handlePress('outlined-warning')} />
+            <IconButton icon="alert-circle" type="outlined" intent="danger" onPress={() => handlePress('outlined-danger')} />
+            <IconButton icon="cog" type="outlined" intent="neutral" onPress={() => handlePress('outlined-neutral')} />
+          </View>
+        </View>
+
+        {/* Sizes */}
+        <View gap="md">
+          <Text typography="subtitle1">Sizes</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="plus" size="xs" type="contained" intent="primary" onPress={() => handlePress('xs')} />
+            <IconButton icon="plus" size="sm" type="contained" intent="primary" onPress={() => handlePress('sm')} />
+            <IconButton icon="plus" size="md" type="contained" intent="primary" onPress={() => handlePress('md')} />
+            <IconButton icon="plus" size="lg" type="contained" intent="primary" onPress={() => handlePress('lg')} />
+            <IconButton icon="plus" size="xl" type="contained" intent="primary" onPress={() => handlePress('xl')} />
+          </View>
+        </View>
+
+        {/* Disabled States */}
+        <View gap="md">
+          <Text typography="subtitle1">Disabled States</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="pencil" type="contained" intent="primary" disabled onPress={() => handlePress('disabled-contained')} />
+            <IconButton icon="pencil" type="outlined" intent="primary" disabled onPress={() => handlePress('disabled-outlined')} />
+            <IconButton icon="pencil" type="text" intent="primary" disabled onPress={() => handlePress('disabled-text')} />
+          </View>
+        </View>
+
+        {/* Gradient Overlay */}
+        <View gap="md">
+          <Text typography="subtitle1">Gradient Overlay</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="rocket-launch" type="contained" intent="primary" onPress={() => handlePress('no-gradient')} />
+            <IconButton icon="rocket-launch" type="contained" intent="primary" gradient="darken" onPress={() => handlePress('gradient-darken')} />
+            <IconButton icon="rocket-launch" type="contained" intent="primary" gradient="lighten" onPress={() => handlePress('gradient-lighten')} />
+          </View>
+        </View>
+
+        {/* Gradient with Different Intents */}
+        <View gap="md">
+          <Text typography="subtitle1">Gradient Intents (Darken)</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="star" type="contained" intent="primary" gradient="darken" onPress={() => handlePress('gradient-primary')} />
+            <IconButton icon="check" type="contained" intent="success" gradient="darken" onPress={() => handlePress('gradient-success')} />
+            <IconButton icon="alert" type="contained" intent="warning" gradient="darken" onPress={() => handlePress('gradient-warning')} />
+            <IconButton icon="close" type="contained" intent="danger" gradient="darken" onPress={() => handlePress('gradient-danger')} />
+            <IconButton icon="cog" type="contained" intent="neutral" gradient="darken" onPress={() => handlePress('gradient-neutral')} />
+          </View>
+        </View>
+
+        {/* Loading State */}
+        <View gap="md">
+          <Text typography="subtitle1">Loading State</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="refresh" type="contained" intent="primary" loading onPress={() => handlePress('loading-contained')} />
+            <IconButton icon="refresh" type="outlined" intent="primary" loading onPress={() => handlePress('loading-outlined')} />
+            <IconButton icon="refresh" type="text" intent="primary" loading onPress={() => handlePress('loading-text')} />
+          </View>
+        </View>
+
+        {/* Interactive Loading */}
+        <View gap="md">
+          <Text typography="subtitle1">Interactive Loading</Text>
+          <InteractiveLoadingIconButton />
+        </View>
+
+        {/* Common Use Cases */}
+        <View gap="md">
+          <Text typography="subtitle1">Common Use Cases</Text>
+          <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <IconButton icon="magnify" type="text" intent="neutral" onPress={() => handlePress('search')} />
+            <IconButton icon="bell" type="text" intent="neutral" onPress={() => handlePress('notifications')} />
+            <IconButton icon="cog" type="text" intent="neutral" onPress={() => handlePress('settings')} />
+            <IconButton icon="dots-vertical" type="text" intent="neutral" onPress={() => handlePress('more')} />
+            <IconButton icon="close" type="text" intent="neutral" onPress={() => handlePress('close')} />
+            <IconButton icon="plus" type="contained" intent="primary" onPress={() => handlePress('add')} />
+            <IconButton icon="delete" type="contained" intent="danger" onPress={() => handlePress('delete')} />
+          </View>
+        </View>
+      </View>
+    </Screen>
+  );
+};
+
+const InteractiveLoadingIconButton = () => {
+  const [loading, setLoading] = React.useState(false);
+
+  const handlePress = async () => {
+    setLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setLoading(false);
+  };
+
+  return (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+      <IconButton
+        icon="refresh"
+        type="contained"
+        intent="primary"
+        loading={loading}
+        onPress={handlePress}
+      />
+      <IconButton
+        icon="download"
+        type="outlined"
+        intent="success"
+        loading={loading}
+        onPress={handlePress}
+      />
+    </View>
+  );
+};

package/src/examples/index.ts

@@ -1,5 +1,6 @@
 export { ActivityIndicatorExamples } from './ActivityIndicatorExamples';
 export { ButtonExamples } from './ButtonExamples';
+export { IconButtonExamples } from './IconButtonExamples';
 export { TextExamples } from './TextExamples';
 export { ViewExamples } from './ViewExamples';
 export { LinkExamples } from './LinkExamples';