@idealyst/components 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.1.2",
+  "version": "1.1.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",
@@ -25,6 +25,11 @@
       "require": "./src/index.ts",
       "types": "./src/index.ts"
     },
+    "./utils": {
+      "import": "./src/utils/index.ts",
+      "require": "./src/utils/index.ts",
+      "types": "./src/utils/index.ts"
+    },
     "./plugin/web": {
       "import": "./plugin/web.js",
       "require": "./plugin/web.js",
@@ -41,7 +46,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.1.2",
+    "@idealyst/theme": "^1.1.3",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -91,7 +96,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.1.2",
+    "@idealyst/theme": "^1.1.3",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Button/Button.styles.tsx

@@ -35,6 +35,7 @@ function createTypeVariants(theme: Theme) {
             borderWidth: 0,
         },
         outlined: {
+            boxSizing: 'border-box',
             borderWidth: 1,
             borderStyle: 'solid' ,
             backgroundColor: theme.colors.surface.primary,

package/src/Input/Input.styles.tsx

@@ -121,6 +121,7 @@ export const inputStyles = StyleSheet.create((theme: Theme) => {
         flexDirection: 'row',
         alignItems: 'center',
         width: '100%',
+        minWidth: 0,
         borderRadius: 8,
         variants: {
             size: buildSizeVariants(theme, 'input', (size) => ({

package/src/Slider/Slider.native.tsx

@@ -210,7 +210,7 @@ const Slider = forwardRef<View, SliderProps>(({
                             { left: markPosition },
                           ]}
                         >
-                          <Text size="sm">{mark.label}</Text>
+                          <Text typography="caption">{mark.label}</Text>
                         </View>
                       )}
                     </View>
@@ -243,8 +243,8 @@ const Slider = forwardRef<View, SliderProps>(({
 
       {showMinMax && (
         <View style={sliderStyles.minMaxLabels}>
-          <Text style={sliderStyles.minMaxLabel} size="sm">{min}</Text>
-          <Text style={sliderStyles.minMaxLabel} size="sm">{max}</Text>
+          <Text style={sliderStyles.minMaxLabel} typography="caption">{min}</Text>
+          <Text style={sliderStyles.minMaxLabel} typography="caption">{max}</Text>
         </View>
       )}
     </View>

package/src/TabBar/TabBar.native.tsx

@@ -1,22 +1,47 @@
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import React, { useState, useRef, useEffect, forwardRef, ReactNode } from 'react';
 import { View, TouchableOpacity, Text, ScrollView } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {
   tabBarContainerStyles,
   tabBarTabStyles,
   tabBarLabelStyles,
-  tabBarIndicatorStyles
+  tabBarIndicatorStyles,
+  tabBarIconStyles
 } from './TabBar.styles';
-import type { TabBarProps } from './types';
+import type { TabBarProps, TabBarItem } from './types';
+
+// Icon size mapping based on size variant
+const ICON_SIZES: Record<string, number> = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24,
+};
+
+// Helper to render icon
+function renderIcon(
+  icon: TabBarItem['icon'],
+  active: boolean,
+  size: number
+): ReactNode {
+  if (!icon) return null;
+  if (typeof icon === 'function') {
+    return icon({ active, size });
+  }
+  return icon;
+}
 
 const TabBar = forwardRef<View, TabBarProps>(({
   items,
   value: controlledValue,
   defaultValue,
   onChange,
-  type = 'default',
+  type = 'standard',
   size = 'md',
   pillMode = 'light',
+  iconPosition = 'left',
+  justify = 'start',
   // Spacing variants from ContainerStyleProps
   gap,
   padding,
@@ -87,8 +112,10 @@ const TabBar = forwardRef<View, TabBarProps>(({
 
   // Apply container and indicator types right before rendering
   tabBarContainerStyles.useVariants({
+    type,
     size,
     pillMode,
+    justify,
     gap,
     padding,
     paddingVertical,
@@ -97,7 +124,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
     marginVertical,
     marginHorizontal,
   });
-  tabBarIndicatorStyles.useVariants({ pillMode });
+  tabBarIndicatorStyles.useVariants({ type, pillMode });
 
   return (
     <ScrollView
@@ -118,20 +145,33 @@ const TabBar = forwardRef<View, TabBarProps>(({
         <View style={{ flexDirection: 'row' }}>
           {items.map((item) => {
             const isActive = value === item.value;
+            const iconSize = ICON_SIZES[size] || 18;
 
             // Apply tab and label types for this specific tab
             tabBarTabStyles.useVariants({
               size,
+              type,
               active: isActive,
               disabled: Boolean(item.disabled),
               pillMode,
+              iconPosition,
+              justify,
             });
             tabBarLabelStyles.useVariants({
               size,
+              type,
               pillMode,
               active: isActive,
               disabled: Boolean(item.disabled),
             });
+            tabBarIconStyles.useVariants({
+              size,
+              active: isActive,
+              disabled: Boolean(item.disabled),
+              iconPosition,
+            });
+
+            const icon = renderIcon(item.icon, isActive, iconSize);
 
             return (
               <TouchableOpacity
@@ -146,6 +186,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
                 activeOpacity={0.7}
                 testID={`${testID}-tab-${item.value}`}
               >
+                {icon && <View style={tabBarIconStyles.tabIcon}>{icon}</View>}
                 <Text style={tabBarLabelStyles.tabLabel}>{item.label}</Text>
               </TouchableOpacity>
             );

package/src/TabBar/TabBar.styles.tsx

@@ -10,12 +10,13 @@ import {
   buildMarginVerticalVariants,
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
-import { TabBarPillMode, TabBarSizeVariant, TabBarType } from './types';
+import { TabBarPillMode, TabBarSizeVariant, TabBarType, TabBarIconPosition, TabBarJustify } from './types';
 
 type TabBarContainerVariants = {
     type: TabBarType;
     size: TabBarSizeVariant;
     pillMode: TabBarPillMode;
+    justify: TabBarJustify;
 }
 
 type TabBarTabVariants = {
@@ -24,6 +25,15 @@ type TabBarTabVariants = {
     active: boolean;
     disabled: boolean;
     pillMode: TabBarPillMode;
+    iconPosition: TabBarIconPosition;
+    justify: TabBarJustify;
+}
+
+type TabBarIconVariants = {
+    size: TabBarSizeVariant;
+    active: boolean;
+    disabled: boolean;
+    iconPosition: TabBarIconPosition;
 }
 
 type TabBarLabelVariants = {
@@ -238,6 +248,22 @@ const createContainerStyles = (theme: Theme) => {
                 light: {},
                 dark: {},
             },
+            justify: {
+                start: {
+                    justifyContent: 'flex-start',
+                },
+                center: {
+                    justifyContent: 'center',
+                },
+                equal: {
+                    justifyContent: 'stretch',
+                    width: '100%',
+                },
+                'space-between': {
+                    justifyContent: 'space-between',
+                    width: '100%',
+                },
+            },
             // Spacing variants from ContainerStyleProps
             gap: buildGapVariants(theme),
             padding: buildPaddingVariants(theme),
@@ -262,6 +288,7 @@ const createTabStyles = (theme: Theme) => {
         position: 'relative',
         zIndex: 2,
         backgroundColor: 'transparent',
+        gap: 6,
         variants: {
             size: createTabSizeVariants(theme),
             type: {
@@ -298,6 +325,22 @@ const createTabStyles = (theme: Theme) => {
                 light: {},
                 dark: {},
             },
+            iconPosition: {
+                left: {
+                    flexDirection: 'row',
+                },
+                top: {
+                    flexDirection: 'column',
+                },
+            },
+            justify: {
+                start: {},
+                center: {},
+                equal: {
+                    flex: 1,
+                },
+                'space-between': {},
+            },
         } as const,
         compoundVariants: createTabCompoundVariants(theme),
         _web: {
@@ -379,6 +422,43 @@ const createIndicatorStyles = (theme: Theme) => {
     } as const;
 }
 
+/**
+ * Create size variants for icon
+ */
+function createIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'tabBar', (size) => ({
+        width: size.iconSize || size.fontSize,
+        height: size.iconSize || size.fontSize,
+    }));
+}
+
+const createIconStyles = (theme: Theme) => {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            size: createIconSizeVariants(theme),
+            active: {
+                true: {},
+                false: {},
+            },
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                },
+                false: {},
+            },
+            iconPosition: {
+                left: {},
+                top: {
+                    marginBottom: 2,
+                },
+            },
+        } as const,
+    } as const;
+}
+
 // Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
 // @ts-ignore - TS language server needs restart to pick up theme structure changes
 export const tabBarStyles = StyleSheet.create((theme: Theme) => {
@@ -386,6 +466,7 @@ export const tabBarStyles = StyleSheet.create((theme: Theme) => {
         container: createContainerStyles(theme),
         tab: createTabStyles(theme),
         tabLabel: createTabLabelStyles(theme),
+        tabIcon: createIconStyles(theme),
         indicator: createIndicatorStyles(theme),
     };
 });
@@ -414,3 +495,9 @@ export const tabBarIndicatorStyles = StyleSheet.create((theme: Theme) => {
         indicator: createIndicatorStyles(theme),
     } as const;
 });
+
+export const tabBarIconStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        tabIcon: createIconStyles(theme),
+    } as const;
+});

package/src/TabBar/TabBar.web.tsx

@@ -1,14 +1,37 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import {
   tabBarContainerStyles,
   tabBarTabStyles,
   tabBarLabelStyles,
-  tabBarIndicatorStyles
+  tabBarIndicatorStyles,
+  tabBarIconStyles
 } from './TabBar.styles';
 import type { TabBarProps, TabBarItem } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
 
+// Icon size mapping based on size variant
+const ICON_SIZES: Record<string, number> = {
+  xs: 14,
+  sm: 16,
+  md: 18,
+  lg: 20,
+  xl: 24,
+};
+
+// Helper to render icon
+function renderIcon(
+  icon: TabBarItem['icon'],
+  active: boolean,
+  size: number
+): ReactNode {
+  if (!icon) return null;
+  if (typeof icon === 'function') {
+    return icon({ active, size });
+  }
+  return icon;
+}
+
 interface TabProps {
   item: TabBarItem;
   isActive: boolean;
@@ -16,6 +39,8 @@ interface TabProps {
   size: TabBarProps['size'];
   type: TabBarProps['type'];
   pillMode: TabBarProps['pillMode'];
+  iconPosition: TabBarProps['iconPosition'];
+  justify: TabBarProps['justify'];
   testID?: string;
   tabRef: (el: HTMLButtonElement | null) => void;
 }
@@ -27,9 +52,13 @@ const Tab: React.FC<TabProps> = ({
   size,
   type,
   pillMode,
+  iconPosition,
+  justify,
   testID,
   tabRef,
 }) => {
+  const iconSize = ICON_SIZES[size || 'md'] || 18;
+
   // Apply tab and label types for this specific tab
   tabBarTabStyles.useVariants({
     size,
@@ -37,6 +66,8 @@ const Tab: React.FC<TabProps> = ({
     active: isActive,
     disabled: Boolean(item.disabled),
     pillMode,
+    iconPosition,
+    justify,
   });
   tabBarLabelStyles.useVariants({
     size,
@@ -45,9 +76,16 @@ const Tab: React.FC<TabProps> = ({
     active: isActive,
     disabled: Boolean(item.disabled),
   });
+  tabBarIconStyles.useVariants({
+    size,
+    active: isActive,
+    disabled: Boolean(item.disabled),
+    iconPosition,
+  });
 
   const tabProps = getWebProps([tabBarTabStyles.tab]);
   const labelProps = getWebProps([tabBarLabelStyles.tabLabel]);
+  const iconProps = getWebProps([tabBarIconStyles.tabIcon]);
 
   // Merge refs from getWebProps with our tracking ref
   const mergedRef = useMergeRefs<HTMLButtonElement>(
@@ -55,6 +93,8 @@ const Tab: React.FC<TabProps> = ({
     tabRef
   );
 
+  const icon = renderIcon(item.icon, isActive, iconSize);
+
   return (
     <button
       {...tabProps}
@@ -66,6 +106,7 @@ const Tab: React.FC<TabProps> = ({
       aria-disabled={item.disabled}
       data-testid={`${testID}-tab-${item.value}`}
     >
+      {icon && <span {...iconProps}>{icon}</span>}
       <span {...labelProps}>{item.label}</span>
     </button>
   );
@@ -79,6 +120,8 @@ const TabBar: React.FC<TabBarProps> = ({
   type = 'standard',
   size = 'md',
   pillMode = 'light',
+  iconPosition = 'left',
+  justify = 'start',
   // Spacing variants from ContainerStyleProps
   gap,
   padding,
@@ -152,6 +195,7 @@ const TabBar: React.FC<TabBarProps> = ({
     type,
     size,
     pillMode,
+    justify,
     gap,
     padding,
     paddingVertical,
@@ -208,6 +252,8 @@ const TabBar: React.FC<TabBarProps> = ({
             size={size}
             type={type}
             pillMode={pillMode}
+            iconPosition={iconPosition}
+            justify={justify}
             testID={testID}
             tabRef={(el) => {
               tabRefs.current[item.value] = el;

package/src/TabBar/types.ts

@@ -1,4 +1,5 @@
 import { Size } from '@idealyst/theme';
+import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { ContainerStyleProps } from '../utils/viewStyleProps';
 
@@ -6,10 +7,15 @@ import { ContainerStyleProps } from '../utils/viewStyleProps';
 export type TabBarSizeVariant = Size;
 export type TabBarType = 'standard' | 'pills' | 'underline';
 export type TabBarPillMode = 'light' | 'dark';
+export type TabBarIconPosition = 'left' | 'top';
+/** Layout justification for tabs */
+export type TabBarJustify = 'start' | 'center' | 'equal' | 'space-between';
 
 export interface TabBarItem {
   value: string;
   label: string;
+  /** Icon to display - can be a React node or a render function receiving active state */
+  icon?: ReactNode | ((props: { active: boolean; size: number }) => ReactNode);
   disabled?: boolean;
 }
 
@@ -22,6 +28,10 @@ export interface TabBarProps extends ContainerStyleProps {
   size?: TabBarSizeVariant;
   /** Mode for pills variant: 'light' for light backgrounds (dark pill), 'dark' for dark backgrounds (light pill) */
   pillMode?: TabBarPillMode;
+  /** Position of icon relative to label: 'left' (horizontal) or 'top' (stacked) */
+  iconPosition?: TabBarIconPosition;
+  /** Layout justification: 'start' (left), 'center', 'equal' (full width equal tabs), 'space-between' */
+  justify?: TabBarJustify;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/Text/Text.native.tsx

@@ -5,9 +5,8 @@ import { textStyles } from './Text.styles';
 
 const Text = forwardRef<RNText, TextProps>(({
   children,
-  typography,
-  size = 'md',
-  weight = 'normal',
+  typography = 'body1',
+  weight,
   color,
   align = 'left',
   // Spacing variants from TextSpacingStyleProps
@@ -19,10 +18,9 @@ const Text = forwardRef<RNText, TextProps>(({
   testID,
   id,
 }, ref) => {
-  // When typography is set, it overrides size and weight (handled in styles)
   textStyles.useVariants({
-    size: typography ? 'md' : size, // Use default when typography is set (will be overridden)
-    weight: typography ? 'normal' : weight, // Use default when typography is set (will be overridden)
+    typography,
+    weight,
     align,
     gap,
     padding,
@@ -35,7 +33,7 @@ const Text = forwardRef<RNText, TextProps>(({
       ref={ref}
       nativeID={id}
       style={[
-        textStyles.text({ color, typography }),
+        textStyles.text({ color }),
         style,
       ]}
       testID={testID}

package/src/Text/Text.styles.tsx

@@ -1,47 +1,51 @@
 import { StyleSheet } from "react-native-unistyles";
-import { Theme } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { Theme, Typography } from '@idealyst/theme';
 import {
   buildGapVariants,
   buildPaddingVariants,
   buildPaddingVerticalVariants,
   buildPaddingHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
-import { TextAlignVariant, TextColorVariant, TextSizeVariant, TextWeightVariant, TextTypographyVariant } from "./types";
+import { TextAlignVariant, TextColorVariant, TextWeightVariant, TextTypographyVariant } from "./types";
 
-type TextVariants = {
-    size: TextSizeVariant;
+export type TextVariants = {
+    typography: TextTypographyVariant;
     weight: TextWeightVariant;
     align: TextAlignVariant;
 }
 
 /**
- * Create size variants for text (legacy)
- * @deprecated Use typography prop instead
+ * Create typography variants from theme
  */
-function createSizeVariants(theme: Theme): any {
-    return buildSizeVariants(theme, 'text', (size) => ({
-        fontSize: size.fontSize,
-        lineHeight: size.lineHeight,
-    }));
+function createTypographyVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+
+    for (const key in theme.sizes.typography) {
+        const typo = theme.sizes.typography[key as Typography];
+        variants[key] = {
+            fontSize: typo.fontSize,
+            lineHeight: typo.lineHeight,
+            fontWeight: typo.fontWeight,
+        };
+    }
+
+    return variants;
 }
 
 type TextStyleParams = {
     color?: TextColorVariant;
-    typography?: TextTypographyVariant;
 }
 
 function createTextStyles(theme: Theme) {
-    return ({ color, typography }: TextStyleParams) => {
-        const colorValue = theme.colors.text[color] || theme.colors.text.primary;
+    return ({ color }: TextStyleParams) => {
+        const colorValue = theme.colors.text[color ?? 'primary'] || theme.colors.text.primary;
 
-        // Base styles
-        const baseStyles: any = {
+        return {
             margin: 0,
             padding: 0,
             color: colorValue,
             variants: {
-                size: createSizeVariants(theme) as any,
+                typography: createTypographyVariants(theme),
                 weight: {
                     light: {
                         fontWeight: '300',
@@ -78,19 +82,8 @@ function createTextStyles(theme: Theme) {
             } as const,
             _web: {
                 fontFamily: 'inherit',
-                lineHeight: 'inherit',
             },
         };
-
-        // If typography is set, apply typography styles (overrides size/weight variants)
-        if (typography && theme.sizes.typography[typography]) {
-            const typo = theme.sizes.typography[typography];
-            baseStyles.fontSize = typo.fontSize;
-            baseStyles.lineHeight = typo.lineHeight;
-            baseStyles.fontWeight = typo.fontWeight;
-        }
-
-        return baseStyles;
     }
 }
 
@@ -100,4 +93,4 @@ export const textStyles = StyleSheet.create((theme: Theme) => {
   return {
         text: createTextStyles(theme),
     };
-});
+});

package/src/Text/Text.web.tsx

@@ -6,9 +6,8 @@ import useMergeRefs from '../hooks/useMergeRefs';
 
 const Text = forwardRef<HTMLSpanElement, TextProps>(({
   children,
-  typography,
-  size = 'md',
-  weight = 'normal',
+  typography = 'body1',
+  weight,
   color = 'primary',
   align = 'left',
   // Spacing variants from TextSpacingStyleProps
@@ -20,10 +19,9 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
   testID,
   id,
 }, ref) => {
-  // When typography is set, it overrides size and weight (handled in styles)
   textStyles.useVariants({
-    size: typography ? 'md' : size, // Use default when typography is set (will be overridden)
-    weight: typography ? 'normal' : weight, // Use default when typography is set (will be overridden)
+    typography,
+    weight,
     align,
     gap,
     padding,
@@ -31,9 +29,9 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
     paddingHorizontal,
   });
 
-  // Create the style array - pass typography to dynamic style function
+  // Create the style array
   const textStyleArray = [
-    textStyles.text({ color, typography }),
+    textStyles.text({ color }),
     style,
   ];
 

package/src/Text/types.ts

@@ -5,7 +5,6 @@ import { TextSpacingStyleProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TextColorVariant = Text;
-export type TextSizeVariant = 'sm' | 'md' | 'lg' | 'xl';  // Using sm/md/lg/xl for consistency
 export type TextWeightVariant = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
 export type TextAlignVariant = 'left' | 'center' | 'right';
 export type TextTypographyVariant = Typography;
@@ -19,19 +18,12 @@ export interface TextProps extends TextSpacingStyleProps {
   /**
    * Typography variant for semantic text styling.
    * Automatically sets fontSize, lineHeight, and fontWeight.
-   * When set, overrides size and weight props.
    */
   typography?: TextTypographyVariant;
 
-  /**
-   * The size variant of the text
-   * @deprecated Use `typography` prop instead for semantic text styling (e.g., 'h1', 'body1', 'caption')
-   */
-  size?: TextSizeVariant;
-
   /**
    * The weight of the text.
-   * Note: When `typography` is set, this is ignored as typography includes fontWeight.
+   * Overrides the weight from typography if both are set.
    */
   weight?: TextWeightVariant;
 

package/src/examples/TabBarExamples.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Screen, View, Text } from '@idealyst/components';
+import { Screen, View, Text, Icon } from '@idealyst/components';
 import TabBar from '../TabBar';
 import type { TabBarItem } from '../TabBar/types';
 
@@ -7,6 +7,8 @@ export const TabBarExamples: React.FC = () => {
   const [activeTab, setActiveTab] = useState('tab1');
   const [variantTab, setVariantTab] = useState('home');
   const [pillTab, setPillTab] = useState('tab1');
+  const [iconTab, setIconTab] = useState('home');
+  const [justifyTab, setJustifyTab] = useState('tab1');
 
   const basicTabs: TabBarItem[] = [
     { value: 'tab1', label: 'Tab 1' },
@@ -26,6 +28,38 @@ export const TabBarExamples: React.FC = () => {
     { value: 'tab3', label: 'Enabled' },
   ];
 
+  // Tabs with icons using render function
+  const iconTabs: TabBarItem[] = [
+    {
+      value: 'home',
+      label: 'Home',
+      icon: ({ active, size }) => (
+        <Icon name="home" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'search',
+      label: 'Search',
+      icon: ({ active, size }) => (
+        <Icon name="magnify" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'profile',
+      label: 'Profile',
+      icon: ({ active, size }) => (
+        <Icon name="account" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'settings',
+      label: 'Settings',
+      icon: ({ active, size }) => (
+        <Icon name="cog" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+  ];
+
   return (
     <Screen background="primary" padding="lg">
     <View gap="lg">
@@ -135,6 +169,93 @@ export const TabBarExamples: React.FC = () => {
           onChange={setActiveTab}
         />
       </View>
+
+      <View gap="md">
+        <Text typography="h5">With Icons</Text>
+        <View gap="sm">
+          <View gap="xs">
+            <Text typography="body2">Icons Left (default)</Text>
+            <TabBar
+              items={iconTabs}
+              value={iconTab}
+              onChange={setIconTab}
+              iconPosition="left"
+            />
+          </View>
+          <View gap="xs">
+            <Text typography="body2">Icons Top (stacked)</Text>
+            <TabBar
+              items={iconTabs}
+              value={iconTab}
+              onChange={setIconTab}
+              iconPosition="top"
+            />
+          </View>
+          <View gap="xs">
+            <Text typography="body2">Pills with Icons</Text>
+            <TabBar
+              items={iconTabs}
+              value={iconTab}
+              onChange={setIconTab}
+              type="pills"
+              iconPosition="left"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View gap="md">
+        <Text typography="h5">Layout Justification</Text>
+        <View gap="sm">
+          <View gap="xs">
+            <Text typography="body2">Start (default)</Text>
+            <TabBar
+              items={basicTabs}
+              value={justifyTab}
+              onChange={setJustifyTab}
+              justify="start"
+            />
+          </View>
+          <View gap="xs">
+            <Text typography="body2">Center</Text>
+            <TabBar
+              items={basicTabs}
+              value={justifyTab}
+              onChange={setJustifyTab}
+              justify="center"
+            />
+          </View>
+          <View gap="xs">
+            <Text typography="body2">Equal (full width, equal tabs)</Text>
+            <TabBar
+              items={basicTabs}
+              value={justifyTab}
+              onChange={setJustifyTab}
+              justify="equal"
+            />
+          </View>
+          <View gap="xs">
+            <Text typography="body2">Space Between</Text>
+            <TabBar
+              items={basicTabs}
+              value={justifyTab}
+              onChange={setJustifyTab}
+              justify="space-between"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View gap="md">
+        <Text typography="h5">Full Width with Icons</Text>
+        <TabBar
+          items={iconTabs}
+          value={iconTab}
+          onChange={setIconTab}
+          justify="equal"
+          iconPosition="top"
+        />
+      </View>
     </View>
     </Screen>
   );

package/src/utils/index.ts

@@ -0,0 +1,20 @@
+// Size variant builder
+export { buildSizeVariants } from './buildSizeVariants';
+
+// View/container style variant builders
+export {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+  buildContainerStyleVariants,
+  buildPaddingStyleVariants,
+  buildMarginStyleVariants,
+  buildTextSpacingVariants,
+} from './buildViewStyleVariants';
+
+// General style helpers
+export { deepMerge, isPlainObject } from './styleHelpers';