@idealyst/components 1.1.6 → 1.1.8

package/src/Switch/Switch.styles.tsx

@@ -1,180 +1,134 @@
+/**
+ * Switch styles using defineStyle with dynamic props.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-import {
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
-import { SwitchIntentVariant, SwitchSizeVariant } from './types';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-function createTrackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'switch', (size) => ({
-        width: size.trackWidth,
-        height: size.trackHeight,
-    }));
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-function getTrackBackgroundColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
-    if (checked) {
-        return theme.intents[intent].primary;
-    }
-    return theme.colors.border.secondary;
-}
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
 
-function createThumbSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'switch', (size) => ({
-        width: size.thumbSize,
-        height: size.thumbSize,
-        left: 2,
-    }));
-}
+type LabelPosition = 'left' | 'right';
 
-function getThumbTransform(theme: Theme, size: SwitchSizeVariant, checked: boolean) {
-    const sizeValue = theme.sizes.switch[size];
-    const translateX = checked ? sizeValue.translateX : 0;
-    return `translateY(-50%) translateX(${translateX}px)`;
-}
+export type SwitchDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    checked?: boolean;
+    disabled?: boolean;
+    labelPosition?: LabelPosition;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
 
-function createThumbIconSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'switch', (size) => ({
-        width: size.thumbIconSize,
-        height: size.thumbIconSize,
-    }));
-}
+/**
+ * Switch styles with intent/checked/disabled handling.
+ */
+export const switchStyles = defineStyle('Switch', (theme: Theme) => ({
+    container: (_props: SwitchDynamicProps) => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: 8,
+        variants: {
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    }),
 
-function getThumbIconColor(theme: Theme, checked: boolean, intent: SwitchIntentVariant) {
-    if (checked) {
-        return theme.intents[intent].primary;
-    }
-    return theme.colors.border.secondary;
-}
+    switchContainer: (_props: SwitchDynamicProps) => ({
+        justifyContent: 'center' as const,
+        _web: {
+            border: 'none',
+            padding: 0,
+            backgroundColor: 'transparent',
+            width: 'fit-content',
+        },
+    }),
 
-function createSwitchTrackStyles(theme: Theme) {
-    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
-        return {
-            borderRadius: 9999,
-            position: 'relative',
-            backgroundColor: getTrackBackgroundColor(theme, checked, intent),
-            variants: {
-                size: createTrackSizeVariants(theme),
-                disabled: {
-                    true: {
-                        opacity: 0.5,
-                        _web: {
-                            cursor: 'not-allowed',
-                        },
-                    },
-                    false: {
-                        opacity: 1,
-                        _web: {
-                            cursor: 'pointer',
-                            _hover: {
-                                opacity: 0.9,
-                            },
-                            _active: {
-                                opacity: 0.8,
-                            },
-                        },
-                    },
-                },
-            } as const,
-            _web: {
-                transition: 'background-color 0.2s ease',
+    switchTrack: ({ intent = 'primary', checked = false, disabled = false }: SwitchDynamicProps) => ({
+        borderRadius: 9999,
+        position: 'relative' as const,
+        backgroundColor: checked
+            ? theme.intents[intent].primary
+            : theme.colors.border.secondary,
+        opacity: disabled ? 0.5 : 1,
+        variants: {
+            size: {
+                width: theme.sizes.$switch.trackWidth,
+                height: theme.sizes.$switch.trackHeight,
             },
-        } as const;
-    }
-}
+        },
+        _web: {
+            transition: 'background-color 0.2s ease',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            _hover: disabled ? {} : { opacity: 0.9 },
+            _active: disabled ? {} : { opacity: 0.8 },
+        },
+    }),
+
+    switchThumb: ({ size = 'md', checked = false }: SwitchDynamicProps) => {
+        const sizeValue = theme.sizes.switch[size];
+        const translateX = checked ? sizeValue.translateX : 0;
 
-function createSwitchThumbStyles(theme: Theme) {
-    return ({ size, checked }: { size: SwitchSizeVariant, checked: boolean }) => {
         return {
-            position: 'absolute',
+            position: 'absolute' as const,
             backgroundColor: theme.colors.surface.primary,
             borderRadius: 9999,
             top: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: 'flex' as const,
+            alignItems: 'center' as const,
+            justifyContent: 'center' as const,
             shadowColor: '#000',
             shadowOffset: { width: 0, height: 1 },
             shadowOpacity: 0.2,
             shadowRadius: 3,
             elevation: 2,
             variants: {
-                size: createThumbSizeVariants(theme),
+                size: {
+                    width: theme.sizes.$switch.thumbSize,
+                    height: theme.sizes.$switch.thumbSize,
+                    left: 2,
+                },
             },
             _web: {
                 boxShadow: '0 1px 3px rgba(0, 0, 0, 0.2)',
                 transition: 'transform 0.2s ease',
-                transform: getThumbTransform(theme, size, checked),
+                transform: `translateY(-50%) translateX(${translateX}px)`,
             },
         } as const;
-    }
-}
-
-function createThumbIconStyles(theme: Theme) {
-    return ({ checked, intent }: { checked: boolean, intent: SwitchIntentVariant }) => {
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: getThumbIconColor(theme, checked, intent),
-            variants: {
-                size: createThumbIconSizeVariants(theme),
-            },
-        } 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) => {
-  return {
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
+    thumbIcon: ({ intent = 'primary', checked = false }: SwitchDynamicProps) => ({
+        display: 'flex' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        color: checked
+            ? theme.intents[intent].primary
+            : theme.colors.border.secondary,
         variants: {
-            // Spacing variants from FormInputStyleProps
-            margin: buildMarginVariants(theme),
-            marginVertical: buildMarginVerticalVariants(theme),
-            marginHorizontal: buildMarginHorizontalVariants(theme),
+            size: {
+                width: theme.sizes.$switch.thumbIconSize,
+                height: theme.sizes.$switch.thumbIconSize,
+            },
         },
-    },
-    switchContainer: {
-        justifyContent: 'center',
-        _web: {
-            border: 'none',
-            padding: 0,
-            backgroundColor: 'transparent',
-            width: 'fit-content',
-        }
-    },
-    switchTrack: createSwitchTrackStyles(theme),
-    switchThumb: createSwitchThumbStyles(theme),
-    thumbIcon: createThumbIconStyles(theme),
-    label: {
+    }),
+
+    label: ({ disabled = false, labelPosition = 'right' }: SwitchDynamicProps) => ({
         fontSize: 14,
         color: theme.colors.text.primary,
-        variants: {
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {
-                    opacity: 1,
-                },
-            },
-            position: {
-                left: {
-                    marginRight: 8,
-                },
-                right: {
-                    marginLeft: 8,
-                },
-            },
-        } as const,
-    } as const,
-  };
-});
+        opacity: disabled ? 0.5 : 1,
+        marginRight: labelPosition === 'left' ? 8 : 0,
+        marginLeft: labelPosition === 'right' ? 8 : 0,
+    }),
+}));

package/src/Switch/Switch.web.tsx

@@ -82,10 +82,10 @@ 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 labelProps = getWebProps([switchStyles.label]);
+  const trackProps = getWebProps([(switchStyles.switchTrack as any)({ checked, intent, disabled })]);
+  const thumbProps = getWebProps([(switchStyles.switchThumb as any)({ size, checked })]);
+  const thumbIconProps = getWebProps([(switchStyles.thumbIcon as any)({ checked, intent })]);
+  const labelProps = getWebProps([(switchStyles.label as any)({ disabled, labelPosition })]);
 
   // Helper to render icon
   const renderIcon = () => {
@@ -109,13 +109,13 @@ const Switch = forwardRef<HTMLDivElement | HTMLButtonElement, SwitchProps>(({
   };
 
   // Computed button props with dynamic styles
-  const computedButtonProps = getWebProps(
-    switchStyles.switchContainer
-  );
+  const computedButtonProps = getWebProps([
+    (switchStyles.switchContainer as any)({})
+  ]);
 
   // 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,11 @@ const TabBar = forwardRef<View, TabBarProps>(({
               iconPosition,
             });
 
+            // Compute dynamic styles for this tab - call as functions for theme reactivity
+            const tabStyle = (tabBarTabStyles.tab as any)({ type, size, active: isActive, pillMode, justify });
+            const labelStyle = (tabBarLabelStyles.tabLabel as any)({ type, active: isActive, pillMode });
+            const iconContainerStyle = (tabBarIconStyles.tabIcon as any)({});
+
             const icon = renderIcon(item.icon, isActive, iconSize);
 
             return (
@@ -198,7 +191,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 +200,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={iconContainerStyle}>{icon}</View>}
+                <Text style={labelStyle}>{item.label}</Text>
               </TouchableOpacity>
             );
           })}