@idealyst/components 1.1.1 → 1.1.3

package/src/Select/Select.web.tsx

@@ -30,6 +30,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
   style,
   testID,
   accessibilityLabel,
+  id,
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -191,7 +192,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
   const mergedRef = useMergeRefs(ref, containerWebProps.ref);
 
   return (
-    <div {...containerWebProps} ref={mergedRef} data-testid={testID}>
+    <div {...containerWebProps} ref={mergedRef} id={id} data-testid={testID}>
       {label && (
         <label {...getWebProps([selectStyles.label])}>
           {label}

package/src/Skeleton/Skeleton.native.tsx

@@ -19,6 +19,7 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   animation = 'pulse',
   style,
   testID,
+  id,
 }, ref) => {
   skeletonStyles.useVariants({
     shape,
@@ -78,6 +79,7 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   return (
     <Animated.View
       ref={ref as any}
+      nativeID={id}
       style={[
         skeletonStyles.skeleton,
         customStyles,
@@ -113,11 +115,13 @@ export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
   skeletonProps,
   style,
   testID,
+  id,
 }) => {
   skeletonStyles.useVariants({});
 
   return (
     <View
+      nativeID={id}
       style={[
         skeletonStyles.group,
         { gap: spacing },

package/src/Skeleton/Skeleton.web.tsx

@@ -11,6 +11,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
   animation = 'pulse',
   style,
   testID,
+  id,
 }) => {
   skeletonStyles.useVariants({
     shape,
@@ -60,6 +61,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
           ...customStyles,
           ...animationStyles,
         }}
+        id={id}
         data-testid={testID}
       >
         {animation === 'wave' && (
@@ -86,6 +88,7 @@ export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
   skeletonProps,
   style,
   testID,
+  id,
 }) => {
   skeletonStyles.useVariants({});
   const groupProps = getWebProps([skeletonStyles.group, style as any]);
@@ -96,6 +99,7 @@ export const SkeletonGroup: React.FC<SkeletonGroupProps> = ({
       style={{
         gap: `${spacing}px`,
       }}
+      id={id}
       data-testid={testID}
     >
       {Array.from({ length: count }).map((_, index) => (

package/src/Skeleton/types.ts

@@ -1,9 +1,10 @@
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
 export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
 
-export interface SkeletonProps {
+export interface SkeletonProps extends BaseProps {
   /**
    * Width of the skeleton (number in pixels or string with units)
    * @default '100%'
@@ -45,7 +46,7 @@ export interface SkeletonProps {
   testID?: string;
 }
 
-export interface SkeletonGroupProps {
+export interface SkeletonGroupProps extends BaseProps {
   /**
    * Number of skeleton items to render
    * @default 3

package/src/Slider/Slider.native.tsx

@@ -29,6 +29,7 @@ const Slider = forwardRef<View, SliderProps>(({
   onValueCommit,
   style,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [trackWidthState, setTrackWidthState] = useState(0);
@@ -166,7 +167,7 @@ const Slider = forwardRef<View, SliderProps>(({
   };
 
   return (
-    <View ref={ref} style={[sliderStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[sliderStyles.container, style]} testID={testID}>
       {showValue && (
         <View style={sliderStyles.valueLabel as any}>
           <Text>{value}</Text>
@@ -209,7 +210,7 @@ const Slider = forwardRef<View, SliderProps>(({
                             { left: markPosition },
                           ]}
                         >
-                          <Text size="sm">{mark.label}</Text>
+                          <Text typography="caption">{mark.label}</Text>
                         </View>
                       )}
                     </View>
@@ -242,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/Slider/Slider.web.tsx

@@ -27,6 +27,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   onValueCommit,
   style,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [isDragging, setIsDragging] = useState(false);
@@ -165,7 +166,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const mergedRef = useMergeRefs(ref, containerProps.ref);
 
   return (
-    <div {...containerProps} ref={mergedRef} data-testid={testID}>
+    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
       {showValue && (
         <div {...valueLabelProps}>
           {value}

package/src/Switch/Switch.native.tsx

@@ -19,6 +19,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   switchStyles.useVariants({
     size,
@@ -81,6 +82,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   const switchElement = (
     <Pressable
       ref={!label ? ref : undefined}
+      nativeID={!label ? id : undefined}
       onPress={handlePress}
       disabled={disabled}
       style={switchStyles.switchContainer}
@@ -115,6 +117,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
     return (
       <Pressable
         ref={ref}
+        nativeID={id}
         onPress={handlePress}
         disabled={disabled}
         style={[switchStyles.container, style]}

package/src/Switch/Switch.web.tsx

@@ -22,6 +22,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const handleClick = () => {
     if (!disabled && onCheckedChange) {
@@ -90,6 +91,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
       ref={mergedButtonRef}
       onClick={handleClick}
       disabled={disabled}
+      id={id}
       data-testid={testID}
       role="switch"
       aria-checked={checked}

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,
@@ -27,6 +52,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
   marginHorizontal,
   style,
   testID,
+  id,
 }, ref) => {
   const firstItemValue = items[0]?.value || '';
   const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
@@ -86,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,
@@ -96,7 +124,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
     marginVertical,
     marginHorizontal,
   });
-  tabBarIndicatorStyles.useVariants({ pillMode });
+  tabBarIndicatorStyles.useVariants({ type, pillMode });
 
   return (
     <ScrollView
@@ -104,7 +132,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ position: 'relative' }}
     >
-      <View ref={ref} style={[tabBarContainerStyles.container, style]} testID={testID}>
+      <View ref={ref} nativeID={id} style={[tabBarContainerStyles.container, style]} testID={testID}>
         {/* Animated indicator - render first so it's behind */}
         <Animated.View
           style={[
@@ -117,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
@@ -145,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,
@@ -89,6 +132,7 @@ const TabBar: React.FC<TabBarProps> = ({
   marginHorizontal,
   style,
   testID,
+  id,
 }) => {
   const firstItemValue = items[0]?.value || '';
   const [internalValue, setInternalValue] = useState(defaultValue || firstItemValue);
@@ -151,6 +195,7 @@ const TabBar: React.FC<TabBarProps> = ({
     type,
     size,
     pillMode,
+    justify,
     gap,
     padding,
     paddingVertical,
@@ -186,6 +231,7 @@ const TabBar: React.FC<TabBarProps> = ({
       {...containerProps}
       ref={mergedContainerRef}
       role="tablist"
+      id={id}
       data-testid={testID}
     >
       {/* Sliding indicator */}
@@ -206,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/Table/Table.native.tsx

@@ -20,6 +20,7 @@ function TableInner<T = any>({
   marginHorizontal,
   style,
   testID,
+  id,
 }: TableProps<T>, ref: React.Ref<ScrollView>) {
   // Apply variants
   tableStyles.useVariants({
@@ -49,6 +50,7 @@ function TableInner<T = any>({
   return (
     <ScrollView
       ref={ref}
+      nativeID={id}
       horizontal
       style={[tableStyles.container, style]}
       testID={testID}

package/src/Table/Table.web.tsx

@@ -20,6 +20,7 @@ function Table<T = any>({
   marginHorizontal,
   style,
   testID,
+  id,
 }: TableProps<T>) {
   // Apply variants
   tableStyles.useVariants({
@@ -49,7 +50,7 @@ function Table<T = any>({
   const isClickable = !!onRowPress;
 
   return (
-    <div {...containerProps} data-testid={testID}>
+    <div {...containerProps} id={id} data-testid={testID}>
       <table {...tableProps}>
         <thead {...getWebProps([tableStyles.thead])}>
           <tr>