@idealyst/components 1.0.83 → 1.0.84

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;

package/src/Slider/index.native.ts

@@ -0,0 +1,3 @@
+// React Native-specific Slider export
+export { default } from './Slider.native';
+export * from './types';

package/src/Slider/index.ts

@@ -0,0 +1,5 @@
+import SliderComponent from './Slider.web';
+
+export default SliderComponent;
+export { SliderComponent as Slider };
+export * from './types';

package/src/Slider/index.web.ts

@@ -0,0 +1,5 @@
+import SliderComponent from './Slider.web';
+
+export default SliderComponent;
+export { SliderComponent as Slider };
+export * from './types';

package/src/Slider/types.ts

@@ -0,0 +1,31 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type SliderIntentVariant = Intent;
+export type SliderSizeVariant = Size;
+
+export interface SliderProps {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  showValue?: boolean;
+  showMinMax?: boolean;
+  marks?: SliderMark[];
+  intent?: SliderIntentVariant;
+  size?: SliderSizeVariant;
+  icon?: IconName | React.ReactNode;
+  onValueChange?: (value: number) => void;
+  onValueCommit?: (value: number) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface SliderMark {
+  value: number;
+  label?: string;
+}

package/src/Switch/Switch.native.tsx

@@ -0,0 +1,131 @@
+import React, { ComponentRef, forwardRef } 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';
+
+const Switch = forwardRef<ComponentRef<typeof Pressable>, SwitchProps>(({
+  checked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  labelPosition = 'right',
+  intent = 'primary',
+  size = 'md',
+  style,
+  testID,
+}, ref) => {
+  switchStyles.useVariants({
+    size,
+    disabled,
+    position: labelPosition,
+  });
+
+  const progress = useSharedValue(checked ? 1 : 0);
+
+  React.useEffect(() => {
+    progress.value = withSpring(checked ? 1 : 0, {
+      damping: 15,
+      stiffness: 150,
+    });
+  }, [checked, progress]);
+
+  const handlePress = () => {
+    if (!disabled && onCheckedChange) {
+      onCheckedChange(!checked);
+    }
+  };
+
+  const getThumbDistance = () => {
+    if (size === 'sm') return 16;
+    if (size === 'lg') return 24;
+    return 20;
+  };
+
+  // Native-specific thumb styles
+  const getThumbSize = () => {
+    if (size === 'sm') return 16;
+    if (size === 'lg') return 24;
+    return 20;
+  };
+
+  const getTrackHeight = () => {
+    if (size === 'sm') return 20;
+    if (size === 'lg') return 28;
+    return 24;
+  };
+
+  const thumbSize = getThumbSize();
+  const thumbDistance = getThumbDistance();
+  const trackHeight = getTrackHeight();
+  const thumbTop = (trackHeight - thumbSize) / 2;
+
+  const thumbAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: progress.value * thumbDistance + 2,
+        },
+      ],
+    };
+  });
+
+  const switchElement = (
+    <Pressable
+      ref={!label ? ref : undefined}
+      onPress={handlePress}
+      disabled={disabled}
+      style={switchStyles.switchContainer}
+      testID={testID}
+      accessibilityRole="switch"
+      accessibilityState={{ checked, disabled }}
+    >
+      <Animated.View style={switchStyles.switchTrack({ checked, intent })}>
+        <Animated.View
+          style={[
+            {
+              position: 'absolute',
+              top: thumbTop,
+              width: thumbSize,
+              height: thumbSize,
+              backgroundColor: 'white',
+              borderRadius: thumbSize / 2,
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 1 },
+              shadowOpacity: 0.2,
+              shadowRadius: 3,
+              elevation: 2,
+            },
+            thumbAnimatedStyle,
+          ]}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+
+  if (label) {
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        style={[switchStyles.container, style]}
+      >
+        {labelPosition === 'left' && (
+          <Text style={switchStyles.label}>{label}</Text>
+        )}
+        {switchElement}
+        {labelPosition === 'right' && (
+          <Text style={switchStyles.label}>{label}</Text>
+        )}
+      </Pressable>
+    );
+  }
+
+  return switchElement;
+});
+
+Switch.displayName = 'Switch';
+
+export default Switch;