@idealyst/components 1.2.13 → 1.2.15

package/src/Progress/Progress.styles.tsx

@@ -1,8 +1,8 @@
 /**
- * Progress styles using defineStyle with $iterator expansion.
+ * Progress styles using static styles with variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
-import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper, CompoundVariants } 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
@@ -11,26 +11,34 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type ProgressDynamicProps = {
-    size?: Size;
-    intent?: Intent;
-    rounded?: boolean;
+export type ProgressVariants = {
+    size: Size;
+    intent: Intent;
+    rounded: boolean;
 };
 
+// Create intent variants dynamically from theme
+function createIntentVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
 /**
- * Progress styles with intent-based coloring.
+ * Progress styles with static styles and variants.
  */
 export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
-    container: (_props: ProgressDynamicProps) => ({
+    container: {
         gap: 4 as const,
-    }),
+    },
 
-    linearTrack: (_props: ProgressDynamicProps) => ({
+    linearTrack: {
         backgroundColor: theme.colors.border.secondary,
         overflow: 'hidden' as const,
         position: 'relative' as const,
         variants: {
-            // $iterator expands for each progress size
             size: {
                 height: theme.sizes.$progress.linearHeight,
             },
@@ -39,36 +47,60 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 false: { borderRadius: 0 },
             },
         },
-    }),
+    },
 
-    linearBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+    linearBar: {
         height: '100%' as const,
-        backgroundColor: theme.intents[intent].primary,
         variants: {
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
+            intent: createIntentVariants(theme),
         },
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof ProgressVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        backgroundColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
         _web: {
             transition: 'width 0.3s ease' as const,
         },
-    }),
+    },
 
-    indeterminateBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
+    indeterminateBar: {
         position: 'absolute' as const,
         height: '100%' as const,
         width: '40%' as const,
-        backgroundColor: theme.intents[intent].primary,
         variants: {
             rounded: {
                 true: { borderRadius: 9999 },
                 false: { borderRadius: 0 },
             },
+            intent: createIntentVariants(theme),
         },
-    }),
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof ProgressVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        backgroundColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    circularContainer: (_props: ProgressDynamicProps) => ({
+    circularContainer: {
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         position: 'relative' as const,
@@ -78,21 +110,35 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 height: theme.sizes.$progress.circularSize,
             },
         },
-    }),
+    },
 
-    circularTrack: (_props: ProgressDynamicProps) => ({
+    circularTrack: {
         _web: {
             stroke: theme.colors.border.secondary,
         },
-    }),
+    },
 
-    circularBar: ({ intent = 'primary' }: ProgressDynamicProps) => ({
-        _web: {
-            stroke: theme.intents[intent].primary,
+    circularBar: {
+        variants: {
+            intent: createIntentVariants(theme),
         },
-    }),
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof ProgressVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        _web: {
+                            stroke: theme.intents[intent as Intent].primary,
+                        },
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    label: (_props: ProgressDynamicProps) => ({
+    label: {
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
         variants: {
@@ -100,9 +146,9 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 fontSize: theme.sizes.$progress.labelFontSize,
             },
         },
-    }),
+    },
 
-    circularLabel: (_props: ProgressDynamicProps) => ({
+    circularLabel: {
         position: 'absolute' as const,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
@@ -111,5 +157,5 @@ export const progressStyles = defineStyle('Progress', (theme: Theme) => ({
                 fontSize: theme.sizes.$progress.circularLabelFontSize,
             },
         },
-    }),
+    },
 }));

package/src/Progress/Progress.web.tsx

@@ -23,21 +23,19 @@ const Progress: React.FC<ProgressProps> = ({
 }) => {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
 
-  // Apply variants (for size and rounded)
+  // Apply variants (for size, intent, and rounded)
   progressStyles.useVariants({
     size,
+    intent,
     rounded,
   });
 
-  // 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 containerProps = getWebProps([progressStyles.container as any, style as any]);
+  const trackProps = getWebProps([progressStyles.linearTrack as any]);
+  const barProps = getWebProps([progressStyles.linearBar as any, { width: `${percentage}%` }]);
+  const indeterminateProps = getWebProps([progressStyles.indeterminateBar as any]);
+  const labelProps = getWebProps([progressStyles.label as any]);
 
   const getCircularSize = () => {
     if (size === 'sm') return 32;
@@ -53,13 +51,13 @@ const Progress: React.FC<ProgressProps> = ({
     const strokeDashoffset = indeterminate ? circumference * 0.25 : circumference - (percentage / 100) * circumference;
 
     const computedContainerProps = getWebProps([
-      progressStyles.circularContainer,
-      style,
+      progressStyles.circularContainer as any,
+      style as any,
       { display: 'inline-flex' }
     ]);
-    const labelProps = getWebProps([progressStyles.circularLabel]);
-    const trackColorProps = getWebProps([progressStyles.circularTrack]);
-    const barColorProps = getWebProps([(progressStyles.circularBar as any)(dynamicProps)]);
+    const circularLabelProps = getWebProps([progressStyles.circularLabel as any]);
+    const trackColorProps = getWebProps([progressStyles.circularTrack as any]);
+    const barColorProps = getWebProps([progressStyles.circularBar as any]);
 
     return (
       <div {...computedContainerProps} id={id} data-testid={testID}>
@@ -93,7 +91,7 @@ const Progress: React.FC<ProgressProps> = ({
           />
         </svg>
         {showLabel && (
-          <span {...labelProps}>
+          <span {...circularLabelProps}>
             {label || `${Math.round(percentage)}%`}
           </span>
         )}

package/src/SVGImage/SVGImage.web.tsx

@@ -56,7 +56,7 @@ const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
 
   // Use getWebProps to generate className and ref for web
   const containerWebProps = getWebProps(containerStyleArray);
-  const imageWebProps = getWebProps(svgImageStyles.image);
+  const imageWebProps = getWebProps([svgImageStyles.image as any]);
 
   // Apply custom color if provided
   // Convert React Native resize modes to CSS object-fit values

package/src/Select/Select.web.tsx

@@ -258,7 +258,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
       </div>
       <PositionedPortal
         open={isOpen}
-        anchor={triggerRef}
+        anchor={triggerRef as React.RefObject<HTMLElement>}
         placement="bottom-start"
         offset={4}
         onClickOutside={handleClose}
@@ -280,12 +280,12 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {searchable && (
               <div {...getWebProps([searchContainerStyle])}>
                 <input
+                  {...getWebProps([searchInputStyle])}
                   ref={searchInputRef}
                   type="text"
                   placeholder="Search options..."
                   value={searchTerm}
                   onChange={handleSearchChange}
-                  {...getWebProps([searchInputStyle])}
                 />
               </div>
             )}

package/src/Skeleton/Skeleton.native.tsx

@@ -23,17 +23,17 @@ const Skeleton = forwardRef<View, SkeletonProps>(({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
 }, ref) => {
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
     return getNativeLiveRegionAccessibilityProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading content',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? true,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy]);
   skeletonStyles.useVariants({
     shape,
     animation,

package/src/Skeleton/Skeleton.web.tsx

@@ -19,7 +19,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
   id,
   // Accessibility props
   accessibilityLabel,
-  accessibilityLiveRegion,
+  accessibilityLive,
   accessibilityBusy,
   accessibilityAtomic,
   accessibilityRelevant,
@@ -28,12 +28,12 @@ const Skeleton: React.FC<SkeletonProps> = ({
   const ariaProps = useMemo(() => {
     return getWebLiveRegionAriaProps({
       accessibilityLabel: accessibilityLabel ?? 'Loading content',
-      accessibilityLiveRegion: accessibilityLiveRegion ?? 'polite',
+      accessibilityLive: accessibilityLive ?? 'polite',
       accessibilityBusy: accessibilityBusy ?? true,
       accessibilityAtomic,
       accessibilityRelevant,
     });
-  }, [accessibilityLabel, accessibilityLiveRegion, accessibilityBusy, accessibilityAtomic, accessibilityRelevant]);
+  }, [accessibilityLabel, accessibilityLive, accessibilityBusy, accessibilityAtomic, accessibilityRelevant]);
   skeletonStyles.useVariants({
     shape,
     animation,

package/src/Slider/Slider.native.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, forwardRef, useMemo } from 'react';
-import { View } from 'react-native';
+import { View, LayoutChangeEvent } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
@@ -222,7 +222,7 @@ const Slider = forwardRef<View, SliderProps>(({
         <GestureDetector gesture={composedGesture}>
           <View
             style={trackStyle}
-            onLayout={(e) => {
+            onLayout={(e: LayoutChangeEvent) => {
               const width = e.nativeEvent.layout.width;
               trackWidth.value = width;
               setTrackWidthState(width);

package/src/Slider/Slider.styles.tsx

@@ -1,8 +1,8 @@
 /**
- * Slider styles using defineStyle with dynamic props.
+ * Slider styles using static styles with variants.
  */
 import { StyleSheet } from 'react-native-unistyles';
-import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import { defineStyle, ThemeStyleWrapper, CompoundVariants } from '@idealyst/theme';
 import type { Theme as BaseTheme, Intent, Size } from '@idealyst/theme';
 import { ViewStyleSize } from '../utils/viewStyleProps';
 
@@ -12,20 +12,47 @@ void StyleSheet;
 // Wrap theme for $iterator support
 type Theme = ThemeStyleWrapper<BaseTheme>;
 
-export type SliderDynamicProps = {
-    size?: Size;
-    intent?: Intent;
-    disabled?: boolean;
+export type SliderVariants = {
+    size: Size;
+    intent: Intent;
+    disabled: boolean;
     margin?: ViewStyleSize;
     marginVertical?: ViewStyleSize;
     marginHorizontal?: ViewStyleSize;
 };
 
+// Create intent variants dynamically from theme
+function createIntentVariants(theme: Theme) {
+    const variants: Record<string, object> = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
+// Create compound variants for intent-specific styles
+function createSliderCompoundVariants(theme: Theme): CompoundVariants<keyof SliderVariants> {
+    const compoundVariants: CompoundVariants<keyof SliderVariants> = [];
+
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        // filledTrack intent colors are handled inline since they need per-element targeting
+        // thumb border color by intent
+        compoundVariants.push({
+            intent,
+            styles: {},
+        });
+    }
+
+    return compoundVariants;
+}
+
 /**
- * Slider styles with intent/disabled handling.
+ * Slider styles with static styles and variants.
  */
 export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
-    container: (_props: SliderDynamicProps) => ({
+    container: {
         gap: 4,
         paddingVertical: 8,
         variants: {
@@ -39,44 +66,67 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
                 marginHorizontal: theme.sizes.$view.padding,
             },
         },
-    }),
+    },
 
-    sliderWrapper: (_props: SliderDynamicProps) => ({
+    sliderWrapper: {
         position: 'relative' as const,
         paddingVertical: 4,
-    }),
+    },
 
-    track: ({ disabled = false }: SliderDynamicProps) => ({
+    track: {
         backgroundColor: theme.colors.surface.tertiary,
         borderRadius: 9999,
         position: 'relative' as const,
-        opacity: disabled ? 0.5 : 1,
         variants: {
             size: {
                 height: theme.sizes.$slider.trackHeight,
             },
+            disabled: {
+                true: {
+                    opacity: 0.5,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
+                },
+                false: {
+                    opacity: 1,
+                    _web: {
+                        cursor: 'pointer',
+                    },
+                },
+            },
         },
-        _web: {
-            cursor: disabled ? 'not-allowed' : 'pointer',
-        },
-    }),
+    },
 
-    filledTrack: ({ intent = 'primary' }: SliderDynamicProps) => ({
+    filledTrack: {
         position: 'absolute' as const,
         height: '100%',
         borderRadius: 9999,
         top: 0,
         left: 0,
-        backgroundColor: theme.intents[intent].primary,
-    }),
+        variants: {
+            intent: createIntentVariants(theme),
+        },
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof SliderVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        backgroundColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    thumb: ({ intent = 'primary', disabled = false }: SliderDynamicProps) => ({
+    thumb: {
         position: 'absolute' as const,
         backgroundColor: theme.colors.surface.primary,
         borderRadius: 9999,
         borderWidth: 2,
         borderStyle: 'solid' as const,
-        borderColor: theme.intents[intent].primary,
         top: '50%',
         display: 'flex' as const,
         alignItems: 'center' as const,
@@ -86,35 +136,59 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
         shadowOpacity: 0.2,
         shadowRadius: 4,
         elevation: 2,
-        opacity: disabled ? 0.6 : 1,
         variants: {
             size: {
                 width: theme.sizes.$slider.thumbSize,
                 height: theme.sizes.$slider.thumbSize,
             },
+            intent: createIntentVariants(theme),
+            disabled: {
+                true: {
+                    opacity: 0.6,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
+                },
+                false: {
+                    opacity: 1,
+                    _web: {
+                        cursor: 'grab',
+                    },
+                },
+            },
         },
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof SliderVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        borderColor: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
         _web: {
             boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
             transform: 'translate(-50%, -50%)',
             transition: 'transform 0.15s ease, box-shadow 0.2s ease',
-            cursor: disabled ? 'not-allowed' : 'grab',
-            _hover: disabled ? {} : { transform: 'translate(-50%, -50%) scale(1.05)' },
-            _active: disabled ? {} : { cursor: 'grabbing', transform: 'translate(-50%, -50%) scale(1.1)' },
+            _hover: { transform: 'translate(-50%, -50%) scale(1.05)' },
+            _active: { cursor: 'grabbing', transform: 'translate(-50%, -50%) scale(1.1)' },
         },
-    }),
+    },
 
-    thumbActive: (_props: SliderDynamicProps) => ({
+    thumbActive: {
         _web: {
             transform: 'translate(-50%, -50%) scale(1.1)',
         },
-    }),
+    },
 
-    thumbIcon: ({ intent = 'primary' }: SliderDynamicProps) => ({
+    thumbIcon: {
         display: 'flex' as const,
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         flexShrink: 0,
-        color: theme.intents[intent].primary,
         variants: {
             size: {
                 width: theme.sizes.$slider.thumbIconSize,
@@ -124,36 +198,49 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
                 minHeight: theme.sizes.$slider.thumbIconSize,
                 maxHeight: theme.sizes.$slider.thumbIconSize,
             },
+            intent: createIntentVariants(theme),
         },
-    }),
+        compoundVariants: (() => {
+            const cv: CompoundVariants<keyof SliderVariants> = [];
+            for (const intent in theme.intents) {
+                cv.push({
+                    intent,
+                    styles: {
+                        color: theme.intents[intent as Intent].primary,
+                    },
+                });
+            }
+            return cv;
+        })(),
+    },
 
-    valueLabel: (_props: SliderDynamicProps) => ({
+    valueLabel: {
         fontSize: 12,
         fontWeight: '600' as const,
         color: theme.colors.text.primary,
         textAlign: 'center' as const,
-    }),
+    },
 
-    minMaxLabels: (_props: SliderDynamicProps) => ({
+    minMaxLabels: {
         flexDirection: 'row' as const,
         justifyContent: 'space-between' as const,
         marginTop: 4,
-    }),
+    },
 
-    minMaxLabel: (_props: SliderDynamicProps) => ({
+    minMaxLabel: {
         fontSize: 12,
         color: theme.colors.text.secondary,
-    }),
+    },
 
-    marks: (_props: SliderDynamicProps) => ({
+    marks: {
         position: 'absolute' as const,
         width: '100%',
         height: '100%',
         top: 0,
         left: 0,
-    }),
+    },
 
-    mark: (_props: SliderDynamicProps) => ({
+    mark: {
         position: 'absolute' as const,
         width: 2,
         backgroundColor: theme.colors.border.secondary,
@@ -166,9 +253,9 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
         _web: {
             transform: 'translate(-50%, -50%)',
         },
-    }),
+    },
 
-    markLabel: (_props: SliderDynamicProps) => ({
+    markLabel: {
         position: 'absolute' as const,
         fontSize: 10,
         color: theme.colors.text.secondary,
@@ -178,5 +265,5 @@ export const sliderStyles = defineStyle('Slider', (theme: Theme) => ({
             transform: 'translateX(-50%)',
             whiteSpace: 'nowrap',
         },
-    }),
+    },
 }));