@idealyst/components 1.1.6 → 1.1.7

package/src/TabBar/TabBar.web.tsx

@@ -9,7 +9,7 @@ import {
 } from './TabBar.styles';
 import type { TabBarProps, TabBarItem } from './types';
 import useMergeRefs from '../hooks/useMergeRefs';
-import { getWebAriaProps, generateAccessibilityId, TAB_KEYS } from '../utils/accessibility';
+import { getWebAriaProps, generateAccessibilityId } from '../utils/accessibility';
 
 // Icon size mapping based on size variant
 const ICON_SIZES: Record<string, number> = {
@@ -66,23 +66,7 @@ const Tab: React.FC<TabProps> = ({
 }) => {
   const iconSize = ICON_SIZES[size || 'md'] || 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),
-  });
+  // Apply icon variants (size, disabled, iconPosition)
   tabBarIconStyles.useVariants({
     size,
     active: isActive,
@@ -90,9 +74,13 @@ const Tab: React.FC<TabProps> = ({
     iconPosition,
   });
 
-  const tabProps = getWebProps([tabBarTabStyles.tab]);
-  const labelProps = getWebProps([tabBarLabelStyles.tabLabel]);
-  const iconProps = getWebProps([tabBarIconStyles.tabIcon]);
+  // 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 iconProps = getWebProps([tabBarIconStyles.tabIcon as any]);
 
   // Merge refs from getWebProps with our tracking ref
   const mergedRef = useMergeRefs<HTMLButtonElement>(
@@ -174,16 +162,16 @@ const TabBar: React.FC<TabBarProps> = ({
     const currentIndex = enabledItems.findIndex(item => item.value === itemValue);
     let nextIndex = -1;
 
-    if (TAB_KEYS.next.includes(key)) {
+    if (key === 'ArrowRight') {
       e.preventDefault();
       nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
-    } else if (TAB_KEYS.prev.includes(key)) {
+    } else if (key === 'ArrowLeft') {
       e.preventDefault();
       nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
-    } else if (TAB_KEYS.first.includes(key)) {
+    } else if (key === 'Home') {
       e.preventDefault();
       nextIndex = 0;
-    } else if (TAB_KEYS.last.includes(key)) {
+    } else if (key === 'End') {
       e.preventDefault();
       nextIndex = enabledItems.length - 1;
     }
@@ -255,11 +243,8 @@ const TabBar: React.FC<TabBarProps> = ({
     onChange?.(itemValue);
   };
 
-  // Apply container and indicator types
-  tabBarContainerStyles.useVariants({
-    type,
-    size,
-    pillMode,
+  // Apply container variants (for spacing only)
+  (tabBarContainerStyles.useVariants as any)({
     justify,
     gap,
     padding,
@@ -269,10 +254,13 @@ const TabBar: React.FC<TabBarProps> = ({
     marginVertical,
     marginHorizontal,
   });
-  const containerProps = getWebProps([tabBarContainerStyles.container, style as any]);
 
-  tabBarIndicatorStyles.useVariants({ type, pillMode });
-  const indicatorProps = getWebProps([tabBarIndicatorStyles.indicator]);
+  // Compute dynamic container and indicator styles
+  const containerStyle = (tabBarContainerStyles.container as any)({ type, pillMode });
+  const containerProps = getWebProps([containerStyle, style as any]);
+
+  const indicatorVisualStyle = (tabBarIndicatorStyles.indicator as any)({ type, pillMode });
+  const indicatorProps = getWebProps([indicatorVisualStyle]);
 
   // Merge container ref with getWebProps ref
   const mergedContainerRef = useMergeRefs<HTMLDivElement>(

package/src/Table/Table.native.tsx

@@ -67,7 +67,7 @@ function TableInner<T = any>({
       ref={ref}
       nativeID={id}
       horizontal
-      style={[tableStyles.container, style]}
+      style={[(tableStyles.container as any)({}), style]}
       testID={testID}
       {...nativeA11yProps}
     >

package/src/Table/Table.styles.tsx

@@ -10,6 +10,7 @@ import {
   buildMarginVerticalVariants,
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type TableType = 'default' | 'bordered' | 'striped';
 
@@ -166,8 +167,8 @@ function createCellTypeVariants(theme: Theme) {
     } as const;
 }
 
-const createContainerStyles = (theme: Theme) => {
-    return {
+function createContainerStyles(theme: Theme) {
+    return () => ({
         width: '100%',
         _web: {
             overflow: 'auto',
@@ -183,7 +184,7 @@ const createContainerStyles = (theme: Theme) => {
             marginVertical: buildMarginVerticalVariants(theme),
             marginHorizontal: buildMarginHorizontalVariants(theme),
         },
-    } as const;
+    });
 }
 
 const createTableStyles = (theme: Theme) => {
@@ -298,8 +299,14 @@ const createCellStyles = (theme: Theme) => {
 }
 
 export const tableStyles = StyleSheet.create((theme: Theme) => {
-    return {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Table', theme, {
         container: createContainerStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
         table: createTableStyles(theme),
         thead: createTheadStyles(theme),
         tbody: {},

package/src/Table/Table.web.tsx

@@ -50,7 +50,7 @@ function Table<T = any>({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([tableStyles.container, style as any]);
+  const containerProps = getWebProps([(tableStyles.container as any)({}), style as any]);
   const tableProps = getWebProps([tableStyles.table]);
 
   // Helper to get cell value

package/src/Text/Text.native.tsx

@@ -28,14 +28,13 @@ const Text = forwardRef<RNText, TextProps>(({
     paddingHorizontal,
   });
 
+  const textStyle = (textStyles.text as any)({ color });
+
   return (
     <RNText
       ref={ref}
       nativeID={id}
-      style={[
-        textStyles.text({ color }),
-        style,
-      ]}
+      style={[textStyle, style]}
       testID={testID}
     >
       {children}

package/src/Text/Text.styles.tsx

@@ -7,6 +7,7 @@ import {
   buildPaddingHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { TextAlignVariant, TextColorVariant, TextWeightVariant, TextTypographyVariant } from "./types";
+import { applyExtensions } from '../extensions/applyExtension';
 
 export type TextVariants = {
     typography: TextTypographyVariant;
@@ -90,7 +91,12 @@ function createTextStyles(theme: Theme) {
 // Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
 // transform on native cannot resolve function calls to extract variant structures.
 export const textStyles = StyleSheet.create((theme: Theme) => {
-  return {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Text', theme, {
         text: createTextStyles(theme),
+    });
+
+    return {
+        ...extended,
     };
 });

package/src/Text/Text.web.tsx

@@ -31,7 +31,7 @@ const Text = forwardRef<HTMLSpanElement, TextProps>(({
 
   // Create the style array
   const textStyleArray = [
-    textStyles.text({ color }),
+    (textStyles.text as any)({ color }),
     style,
   ];
 

package/src/TextArea/TextArea.styles.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
 import {
   buildMarginVariants,
@@ -7,6 +7,7 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { TextAreaIntentVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 
 /**
@@ -114,73 +115,104 @@ const createTextareaStyles = (theme: Theme) => {
     }
 }
 
-// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
-export const textAreaStyles = StyleSheet.create((theme: Theme) => {
-    return {
-        container: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            variants: {
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
-            },
+// Helper functions to create static styles wrapped in dynamic functions
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'column' as const,
+        gap: 4,
+        variants: {
+            // Spacing variants from FormInputStyleProps
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
         },
-        label: {
-            fontSize: 14,
-            fontWeight: '500',
-            color: theme.colors.text.primary,
-            variants: {
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                    },
-                    false: {},
+    });
+}
+
+function createLabelStyles(theme: Theme) {
+    return () => ({
+        fontSize: 14,
+        fontWeight: '500' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: 0.5,
                 },
+                false: {},
             },
         },
-        textareaContainer: {
-            position: 'relative',
-        },
-        textarea: createTextareaStyles(theme),
-        helperText: {
-            fontSize: 12,
-            color: theme.colors.text.secondary,
-            variants: {
-                hasError: {
-                    true: {
-                        color: theme.intents.error.primary,
-                    },
-                    false: {},
+    });
+}
+
+function createTextareaContainerStyles() {
+    return () => ({
+        position: 'relative' as const,
+    });
+}
+
+function createHelperTextStyles(theme: Theme) {
+    return () => ({
+        fontSize: 12,
+        color: theme.colors.text.secondary,
+        variants: {
+            hasError: {
+                true: {
+                    color: theme.intents.error.primary,
                 },
+                false: {},
             },
         },
-        footer: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            gap: 4,
-        },
-        characterCount: {
-            fontSize: 12,
-            color: theme.colors.text.secondary,
-            variants: {
-                isNearLimit: {
-                    true: {
-                        color: theme.intents.warning.primary,
-                    },
-                    false: {},
+    });
+}
+
+function createFooterStyles() {
+    return () => ({
+        display: 'flex' as const,
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        gap: 4,
+    });
+}
+
+function createCharacterCountStyles(theme: Theme) {
+    return () => ({
+        fontSize: 12,
+        color: theme.colors.text.secondary,
+        variants: {
+            isNearLimit: {
+                true: {
+                    color: theme.intents.warning.primary,
                 },
-                isAtLimit: {
-                    true: {
-                        color: theme.intents.error.primary,
-                    },
-                    false: {},
+                false: {},
+            },
+            isAtLimit: {
+                true: {
+                    color: theme.intents.error.primary,
                 },
+                false: {},
             },
         },
+    });
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel transform on native cannot resolve function calls to extract variant structures.
+export const textAreaStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('TextArea', theme, {
+        container: createContainerStyles(theme),
+        textarea: createTextareaStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        label: createLabelStyles(theme)(),
+        textareaContainer: createTextareaContainerStyles()(),
+        helperText: createHelperTextStyles(theme)(),
+        footer: createFooterStyles()(),
+        characterCount: createCharacterCountStyles(theme)(),
     };
 });

package/src/Tooltip/Tooltip.native.tsx

@@ -159,14 +159,14 @@ const Tooltip = forwardRef<View, TooltipProps>(({
           <Pressable style={{ flex: 1 }} onPress={() => setVisible(false)}>
             <View
               style={[
-                tooltipStyles.tooltip,
+                (tooltipStyles.tooltip as any)({}),
                 { position: 'absolute' },
                 getPositionStyle(),
               ]}
               pointerEvents="none"
             >
               {typeof content === 'string' ? (
-                <Text style={tooltipStyles.tooltip}>{content}</Text>
+                <Text style={(tooltipStyles.tooltip as any)({})}>{content}</Text>
               ) : (
                 content
               )}

package/src/Tooltip/Tooltip.styles.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { Theme, StylesheetStyles, Intent, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type TooltipSize = Size;
 type TooltipIntent = Intent;
@@ -38,19 +39,19 @@ function createTooltipIntentVariants(theme: Theme) {
     return intents;
 }
 
-// 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 tooltipStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        position: 'relative',
+// Style creators for extension support
+function createContainerStyles() {
+    return () => ({
+        position: 'relative' as const,
         _web: {
             display: 'inline-flex',
             width: 'fit-content',
         },
-    } as const,
-    tooltip: {
+    });
+}
+
+function createTooltipStyles(theme: Theme) {
+    return () => ({
         borderRadius: 8,
         maxWidth: 300,
         shadowColor: '#000',
@@ -68,6 +69,14 @@ export const tooltipStyles = StyleSheet.create((theme: Theme) => {
             width: 'max-content',
             wordWrap: 'break-word',
         },
-    } 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.
+export const tooltipStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Tooltip', theme, {
+        container: createContainerStyles(),
+        tooltip: createTooltipStyles(theme),
+    });
 });

package/src/Tooltip/Tooltip.web.tsx

@@ -47,8 +47,8 @@ const Tooltip: React.FC<TooltipProps> = ({
     intent,
   });
 
-  const containerProps = getWebProps([tooltipStyles.container, style as any]);
-  const tooltipContentProps = getWebProps(tooltipStyles.tooltip);
+  const containerProps = getWebProps([(tooltipStyles.container as any)({}), style as any]);
+  const tooltipContentProps = getWebProps([(tooltipStyles.tooltip as any)({})]);
 
   const handleMouseEnter = () => {
     if (timeoutRef.current) {

package/src/Video/Video.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 export type ExpandedVideoStyles = StylesheetStyles<never>;
 
@@ -9,31 +10,46 @@ export type VideoStylesheet = {
     fallback: ExpandedVideoStyles;
 }
 
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        position: 'relative' as const,
+        overflow: 'hidden' as const,
+        backgroundColor: theme.colors['black'],
+    });
+}
+
+function createVideoStyles() {
+    return () => ({
+        width: '100%' as const,
+        height: '100%' 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 videoStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        position: 'relative',
-        overflow: 'hidden',
-        backgroundColor: theme.colors['black'],
-    },
-    video: {
-        width: '100%',
-        height: '100%',
-    },
-    fallback: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: theme.colors['gray.300'],
-        color: theme.colors['gray.600'],
-    },
-  };
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Video', theme, {
+        container: createContainerStyles(theme),
+        video: createVideoStyles(),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        fallback: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: theme.colors['gray.300'],
+            color: theme.colors['gray.600'],
+        },
+    };
 });

package/src/View/View.native.tsx

@@ -50,12 +50,14 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
     return baseStyles;
   };
 
+  const viewStyle = (viewStyles.view as any)({});
+
   if (scrollable) {
     return (
       <RNScrollView
         ref={ref as any}
         style={[{ flex: 1 }, style]}
-        contentContainerStyle={[viewStyles.view, getStyles()]}
+        contentContainerStyle={[viewStyle, getStyles()]}
         testID={testID}
         nativeID={id}
       >
@@ -65,7 +67,7 @@ const View = forwardRef<RNView | RNScrollView, ViewProps>(({
   }
 
   return (
-    <RNView ref={ref as any} style={[viewStyles.view, getStyles(), style]} testID={testID} nativeID={id}>
+    <RNView ref={ref as any} style={[viewStyle, getStyles(), style]} testID={testID} nativeID={id}>
       {children}
     </RNView>
   );

package/src/View/View.styles.tsx

@@ -11,6 +11,7 @@ import {
 } from '../utils/buildViewStyleVariants';
 import { ViewBackgroundVariant, ViewBorderVariant, ViewRadiusVariant } from './types';
 import { ViewStyleSize } from '../utils/viewStyleProps';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type ViewVariants = {
   background: ViewBackgroundVariant;
@@ -86,29 +87,39 @@ function createBorderVariants(theme: Theme) {
   } as const;
 }
 
+// Style creators for extension support
+function createViewStyles(theme: Theme) {
+    return () => ({
+        display: 'flex' as const,
+        variants: {
+            background: createBackgroundVariants(theme),
+            radius: createRadiusVariants(),
+            border: createBorderVariants(theme),
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+        },
+    });
+}
+
 // Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
 // transform on native cannot resolve function calls to extract variant structures.
 export const viewStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    view: {
-      display: 'flex',
-      variants: {
-        background: createBackgroundVariants(theme),
-        radius: createRadiusVariants(),
-        border: createBorderVariants(theme),
-        gap: buildGapVariants(theme),
-        padding: buildPaddingVariants(theme),
-        paddingVertical: buildPaddingVerticalVariants(theme),
-        paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        margin: buildMarginVariants(theme),
-        marginVertical: buildMarginVerticalVariants(theme),
-        marginHorizontal: buildMarginHorizontalVariants(theme),
-      },
-      _web: {
-        display: 'flex',
-        flexDirection: 'column',
-        boxSizing: 'border-box',
-      },
-    },
-  };
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('View', theme, {
+        view: createViewStyles(theme),
+    });
+
+    return {
+        ...extended,
+    };
 });