@idealyst/components 1.1.1 → 1.1.3

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
@@ -17,11 +16,11 @@ const Text = forwardRef<RNText, TextProps>(({
   paddingHorizontal,
   style,
   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,
@@ -32,8 +31,9 @@ const Text = forwardRef<RNText, TextProps>(({
   return (
     <RNText
       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
@@ -18,11 +17,11 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
   paddingHorizontal,
   style,
   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,
@@ -30,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,
   ];
 
@@ -45,6 +44,7 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
     <span
       {...webProps}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
     >
       {children}

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/TextArea/TextArea.native.tsx

@@ -28,6 +28,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   style,
   textareaStyle,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
@@ -81,7 +82,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(({
   const showFooter = (error || helperText) || (showCharacterCount && maxLength);
 
   return (
-    <View style={[textAreaStyles.container, style]} testID={testID}>
+    <View nativeID={id} style={[textAreaStyles.container, style]} testID={testID}>
       {label && (
         <Text style={textAreaStyles.label}>{label}</Text>
       )}

package/src/TextArea/TextArea.web.tsx

@@ -29,6 +29,7 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   style,
   textareaStyle,
   testID,
+  id,
 }, ref) => {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -112,7 +113,7 @@ const TextArea = forwardRef<HTMLDivElement, TextAreaProps>(({
   const mergedTextareaRef = useMergeRefs(textareaRef, computedTextareaProps.ref);
 
   return (
-    <div {...containerProps} ref={mergedRef} data-testid={testID}>
+    <div {...containerProps} ref={mergedRef} id={id} data-testid={testID}>
       {label && (
         <label {...labelProps}>{label}</label>
       )}

package/src/Tooltip/Tooltip.native.tsx

@@ -12,6 +12,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
   size = 'md',
   style,
   testID,
+  id,
 }, ref) => {
   const [visible, setVisible] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0, width: 0 });
@@ -126,7 +127,7 @@ const Tooltip = forwardRef<View, TooltipProps>(({
 
   return (
     <>
-      <View ref={ref} collapsable={false} style={style}>
+      <View ref={ref} nativeID={id} collapsable={false} style={style}>
         {trigger}
       </View>
 

package/src/Tooltip/Tooltip.web.tsx

@@ -13,6 +13,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   size = 'md',
   style,
   testID,
+  id,
 }) => {
   const [visible, setVisible] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -60,6 +61,7 @@ const Tooltip: React.FC<TooltipProps> = ({
         {...containerProps}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        id={id}
         data-testid={testID}
       >
         {children}

package/src/Tooltip/types.ts

@@ -1,12 +1,13 @@
 import { Intent, Size } from '@idealyst/theme';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 // Component-specific type aliases for future extensibility
 export type TooltipIntentVariant = Intent;
 export type TooltipSizeVariant = Size;
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
-export interface TooltipProps {
+export interface TooltipProps extends BaseProps {
   content: string | React.ReactNode;
   children: React.ReactNode;
   placement?: TooltipPlacement;

package/src/Video/Video.native.tsx

@@ -32,11 +32,12 @@ const Video = React.forwardRef<View, VideoProps>(({
   borderRadius,
   style,
   testID,
+  id,
 }, ref) => {
 
   if (!RNVideo) {
     return (
-      <View ref={ref} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID}>
+      <View ref={ref} nativeID={id} style={[videoStyles.container, { aspectRatio, borderRadius }, style]} testID={testID}>
         <View style={videoStyles.fallback}>
           {/* Fallback when react-native-video is not installed */}
         </View>
@@ -79,7 +80,7 @@ const Video = React.forwardRef<View, VideoProps>(({
   };
 
   return (
-    <View ref={ref} style={containerStyle} testID={testID}>
+    <View ref={ref} nativeID={id} style={containerStyle} testID={testID}>
       <RNVideo
         source={videoSource}
         poster={poster}

package/src/Video/Video.web.tsx

@@ -25,6 +25,7 @@ const Video: React.FC<VideoProps> = ({
   borderRadius,
   style,
   testID,
+  id,
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
@@ -85,6 +86,7 @@ const Video: React.FC<VideoProps> = ({
     <div
       {...containerProps}
       style={containerStyle}
+      id={id}
       data-testid={testID}
     >
       <video

package/src/Video/types.ts

@@ -1,11 +1,12 @@
 import type { StyleProp, ViewStyle } from 'react-native';
+import { BaseProps } from '../utils/viewStyleProps';
 
 export interface VideoSource {
   uri: string;
   type?: string;
 }
 
-export interface VideoProps {
+export interface VideoProps extends BaseProps {
   source: VideoSource | string;
   poster?: string;
   width?: number | string;

package/src/View/View.native.tsx

@@ -24,6 +24,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   scrollable = false,
   style,
   testID,
+  id,
 }, ref) => {
   viewStyles.useVariants({
     background,
@@ -56,6 +57,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
         style={[{ flex: 1 }, style]}
         contentContainerStyle={[viewStyles.view, getStyles()]}
         testID={testID}
+        nativeID={id}
       >
         {children}
       </RNScrollView>
@@ -63,7 +65,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyles.view, getStyles(), style]} testID={testID}>
+    <RNView ref={ref as any} style={[viewStyles.view, getStyles(), style]} testID={testID} nativeID={id}>
       {children}
     </RNView>
   );

package/src/View/View.web.tsx

@@ -25,6 +25,7 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
   scrollable, // accepted but no-op on web - layout handles scrolling
   style,
   testID,
+  id,
 }, ref) => {
   viewStyles.useVariants({
     background,
@@ -56,6 +57,7 @@ const View = forwardRef<HTMLDivElement, ViewProps>(({
     <div
       {...webProps}
       ref={mergedRef}
+      id={id}
       data-testid={testID}
     >
       {children}

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';

package/src/utils/viewStyleProps.ts

@@ -6,6 +6,14 @@ import { Size } from '@idealyst/theme';
  */
 export type ViewStyleSize = Size;
 
+/**
+ * Base props shared by all components
+ */
+export interface BaseProps {
+  /** Unique identifier for the element (maps to id on web, nativeID on native) */
+  id?: string;
+}
+
 /**
  * Gap style props - for controlling gap/spacing between children
  */
@@ -42,22 +50,22 @@ export interface MarginStyleProps {
  * Full container style props - includes all spacing options
  * For: View, Card, Screen, List, Accordion, Table, TabBar
  */
-export interface ContainerStyleProps extends GapStyleProps, PaddingStyleProps, MarginStyleProps {}
+export interface ContainerStyleProps extends BaseProps, GapStyleProps, PaddingStyleProps, MarginStyleProps {}
 
 /**
  * Text spacing style props - gap + padding only
  * For: Text (gap for inline elements, padding for block-level)
  */
-export interface TextSpacingStyleProps extends GapStyleProps, PaddingStyleProps {}
+export interface TextSpacingStyleProps extends BaseProps, GapStyleProps, PaddingStyleProps {}
 
 /**
  * Pressable style props - padding only
  * For: Pressable
  */
-export interface PressableSpacingStyleProps extends PaddingStyleProps {}
+export interface PressableSpacingStyleProps extends BaseProps, PaddingStyleProps {}
 
 /**
  * Form input style props - margin only
  * For: Input, Select, TextArea, Checkbox, RadioButton, Switch, Slider
  */
-export interface FormInputStyleProps extends MarginStyleProps {}
+export interface FormInputStyleProps extends BaseProps, MarginStyleProps {}