@idealyst/components 1.1.6 → 1.1.7

package/src/Slider/Slider.styles.tsx

@@ -7,6 +7,7 @@ import {
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
 import { SliderIntentVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 /**
  * Create size variants for track
@@ -155,69 +156,79 @@ const createThumbIconStyles = (theme: Theme) => {
     }
 }
 
+// Container style creator for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        gap: 4,
+        paddingVertical: 8,
+        variants: {
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+// Track style creator for extension support
+function createTrackStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.surface.tertiary,
+        borderRadius: 9999,
+        position: 'relative' as const,
+        variants: {
+            size: createTrackSizeVariants(theme),
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: { cursor: 'not-allowed' },
+                },
+                false: {
+                    opacity: 1,
+                    _web: { cursor: 'pointer' },
+                },
+            },
+        } 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 sliderStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Slider', theme, {
+        container: createContainerStyles(theme),
+        track: createTrackStyles(theme),
+        filledTrack: createFilledTrackStyles(theme),
+        thumb: createThumbStyles(theme),
+        thumbIcon: createThumbIconStyles(theme),
+    });
+
     return {
-        container: {
-            gap: 4,
-            paddingVertical: 8,
-            variants: {
-                // Spacing variants from FormInputStyleProps
-                margin: buildMarginVariants(theme),
-                marginVertical: buildMarginVerticalVariants(theme),
-                marginHorizontal: buildMarginHorizontalVariants(theme),
-            },
-        },
+        ...extended,
+        // Minor utility styles
         sliderWrapper: {
             position: 'relative',
             paddingVertical: 4,
         },
-        track: {
-            backgroundColor: theme.colors.surface.tertiary,
-            borderRadius: 9999,
-            position: 'relative',
-            variants: {
-                size: createTrackSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'pointer',
-                        },
-                    },
-                },
-            } as const,
-        } as const,
-        filledTrack: createFilledTrackStyles(theme),
-        thumb: createThumbStyles(theme),
         thumbActive: {
             _web: {
                 transform: 'translate(-50%, -50%) scale(1.1)',
             },
         },
-        thumbIcon: createThumbIconStyles(theme),
         valueLabel: {
-        fontSize: 12,
-        fontWeight: '600',
-        color: theme.colors.text.primary,
-        textAlign: 'center',
-    },
+            fontSize: 12,
+            fontWeight: '600',
+            color: theme.colors.text.primary,
+            textAlign: 'center',
+        },
         minMaxLabels: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginTop: 4,
-    },
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginTop: 4,
+        },
         minMaxLabel: {
-        fontSize: 12,
-        color: theme.colors.text.secondary,
-    },
+            fontSize: 12,
+            color: theme.colors.text.secondary,
+        },
         mark: {
             position: 'absolute',
             width: 2,

package/src/Slider/Slider.web.tsx

@@ -57,10 +57,10 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
     marginHorizontal,
   });
 
-  const containerProps = getWebProps([sliderStyles.container, style as any]);
+  const containerProps = getWebProps([(sliderStyles.container as any)({}), style as any]);
   const wrapperProps = getWebProps([sliderStyles.sliderWrapper]);
-  const trackProps = getWebProps([sliderStyles.track]);
-  const thumbIconProps = getWebProps([sliderStyles.thumbIcon({ intent })]);
+  const trackProps = getWebProps([(sliderStyles.track as any)({})]);
+  const thumbIconProps = getWebProps([(sliderStyles.thumbIcon as any)({ intent })]);
   const valueLabelProps = getWebProps([sliderStyles.valueLabel]);
   const minMaxLabelsProps = getWebProps([sliderStyles.minMaxLabels]);
   const minMaxLabelProps = getWebProps([sliderStyles.minMaxLabel]);
@@ -211,9 +211,9 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   const percentage = ((value - min) / (max - min)) * 100;
 
   // Dynamic styles with percentage
-  const filledTrackProps = getWebProps([sliderStyles.filledTrack({ intent }), { width: `${percentage}%` }]);
+  const filledTrackProps = getWebProps([(sliderStyles.filledTrack as any)({ intent }), { width: `${percentage}%` }]);
   const thumbProps = getWebProps([
-    sliderStyles.thumb({ intent, disabled }),
+    (sliderStyles.thumb as any)({ intent, disabled }),
     isDragging && sliderStyles.thumbActive,
     { left: `${percentage}%` }
   ]);

package/src/Switch/Switch.native.tsx

@@ -118,6 +118,10 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
     };
   });
 
+  // Get dynamic styles
+  const switchTrackStyle = (switchStyles.switchTrack as any)({ checked, intent });
+  const containerStyle = (switchStyles.container as any)({});
+
   const switchElement = (
     <Pressable
       ref={!label ? ref : undefined}
@@ -128,7 +132,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
       testID={testID}
       {...nativeA11yProps}
     >
-      <Animated.View style={switchStyles.switchTrack({ checked, intent })}>
+      <Animated.View style={switchTrackStyle}>
         <Animated.View
           style={[
             {
@@ -158,7 +162,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
         nativeID={id}
         onPress={handlePress}
         disabled={disabled}
-        style={[switchStyles.container, style]}
+        style={[containerStyle, style]}
       >
         {labelPosition === 'left' && (
           <Text style={switchStyles.label}>{label}</Text>

package/src/Switch/Switch.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 { SwitchIntentVariant, SwitchSizeVariant } from './types';
+import { applyExtensions } from '../extensions/applyExtension';
 
 function createTrackSizeVariants(theme: Theme) {
     return buildSizeVariants(theme, 'switch', (size) => ({
@@ -127,34 +128,42 @@ function createThumbIconStyles(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 switchStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
+/**
+ * Create container styles
+ */
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
         gap: 8,
         variants: {
-            // Spacing variants from FormInputStyleProps
             margin: buildMarginVariants(theme),
             marginVertical: buildMarginVerticalVariants(theme),
             marginHorizontal: buildMarginHorizontalVariants(theme),
         },
-    },
-    switchContainer: {
-        justifyContent: 'center',
+    });
+}
+
+/**
+ * Create switch container styles
+ */
+function createSwitchContainerStyles() {
+    return () => ({
+        justifyContent: 'center' as const,
         _web: {
             border: 'none',
             padding: 0,
             backgroundColor: 'transparent',
             width: 'fit-content',
-        }
-    },
-    switchTrack: createSwitchTrackStyles(theme),
-    switchThumb: createSwitchThumbStyles(theme),
-    thumbIcon: createThumbIconStyles(theme),
-    label: {
+        },
+    });
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return () => ({
         fontSize: 14,
         color: theme.colors.text.primary,
         variants: {
@@ -175,6 +184,24 @@ export const switchStyles = StyleSheet.create((theme: Theme) => {
                 },
             },
         } 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 switchStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+  const extended = applyExtensions('Switch', theme, {
+    container: createContainerStyles(theme),
+    switchTrack: createSwitchTrackStyles(theme),
+    switchThumb: createSwitchThumbStyles(theme),
+  });
+
+  return {
+    ...extended,
+    // Minor utility styles (not extended)
+    switchContainer: createSwitchContainerStyles()(),
+    thumbIcon: createThumbIconStyles(theme),
+    label: createLabelStyles(theme)(),
   };
 });

package/src/Switch/Switch.web.tsx

@@ -82,9 +82,9 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
     marginHorizontal,
   });
 
-  const trackProps = getWebProps([switchStyles.switchTrack({ checked, intent })]);
-  const thumbProps = getWebProps([switchStyles.switchThumb({ size, checked })]);
-  const thumbIconProps = getWebProps([switchStyles.thumbIcon({ checked, intent })]);
+  const trackProps = getWebProps([(switchStyles.switchTrack as any)({ checked, intent })]);
+  const thumbProps = getWebProps([(switchStyles.switchThumb as any)({ size, checked })]);
+  const thumbIconProps = getWebProps([(switchStyles.thumbIcon as any)({ checked, intent })]);
   const labelProps = getWebProps([switchStyles.label]);
 
   // Helper to render icon
@@ -115,7 +115,7 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
 
   // Computed container props with dynamic styles (for when label exists)
   const computedContainerProps = getWebProps([
-    switchStyles.container,
+    (switchStyles.container as any)({}),
     style as any,
     {
       cursor: disabled ? 'not-allowed' : 'pointer',

package/src/TabBar/TabBar.native.tsx

@@ -88,11 +88,11 @@ const TabBar = forwardRef<View, TabBarProps>(({
       const containerPadding = type === 'pills' ? 4 : 0;
 
       indicatorPosition.value = withSpring(layout.x + containerPadding, {
-        damping: 30,
+        damping: 100,
         stiffness: 300,
       });
       indicatorWidth.value = withSpring(layout.width, {
-        damping: 30,
+        damping: 100,
         stiffness: 300,
       });
     }
@@ -128,11 +128,8 @@ const TabBar = forwardRef<View, TabBarProps>(({
     };
   });
 
-  // Apply container and indicator types right before rendering
+  // Apply container variants (for spacing only)
   tabBarContainerStyles.useVariants({
-    type,
-    size,
-    pillMode,
     justify,
     gap,
     padding,
@@ -142,46 +139,37 @@ const TabBar = forwardRef<View, TabBarProps>(({
     marginVertical,
     marginHorizontal,
   });
-  tabBarIndicatorStyles.useVariants({ type, pillMode });
+
+  // Compute dynamic container and indicator styles
+  const containerStyle = (tabBarContainerStyles.container as any)({ type, pillMode });
+  const indicatorStyle = (tabBarIndicatorStyles.indicator as any)({ type, pillMode });
 
   return (
     <ScrollView
       horizontal
       showsHorizontalScrollIndicator={false}
-      contentContainerStyle={{ position: 'relative' }}
+      contentContainerStyle={{
+        position: 'relative',
+        flexGrow: 1,
+      }}
+      style={{ width: '100%' }}
     >
-      <View ref={ref} nativeID={id} style={[tabBarContainerStyles.container, style]} testID={testID} {...nativeA11yProps}>
+      <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
         {/* Animated indicator - render first so it's behind */}
         <Animated.View
           style={[
-            tabBarIndicatorStyles.indicator,
+            indicatorStyle,
             indicatorAnimatedStyle,
           ]}
         />
 
         {/* Tabs - render second so they're on top */}
-        <View style={{ flexDirection: 'row' }}>
+        <View style={{ flexDirection: 'row', flex: 1 }}>
           {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),
-            });
+            // Apply icon variants (size, disabled, iconPosition)
             tabBarIconStyles.useVariants({
               size,
               active: isActive,
@@ -189,6 +177,10 @@ const TabBar = forwardRef<View, TabBarProps>(({
               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 icon = renderIcon(item.icon, isActive, iconSize);
 
             return (
@@ -198,7 +190,7 @@ const TabBar = forwardRef<View, TabBarProps>(({
                   const { x, width } = event.nativeEvent.layout;
                   handleTabLayout(item.value, x, width);
                 }}
-                style={tabBarTabStyles.tab}
+                style={tabStyle}
                 onPress={() => handleTabClick(item.value, item.disabled)}
                 disabled={item.disabled}
                 activeOpacity={0.7}
@@ -207,8 +199,8 @@ const TabBar = forwardRef<View, TabBarProps>(({
                 accessibilityLabel={item.label}
                 accessibilityState={{ selected: isActive, disabled: item.disabled }}
               >
-                {icon && <View style={tabBarIconStyles.tabIcon}>{icon}</View>}
-                <Text style={tabBarLabelStyles.tabLabel}>{item.label}</Text>
+                {icon && <View style={tabBarIconStyles.tabIcon as any}>{icon}</View>}
+                <Text style={labelStyle}>{item.label}</Text>
               </TouchableOpacity>
             );
           })}