@idealyst/components 1.1.6 → 1.1.7

package/src/Popover/Popover.native.tsx

@@ -154,7 +154,7 @@ const Popover = forwardRef<View, PopoverProps>(({
               left={popoverPosition.left}
               width={Math.min(popoverPosition.width || 200, maxPopoverWidth)}
               maxHeight={500}
-              style={[popoverStyles.container, style]}
+              style={[(popoverStyles.container as any)({}), style]}
               onLayout={handlePopoverLayout}
               {...nativeA11yProps}
             >

package/src/Popover/Popover.styles.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, StylesheetStyles} from '@idealyst/theme';
+import { Theme, StylesheetStyles } from '@idealyst/theme';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 
@@ -81,17 +82,14 @@ function createArrowPlacementVariants(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.
-// @ts-ignore - TS language server needs restart to pick up theme structure changes
-export const popoverStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
+// Style creators for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
         backgroundColor: theme.colors.surface.primary,
         borderRadius: 8,
         borderWidth: 1,
         borderColor: theme.colors.border.primary,
-        borderStyle: 'solid',
+        borderStyle: 'solid' as const,
         shadowColor: '#000',
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.1,
@@ -103,26 +101,39 @@ export const popoverStyles = StyleSheet.create((theme: Theme) => {
             transition: 'opacity 150ms ease-out, transform 150ms ease-out',
             transformOrigin: 'center center',
         },
-    },
-    content: {
-        padding: 16,
-    },
-    arrow: {
-        position: 'absolute',
-        width: 12,
-        height: 12,
-        backgroundColor: theme.colors.surface.primary,
-        variants: {
-            placement: createArrowPlacementVariants(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 popoverStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Popover', theme, {
+        container: createContainerStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles (not extended)
+        content: {
+            padding: 16,
         },
-        _web: {
-            transform: 'rotate(45deg)',
-            boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
-        },
-    },
-    backdrop: {
-        flex: 1,
-        backgroundColor: 'transparent',
-    },
-  };
+        arrow: {
+            position: 'absolute',
+            width: 12,
+            height: 12,
+            backgroundColor: theme.colors.surface.primary,
+            variants: {
+                placement: createArrowPlacementVariants(theme),
+            },
+            _web: {
+                transform: 'rotate(45deg)',
+                boxShadow: '-2px 2px 4px rgba(0, 0, 0, 0.1)',
+            },
+        },
+        backdrop: {
+            flex: 1,
+            backgroundColor: 'transparent',
+        },
+    };
 });

package/src/Popover/Popover.web.tsx

@@ -44,7 +44,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(({
 
   popoverStyles.useVariants({});
 
-  const containerProps = getWebProps([popoverStyles.container]);
+  const containerProps = getWebProps([(popoverStyles.container as any)({})]);
   const contentProps = getWebProps([popoverStyles.content]);
 
   const mergedPopoverRef = useMergeRefs(ref, popoverRef);

package/src/Pressable/Pressable.native.tsx

@@ -26,6 +26,8 @@ const Pressable = forwardRef<View, PressableProps>(({
     paddingHorizontal,
   });
 
+  const pressableStyle = (pressableStyles.pressable as any)({});
+
   return (
     <TouchableWithoutFeedback
       onPress={disabled ? undefined : onPress}
@@ -35,7 +37,7 @@ const Pressable = forwardRef<View, PressableProps>(({
       testID={testID}
       accessibilityLabel={accessibilityLabel}
     >
-      <View ref={ref} nativeID={id} style={[pressableStyles.pressable, style]}>
+      <View ref={ref} nativeID={id} style={[pressableStyle, style]}>
         {children}
       </View>
     </TouchableWithoutFeedback>

package/src/Pressable/Pressable.styles.tsx

@@ -5,20 +5,27 @@ import {
   buildPaddingVerticalVariants,
   buildPaddingHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
-const createPressableStyles = (theme: Theme) => {
-  return {
-    variants: {
-      // Spacing variants from PressableSpacingStyleProps
-      padding: buildPaddingVariants(theme),
-      paddingVertical: buildPaddingVerticalVariants(theme),
-      paddingHorizontal: buildPaddingHorizontalVariants(theme),
-    },
-  } as const;
-};
+// Style creators for extension support
+function createPressableStyles(theme: Theme) {
+    return () => ({
+        variants: {
+            // Spacing variants from PressableSpacingStyleProps
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+        },
+    });
+}
 
 export const pressableStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    pressable: createPressableStyles(theme),
-  };
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('Pressable', theme, {
+        pressable: createPressableStyles(theme),
+    });
+
+    return {
+        ...extended,
+    };
 });

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.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme, Intent, Size, CompoundVariants, StaticStyles } from '@idealyst/theme';
+import { Theme, Intent, Size } from '@idealyst/theme';
 import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type ProgressSize = Size;
 type ProgressIntent = Intent;
@@ -11,6 +12,10 @@ export type ProgressVariants = {
     rounded: boolean;
 }
 
+type ProgressDynamicProps = {
+    intent?: ProgressIntent;
+};
+
 function createLinearTrackSizeVariants(theme: Theme) {
     return buildSizeVariants(theme, 'progress', (size) => ({
         height: size.linearHeight,
@@ -36,58 +41,81 @@ function createCircularLabelSizeVariants(theme: Theme) {
     }));
 }
 
-function createIntentVariants(theme: Theme) {
-    const variants: any = {};
-    for (const intent in theme.intents) {
-        variants[intent] = {};
-    }
-    return variants;
+/**
+ * Get bar background color based on intent
+ */
+function getBarBackgroundColor(theme: Theme, intent: ProgressIntent): string {
+    return theme.intents[intent].primary;
 }
 
-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,
+/**
+ * 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 },
+                },
             },
-        });
-    }
-
-    return compoundVariants;
+            _web: {
+                transition: 'width 0.3s ease' as const,
+            },
+        } as const;
+    };
 }
 
-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,
+/**
+ * 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;
+    };
+}
 
-    return compoundVariants;
+/**
+ * Create dynamic circular bar styles
+ */
+function createCircularBarStyles(theme: Theme) {
+    return ({ intent = 'primary' }: ProgressDynamicProps) => {
+        return {
+            _web: {
+                stroke: getBarBackgroundColor(theme, intent),
+            },
+        } 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 progressStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
+/**
+ * Create container styles
+ */
+function createContainerStyles() {
+    return () => ({
         gap: 4 as const,
-    },
-    linearTrack: {
+    });
+}
+
+/**
+ * Create linear track styles
+ */
+function createLinearTrackStyles(theme: Theme) {
+    return () => ({
         backgroundColor: theme.colors.border.secondary,
         overflow: 'hidden' as const,
         position: 'relative' as const,
@@ -98,67 +126,79 @@ export const progressStyles = StyleSheet.create((theme: Theme) => {
                 false: { borderRadius: 0 },
             },
         },
-    },
-    linearBar: {
-        height: '100%' as const,
-        variants: {
-            intent: createIntentVariants(theme),
-            rounded: {
-                true: { borderRadius: 9999 },
-                false: { borderRadius: 0 },
-            },
-        },
-        compoundVariants: createLinearBarCompoundVariants(theme),
-        _web: {
-            transition: 'width 0.3s ease' as const,
-        },
-    },
-    indeterminateBar: {
-        position: 'absolute' as const,
-        height: '100%' as const,
-        width: '40%' as const,
-        variants: {
-            intent: createIntentVariants(theme),
-            rounded: {
-                true: { borderRadius: 9999 },
-                false: { borderRadius: 0 },
-            },
-        },
-        compoundVariants: createLinearBarCompoundVariants(theme),
-    },
-    circularContainer: {
+    });
+}
+
+/**
+ * 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,
-    } as const,
-    circularTrack: {
+    });
+}
+
+/**
+ * Create circular track styles
+ */
+function createCircularTrackStyles(theme: Theme) {
+    return () => ({
         _web: {
             stroke: theme.colors.border.secondary,
-        }
-    },
-    circularBar: {
-        variants: {
-            intent: createIntentVariants(theme),
         },
-        compoundVariants: createCircularBarCompoundVariants(theme),
-    },
-    label: {
+    });
+}
+
+/**
+ * Create label styles
+ */
+function createLabelStyles(theme: Theme) {
+    return () => ({
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
         variants: {
             size: createLabelSizeVariants(theme),
         },
-    },
-    circularLabel: {
+    });
+}
+
+/**
+ * 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
+  const extended = applyExtensions('Progress', theme, {
+    container: createContainerStyles(),
+    linearTrack: createLinearTrackStyles(theme),
+    linearBar: createLinearBarStyles(theme),
+  });
+
+  return {
+    ...extended,
+    // 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.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,25 @@ const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>
     outputRange: [0, 1],
   });
 
+  // Get dynamic styles
+  const containerStyle = (radioButtonStyles.container as any)({});
+  const radioStyle = (radioButtonStyles.radio as any)({ intent });
+  const radioDotStyle = (radioButtonStyles.radioDot as any)({ intent });
+
   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 }],
             },

package/src/RadioButton/RadioButton.styles.tsx

@@ -6,6 +6,7 @@ import {
   buildMarginVerticalVariants,
   buildMarginHorizontalVariants,
 } from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
 
 type RadioButtonSize = Size;
 type RadioButtonIntent = Intent;
@@ -117,56 +118,62 @@ function createRadioDotStyles(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 radioButtonStyles = StyleSheet.create((theme: Theme) => {
-  return {
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
+// Container style creator for extension support
+function createContainerStyles(theme: Theme) {
+    return () => ({
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
         paddingVertical: 4,
         variants: {
             size: buildSizeVariants(theme, 'radioButton', (size) => ({
                 gap: size.gap,
             })),
-            // Spacing variants from FormInputStyleProps
             margin: buildMarginVariants(theme),
             marginVertical: buildMarginVerticalVariants(theme),
             marginHorizontal: buildMarginHorizontalVariants(theme),
         } as const,
-    },
-    radio: createRadioStyles(theme),
-    radioDot: createRadioDotStyles(theme),
-    label: {
-        color: theme.colors.text.primary,
-        variants: {
-            size: buildSizeVariants(theme, 'radioButton', (size) => ({
-                fontSize: size.fontSize,
-            })),
-            disabled: {
-                true: {
-                    opacity: 0.5,
-                },
-                false: {
-                    opacity: 1,
+    });
+}
+
+// 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 radioButtonStyles = StyleSheet.create((theme: Theme) => {
+    // Apply extensions to main visual elements
+    const extended = applyExtensions('RadioButton', theme, {
+        container: createContainerStyles(theme),
+        radio: createRadioStyles(theme),
+        radioDot: createRadioDotStyles(theme),
+    });
+
+    return {
+        ...extended,
+        // Minor utility styles
+        label: {
+            color: theme.colors.text.primary,
+            variants: {
+                size: buildSizeVariants(theme, 'radioButton', (size) => ({
+                    fontSize: size.fontSize,
+                })),
+                disabled: {
+                    true: { opacity: 0.5 },
+                    false: { opacity: 1 },
                 },
             },
         },
-    },
-    groupContainer: {
-        gap: 4,
-        variants: {
-            orientation: {
-                horizontal: {
-                    flexDirection: 'row',
-                    flexWrap: 'wrap',
-                    gap: 16,
-                },
-                vertical: {
-                    flexDirection: 'column',
+        groupContainer: {
+            gap: 4,
+            variants: {
+                orientation: {
+                    horizontal: {
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        gap: 16,
+                    },
+                    vertical: {
+                        flexDirection: 'column',
+                    },
                 },
             },
         },
-    },
-  };
+    };
 });