@idealyst/components 1.1.6 → 1.1.8

package/src/Pressable/Pressable.styles.tsx

@@ -1,24 +1,39 @@
+/**
+ * Pressable styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
-import {
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-const createPressableStyles = (theme: Theme) => {
-  return {
-    variants: {
-      // Spacing variants from PressableSpacingStyleProps
-      padding: buildPaddingVariants(theme),
-      paddingVertical: buildPaddingVerticalVariants(theme),
-      paddingHorizontal: buildPaddingHorizontalVariants(theme),
-    },
-  } as const;
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type PressableDynamicProps = {
+    padding?: ViewStyleSize;
+    paddingVertical?: ViewStyleSize;
+    paddingHorizontal?: ViewStyleSize;
 };
 
-export const pressableStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    pressable: createPressableStyles(theme),
-  };
-});
+/**
+ * Pressable styles with spacing variants.
+ */
+export const pressableStyles = defineStyle('Pressable', (theme: Theme) => ({
+    pressable: (_props: PressableDynamicProps) => ({
+        variants: {
+            // $iterator expands for each view size
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+        },
+    }),
+}));

package/src/Pressable/Pressable.web.tsx

@@ -54,7 +54,7 @@ const Pressable = forwardRef<HTMLDivElement, PressableProps>(({
     paddingHorizontal,
   });
 
-  const webProps = getWebProps([pressableStyles.pressable, style as any]);
+  const webProps = getWebProps([(pressableStyles.pressable as any)({}), style as any]);
 
   const baseStyle: React.CSSProperties = {
     cursor: disabled ? 'default' : 'pointer',

package/src/Progress/Progress.native.tsx

@@ -34,13 +34,18 @@ const Progress = forwardRef<View, ProgressProps>(({
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
   const { theme }: { theme: Theme } = useUnistyles();
 
-  // Apply variants
+  // Apply variants (for size and rounded)
   progressStyles.useVariants({
     size,
-    intent,
     rounded,
   });
 
+  // Compute dynamic styles with intent
+  const dynamicProps = { intent };
+  const linearBarStyle = (progressStyles.linearBar as any)(dynamicProps);
+  const indeterminateBarStyle = (progressStyles.indeterminateBar as any)(dynamicProps);
+  const circularBarStyle = (progressStyles.circularBar as any)(dynamicProps);
+
   // Animation values
   const animatedValue = useSharedValue(0);
   const slideAnimation = useSharedValue(0);
@@ -157,13 +162,17 @@ const Progress = forwardRef<View, ProgressProps>(({
     };
   });
 
+  // Get dynamic styles for extended styles
+  const containerStyle = (progressStyles.container as any)({});
+  const linearTrackStyle = (progressStyles.linearTrack as any)({});
+
   return (
-    <View ref={ref} nativeID={id} style={[progressStyles.container, style]} testID={testID} accessibilityRole="progressbar">
-      <View style={progressStyles.linearTrack}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} accessibilityRole="progressbar">
+      <View style={linearTrackStyle}>
         {indeterminate ? (
-          <Animated.View style={[progressStyles.indeterminateBar, indeterminateAnimatedStyle]} />
+          <Animated.View style={[indeterminateBarStyle, indeterminateAnimatedStyle]} />
         ) : (
-          <Animated.View style={[progressStyles.linearBar, barAnimatedStyle]} />
+          <Animated.View style={[linearBarStyle, barAnimatedStyle]} />
         )}
       </View>
       {showLabel && (

package/src/Progress/Progress.styles.old.tsx

@@ -0,0 +1,200 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, Size } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+type ProgressSize = Size;
+type ProgressIntent = Intent;
+
+export type ProgressVariants = {
+    size: ProgressSize;
+    intent: ProgressIntent;
+    rounded: boolean;
+}
+
+type ProgressDynamicProps = {
+    intent?: ProgressIntent;
+};
+
+function createLinearTrackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        height: size.linearHeight,
+    }));
+}
+
+function createCircularContainerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        width: size.circularSize,
+        height: size.circularSize,
+    }));
+}
+
+function createLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        fontSize: size.labelFontSize,
+    }));
+}
+
+function createCircularLabelSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'progress', (size) => ({
+        fontSize: size.circularLabelFontSize,
+    }));
+}
+
+/**
+ * Get bar background color based on intent
+ */
+function getBarBackgroundColor(theme: Theme, intent: ProgressIntent): string {
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create dynamic linear bar styles
+ */
+function createLinearBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            height: '100%' as const,
+            backgroundColor: getBarBackgroundColor(theme, intent),
+            variants: {
+                rounded: {
+                    true: { borderRadius: 9999 },
+                    false: { borderRadius: 0 },
+                },
+            },
+            _web: {
+                transition: 'width 0.3s ease' as const,
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic indeterminate bar styles
+ */
+function createIndeterminateBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            position: 'absolute' as const,
+            height: '100%' as const,
+            width: '40%' as const,
+            backgroundColor: getBarBackgroundColor(theme, intent),
+            variants: {
+                rounded: {
+                    true: { borderRadius: 9999 },
+                    false: { borderRadius: 0 },
+                },
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create dynamic circular bar styles
+ */
+function createCircularBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            _web: {
+                stroke: getBarBackgroundColor(theme, intent),
+            },
+        } as const;
+    };
+}
+
+/**
+ * Create container styles
+ */
+function createContainerStyles() {
+    return () => ({
+        gap: 4 as const,
+    });
+}
+
+/**
+ * Create linear track styles
+ */
+function createLinearTrackStyles(theme: Theme) {
+    return () => ({
+        backgroundColor: theme.colors.border.secondary,
+        overflow: 'hidden' as const,
+        position: 'relative' as const,
+        variants: {
+            size: createLinearTrackSizeVariants(theme),
+            rounded: {
+                true: { borderRadius: 9999 },
+                false: { borderRadius: 0 },
+            },
+        },
+    });
+}
+
+/**
+ * Create circular container styles
+ */
+function createCircularContainerStyles(theme: Theme) {
+    return () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        position: 'relative' as const,
+        variants: {
+            size: createCircularContainerSizeVariants(theme),
+        } as const,
+    });
+}
+
+/**
+ * Create circular track styles
+ */
+function createCircularTrackStyles(theme: Theme) {
+    return () => ({
+        _web: {
+            stroke: theme.colors.border.secondary,
+        },
+    });
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return () => ({
+        color: theme.colors.text.primary,
+        textAlign: 'center' as const,
+        variants: {
+            size: createLabelSizeVariants(theme),
+        },
+    });
+}
+
+/**
+ * Create circular label styles
+ */
+function createCircularLabelStyles(theme: Theme) {
+    return () => ({
+        position: 'absolute' as const,
+        fontWeight: '600' as const,
+        color: theme.colors.text.primary,
+        variants: {
+            size: createCircularLabelSizeVariants(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 progressStyles = StyleSheet.create((theme: Theme) => {
+  // Apply extensions to main visual elements
+
+  return applyExtensions('Progress', theme, {container: createContainerStyles(),
+    linearTrack: createLinearTrackStyles(theme),
+    linearBar: createLinearBarStyles(theme),
+        // Additional styles (merged from return)
+        // Minor utility styles (not extended)
+    indeterminateBar: createIndeterminateBarStyles(theme),
+    circularContainer: createCircularContainerStyles(theme)(),
+    circularTrack: createCircularTrackStyles(theme)(),
+    circularBar: createCircularBarStyles(theme),
+    label: createLabelStyles(theme)(),
+    circularLabel: createCircularLabelStyles(theme)()});
+});

package/src/Progress/Progress.styles.tsx

@@ -1,164 +1,115 @@
+/**
+ * Progress styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Size, CompoundVariants, StaticStyles } from '@idealyst/theme';
-import { buildSizeVariants } from '../utils/buildSizeVariants';
-
-type ProgressSize = Size;
-type ProgressIntent = Intent;
-
-export type ProgressVariants = {
-    size: ProgressSize;
-    intent: ProgressIntent;
-    rounded: boolean;
-}
-
-function createLinearTrackSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        height: size.linearHeight,
-    }));
-}
-
-function createCircularContainerSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        width: size.circularSize,
-        height: size.circularSize,
-    }));
-}
-
-function createLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        fontSize: size.labelFontSize,
-    }));
-}
-
-function createCircularLabelSizeVariants(theme: Theme) {
-    return buildSizeVariants(theme, 'progress', (size) => ({
-        fontSize: size.circularLabelFontSize,
-    }));
-}
-
-function createIntentVariants(theme: Theme) {
-    const variants: any = {};
-    for (const intent in theme.intents) {
-        variants[intent] = {};
-    }
-    return variants;
-}
-
-function createLinearBarCompoundVariants(theme: Theme) {
-    const compoundVariants: CompoundVariants<keyof ProgressVariants> = [];
-
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
-
-        compoundVariants.push({
-            intent,
-            styles: {
-                backgroundColor: intentValue.primary,
-            },
-        });
-    }
-
-    return compoundVariants;
-}
-
-function createCircularBarCompoundVariants(theme: Theme) {
-    const compoundVariants: CompoundVariants<keyof ProgressVariants> = [];
-
-    for (const intent in theme.intents) {
-        const intentValue = theme.intents[intent as Intent];
-
-        compoundVariants.push({
-            intent,
-            styles: {
-                _web: {
-                    stroke: intentValue.primary,
-                },
-            },
-        });
-    }
-
-    return compoundVariants;
-}
-
-// 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 progressStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
+
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
+
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+export type ProgressDynamicProps = {
+    size?: Size;
+    intent?: Intent;
+    rounded?: boolean;
+};
+
+/**
+ * Progress styles with intent-based coloring.
+ */
+export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
+    container: (_props: ProgressDynamicProps) => ({
         gap: 4 as const,
-    },
-    linearTrack: {
+    }),
+
+    linearTrack: (_props: ProgressDynamicProps) => ({
         backgroundColor: theme.colors.border.secondary,
         overflow: 'hidden' as const,
         position: 'relative' as const,
         variants: {
-            size: createLinearTrackSizeVariants(theme),
+            // $iterator expands for each progress size
+            size: {
+                height: theme.sizes.$progress.linearHeight,
+            },
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
         },
-    },
-    linearBar: {
+    }),
+
+    linearBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
         height: '100%' as const,
+        backgroundColor: theme.intents[intent].primary,
         variants: {
-            intent: createIntentVariants(theme),
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
         },
-        compoundVariants: createLinearBarCompoundVariants(theme),
         _web: {
             transition: 'width 0.3s ease' as const,
         },
-    },
-    indeterminateBar: {
+    }),
+
+    indeterminateBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
         position: 'absolute' as const,
         height: '100%' as const,
         width: '40%' as const,
+        backgroundColor: theme.intents[intent].primary,
         variants: {
-            intent: createIntentVariants(theme),
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
         },
-        compoundVariants: createLinearBarCompoundVariants(theme),
-    },
-    circularContainer: {
+    }),
+
+    circularContainer: (_props: ProgressDynamicProps) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         position: 'relative' as const,
         variants: {
-            size: createCircularContainerSizeVariants(theme),
-        } as const,
-    } as const,
-    circularTrack: {
+            size: {
+                width: theme.sizes.$progress.circularSize,
+                height: theme.sizes.$progress.circularSize,
+            },
+        },
+    }),
+
+    circularTrack: (_props: ProgressDynamicProps) => ({
         _web: {
             stroke: theme.colors.border.secondary,
-        }
-    },
-    circularBar: {
-        variants: {
-            intent: createIntentVariants(theme),
         },
-        compoundVariants: createCircularBarCompoundVariants(theme),
-    },
-    label: {
+    }),
+
+    circularBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+        _web: {
+            stroke: theme.intents[intent].primary,
+        },
+    }),
+
+    label: (_props: ProgressDynamicProps) => ({
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
         variants: {
-            size: createLabelSizeVariants(theme),
+            size: {
+                fontSize: theme.sizes.$progress.labelFontSize,
+            },
         },
-    },
-    circularLabel: {
+    }),
+
+    circularLabel: (_props: ProgressDynamicProps) => ({
         position: 'absolute' as const,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
         variants: {
-            size: createCircularLabelSizeVariants(theme),
+            size: {
+                fontSize: theme.sizes.$progress.circularLabelFontSize,
+            },
         },
-    },
-  };
-});
+    }),
+}));

package/src/Progress/Progress.web.tsx

@@ -19,18 +19,20 @@ const Progress: React.FC<ProgressProps> = ({
 }) => {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
 
-  // Apply variants using the correct Unistyles v3 pattern
+  // Apply variants (for size and rounded)
   progressStyles.useVariants({
     size,
-    intent,
     rounded,
   });
 
-    // Linear progress
-  const containerProps = getWebProps([progressStyles.container, style as any]);
-  const trackProps = getWebProps([progressStyles.linearTrack]);
-  const barProps = getWebProps([progressStyles.linearBar, { width: `${percentage}%` }]);
-  const indeterminateProps = getWebProps([progressStyles.indeterminateBar]);
+  // Compute dynamic styles with intent
+  const dynamicProps = { intent };
+
+  // Linear progress
+  const containerProps = getWebProps([(progressStyles.container as any)({}), style as any]);
+  const trackProps = getWebProps([(progressStyles.linearTrack as any)({})]);
+  const barProps = getWebProps([(progressStyles.linearBar as any)(dynamicProps), { width: `${percentage}%` }]);
+  const indeterminateProps = getWebProps([(progressStyles.indeterminateBar as any)(dynamicProps)]);
   const labelProps = getWebProps([progressStyles.label]);
 
   const getCircularSize = () => {
@@ -53,8 +55,7 @@ const Progress: React.FC<ProgressProps> = ({
     ]);
     const labelProps = getWebProps([progressStyles.circularLabel]);
     const trackColorProps = getWebProps([progressStyles.circularTrack]);
-    const barColorProps = getWebProps([progressStyles.circularBar]);
-    console.log(trackColorProps)
+    const barColorProps = getWebProps([(progressStyles.circularBar as any)(dynamicProps)]);
 
     return (
       <div {...computedContainerProps} id={id} data-testid={testID}>

package/src/RadioButton/RadioButton.native.tsx

@@ -101,20 +101,26 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
     outputRange: [0, 1],
   });
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (radioButtonStyles.container as any)({});
+  const radioStyle = (radioButtonStyles.radio as any)({ intent, checked, disabled });
+  const radioDotStyle = (radioButtonStyles.radioDot as any)({ intent });
+  const labelStyle = (radioButtonStyles.label as any)({ disabled });
+
   return (
     <Pressable
       ref={ref}
       nativeID={id}
       onPress={handlePress}
       disabled={disabled}
-      style={[radioButtonStyles.container, style]}
+      style={[containerStyle, style]}
       testID={testID}
       {...nativeA11yProps}
     >
-      <View style={radioButtonStyles.radio({ intent })}>
+      <View style={radioStyle}>
         <Animated.View
           style={[
-            radioButtonStyles.radioDot({ intent }),
+            radioDotStyle,
             {
               transform: [{ scale: dotScale }],
             },
@@ -122,7 +128,7 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
         />
       </View>
       {label && (
-        <Text style={radioButtonStyles.label}>
+        <Text style={labelStyle}>
           {label}
         </Text>
       )}