@idealyst/components 1.0.82 → 1.0.84

package/src/Slider/Slider.native.tsx

@@ -0,0 +1,248 @@
+import React, { useState, useCallback, forwardRef } from 'react';
+import { View } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withSpring } from 'react-native-reanimated';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { sliderStyles } from './Slider.styles';
+import Text from '../Text';
+import type { SliderProps } from './types';
+import { isIconName } from '../Icon/icon-resolver';
+
+const Slider = forwardRef<View, SliderProps>(({
+  value: controlledValue,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  showValue = false,
+  showMinMax = false,
+  marks = [],
+  intent = 'primary',
+  size = 'md',
+  icon,
+  onValueChange,
+  onValueCommit,
+  style,
+  testID,
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [trackWidthState, setTrackWidthState] = useState(0);
+  const trackWidth = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const scale = useSharedValue(1);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  
+  sliderStyles.useVariants({
+    size,
+    disabled,
+  });
+
+  const clampValue = (val: number) => {
+    'worklet';
+    const clampedValue = Math.min(Math.max(val, min), max);
+    const steppedValue = Math.round(clampedValue / step) * step;
+    return Math.min(Math.max(steppedValue, min), max);
+  };
+
+  const calculateValueFromPosition = (position: number) => {
+    'worklet';
+    if (trackWidth.value === 0) return value;
+    const percentage = Math.max(0, Math.min(1, position / trackWidth.value));
+    const rawValue = min + percentage * (max - min);
+    return clampValue(rawValue);
+  };
+
+  const updateValue = useCallback((newValue: number) => {
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+
+    onValueChange?.(newValue);
+  }, [controlledValue, onValueChange]);
+
+  const commitValue = useCallback((finalValue: number) => {
+    onValueCommit?.(finalValue);
+  }, [onValueCommit]);
+
+  // Update translateX when value changes externally
+  React.useEffect(() => {
+    if (!isDragging.value && trackWidth.value > 0) {
+      const percentage = (value - min) / (max - min);
+      translateX.value = percentage * trackWidth.value;
+    }
+  }, [value, min, max, trackWidth, translateX, isDragging]);
+
+  const panGesture = Gesture.Pan()
+    .enabled(!disabled)
+    .activeOffsetX([-5, 5])
+    .failOffsetY([-5, 5])
+    .onStart(() => {
+      isDragging.value = true;
+      scale.value = withSpring(1.15, { damping: 15, stiffness: 200 });
+    })
+    .onUpdate((event) => {
+      const newPosition = Math.max(0, Math.min(trackWidth.value, event.x));
+      translateX.value = newPosition;
+      const newValue = calculateValueFromPosition(newPosition);
+      runOnJS(updateValue)(newValue);
+    })
+    .onEnd(() => {
+      isDragging.value = false;
+      scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+      const newPosition = Math.max(0, Math.min(trackWidth.value, translateX.value));
+      const finalValue = calculateValueFromPosition(newPosition);
+      runOnJS(commitValue)(finalValue);
+    });
+
+  const tapGesture = Gesture.Tap()
+    .enabled(!disabled)
+    .onBegin(() => {
+      scale.value = withSpring(1.15, { damping: 15, stiffness: 200 });
+    })
+    .onEnd((event) => {
+      const newPosition = Math.max(0, Math.min(trackWidth.value, event.x));
+      translateX.value = newPosition;
+      const newValue = calculateValueFromPosition(newPosition);
+      runOnJS(updateValue)(newValue);
+      runOnJS(commitValue)(newValue);
+      scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+    })
+    .onFinalize(() => {
+      scale.value = withSpring(1, { damping: 15, stiffness: 200 });
+    });
+
+  const composedGesture = Gesture.Race(panGesture, tapGesture);
+
+  const getThumbSize = () => {
+    if (size === 'sm') return 16;
+    if (size === 'lg') return 24;
+    return 20;
+  };
+
+  const thumbSize = getThumbSize();
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value - thumbSize / 2 },
+        { scale: scale.value },
+      ],
+    } as any;
+  });
+
+  const filledTrackAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      width: translateX.value,
+    };
+  });
+
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    if (typeof icon === 'string' && isIconName(icon)) {
+      const iconStyle = sliderStyles.thumbIcon({ intent });
+      return (
+        <MaterialCommunityIcons
+          name={icon}
+          size={iconStyle.width || 16}
+          color={iconStyle.color}
+        />
+      );
+    }
+
+    return icon;
+  };
+
+  return (
+    <View ref={ref} style={[sliderStyles.container, style]} testID={testID}>
+      {showValue && (
+        <View style={sliderStyles.valueLabel as any}>
+          <Text>{value}</Text>
+        </View>
+      )}
+
+      <View style={sliderStyles.sliderWrapper}>
+        <GestureDetector gesture={composedGesture}>
+          <View
+            style={sliderStyles.track}
+            onLayout={(e) => {
+              const width = e.nativeEvent.layout.width;
+              trackWidth.value = width;
+              setTrackWidthState(width);
+            }}
+          >
+            {/* Filled track */}
+            <Animated.View
+              style={[sliderStyles.filledTrack({ intent }), filledTrackAnimatedStyle]}
+            />
+
+            {/* Marks */}
+            {marks.length > 0 && trackWidthState > 0 && (
+              <View style={sliderStyles.marks}>
+                {marks.map((mark) => {
+                  const markPercentage = ((mark.value - min) / (max - min)) * 100;
+                  const markPosition = (markPercentage / 100) * trackWidthState;
+                  return (
+                    <View key={mark.value}>
+                      <View
+                        style={[
+                          sliderStyles.mark,
+                          { left: markPosition },
+                        ]}
+                      />
+                      {mark.label && (
+                        <View
+                          style={[
+                            sliderStyles.markLabel,
+                            { left: markPosition },
+                          ]}
+                        >
+                          <Text size="sm">{mark.label}</Text>
+                        </View>
+                      )}
+                    </View>
+                  );
+                })}
+              </View>
+            )}
+
+            {/* Thumb */}
+            <Animated.View
+              style={[
+                sliderStyles.thumb({ intent, disabled }),
+                {
+                  // Manual positioning/sizing for native layout
+                  position: 'absolute',
+                  top: '50%',
+                  marginTop: -thumbSize / 2,
+                  width: thumbSize,
+                  height: thumbSize,
+                  borderRadius: thumbSize / 2,
+                },
+                thumbAnimatedStyle,
+              ]}
+            >
+              {renderIcon()}
+            </Animated.View>
+          </View>
+        </GestureDetector>
+      </View>
+
+      {showMinMax && (
+        <View style={sliderStyles.minMaxLabels}>
+          <Text style={sliderStyles.minMaxLabel} size="sm">{min}</Text>
+          <Text style={sliderStyles.minMaxLabel} size="sm">{max}</Text>
+        </View>
+      )}
+    </View>
+  );
+});
+
+Slider.displayName = 'Slider';
+
+export default Slider;

package/src/Slider/Slider.styles.tsx

@@ -0,0 +1,241 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Size, Styles} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { SliderIntentVariant } from './types';
+
+/**
+ * Create size variants for track
+ */
+function createTrackSizeVariants(theme: Theme) {
+    const variants = {} as Record<Size, Styles>;
+    for (const sizeKey in theme.sizes.slider) {
+        const size = sizeKey as Size;
+        variants[size] = {
+            height: theme.sizes.slider[size].trackHeight,
+        };
+    }
+    return variants;
+}
+
+/**
+ * Get filled track color based on intent
+ */
+function getFilledTrackColor(theme: Theme, intent: SliderIntentVariant) {
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create size variants for thumb
+ */
+function createThumbSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'slider', (size) => ({
+        width: size.thumbSize,
+        height: size.thumbSize,
+    }));
+}
+
+/**
+ * Get thumb border color based on intent
+ */
+function getThumbBorderColor(theme: Theme, intent: SliderIntentVariant) {
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create size variants for thumb icon
+ */
+function createThumbIconSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'slider', (size) => ({
+        width: size.thumbIconSize,
+        height: size.thumbIconSize,
+        minWidth: size.thumbIconSize,
+        maxWidth: size.thumbIconSize,
+        minHeight: size.thumbIconSize,
+        maxHeight: size.thumbIconSize,
+    }));
+}
+
+/**
+ * Get thumb icon color based on intent
+ */
+function getThumbIconColor(theme: Theme, intent: SliderIntentVariant){
+    return theme.intents[intent].primary;
+}
+
+/**
+ * Create size variants for mark
+ */
+function createMarkSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'slider', (size) => ({
+        height: size.markHeight,
+    }));
+}
+
+const createFilledTrackStyles = (theme: Theme) => {
+    return ({ intent }: { intent: SliderIntentVariant }) => {
+        return {
+            position: 'absolute',
+            height: '100%',
+            borderRadius: 9999,
+            top: 0,
+            left: 0,
+            backgroundColor: getFilledTrackColor(theme, intent),
+        } as const;
+    }
+}
+
+const createThumbStyles = (theme: Theme) => {
+    return ({ intent, disabled }: { intent: SliderIntentVariant, disabled: boolean }) => {
+        return {
+            position: 'absolute',
+            backgroundColor: theme.colors.surface.primary,
+            borderRadius: 9999,
+            borderWidth: 2,
+            borderStyle: 'solid',
+            borderColor: getThumbBorderColor(theme, intent),
+            top: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.2,
+            shadowRadius: 4,
+            elevation: 2,
+            variants: {
+                size: createThumbSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.6,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'grab',
+                            _hover: {
+                                transform: 'translate(-50%, -50%) scale(1.05)',
+                            },
+                            _active: {
+                                cursor: 'grabbing',
+                                transform: 'translate(-50%, -50%) scale(1.1)',
+                            },
+                        },
+                    },
+                },
+            },
+            _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',
+            },
+        } as const;
+    }
+}
+
+const createThumbIconStyles = (theme: Theme) => {
+    return ({ intent }: { intent: SliderIntentVariant }) => {
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            color: getThumbIconColor(theme, 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.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const sliderStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            gap: 4,
+            paddingVertical: 8,
+        },
+        sliderWrapper: {
+            position: 'relative',
+            paddingVertical: 4,
+        },
+        track: {
+            backgroundColor: theme.colors.surface.tertiary,
+            borderRadius: 9999,
+            position: 'relative',
+            variants: {
+                size: createTrackSizeVariants(theme),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'pointer',
+                        },
+                    },
+                },
+            } as const,
+        } as const,
+        filledTrack: createFilledTrackStyles(theme),
+        thumb: createThumbStyles(theme),
+        thumbActive: {
+            _web: {
+                transform: 'translate(-50%, -50%) scale(1.1)',
+            },
+        },
+        thumbIcon: createThumbIconStyles(theme),
+        valueLabel: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: theme.colors.text.primary,
+        textAlign: 'center',
+    },
+        minMaxLabels: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 4,
+    },
+        minMaxLabel: {
+        fontSize: 12,
+        color: theme.colors.text.secondary,
+    },
+        mark: {
+            position: 'absolute',
+            width: 2,
+            backgroundColor: theme.colors.border.secondary,
+            top: '50%',
+            variants: {
+                size: createMarkSizeVariants(theme),
+            },
+            _web: {
+                transform: 'translate(-50%, -50%)',
+            },
+        },
+        marks: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: 0,
+            left: 0,
+        },
+        markLabel: {
+            position: 'absolute',
+            fontSize: 10,
+            color: theme.colors.text.secondary,
+            top: '100%',
+            marginTop: 4,
+            _web: {
+                transform: 'translateX(-50%)',
+                whiteSpace: 'nowrap',
+            },
+        },
+    };
+});

package/src/Slider/Slider.web.tsx

@@ -0,0 +1,226 @@
+import React, { useState, useRef, useCallback, isValidElement, forwardRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { sliderStyles } from './Slider.styles';
+import type { SliderProps } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const Slider = forwardRef<HTMLDivElement, SliderProps>(({
+  value: controlledValue,
+  defaultValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  showValue = false,
+  showMinMax = false,
+  marks = [],
+  intent = 'primary',
+  size = 'md',
+  icon,
+  onValueChange,
+  onValueCommit,
+  style,
+  testID,
+}, ref) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isDragging, setIsDragging] = useState(false);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const hasMoved = useRef(false);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  // Apply variants
+  sliderStyles.useVariants({
+    size,
+    disabled,
+  });
+
+  const containerProps = getWebProps([sliderStyles.container, style as any]);
+  const wrapperProps = getWebProps([sliderStyles.sliderWrapper]);
+  const trackProps = getWebProps([sliderStyles.track]);
+  const thumbIconProps = getWebProps([sliderStyles.thumbIcon({ intent })]);
+  const valueLabelProps = getWebProps([sliderStyles.valueLabel]);
+  const minMaxLabelsProps = getWebProps([sliderStyles.minMaxLabels]);
+  const minMaxLabelProps = getWebProps([sliderStyles.minMaxLabel]);
+  const marksProps = getWebProps([sliderStyles.marks]);
+
+  const clampValue = useCallback((val: number) => {
+    const clampedValue = Math.min(Math.max(val, min), max);
+    const steppedValue = Math.round(clampedValue / step) * step;
+    return Math.min(Math.max(steppedValue, min), max);
+  }, [min, max, step]);
+
+  const calculateValueFromPosition = useCallback((clientX: number) => {
+    if (!trackRef.current) return value;
+
+    const rect = trackRef.current.getBoundingClientRect();
+    const percentage = (clientX - rect.left) / rect.width;
+    const rawValue = min + percentage * (max - min);
+    return clampValue(rawValue);
+  }, [min, max, value, clampValue]);
+
+  const updateValue = useCallback((newValue: number) => {
+    const clampedValue = clampValue(newValue);
+
+    if (controlledValue === undefined) {
+      setInternalValue(clampedValue);
+    }
+
+    onValueChange?.(clampedValue);
+  }, [controlledValue, clampValue, onValueChange]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (disabled) return;
+
+    e.preventDefault();
+
+    // Check if click is on the thumb
+    const isThumbClick = thumbRef.current && thumbRef.current.contains(e.target as Node);
+
+    if (isThumbClick) {
+      // Clicking on thumb: only start dragging, don't update value yet
+      setIsDragging(true);
+      hasMoved.current = false;
+    } else {
+      // Clicking on track: immediately update value
+      setIsDragging(true);
+      hasMoved.current = true;
+      const newValue = calculateValueFromPosition(e.clientX);
+      updateValue(newValue);
+    }
+  }, [disabled, calculateValueFromPosition, updateValue]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging || disabled) return;
+
+    hasMoved.current = true;
+    const newValue = calculateValueFromPosition(e.clientX);
+    updateValue(newValue);
+  }, [isDragging, disabled, calculateValueFromPosition, updateValue]);
+
+  const handleMouseUp = useCallback(() => {
+    if (isDragging) {
+      setIsDragging(false);
+      if (hasMoved.current) {
+        onValueCommit?.(value);
+      }
+      hasMoved.current = false;
+    }
+  }, [isDragging, value, onValueCommit]);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  // Dynamic styles with percentage
+  const filledTrackProps = getWebProps([sliderStyles.filledTrack({ intent }), { width: `${percentage}%` }]);
+  const thumbProps = getWebProps([
+    sliderStyles.thumb({ intent, disabled }),
+    isDragging && sliderStyles.thumbActive,
+    { left: `${percentage}%` }
+  ]);
+
+  // Helper to render icon
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    if (isIconName(icon)) {
+      // Resolve icon name to path and render with IconSvg
+      const iconPath = resolveIconPath(icon);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...thumbIconProps}
+          aria-label={icon}
+        />
+      );
+    } else if (isValidElement(icon)) {
+      // Render custom component as-is
+      return <span {...thumbIconProps}>{icon}</span>;
+    }
+
+    return null;
+  };
+
+  const mergedRef = useMergeRefs(ref, containerProps.ref);
+
+  return (
+    <div {...containerProps} ref={mergedRef} data-testid={testID}>
+      {showValue && (
+        <div {...valueLabelProps}>
+          {value}
+        </div>
+      )}
+
+      <div {...wrapperProps}>
+        <div
+          {...trackProps}
+          ref={trackRef}
+          onMouseDown={handleMouseDown}
+          role="slider"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-disabled={disabled}
+          tabIndex={disabled ? -1 : 0}
+        >
+          {/* Filled track */}
+          <div {...filledTrackProps} />
+
+          {/* Marks */}
+          {marks.length > 0 && (
+            <div {...marksProps}>
+              {marks.map((mark) => {
+                const markPercentage = ((mark.value - min) / (max - min)) * 100;
+                const markProps = getWebProps([sliderStyles.mark, { left: `${markPercentage}%` }]);
+                const markLabelProps = getWebProps([sliderStyles.markLabel, { left: `${markPercentage}%` }]);
+                return (
+                  <div key={mark.value}>
+                    <div {...markProps} />
+                    {mark.label && (
+                      <div {...markLabelProps}>
+                        {mark.label}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Thumb */}
+          <div
+            ref={thumbRef}
+            {...thumbProps}
+          >
+            {renderIcon()}
+          </div>
+        </div>
+      </div>
+
+      {showMinMax && (
+        <div {...minMaxLabelsProps}>
+          <span {...minMaxLabelProps}>{min}</span>
+          <span {...minMaxLabelProps}>{max}</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+Slider.displayName = 'Slider';
+
+export default Slider;