@idealyst/components 1.2.29 → 1.2.31

package/src/RadioButton/RadioButton.styles.tsx

@@ -49,60 +49,80 @@ export const radioButtonStyles = defineStyle('RadioButton', (theme: Theme) => ({
         },
     }),
 
-    radio: ({ intent = 'primary', checked = false, disabled = false }: RadioButtonDynamicProps) => {
-        const intentValue = theme.intents[intent];
-
-        return {
-            borderRadius: 9999,
-            borderWidth: 1.5,
-            borderStyle: 'solid' as const,
-            alignItems: 'center' as const,
-            justifyContent: 'center' as const,
-            backgroundColor: disabled
-                ? theme.colors.surface.tertiary
-                : theme.colors.surface.primary,
-            borderColor: checked ? intentValue.primary : theme.colors.border.primary,
-            opacity: disabled ? 0.5 : 1,
-            variants: {
-                size: {
-                    width: theme.sizes.$radioButton.radioSize,
-                    height: theme.sizes.$radioButton.radioSize,
+    radio: (_props: RadioButtonDynamicProps) => ({
+        borderRadius: 9999,
+        borderWidth: 1.5,
+        borderStyle: 'solid' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        variants: {
+            size: {
+                width: theme.sizes.$radioButton.radioSize,
+                height: theme.sizes.$radioButton.radioSize,
+            },
+            checked: {
+                true: {
+                    borderColor: theme.$intents.primary,
+                },
+                false: {
+                    borderColor: theme.colors.border.primary,
                 },
             },
-            _web: {
-                transition: 'all 0.2s ease',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                _hover: disabled ? {} : { opacity: 0.8 },
-                _active: disabled ? {} : { opacity: 0.6 },
+            disabled: {
+                true: {
+                    backgroundColor: theme.colors.surface.tertiary,
+                    opacity: 0.5,
+                },
+                false: {
+                    backgroundColor: theme.colors.surface.primary,
+                    opacity: 1,
+                },
             },
-        } as const;
-    },
+        },
+        _web: {
+            transition: 'all 0.2s ease',
+        },
+    }),
 
-    radioDot: ({ intent = 'primary' }: RadioButtonDynamicProps) => ({
+    radioDot: (_props: RadioButtonDynamicProps) => ({
         borderRadius: 9999,
-        backgroundColor: theme.intents[intent].primary,
         variants: {
             size: {
                 width: theme.sizes.$radioButton.radioDotSize,
                 height: theme.sizes.$radioButton.radioDotSize,
             },
+            intent: {
+                backgroundColor: theme.$intents.primary,
+            },
         },
     }),
 
-    label: ({ disabled = false }: RadioButtonDynamicProps) => ({
+    label: (_props: RadioButtonDynamicProps) => ({
         color: theme.colors.text.primary,
-        opacity: disabled ? 0.5 : 1,
         variants: {
             size: {
                 fontSize: theme.sizes.$radioButton.fontSize,
             },
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
         },
     }),
 
-    groupContainer: ({ orientation = 'vertical' }: RadioButtonDynamicProps) => ({
+    groupContainer: (_props: RadioButtonDynamicProps) => ({
         gap: 4,
-        flexDirection: orientation === 'horizontal' ? ('row' as const) : ('column' as const),
-        flexWrap: orientation === 'horizontal' ? ('wrap' as const) : undefined,
-        ...(orientation === 'horizontal' ? { gap: 16 } : {}),
+        variants: {
+            orientation: {
+                horizontal: {
+                    flexDirection: 'row' as const,
+                    flexWrap: 'wrap' as const,
+                    gap: 16,
+                },
+                vertical: {
+                    flexDirection: 'column' as const,
+                },
+            },
+        },
     }),
 }));

package/src/RadioButton/RadioGroup.native.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { radioButtonStyles } from './RadioButton.styles';
 import type { RadioGroupProps } from './types';
 import { getNativeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 const RadioGroupContext = React.createContext<{
   value?: string;
@@ -12,7 +13,7 @@ const RadioGroupContext = React.createContext<{
 
 export const useRadioGroup = () => React.useContext(RadioGroupContext);
 
-const RadioGroup = forwardRef<View, RadioGroupProps>(({
+const RadioGroup = forwardRef<IdealystElement, RadioGroupProps>(({
   value,
   onValueChange,
   disabled = false,
@@ -43,7 +44,7 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(({
   return (
     <RadioGroupContext.Provider value={{ value, onValueChange, disabled }}>
       <View
-        ref={ref}
+        ref={ref as any}
         nativeID={id}
         style={[
           radioButtonStyles.groupContainer,

package/src/SVGImage/SVGImage.native.tsx

@@ -3,8 +3,9 @@ import { View } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 import { SVGImageProps } from './types';
 import { svgImageStyles } from './SVGImage.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const SVGImage = forwardRef<View, SVGImageProps>(({
+const SVGImage = forwardRef<IdealystElement, SVGImageProps>(({
   source,
   width,
   height,
@@ -19,7 +20,7 @@ const SVGImage = forwardRef<View, SVGImageProps>(({
   // Apply variants using Unistyles 3.0 pattern
   if (intent) {
     svgImageStyles.useVariants({
-      intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
+      intent: intent as 'primary' | 'success' | 'danger' | 'warning' | 'neutral',
     });
   }
 
@@ -31,7 +32,7 @@ const SVGImage = forwardRef<View, SVGImageProps>(({
   if (typeof source === 'function') {
     const SvgComponent = source;
     return (
-      <View ref={ref} nativeID={id} style={[svgImageStyles.container, style]} testID={testID} {...props}>
+      <View ref={ref as any} nativeID={id} style={[svgImageStyles.container, style]} testID={testID} {...props}>
         <SvgComponent
           width={finalWidth}
           height={finalHeight}
@@ -46,7 +47,7 @@ const SVGImage = forwardRef<View, SVGImageProps>(({
   const sourceUri = typeof source === 'string' ? source : source.uri;
 
   return (
-    <View ref={ref} nativeID={id} style={[svgImageStyles.container, style]} testID={testID} {...props}>
+    <View ref={ref as any} nativeID={id} style={[svgImageStyles.container, style]} testID={testID} {...props}>
       <SvgUri
         uri={sourceUri}
         width={finalWidth}

package/src/SVGImage/SVGImage.styles.tsx

@@ -18,22 +18,56 @@ export type SVGImageDynamicProps = {
 /**
  * SVGImage styles with intent-based coloring.
  * Uses CSS filters on web and tintColor on native.
+ *
+ * Note: CSS filters are hardcoded per-intent because they can't be
+ * dynamically computed from color values.
  */
 export const svgImageStyles = defineStyle('SVGImage', (theme: Theme) => ({
-    container: ({ intent }: SVGImageDynamicProps) => ({
+    container: (_props: SVGImageDynamicProps) => ({
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
-        // Native: use tintColor for intent
-        ...(intent ? { tintColor: theme.intents[intent].primary } : {}),
+        variants: {
+            intent: {
+                primary: {
+                    tintColor: theme.intents.primary.primary,
+                    _web: {
+                        filter: 'brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)',
+                    },
+                },
+                success: {
+                    tintColor: theme.intents.success.primary,
+                    _web: {
+                        filter: 'brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)',
+                    },
+                },
+                danger: {
+                    tintColor: theme.intents.danger.primary,
+                    _web: {
+                        filter: 'brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)',
+                    },
+                },
+                warning: {
+                    tintColor: theme.intents.warning.primary,
+                    _web: {
+                        filter: 'brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)',
+                    },
+                },
+                neutral: {
+                    tintColor: theme.intents.neutral.primary,
+                    _web: {
+                        filter: 'brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)',
+                    },
+                },
+                info: {
+                    tintColor: theme.intents.info.primary,
+                    _web: {
+                        filter: 'brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)',
+                    },
+                },
+            },
+        },
         _web: {
             userSelect: 'none',
-            // Web: use CSS filters for intent coloring
-            ...(intent === 'primary' ? { filter: 'brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)' } : {}),
-            ...(intent === 'success' ? { filter: 'brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(3323%) hue-rotate(84deg) brightness(119%) contrast(119%)' } : {}),
-            ...(intent === 'error' ? { filter: 'brightness(0) saturate(100%) invert(23%) sepia(89%) saturate(7395%) hue-rotate(4deg) brightness(102%) contrast(118%)' } : {}),
-            ...(intent === 'warning' ? { filter: 'brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(4341%) hue-rotate(21deg) brightness(101%) contrast(101%)' } : {}),
-            ...(intent === 'neutral' ? { filter: 'brightness(0) saturate(100%) invert(52%) sepia(23%) saturate(3207%) hue-rotate(314deg) brightness(99%) contrast(96%)' } : {}),
-            ...(intent === 'info' ? { filter: 'brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(2582%) hue-rotate(165deg) brightness(99%) contrast(91%)' } : {}),
         },
     }),
 

package/src/SVGImage/SVGImage.web.tsx

@@ -3,8 +3,9 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { SVGImageProps } from './types';
 import { svgImageStyles } from './SVGImage.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
-const SVGImage = forwardRef<HTMLDivElement, SVGImageProps>(({
+const SVGImage = forwardRef<IdealystElement, SVGImageProps>(({
   source,
   width,
   height,

package/src/Screen/Screen.native.tsx

@@ -3,8 +3,9 @@ import { View as RNView, ScrollView as RNScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
+const Screen = forwardRef<IdealystElement, ScreenProps>(({
   children,
   background = 'screen',
   safeArea = true,

package/src/Screen/Screen.web.tsx

@@ -3,12 +3,13 @@ import { getWebProps } from 'react-native-unistyles/web';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Full-screen container for page layouts with background color and safe area support.
  * Provides the outermost wrapper for screen-level content.
  */
-const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
+const Screen = forwardRef<IdealystElement, ScreenProps>(({
   children,
   background = 'screen',
   safeArea = false,

package/src/Select/Select.native.tsx

@@ -16,11 +16,12 @@ import { selectStyles } from './Select.styles';
 import { BoundedModalContent } from '../internal/BoundedModalContent.native';
 import { useSmartPosition } from '../hooks/useSmartPosition.native';
 import useMergeRefs from '../hooks/useMergeRefs';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Select = forwardRef<View, SelectProps>(({
+const Select = forwardRef<IdealystElement, SelectProps>(({
   options,
   value,
-  onValueChange,
+  onChange,
   placeholder = 'Select an option',
   disabled = false,
   error = false,
@@ -146,7 +147,7 @@ const Select = forwardRef<View, SelectProps>(({
         if (buttonIndex !== cancelButtonIndex && buttonIndex < options.length) {
           const selectedOption = options[buttonIndex];
           if (!selectedOption.disabled) {
-            onValueChange?.(selectedOption.value);
+            onChange?.(selectedOption.value);
           }
         }
       }
@@ -155,7 +156,7 @@ const Select = forwardRef<View, SelectProps>(({
 
   const handleOptionSelect = (option: SelectOption) => {
     if (!option.disabled) {
-      onValueChange?.(option.value);
+      onChange?.(option.value);
       closeDropdown();
     }
   };
@@ -318,7 +319,7 @@ const Select = forwardRef<View, SelectProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID}>
+    <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID}>
       {label && (
         <Text style={labelStyle}>
           {label}

package/src/Select/Select.styles.tsx

@@ -260,7 +260,7 @@ export const selectStyles = defineStyle('Select', (theme: Theme) => ({
     helperText: ({ error = false }: SelectDynamicProps) => ({
         fontSize: 12,
         marginTop: 4,
-        color: error ? theme.intents.error.primary : theme.colors.text.secondary,
+        color: error ? theme.intents.danger.primary : theme.colors.text.secondary,
     }),
 
     overlay: (_props: SelectDynamicProps) => ({

package/src/Select/Select.web.tsx

@@ -6,15 +6,16 @@ import useMergeRefs from '../hooks/useMergeRefs';
 import { PositionedPortal } from '../internal/PositionedPortal';
 import { selectStyles } from './Select.styles';
 import { SelectOption, SelectProps } from './types';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Dropdown selection component with search, keyboard navigation, and custom option rendering.
  * Supports single selection with filterable options list.
  */
-const Select = forwardRef<HTMLDivElement, SelectProps>(({
+const Select = forwardRef<IdealystElement, SelectProps>(({
   options,
   value,
-  onValueChange,
+  onChange,
   placeholder = 'Select an option',
   disabled = false,
   error = false,
@@ -166,7 +167,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(({
 
   const handleOptionSelect = (option: SelectOption) => {
     if (!option.disabled) {
-      onValueChange?.(option.value);
+      onChange?.(option.value);
       setIsOpen(false);
       setSearchTerm('');
       triggerRef.current?.focus();

package/src/Select/types.ts

@@ -49,7 +49,7 @@ export interface SelectProps extends FormInputStyleProps, FormAccessibilityProps
   /**
    * Called when the selected value changes
    */
-  onValueChange?: (value: string) => void;
+  onChange?: (value: string) => void;
 
   /**
    * Placeholder text when no value is selected

package/src/Skeleton/Skeleton.native.tsx

@@ -11,8 +11,9 @@ import Animated, {
 import { skeletonStyles } from './Skeleton.styles';
 import type { SkeletonProps, SkeletonGroupProps } from './types';
 import { getNativeLiveRegionAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Skeleton = forwardRef<View, SkeletonProps>(({
+const Skeleton = forwardRef<IdealystElement, SkeletonProps>(({
   width: _width = '100%',
   height: _height = 20,
   shape = 'rectangle',

package/src/Skeleton/Skeleton.web.tsx

@@ -39,7 +39,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
     animation,
   });
 
-  const skeletonProps = getWebProps([skeletonStyles.skeleton, style as any]);
+  const skeletonProps = getWebProps([skeletonStyles.skeleton({}), style as any]);
 
   // Apply custom border radius if provided and shape is 'rounded'
   const customStyles: React.CSSProperties = {

package/src/Slider/Slider.native.tsx

@@ -8,8 +8,9 @@ import Text from '../Text';
 import type { SliderProps } from './types';
 import { isIconName } from '../Icon/icon-resolver';
 import { getNativeRangeAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Slider = forwardRef<View, SliderProps>(({
+const Slider = forwardRef<IdealystElement, SliderProps>(({
   value: controlledValue,
   defaultValue = 0,
   min = 0,
@@ -26,8 +27,8 @@ const Slider = forwardRef<View, SliderProps>(({
   margin,
   marginVertical,
   marginHorizontal,
-  onValueChange,
-  onValueCommit,
+  onChange,
+  onChangeCommit,
   style,
   testID,
   id,
@@ -79,12 +80,12 @@ const Slider = forwardRef<View, SliderProps>(({
       setInternalValue(newValue);
     }
 
-    onValueChange?.(newValue);
-  }, [controlledValue, onValueChange]);
+    onChange?.(newValue);
+  }, [controlledValue, onChange]);
 
   const commitValue = useCallback((finalValue: number) => {
-    onValueCommit?.(finalValue);
-  }, [onValueCommit]);
+    onChangeCommit?.(finalValue);
+  }, [onChangeCommit]);
 
   // Generate native accessibility props
   const nativeA11yProps = useMemo(() => {
@@ -211,7 +212,7 @@ const Slider = forwardRef<View, SliderProps>(({
   const trackStyle = (sliderStyles.track as any)({});
 
   return (
-    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
+    <View ref={ref as any} nativeID={id} style={[containerStyle, style]} testID={testID} {...nativeA11yProps}>
       {showValue && (
         <View style={sliderStyles.valueLabel as any}>
           <Text>{value}</Text>

package/src/Slider/Slider.web.tsx

@@ -6,12 +6,13 @@ import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
 import { isIconName } from '../Icon/icon-resolver';
 import useMergeRefs from '../hooks/useMergeRefs';
 import { getWebRangeAriaProps, generateAccessibilityId, SLIDER_KEYS, matchesKey } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
 /**
  * Range slider for selecting numeric values within a min/max range.
  * Supports marks, value labels, keyboard navigation, and custom step increments.
  */
-const Slider = forwardRef<HTMLDivElement, SliderProps>(({
+const Slider = forwardRef<IdealystElement, SliderProps>(({
   value: controlledValue,
   defaultValue = 0,
   min = 0,
@@ -28,8 +29,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
   margin,
   marginVertical,
   marginHorizontal,
-  onValueChange,
-  onValueCommit,
+  onChange,
+  onChangeCommit,
   style,
   testID,
   id,
@@ -93,8 +94,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
       setInternalValue(clampedValue);
     }
 
-    onValueChange?.(clampedValue);
-  }, [controlledValue, clampValue, onValueChange]);
+    onChange?.(clampedValue);
+  }, [controlledValue, clampValue, onChange]);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     if (disabled) return;
@@ -129,11 +130,11 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
     if (isDragging) {
       setIsDragging(false);
       if (hasMoved.current) {
-        onValueCommit?.(value);
+        onChangeCommit?.(value);
       }
       hasMoved.current = false;
     }
-  }, [isDragging, value, onValueCommit]);
+  }, [isDragging, value, onChangeCommit]);
 
   // Handle keyboard navigation for accessibility
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
@@ -164,9 +165,9 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(({
 
     if (newValue !== value) {
       updateValue(newValue);
-      onValueCommit?.(newValue);
+      onChangeCommit?.(newValue);
     }
-  }, [disabled, value, step, min, max, clampValue, updateValue, onValueCommit]);
+  }, [disabled, value, step, min, max, clampValue, updateValue, onChangeCommit]);
 
   // Generate unique ID for accessibility
   const sliderId = useMemo(() => id || generateAccessibilityId('slider'), [id]);

package/src/Slider/types.ts

@@ -28,8 +28,15 @@ export interface SliderProps extends FormInputStyleProps, RangeAccessibilityProp
   intent?: SliderIntentVariant;
   size?: SliderSizeVariant;
   icon?: IconName | React.ReactNode;
-  onValueChange?: (value: number) => void;
-  onValueCommit?: (value: number) => void;
+  /**
+   * Called when the slider value changes during interaction
+   */
+  onChange?: (value: number) => void;
+
+  /**
+   * Called when the user finishes interacting with the slider
+   */
+  onChangeCommit?: (value: number) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/Switch/Switch.native.tsx

@@ -1,14 +1,15 @@
-import React, { ComponentRef, forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { Pressable } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { switchStyles } from './Switch.styles';
 import Text from '../Text';
 import type { SwitchProps } from './types';
 import { getNativeSelectionAccessibilityProps } from '../utils/accessibility';
+import type { IdealystElement } from '../utils/refTypes';
 
-const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
+const Switch = forwardRef<IdealystElement, SwitchProps>(({
   checked = false,
-  onCheckedChange,
+  onChange,
   disabled = false,
   label,
   labelPosition = 'right',
@@ -50,8 +51,8 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   }, [checked, progress]);
 
   const handlePress = () => {
-    if (!disabled && onCheckedChange) {
-      onCheckedChange(!checked);
+    if (!disabled && onChange) {
+      onChange(!checked);
     }
   };
 
@@ -160,7 +161,7 @@ const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
   if (label) {
     return (
       <Pressable
-        ref={ref}
+        ref={ref as any}
         nativeID={id}
         onPress={handlePress}
         disabled={disabled}