@sth87/shadcn-design-system 0.1.0 → 0.1.2

package/dist/esm/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport NumberFlow from \"@number-flow/react\";\nimport type { BasicColor } from \"@/types/variables\";\nimport { Badge } from \"../Badge\";\n\ntype LabelAnimation = \"number-flow\" | \"spec\" | \"none\";\ntype LabelDisplay = false | \"hover\" | \"always\";\ntype SliderColor = BasicColor | \"muted\" | \"accent\";\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\ntype LabelPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type SliderProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n  \"color\" | \"defaultValue\" | \"value\" | \"min\" | \"max\"\n> & {\n  color?: SliderColor;\n  size?: SliderSize;\n  showLabel?: LabelDisplay;\n  labelArrow?: boolean;\n  labelAnimation?: LabelAnimation;\n  labelFormatter?: (value: number) => string;\n  labelPosition?: LabelPosition;\n  labelColor?: string;\n  labelTextColor?: string;\n  labelArrowColor?: string;\n  sliderColor?: string;\n  thumbBorderColor?: string;\n  defaultValue?: number[];\n  value?: number[];\n  min?: number;\n  max?: number;\n};\n\n// Color mapping configuration\nconst COLOR_CONFIG: Record<\n  SliderColor,\n  {\n    range: string;\n    thumb: string;\n    labelBg: string;\n    labelText: string;\n  }\n> = {\n  primary: {\n    range: \"bg-primary\",\n    thumb: \"border-primary/50\",\n    labelBg: \"bg-primary\",\n    labelText: \"text-primary-foreground\",\n  },\n  secondary: {\n    range: \"bg-secondary\",\n    thumb: \"border-secondary/50\",\n    labelBg: \"bg-secondary\",\n    labelText: \"text-secondary-foreground\",\n  },\n  success: {\n    range: \"bg-success\",\n    thumb: \"border-success/50\",\n    labelBg: \"bg-success\",\n    labelText: \"text-success-foreground\",\n  },\n  warning: {\n    range: \"bg-warning\",\n    thumb: \"border-warning/50\",\n    labelBg: \"bg-warning\",\n    labelText: \"text-warning-foreground\",\n  },\n  error: {\n    range: \"bg-error\",\n    thumb: \"border-error/50\",\n    labelBg: \"bg-error\",\n    labelText: \"text-error-foreground\",\n  },\n  glass: {\n    range: \"bg-white/30 backdrop-blur-sm\",\n    thumb: \"border-white/30 backdrop-blur-sm\",\n    labelBg: \"bg-white/15\",\n    labelText: \"text-foreground\",\n  },\n  muted: {\n    range: \"bg-muted-foreground\",\n    thumb: \"border-muted-foreground/50\",\n    labelBg: \"bg-muted\",\n    labelText: \"text-muted-foreground\",\n  },\n  accent: {\n    range: \"bg-accent\",\n    thumb: \"border-accent/50\",\n    labelBg: \"bg-accent\",\n    labelText: \"text-accent-foreground\",\n  },\n};\n\n// Size configuration\nconst SIZE_CONFIG: Record<\n  SliderSize,\n  {\n    track: string;\n    thumb: string;\n  }\n> = {\n  sm: {\n    track: \"data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1\",\n    thumb: \"size-3\",\n  },\n  md: {\n    track:\n      \"data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5\",\n    thumb: \"size-4\",\n  },\n  lg: {\n    track: \"data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2\",\n    thumb: \"size-5\",\n  },\n};\n\n// Helper to get arrow direction based on orientation and position\nconst getArrowDirection = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): \"top\" | \"bottom\" | \"left\" | \"right\" => {\n  if (orientation === \"horizontal\") {\n    if (position === \"bottom\") return \"bottom\";\n    if (position === \"left\") return \"left\";\n    if (position === \"right\") return \"right\";\n    return \"top\";\n  }\n  // vertical\n  if (position === \"right\") return \"right\";\n  if (position === \"top\") return \"top\";\n  if (position === \"bottom\") return \"bottom\";\n  return \"left\";\n};\n\n// Helper to get arrow color class\nconst getArrowColorClass = (\n  color: SliderColor,\n  direction: \"top\" | \"bottom\" | \"left\" | \"right\"\n): string => {\n  // Generate full border class (e.g., \"border-t-primary\")\n  const prefix =\n    direction === \"top\"\n      ? \"t\"\n      : direction === \"bottom\"\n        ? \"b\"\n        : direction === \"left\"\n          ? \"l\"\n          : \"r\";\n  const colorMap: Record<SliderColor, string> = {\n    primary: `border-${prefix}-primary`,\n    secondary: `border-${prefix}-secondary`,\n    success: `border-${prefix}-success`,\n    warning: `border-${prefix}-warning`,\n    error: `border-${prefix}-error`,\n    glass: `border-${prefix}-white/15`,\n    muted: `border-${prefix}-muted`,\n    accent: `border-${prefix}-accent`,\n  };\n\n  return colorMap[color];\n};\n\n// Helper to get label position classes\nconst getLabelPositionClasses = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): { badge: string; arrow: string } => {\n  const positions: Record<string, { badge: string; arrow: string }> = {\n    \"horizontal-top\": {\n      badge: \"left-1/2 -translate-x-1/2 bottom-full -translate-y-1/2\",\n      arrow:\n        \"top-full left-1/2 -translate-x-1/2 border-t-[6px] border-l-[6px] border-r-[6px] border-b-0 border-l-transparent border-r-transparent\",\n    },\n    \"horizontal-bottom\": {\n      badge: \"left-1/2 -translate-x-1/2 top-full translate-y-1/2\",\n      arrow:\n        \"bottom-full left-1/2 -translate-x-1/2 border-b-[6px] border-l-[6px] border-r-[6px] border-t-0 border-l-transparent border-r-transparent\",\n    },\n    \"horizontal-left\": {\n      badge: \"top-1/2 -translate-y-1/2 right-full -translate-x-1/2\",\n      arrow:\n        \"left-full top-1/2 -translate-y-1/2 border-l-[6px] border-t-[6px] border-b-[6px] border-r-0 border-t-transparent border-b-transparent\",\n    },\n    \"horizontal-right\": {\n      badge: \"top-1/2 -translate-y-1/2 left-full translate-x-1/2\",\n      arrow:\n        \"right-full top-1/2 -translate-y-1/2 border-r-[6px] border-t-[6px] border-b-[6px] border-l-0 border-t-transparent border-b-transparent\",\n    },\n    \"vertical-left\": {\n      badge: \"top-1/2 -translate-y-1/2 right-full -translate-x-1/2\",\n      arrow:\n        \"left-full top-1/2 -translate-y-1/2 border-l-[6px] border-t-[6px] border-b-[6px] border-r-0 border-t-transparent border-b-transparent\",\n    },\n    \"vertical-right\": {\n      badge: \"top-1/2 -translate-y-1/2 left-full translate-x-1/2\",\n      arrow:\n        \"right-full top-1/2 -translate-y-1/2 border-r-[6px] border-t-[6px] border-b-[6px] border-l-0 border-t-transparent border-b-transparent\",\n    },\n    \"vertical-top\": {\n      badge: \"left-1/2 -translate-x-1/2 bottom-full -translate-y-1/2\",\n      arrow:\n        \"top-full left-1/2 -translate-x-1/2 border-t-[6px] border-l-[6px] border-r-[6px] border-b-0 border-l-transparent border-r-transparent\",\n    },\n    \"vertical-bottom\": {\n      badge: \"left-1/2 -translate-x-1/2 top-full translate-y-1/2\",\n      arrow:\n        \"bottom-full left-1/2 -translate-x-1/2 border-b-[6px] border-l-[6px] border-r-[6px] border-t-0 border-l-transparent border-r-transparent\",\n    },\n  };\n\n  return positions[`${orientation}-${position}`];\n};\n\n// Helper to get spec label position classes\nconst getSpecLabelPositionClass = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): string => {\n  const positions: Record<string, string> = {\n    \"horizontal-top\":\n      \"data-[orientation=horizontal]:bottom-full data-[orientation=horizontal]:left-1/2 data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2\",\n    \"horizontal-bottom\":\n      \"data-[orientation=horizontal]:top-full data-[orientation=horizontal]:left-1/2 data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:translate-y-1/2\",\n    \"horizontal-left\":\n      \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:right-full data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=horizontal]:-translate-x-1/2\",\n    \"horizontal-right\":\n      \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-full data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=horizontal]:translate-x-1/2\",\n    \"vertical-left\":\n      \"data-[orientation=vertical]:right-full data-[orientation=vertical]:top-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:-translate-y-1/2\",\n    \"vertical-right\":\n      \"data-[orientation=vertical]:left-full data-[orientation=vertical]:top-1/2 data-[orientation=vertical]:translate-x-1/2 data-[orientation=vertical]:-translate-y-1/2\",\n    \"vertical-top\":\n      \"data-[orientation=vertical]:bottom-full data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:-translate-y-1/2\",\n    \"vertical-bottom\":\n      \"data-[orientation=vertical]:top-full data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2\",\n  };\n\n  return positions[`${orientation}-${position}`];\n};\n\nconst Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      className,\n      color = \"primary\",\n      size = \"md\",\n      showLabel = false,\n      labelArrow = false,\n      labelAnimation = \"none\",\n      labelFormatter = (value) => `${value}`,\n      labelPosition = \"top\",\n      labelColor,\n      labelTextColor,\n      labelArrowColor,\n      sliderColor,\n      thumbBorderColor,\n      defaultValue,\n      value,\n      min = 0,\n      max = 100,\n      ...props\n    },\n    ref\n  ) => {\n    const _values = React.useMemo(\n      () =>\n        Array.isArray(value)\n          ? value\n          : Array.isArray(defaultValue)\n            ? defaultValue\n            : [min, max],\n      [value, defaultValue, min, max]\n    );\n\n    // State for hover detection\n    const [isHovered, setIsHovered] = React.useState(false);\n    React.useEffect(() => {\n      if (value !== undefined && !Array.isArray(value)) {\n        console.error(\n          \"[Slider] value prop must be an array of numbers, e.g., [50] or [25, 75]\"\n        );\n      }\n      if (defaultValue !== undefined && !Array.isArray(defaultValue)) {\n        console.error(\n          \"[Slider] defaultValue prop must be an array of numbers, e.g., [50] or [25, 75]\"\n        );\n      }\n    }, [value, defaultValue]);\n\n    const orientation = props.orientation || \"horizontal\";\n\n    // For spec animation - track thumb position and velocity\n    const thumbPosition = useMotionValue(0);\n    const thumbVelocity = useMotionValue(0);\n    const prevThumbPosition = React.useRef(0);\n\n    // Spring physics for label following effect - more dramatic\n    const springConfig = { stiffness: 150, damping: 15, mass: 1 };\n    const labelOffset = useSpring(0, springConfig);\n    const labelRotate = useSpring(0, springConfig);\n\n    // Track value changes to calculate velocity\n    React.useEffect(() => {\n      if (labelAnimation === \"spec\" && _values.length > 0) {\n        const currentPos = _values[0];\n        const velocity = currentPos - prevThumbPosition.current;\n\n        // Cap velocity to prevent large jumps (e.g., on click or initial load)\n        const maxVelocity = 5; // Maximum velocity threshold\n        const cappedVelocity = Math.max(\n          -maxVelocity,\n          Math.min(maxVelocity, velocity)\n        );\n\n        // Update velocity and position\n        thumbVelocity.set(cappedVelocity);\n        thumbPosition.set(currentPos);\n\n        // Calculate offset and rotation based on capped velocity\n        // Negative velocity (moving left) -> positive offset (label lags behind to the right)\n        const offsetAmount = -cappedVelocity * 12;\n        const rotateAmount = -cappedVelocity * 20;\n\n        labelOffset.set(offsetAmount);\n        labelRotate.set(rotateAmount);\n\n        // Reset to center when stopped\n        setTimeout(() => {\n          labelOffset.set(0);\n          labelRotate.set(0);\n        }, 100);\n\n        prevThumbPosition.current = currentPos;\n      }\n    }, [\n      _values,\n      labelAnimation,\n      thumbVelocity,\n      thumbPosition,\n      labelOffset,\n      labelRotate,\n    ]);\n\n    // Memoized computed values\n    const sliderColorClass = useMemo(() => {\n      if (sliderColor || thumbBorderColor) {\n        return {\n          range: sliderColor || \"bg-primary\",\n          thumb: thumbBorderColor || \"border-primary/50\",\n        };\n      }\n      const config = COLOR_CONFIG[color];\n      return {\n        range: config.range,\n        thumb: config.thumb,\n      };\n    }, [color, sliderColor, thumbBorderColor]);\n\n    const sliderSizeClass = useMemo(() => SIZE_CONFIG[size], [size]);\n\n    const labelColorClass = useMemo(() => {\n      if (labelColor || labelTextColor) {\n        return cn(labelColor, labelTextColor);\n      }\n\n      const config = COLOR_CONFIG[color];\n      const direction = getArrowDirection(orientation, labelPosition);\n      const arrowColor = getArrowColorClass(color, direction);\n\n      if (color === \"glass\") {\n        return `${config.labelBg} ${config.labelText} backdrop-blur-sm shadow-lg [&>div.arrow]:${arrowColor}`;\n      }\n\n      return `${config.labelBg} ${config.labelText} [&>div.arrow]:${arrowColor}`;\n    }, [color, labelPosition, orientation, labelColor, labelTextColor]);\n\n    const arrowColorClass = useMemo(() => {\n      if (labelArrowColor) return labelArrowColor;\n      const direction = getArrowDirection(orientation, labelPosition);\n      return getArrowColorClass(color, direction);\n    }, [color, labelPosition, orientation, labelArrowColor]);\n\n    const labelVisibilityClass = useMemo(() => {\n      if (showLabel === \"hover\") return \"scale-0 group-hover:scale-100\";\n      if (showLabel === \"always\") return \"scale-100\";\n      return \"hidden\";\n    }, [showLabel]);\n\n    const labelPositionClass = useMemo(\n      () => getLabelPositionClasses(orientation, labelPosition),\n      [labelPosition, orientation]\n    );\n\n    const labelPositionClassSpec = useMemo(\n      () => getSpecLabelPositionClass(orientation, labelPosition),\n      [labelPosition, orientation]\n    );\n\n    // Render label based on animation type\n    const renderLabel = React.useCallback(\n      (index: number) => {\n        if (labelAnimation === \"spec\") {\n          return (\n            <motion.div\n              className={cn(\n                \"ds:pointer-events-none ds:absolute ds:z-50 ds:flex ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:shadow-xl\",\n                labelPositionClassSpec,\n                labelColor && labelColor,\n                labelTextColor && labelTextColor,\n                !labelColor && !labelTextColor && labelColorClass\n              )}\n              data-orientation={orientation}\n              initial={\n                showLabel === \"always\"\n                  ? { opacity: 1, y: -5, scale: 1 }\n                  : { opacity: 0, y: 20, scale: 0 }\n              }\n              animate={\n                (isHovered && showLabel === \"hover\") || showLabel === \"always\"\n                  ? {\n                      opacity: 1,\n                      y: -5,\n                      scale: 1,\n                    }\n                  : {\n                      opacity: 0,\n                      y: 20,\n                      scale: 0,\n                    }\n              }\n              transition={{\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              }}\n              style={{\n                x: labelOffset,\n                rotate: labelRotate,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              <div className=\"ds:relative ds:z-1\">\n                <NumberFlow\n                  value={_values[index]}\n                  format={{ notation: \"standard\" }}\n                  isolate\n                />\n              </div>\n              {labelArrow && (\n                <div\n                  className={cn(\n                    \"ds:arrow ds:absolute ds:border-transparent\",\n                    labelPositionClass.arrow,\n                    arrowColorClass\n                  )}\n                />\n              )}\n            </motion.div>\n          );\n        }\n\n        // Standard or number-flow animation\n        return (\n          <Badge\n            size=\"lg\"\n            color={\n              labelColor || labelTextColor\n                ? \"custom\"\n                : color === \"glass\"\n                  ? \"custom\"\n                  : color === \"muted\"\n                    ? \"muted\"\n                    : color === \"accent\"\n                      ? \"accent\"\n                      : color\n            }\n            variant=\"solid\"\n            className={cn(\n              \"ds:transition-transform ds:absolute ds:px-3 ds:rounded-md\",\n              labelPositionClass.badge,\n              labelVisibilityClass,\n              labelColor && labelColor,\n              labelTextColor && labelTextColor,\n              !labelColor &&\n                !labelTextColor &&\n                color === \"glass\" &&\n                \"ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>div.arrow]:border-t-white/15\"\n            )}\n          >\n            {labelAnimation === \"number-flow\" ? (\n              <NumberFlow\n                value={_values[index]}\n                format={{ notation: \"standard\" }}\n                isolate\n              />\n            ) : (\n              <span>{labelFormatter(_values[index])}</span>\n            )}\n            {labelArrow && (\n              <div\n                className={cn(\n                  \"ds:arrow ds:absolute ds:border-transparent\",\n                  labelPositionClass.arrow,\n                  arrowColorClass\n                )}\n              />\n            )}\n          </Badge>\n        );\n      },\n      [\n        labelAnimation,\n        labelPositionClassSpec,\n        labelColor,\n        labelTextColor,\n        labelColorClass,\n        orientation,\n        showLabel,\n        labelOffset,\n        labelRotate,\n        labelFormatter,\n        _values,\n        color,\n        labelPositionClass,\n        labelVisibilityClass,\n        labelArrow,\n        arrowColorClass,\n        isHovered,\n      ]\n    );\n\n    // Render without label - use custom slider with color\n    if (!showLabel) {\n      return (\n        <SliderPrimitive.Root\n          ref={ref}\n          data-slot=\"slider\"\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          className={cn(\n            \"ds:relative ds:flex ds:w-full ds:touch-none ds:items-center ds:select-none ds:data-disabled:opacity-50 ds:data-[orientation=vertical]:h-full ds:data-[orientation=vertical]:min-h-44 ds:data-[orientation=vertical]:w-auto ds:data-[orientation=vertical]:flex-col\",\n            className\n          )}\n          {...props}\n        >\n          <SliderPrimitive.Track\n            data-slot=\"slider-track\"\n            className={cn(\n              \"ds:bg-muted ds:relative ds:grow ds:overflow-hidden ds:rounded-full ds:data-[orientation=horizontal]:w-full ds:data-[orientation=vertical]:h-full\",\n              sliderSizeClass.track\n            )}\n          >\n            <SliderPrimitive.Range\n              data-slot=\"slider-range\"\n              className={cn(\n                \"ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full\",\n                sliderColorClass.range\n              )}\n            />\n          </SliderPrimitive.Track>\n          {Array.from({ length: _values.length }, (_, index) => (\n            <SliderPrimitive.Thumb\n              key={index}\n              data-slot=\"slider-thumb\"\n              className={cn(\n                \"ds:block ds:shrink-0 ds:rounded-full ds:border ds:bg-white ds:shadow-sm ds:transition-[color,box-shadow] ds:hover:ring-4 ds:focus-visible:ring-4 ds:focus-visible:outline-hidden ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:ring-ring/50\",\n                sliderColorClass.thumb,\n                sliderSizeClass.thumb\n              )}\n            />\n          ))}\n        </SliderPrimitive.Root>\n      );\n    }\n\n    // Render with label (standard, number-flow, or spec animation)\n    return (\n      <SliderPrimitive.Root\n        ref={ref}\n        data-slot=\"slider\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        className={cn(\n          \"ds:relative ds:flex ds:w-full ds:touch-none ds:items-center ds:select-none ds:data-disabled:opacity-50 ds:data-[orientation=vertical]:h-full ds:data-[orientation=vertical]:min-h-44 ds:data-[orientation=vertical]:w-auto ds:data-[orientation=vertical]:flex-col\",\n          className\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            \"ds:bg-muted ds:relative ds:grow ds:overflow-hidden ds:rounded-full ds:data-[orientation=horizontal]:w-full ds:data-[orientation=vertical]:h-full\",\n            sliderSizeClass.track\n          )}\n        >\n          <SliderPrimitive.Range\n            data-slot=\"slider-range\"\n            className={cn(\n              \"ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full\",\n              sliderColorClass.range\n            )}\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            data-slot=\"slider-thumb\"\n            className={cn(\n              \"ds:group ds:block ds:shrink-0 ds:rounded-full ds:border ds:bg-white ds:shadow-sm ds:transition-[color,box-shadow] ds:hover:ring-4 ds:focus-visible:ring-4 ds:focus-visible:outline-hidden ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:ring-ring/50\",\n              sliderColorClass.thumb,\n              sliderSizeClass.thumb\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            {renderLabel(index)}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n    );\n  }\n);\n\nSlider.displayName = \"Slider\";\n\nexport default Slider;\n"],"names":["COLOR_CONFIG","SIZE_CONFIG","getArrowDirection","orientation","position","getArrowColorClass","color","direction","prefix","getLabelPositionClasses","getSpecLabelPositionClass","Slider","React","className","size","showLabel","labelArrow","labelAnimation","labelFormatter","value","labelPosition","labelColor","labelTextColor","labelArrowColor","sliderColor","thumbBorderColor","defaultValue","min","max","props","ref","_values","isHovered","setIsHovered","thumbPosition","useMotionValue","thumbVelocity","prevThumbPosition","springConfig","labelOffset","useSpring","labelRotate","currentPos","velocity","maxVelocity","cappedVelocity","offsetAmount","rotateAmount","sliderColorClass","useMemo","config","sliderSizeClass","labelColorClass","cn","arrowColor","arrowColorClass","labelVisibilityClass","labelPositionClass","labelPositionClassSpec","renderLabel","index","jsxs","motion","jsx","NumberFlow","Badge","SliderPrimitive","_"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport NumberFlow from \"@number-flow/react\";\nimport type { BasicColor } from \"@/types/variables\";\nimport { Badge } from \"../Badge\";\n\ntype LabelAnimation = \"number-flow\" | \"spec\" | \"none\";\ntype LabelDisplay = false | \"hover\" | \"always\";\ntype SliderColor = BasicColor | \"muted\" | \"accent\";\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\ntype LabelPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type SliderProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n  \"color\" | \"defaultValue\" | \"value\" | \"min\" | \"max\"\n> & {\n  color?: SliderColor;\n  size?: SliderSize;\n  showLabel?: LabelDisplay;\n  labelArrow?: boolean;\n  labelAnimation?: LabelAnimation;\n  labelFormatter?: (value: number) => string;\n  labelPosition?: LabelPosition;\n  labelColor?: string;\n  labelTextColor?: string;\n  labelArrowColor?: string;\n  sliderColor?: string;\n  thumbBorderColor?: string;\n  defaultValue?: number[];\n  value?: number[];\n  min?: number;\n  max?: number;\n};\n\n// Color mapping configuration\nconst COLOR_CONFIG: Record<\n  SliderColor,\n  {\n    range: string;\n    thumb: string;\n    labelBg: string;\n    labelText: string;\n  }\n> = {\n  primary: {\n    range: \"ds:bg-primary\",\n    thumb: \"ds:border-primary/50\",\n    labelBg: \"ds:bg-primary\",\n    labelText: \"ds:text-primary-foreground\",\n  },\n  secondary: {\n    range: \"ds:bg-secondary\",\n    thumb: \"ds:border-secondary/50\",\n    labelBg: \"ds:bg-secondary\",\n    labelText: \"ds:text-secondary-foreground\",\n  },\n  success: {\n    range: \"ds:bg-success\",\n    thumb: \"ds:border-success/50\",\n    labelBg: \"ds:bg-success\",\n    labelText: \"ds:text-success-foreground\",\n  },\n  warning: {\n    range: \"ds:bg-warning\",\n    thumb: \"ds:border-warning/50\",\n    labelBg: \"ds:bg-warning\",\n    labelText: \"ds:text-warning-foreground\",\n  },\n  error: {\n    range: \"ds:bg-error\",\n    thumb: \"ds:border-error/50\",\n    labelBg: \"ds:bg-error\",\n    labelText: \"ds:text-error-foreground\",\n  },\n  glass: {\n    range: \"ds:bg-white/30 backdrop-blur-sm\",\n    thumb: \"ds:border-white/30 backdrop-blur-sm\",\n    labelBg: \"ds:bg-white/15\",\n    labelText: \"ds:text-foreground\",\n  },\n  muted: {\n    range: \"ds:bg-muted-foreground\",\n    thumb: \"ds:border-muted-foreground/50\",\n    labelBg: \"ds:bg-muted\",\n    labelText: \"ds:text-muted-foreground\",\n  },\n  accent: {\n    range: \"ds:bg-accent\",\n    thumb: \"ds:border-accent/50\",\n    labelBg: \"ds:bg-accent\",\n    labelText: \"ds:text-accent-foreground\",\n  },\n};\n\n// Size configuration\nconst SIZE_CONFIG: Record<\n  SliderSize,\n  {\n    track: string;\n    thumb: string;\n  }\n> = {\n  sm: {\n    track: \"ds:data-[orientation=horizontal]:h-1 ds:data-[orientation=vertical]:w-1\",\n    thumb: \"ds:size-3\",\n  },\n  md: {\n    track:\n      \"ds:data-[orientation=horizontal]:h-1.5 ds:data-[orientation=vertical]:w-1.5\",\n    thumb: \"ds:size-4\",\n  },\n  lg: {\n    track: \"ds:data-[orientation=horizontal]:h-2 ds:data-[orientation=vertical]:w-2\",\n    thumb: \"ds:size-5\",\n  },\n};\n\n// Helper to get arrow direction based on orientation and position\nconst getArrowDirection = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): \"top\" | \"bottom\" | \"left\" | \"right\" => {\n  if (orientation === \"horizontal\") {\n    if (position === \"bottom\") return \"bottom\";\n    if (position === \"left\") return \"left\";\n    if (position === \"right\") return \"right\";\n    return \"top\";\n  }\n  // vertical\n  if (position === \"right\") return \"right\";\n  if (position === \"top\") return \"top\";\n  if (position === \"bottom\") return \"bottom\";\n  return \"left\";\n};\n\n// Helper to get arrow color class\nconst getArrowColorClass = (\n  color: SliderColor,\n  direction: \"top\" | \"bottom\" | \"left\" | \"right\"\n): string => {\n  // Generate full border class (e.g., \"border-t-primary\")\n  const prefix =\n    direction === \"top\"\n      ? \"t\"\n      : direction === \"bottom\"\n        ? \"b\"\n        : direction === \"left\"\n          ? \"l\"\n          : \"r\";\n  const colorMap: Record<SliderColor, string> = {\n    primary: `ds:border-${prefix}-primary`,\n    secondary: `ds:border-${prefix}-secondary`,\n    success: `ds:border-${prefix}-success`,\n    warning: `ds:border-${prefix}-warning`,\n    error: `ds:border-${prefix}-error`,\n    glass: `ds:border-${prefix}-white/15`,\n    muted: `ds:border-${prefix}-muted`,\n    accent: `ds:border-${prefix}-accent`,\n  };\n\n  return colorMap[color];\n};\n\n// Helper to get label position classes\nconst getLabelPositionClasses = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): { badge: string; arrow: string } => {\n  const positions: Record<string, { badge: string; arrow: string }> = {\n    \"horizontal-top\": {\n      badge: \"ds:left-1/2 ds:-translate-x-1/2 ds:bottom-full ds:-translate-y-1/2\",\n      arrow:\n        \"ds:top-full left-1/2 ds:-translate-x-1/2 ds:border-t-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-b-0 ds:border-l-transparent ds:border-r-transparent\",\n    },\n    \"horizontal-bottom\": {\n      badge: \"ds:left-1/2 ds:-translate-x-1/2 ds:top-full ds:translate-y-1/2\",\n      arrow:\n        \"ds:bottom-full left-1/2 ds:-translate-x-1/2 ds:border-b-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-t-0 ds:border-l-transparent ds:border-r-transparent\",\n    },\n    \"horizontal-left\": {\n      badge: \"ds:top-1/2 ds:-translate-y-1/2 ds:right-full ds:-translate-x-1/2\",\n      arrow:\n        \"ds:left-full ds:top-1/2 ds:-translate-y-1/2 ds:border-l-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-r-0 ds:border-t-transparent ds:border-b-transparent\",\n    },\n    \"horizontal-right\": {\n      badge: \"ds:top-1/2 ds:-translate-y-1/2 ds:left-full ds:translate-x-1/2\",\n      arrow:\n        \"ds:right-full ds:top-1/2 ds:-translate-y-1/2 ds:border-r-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-l-0 ds:border-t-transparent ds:border-b-transparent\",\n    },\n    \"vertical-left\": {\n      badge: \"ds:top-1/2 ds:-translate-y-1/2 ds:right-full ds:-translate-x-1/2\",\n      arrow:\n        \"ds:left-full ds:top-1/2 ds:-translate-y-1/2 ds:border-l-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-r-0 ds:border-t-transparent ds:border-b-transparent\",\n    },\n    \"vertical-right\": {\n      badge: \"ds:top-1/2 ds:-translate-y-1/2 ds:left-full ds:translate-x-1/2\",\n      arrow:\n        \"ds:right-full ds:top-1/2 ds:-translate-y-1/2 ds:border-r-[6px] ds:border-t-[6px] ds:border-b-[6px] ds:border-l-0 ds:border-t-transparent ds:border-b-transparent\",\n    },\n    \"vertical-top\": {\n      badge: \"ds:left-1/2 ds:-translate-x-1/2 ds:bottom-full ds:-translate-y-1/2\",\n      arrow:\n        \"ds:top-full ds:left-1/2 ds:-translate-x-1/2 ds:border-t-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-b-0 ds:border-l-transparent ds:border-r-transparent\",\n    },\n    \"vertical-bottom\": {\n      badge: \"ds:left-1/2 ds:-translate-x-1/2 ds:top-full ds:translate-y-1/2\",\n      arrow:\n        \"ds:bottom-full ds:left-1/2 ds:-translate-x-1/2 ds:border-b-[6px] ds:border-l-[6px] ds:border-r-[6px] ds:border-t-0 ds:border-l-transparent ds:border-r-transparent\",\n    },\n  };\n\n  return positions[`${orientation}-${position}`];\n};\n\n// Helper to get spec label position classes\nconst getSpecLabelPositionClass = (\n  orientation: \"horizontal\" | \"vertical\",\n  position: LabelPosition\n): string => {\n  const positions: Record<string, string> = {\n    \"horizontal-top\":\n      \"ds:data-[orientation=horizontal]:bottom-full ds:data-[orientation=horizontal]:left-1/2 ds:data-[orientation=horizontal]:-translate-x-1/2 ds:data-[orientation=horizontal]:-translate-y-1/2\",\n    \"horizontal-bottom\":\n      \"ds:data-[orientation=horizontal]:top-full ds:data-[orientation=horizontal]:left-1/2 ds:data-[orientation=horizontal]:-translate-x-1/2 ds:data-[orientation=horizontal]:translate-y-1/2\",\n    \"horizontal-left\":\n      \"ds:data-[orientation=horizontal]:top-1/2 ds:data-[orientation=horizontal]:right-full ds:data-[orientation=horizontal]:-translate-y-1/2 ds:data-[orientation=horizontal]:-translate-x-1/2\",\n    \"horizontal-right\":\n      \"ds:data-[orientation=horizontal]:top-1/2 ds:data-[orientation=horizontal]:left-full ds:data-[orientation=horizontal]:-translate-y-1/2 ds:data-[orientation=horizontal]:translate-x-1/2\",\n    \"vertical-left\":\n      \"ds:data-[orientation=vertical]:right-full ds:data-[orientation=vertical]:top-1/2 ds:data-[orientation=vertical]:-translate-x-1/2 ds:data-[orientation=vertical]:-translate-y-1/2\",\n    \"vertical-right\":\n      \"ds:data-[orientation=vertical]:left-full ds:data-[orientation=vertical]:top-1/2 ds:data-[orientation=vertical]:translate-x-1/2 ds:data-[orientation=vertical]:-translate-y-1/2\",\n    \"vertical-top\":\n      \"ds:data-[orientation=vertical]:bottom-full ds:data-[orientation=vertical]:left-1/2 ds:data-[orientation=vertical]:-translate-x-1/2 ds:data-[orientation=vertical]:-translate-y-1/2\",\n    \"vertical-bottom\":\n      \"ds:data-[orientation=vertical]:top-full ds:data-[orientation=vertical]:left-1/2 ds:data-[orientation=vertical]:-translate-x-1/2 ds:data-[orientation=vertical]:translate-y-1/2\",\n  };\n\n  return positions[`${orientation}-${position}`];\n};\n\nconst Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      className,\n      color = \"primary\",\n      size = \"md\",\n      showLabel = false,\n      labelArrow = false,\n      labelAnimation = \"none\",\n      labelFormatter = (value) => `${value}`,\n      labelPosition = \"top\",\n      labelColor,\n      labelTextColor,\n      labelArrowColor,\n      sliderColor,\n      thumbBorderColor,\n      defaultValue,\n      value,\n      min = 0,\n      max = 100,\n      ...props\n    },\n    ref\n  ) => {\n    const _values = React.useMemo(\n      () =>\n        Array.isArray(value)\n          ? value\n          : Array.isArray(defaultValue)\n            ? defaultValue\n            : [min, max],\n      [value, defaultValue, min, max]\n    );\n\n    // State for hover detection\n    const [isHovered, setIsHovered] = React.useState(false);\n    React.useEffect(() => {\n      if (value !== undefined && !Array.isArray(value)) {\n        console.error(\n          \"[Slider] value prop must be an array of numbers, e.g., [50] or [25, 75]\"\n        );\n      }\n      if (defaultValue !== undefined && !Array.isArray(defaultValue)) {\n        console.error(\n          \"[Slider] defaultValue prop must be an array of numbers, e.g., [50] or [25, 75]\"\n        );\n      }\n    }, [value, defaultValue]);\n\n    const orientation = props.orientation || \"horizontal\";\n\n    // For spec animation - track thumb position and velocity\n    const thumbPosition = useMotionValue(0);\n    const thumbVelocity = useMotionValue(0);\n    const prevThumbPosition = React.useRef(0);\n\n    // Spring physics for label following effect - more dramatic\n    const springConfig = { stiffness: 150, damping: 15, mass: 1 };\n    const labelOffset = useSpring(0, springConfig);\n    const labelRotate = useSpring(0, springConfig);\n\n    // Track value changes to calculate velocity\n    React.useEffect(() => {\n      if (labelAnimation === \"spec\" && _values.length > 0) {\n        const currentPos = _values[0];\n        const velocity = currentPos - prevThumbPosition.current;\n\n        // Cap velocity to prevent large jumps (e.g., on click or initial load)\n        const maxVelocity = 5; // Maximum velocity threshold\n        const cappedVelocity = Math.max(\n          -maxVelocity,\n          Math.min(maxVelocity, velocity)\n        );\n\n        // Update velocity and position\n        thumbVelocity.set(cappedVelocity);\n        thumbPosition.set(currentPos);\n\n        // Calculate offset and rotation based on capped velocity\n        // Negative velocity (moving left) -> positive offset (label lags behind to the right)\n        const offsetAmount = -cappedVelocity * 12;\n        const rotateAmount = -cappedVelocity * 20;\n\n        labelOffset.set(offsetAmount);\n        labelRotate.set(rotateAmount);\n\n        // Reset to center when stopped\n        setTimeout(() => {\n          labelOffset.set(0);\n          labelRotate.set(0);\n        }, 100);\n\n        prevThumbPosition.current = currentPos;\n      }\n    }, [\n      _values,\n      labelAnimation,\n      thumbVelocity,\n      thumbPosition,\n      labelOffset,\n      labelRotate,\n    ]);\n\n    // Memoized computed values\n    const sliderColorClass = useMemo(() => {\n      if (sliderColor || thumbBorderColor) {\n        return {\n          range: sliderColor || \"ds:bg-primary\",\n          thumb: thumbBorderColor || \"ds:border-primary/50\",\n        };\n      }\n      const config = COLOR_CONFIG[color];\n      return {\n        range: config.range,\n        thumb: config.thumb,\n      };\n    }, [color, sliderColor, thumbBorderColor]);\n\n    const sliderSizeClass = useMemo(() => SIZE_CONFIG[size], [size]);\n\n    const labelColorClass = useMemo(() => {\n      if (labelColor || labelTextColor) {\n        return cn(labelColor, labelTextColor);\n      }\n\n      const config = COLOR_CONFIG[color];\n      const direction = getArrowDirection(orientation, labelPosition);\n      const arrowColor = getArrowColorClass(color, direction);\n\n      if (color === \"glass\") {\n        return `${config.labelBg} ${config.labelText} ds:backdrop-blur-sm ds:shadow-lg ds:[&>div.arrow]:${arrowColor}`;\n      }\n\n      return `${config.labelBg} ${config.labelText} ds:[&>div.arrow]:${arrowColor}`;\n    }, [color, labelPosition, orientation, labelColor, labelTextColor]);\n\n    const arrowColorClass = useMemo(() => {\n      if (labelArrowColor) return labelArrowColor;\n      const direction = getArrowDirection(orientation, labelPosition);\n      return getArrowColorClass(color, direction);\n    }, [color, labelPosition, orientation, labelArrowColor]);\n\n    const labelVisibilityClass = useMemo(() => {\n      if (showLabel === \"hover\") return \"ds:scale-0 ds:group-hover:scale-100\";\n      if (showLabel === \"always\") return \"ds:scale-100\";\n      return \"ds:hidden\";\n    }, [showLabel]);\n\n    const labelPositionClass = useMemo(\n      () => getLabelPositionClasses(orientation, labelPosition),\n      [labelPosition, orientation]\n    );\n\n    const labelPositionClassSpec = useMemo(\n      () => getSpecLabelPositionClass(orientation, labelPosition),\n      [labelPosition, orientation]\n    );\n\n    // Render label based on animation type\n    const renderLabel = React.useCallback(\n      (index: number) => {\n        if (labelAnimation === \"spec\") {\n          return (\n            <motion.div\n              className={cn(\n                \"ds:pointer-events-none ds:absolute ds:z-50 ds:flex ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:shadow-xl\",\n                labelPositionClassSpec,\n                labelColor && labelColor,\n                labelTextColor && labelTextColor,\n                !labelColor && !labelTextColor && labelColorClass\n              )}\n              data-orientation={orientation}\n              initial={\n                showLabel === \"always\"\n                  ? { opacity: 1, y: -5, scale: 1 }\n                  : { opacity: 0, y: 20, scale: 0 }\n              }\n              animate={\n                (isHovered && showLabel === \"hover\") || showLabel === \"always\"\n                  ? {\n                      opacity: 1,\n                      y: -5,\n                      scale: 1,\n                    }\n                  : {\n                      opacity: 0,\n                      y: 20,\n                      scale: 0,\n                    }\n              }\n              transition={{\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              }}\n              style={{\n                x: labelOffset,\n                rotate: labelRotate,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              <div className=\"ds:relative ds:z-1\">\n                <NumberFlow\n                  value={_values[index]}\n                  format={{ notation: \"standard\" }}\n                  isolate\n                />\n              </div>\n              {labelArrow && (\n                <div\n                  className={cn(\n                    \"ds:arrow ds:absolute ds:border-transparent\",\n                    labelPositionClass.arrow,\n                    arrowColorClass\n                  )}\n                />\n              )}\n            </motion.div>\n          );\n        }\n\n        // Standard or number-flow animation\n        return (\n          <Badge\n            size=\"lg\"\n            color={\n              labelColor || labelTextColor\n                ? \"custom\"\n                : color === \"glass\"\n                  ? \"custom\"\n                  : color === \"muted\"\n                    ? \"muted\"\n                    : color === \"accent\"\n                      ? \"accent\"\n                      : color\n            }\n            variant=\"solid\"\n            className={cn(\n              \"ds:transition-transform ds:absolute ds:px-3 ds:rounded-md\",\n              labelPositionClass.badge,\n              labelVisibilityClass,\n              labelColor && labelColor,\n              labelTextColor && labelTextColor,\n              !labelColor &&\n                !labelTextColor &&\n                color === \"glass\" &&\n                \"ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>div.arrow]:border-t-white/15\"\n            )}\n          >\n            {labelAnimation === \"number-flow\" ? (\n              <NumberFlow\n                value={_values[index]}\n                format={{ notation: \"standard\" }}\n                isolate\n              />\n            ) : (\n              <span>{labelFormatter(_values[index])}</span>\n            )}\n            {labelArrow && (\n              <div\n                className={cn(\n                  \"ds:arrow ds:absolute ds:border-transparent\",\n                  labelPositionClass.arrow,\n                  arrowColorClass\n                )}\n              />\n            )}\n          </Badge>\n        );\n      },\n      [\n        labelAnimation,\n        labelPositionClassSpec,\n        labelColor,\n        labelTextColor,\n        labelColorClass,\n        orientation,\n        showLabel,\n        labelOffset,\n        labelRotate,\n        labelFormatter,\n        _values,\n        color,\n        labelPositionClass,\n        labelVisibilityClass,\n        labelArrow,\n        arrowColorClass,\n        isHovered,\n      ]\n    );\n\n    // Render without label - use custom slider with color\n    if (!showLabel) {\n      return (\n        <SliderPrimitive.Root\n          ref={ref}\n          data-slot=\"slider\"\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          className={cn(\n            \"ds:relative ds:flex ds:w-full ds:touch-none ds:items-center ds:select-none ds:data-disabled:opacity-50 ds:data-[orientation=vertical]:h-full ds:data-[orientation=vertical]:min-h-44 ds:data-[orientation=vertical]:w-auto ds:data-[orientation=vertical]:flex-col\",\n            className\n          )}\n          {...props}\n        >\n          <SliderPrimitive.Track\n            data-slot=\"slider-track\"\n            className={cn(\n              \"ds:bg-muted ds:relative ds:grow ds:overflow-hidden ds:rounded-full ds:data-[orientation=horizontal]:w-full ds:data-[orientation=vertical]:h-full\",\n              sliderSizeClass.track\n            )}\n          >\n            <SliderPrimitive.Range\n              data-slot=\"slider-range\"\n              className={cn(\n                \"ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full\",\n                sliderColorClass.range\n              )}\n            />\n          </SliderPrimitive.Track>\n          {Array.from({ length: _values.length }, (_, index) => (\n            <SliderPrimitive.Thumb\n              key={index}\n              data-slot=\"slider-thumb\"\n              className={cn(\n                \"ds:block ds:shrink-0 ds:rounded-full ds:border ds:bg-white ds:shadow-sm ds:transition-[color,box-shadow] ds:hover:ring-4 ds:focus-visible:ring-4 ds:focus-visible:outline-hidden ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:ring-ring/50\",\n                sliderColorClass.thumb,\n                sliderSizeClass.thumb\n              )}\n            />\n          ))}\n        </SliderPrimitive.Root>\n      );\n    }\n\n    // Render with label (standard, number-flow, or spec animation)\n    return (\n      <SliderPrimitive.Root\n        ref={ref}\n        data-slot=\"slider\"\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        className={cn(\n          \"ds:relative ds:flex ds:w-full ds:touch-none ds:items-center ds:select-none ds:data-disabled:opacity-50 ds:data-[orientation=vertical]:h-full ds:data-[orientation=vertical]:min-h-44 ds:data-[orientation=vertical]:w-auto ds:data-[orientation=vertical]:flex-col\",\n          className\n        )}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            \"ds:bg-muted ds:relative ds:grow ds:overflow-hidden ds:rounded-full ds:data-[orientation=horizontal]:w-full ds:data-[orientation=vertical]:h-full\",\n            sliderSizeClass.track\n          )}\n        >\n          <SliderPrimitive.Range\n            data-slot=\"slider-range\"\n            className={cn(\n              \"ds:absolute ds:data-[orientation=horizontal]:h-full ds:data-[orientation=vertical]:w-full\",\n              sliderColorClass.range\n            )}\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            data-slot=\"slider-thumb\"\n            className={cn(\n              \"ds:group ds:block ds:shrink-0 ds:rounded-full ds:border ds:bg-white ds:shadow-sm ds:transition-[color,box-shadow] ds:hover:ring-4 ds:focus-visible:ring-4 ds:focus-visible:outline-hidden ds:disabled:pointer-events-none ds:disabled:opacity-50 ds:ring-ring/50\",\n              sliderColorClass.thumb,\n              sliderSizeClass.thumb\n            )}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          >\n            {renderLabel(index)}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n    );\n  }\n);\n\nSlider.displayName = \"Slider\";\n\nexport default Slider;\n"],"names":["COLOR_CONFIG","SIZE_CONFIG","getArrowDirection","orientation","position","getArrowColorClass","color","direction","prefix","getLabelPositionClasses","getSpecLabelPositionClass","Slider","React","className","size","showLabel","labelArrow","labelAnimation","labelFormatter","value","labelPosition","labelColor","labelTextColor","labelArrowColor","sliderColor","thumbBorderColor","defaultValue","min","max","props","ref","_values","isHovered","setIsHovered","thumbPosition","useMotionValue","thumbVelocity","prevThumbPosition","springConfig","labelOffset","useSpring","labelRotate","currentPos","velocity","maxVelocity","cappedVelocity","offsetAmount","rotateAmount","sliderColorClass","useMemo","config","sliderSizeClass","labelColorClass","cn","arrowColor","arrowColorClass","labelVisibilityClass","labelPositionClass","labelPositionClassSpec","renderLabel","index","jsxs","motion","jsx","NumberFlow","Badge","SliderPrimitive","_"],"mappings":"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"}

package/dist/esm/components/Stepper/Stepper.js

@@ -33,7 +33,7 @@ import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 import { useComposedRefs as vt } from "../../packages/ui/src/lib/compose-refs.js";
-const gt = "Stepper", At = "StepperList", dt = "StepperItem", nt = "StepperTrigger", lt = "StepperIndicator", pt = "StepperSeparator", ft = "StepperTitle", mt = "StepperDescription", Et = "StepperContent", Nt = "StepperPrev", Rt = "StepperNext", Tt = "stepperFocusGroup.onEntryFocus", Mt = { bubbles: !1, cancelable: !0 }, Dt = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], at = {
+const gt = "Stepper", At = "StepperList", it = "StepperItem", nt = "StepperTrigger", lt = "StepperIndicator", pt = "StepperSeparator", ft = "StepperTitle", mt = "StepperDescription", Et = "StepperContent", Nt = "StepperPrev", Rt = "StepperNext", Tt = "stepperFocusGroup.onEntryFocus", Mt = { bubbles: !1, cancelable: !0 }, Dt = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], at = {
   primary: {
     indicator: {
       active: "ds:border-primary ds:bg-primary ds:text-primary-foreground ds:data-[variant=dot]:bg-primary/30 ds:data-[variant=dot]:border-primary/0",
@@ -199,8 +199,8 @@ function bt(e) {
   return t.current === null && (t.current = e()), t;
 }
 function Z(e, t, s, l, b = "item") {
-  const a = Array.from(l.keys()), i = a.indexOf(t);
-  return s?.completed ? "completed" : e === t ? b === "separator" ? "inactive" : "active" : e && a.indexOf(e) > i ? "completed" : "inactive";
+  const a = Array.from(l.keys()), d = a.indexOf(t);
+  return s?.completed ? "completed" : e === t ? b === "separator" ? "inactive" : "active" : e && a.indexOf(e) > d ? "completed" : "inactive";
 }
 const Kt = o.createContext(void 0);
 function $t(e) {
@@ -235,13 +235,13 @@ function Ae(e) {
     onValueChange: l,
     onValueComplete: b,
     onValueAdd: a,
-    onValueRemove: i,
+    onValueRemove: d,
     onValidate: m,
     id: f,
     dir: n,
     orientation: v = "horizontal",
     activationMode: c = "automatic",
-    asChild: d,
+    asChild: i,
     disabled: C = !1,
     nonInteractive: y = !1,
     loop: A = !1,
@@ -258,7 +258,7 @@ function Ae(e) {
     onValueChange: l,
     onValueComplete: b,
     onValueAdd: a,
-    onValueRemove: i,
+    onValueRemove: d,
     onValidate: m
   }), u = o.useMemo(() => ({
     subscribe: (r) => (O.current.add(r), () => O.current.delete(r)),
@@ -326,7 +326,7 @@ function Ae(e) {
       T,
       M
     ]
-  ), Y = d ? z : "div";
+  ), Y = i ? z : "div";
   return /* @__PURE__ */ k(Ct.Provider, { value: u, children: /* @__PURE__ */ k(St.Provider, { value: _, children: /* @__PURE__ */ k(
     Y,
     {
@@ -354,10 +354,10 @@ function Ut(e) {
   return t;
 }
 function Ee(e) {
-  const { className: t, children: s, asChild: l, ref: b, ...a } = e, i = X(At), m = i.orientation, f = R((r) => r.value), [n, v] = o.useState(null), [c, d] = o.useState(!1), [C, y] = o.useState(0), A = o.useRef(!1), g = o.useRef(/* @__PURE__ */ new Map()), x = o.useRef(null), T = vt(b, x), M = o.useCallback((r) => {
+  const { className: t, children: s, asChild: l, ref: b, ...a } = e, d = X(At), m = d.orientation, f = R((r) => r.value), [n, v] = o.useState(null), [c, i] = o.useState(!1), [C, y] = o.useState(0), A = o.useRef(!1), g = o.useRef(/* @__PURE__ */ new Map()), x = o.useRef(null), T = vt(b, x), M = o.useCallback((r) => {
     v(r);
   }, []), V = o.useCallback(() => {
-    d(!0);
+    i(!0);
   }, []), w = o.useCallback(() => {
     y((r) => r + 1);
   }, []), O = o.useCallback(() => {
@@ -373,7 +373,7 @@ function Ee(e) {
     return P & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : P & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
   }), []), F = o.useCallback(
     (r) => {
-      a.onBlur?.(r), !r.defaultPrevented && d(!1);
+      a.onBlur?.(r), !r.defaultPrevented && i(!1);
     },
     [a.onBlur]
   ), K = o.useCallback(
@@ -431,7 +431,7 @@ function Ee(e) {
       "aria-orientation": m,
       "data-orientation": m,
       "data-slot": "stepper-list",
-      dir: i.dir,
+      dir: d.dir,
       tabIndex: c || C === 0 ? -1 : 0,
       ...a,
       ref: T,
@@ -453,7 +453,7 @@ const It = o.createContext(
 function et(e) {
   const t = o.useContext(It);
   if (!t)
-    throw new Error(`\`${e}\` must be used within \`${dt}\``);
+    throw new Error(`\`${e}\` must be used within \`${it}\``);
   return t;
 }
 function Ne(e) {
@@ -463,10 +463,10 @@ function Ne(e) {
     disabled: l = !1,
     asChild: b,
     className: a,
-    children: i,
+    children: d,
     ref: m,
     ...f
-  } = e, n = X(dt), v = tt(dt), c = n.orientation, d = n.labelPosition ?? "right", C = R((u) => u.value);
+  } = e, n = X(it), v = tt(it), c = n.orientation, i = n.labelPosition ?? "right", C = R((u) => u.value);
   Q(() => (v.addStep(t, s, l), () => {
     v.removeStep(t);
   }), [t, s, l]), Q(() => {
@@ -480,10 +480,10 @@ function Ne(e) {
     [t, y]
   ), O = () => {
     const u = "ds:relative ds:flex";
-    return c === "horizontal" ? d === "top" || d === "bottom" ? `${u} flex-col items-center flex-1 gap-2` : `${u} flex-row items-center not-last:flex-1` : `${u} flex-col`;
+    return c === "horizontal" ? i === "top" || i === "bottom" ? `${u} ds:flex-col ds:items-center ds:flex-1 ds:gap-2` : `${u} ds:flex-row ds:items-center ds:not-last:flex-1` : `${u} ds:flex-col`;
   }, h = o.useMemo(() => {
-    if (c === "horizontal" && (d === "top" || d === "bottom")) {
-      const u = o.Children.toArray(i);
+    if (c === "horizontal" && (i === "top" || i === "bottom")) {
+      const u = o.Children.toArray(d);
       let F = null, K = null, $ = null;
       const _ = [];
       u.forEach((P) => {
@@ -534,13 +534,13 @@ function Ne(e) {
         },
         "indicator-row"
       );
-      return d === "top" ? [F, E, ..._] : [E, F, ..._];
+      return i === "top" ? [F, E, ..._] : [E, F, ..._];
     }
-    return i;
+    return d;
   }, [
-    i,
-    c,
     d,
+    c,
+    i,
     M,
     V,
     T,
@@ -557,7 +557,7 @@ function Ne(e) {
       "data-orientation": c,
       "data-state": g,
       "data-slot": "stepper-item",
-      "data-label-position": d,
+      "data-label-position": i,
       dir: n.dir,
       ...f,
       ref: m,
@@ -567,7 +567,7 @@ function Ne(e) {
   ) });
 }
 function Wt(e) {
-  const { asChild: t, disabled: s, className: l, ref: b, ...a } = e, i = X(nt), m = et(nt), f = tt(nt), n = Ut(nt), v = R((p) => p.value), c = m.value, d = R((p) => p.steps.get(c)), C = i.activationMode, y = i.orientation, A = i.loop, g = i.labelPosition ?? "right", x = R((p) => p.steps), M = Array.from(x.keys()).indexOf(c) + 1, V = x.size, w = H(i.id, "trigger", c), O = H(i.id, "content", c), h = H(i.id, "title", c), I = H(i.id, "description", c), u = i.disabled || d?.disabled || s, F = v === c, K = n.tabStopId === w, $ = Z(v, c, d, x), _ = o.useRef(null), Y = vt(b, _), r = o.useRef(!1), S = o.useRef(!1);
+  const { asChild: t, disabled: s, className: l, ref: b, ...a } = e, d = X(nt), m = et(nt), f = tt(nt), n = Ut(nt), v = R((p) => p.value), c = m.value, i = R((p) => p.steps.get(c)), C = d.activationMode, y = d.orientation, A = d.loop, g = d.labelPosition ?? "right", x = R((p) => p.steps), M = Array.from(x.keys()).indexOf(c) + 1, V = x.size, w = H(d.id, "trigger", c), O = H(d.id, "content", c), h = H(d.id, "title", c), I = H(d.id, "description", c), u = d.disabled || i?.disabled || s, F = v === c, K = n.tabStopId === w, $ = Z(v, c, i, x), _ = o.useRef(null), Y = vt(b, _), r = o.useRef(!1), S = o.useRef(!1);
   o.useEffect(() => {
     function p(q) {
       Dt.includes(q.key) && (r.current = !0);
@@ -589,14 +589,14 @@ function Wt(e) {
   }), [n, w, c, K, u]);
   const N = o.useCallback(
     async (p) => {
-      if (a.onClick?.(p), !p.defaultPrevented && !u && !i.nonInteractive) {
+      if (a.onClick?.(p), !p.defaultPrevented && !u && !d.nonInteractive) {
         const D = Array.from(x.keys()).indexOf(v ?? ""), L = Array.from(x.keys()).indexOf(c) > D ? "next" : "prev";
         await f.setStateWithValidation(c, L);
       }
     },
     [
       u,
-      i.nonInteractive,
+      d.nonInteractive,
       f,
       c,
       v,
@@ -608,7 +608,7 @@ function Wt(e) {
       if (a.onFocus?.(p), p.defaultPrevented) return;
       n.onItemFocus(w);
       const D = !S.current;
-      if (!F && !u && C !== "manual" && !i.nonInteractive && D) {
+      if (!F && !u && C !== "manual" && !d.nonInteractive && D) {
         const q = Array.from(x.keys()).indexOf(v || ""), G = Array.from(x.keys()).indexOf(c) > q ? "next" : "prev";
         await f.setStateWithValidation(c, G);
       }
@@ -620,7 +620,7 @@ function Wt(e) {
       C,
       F,
       u,
-      i.nonInteractive,
+      d.nonInteractive,
       f,
       c,
       v,
@@ -630,11 +630,11 @@ function Wt(e) {
   ), P = o.useCallback(
     async (p) => {
       if (a.onKeyDown?.(p), p.defaultPrevented) return;
-      if (p.key === "Enter" && i.nonInteractive) {
+      if (p.key === "Enter" && d.nonInteractive) {
         p.preventDefault();
         return;
       }
-      if ((p.key === "Enter" || p.key === " ") && C === "manual" && !i.nonInteractive) {
+      if ((p.key === "Enter" || p.key === " ") && C === "manual" && !d.nonInteractive) {
         p.preventDefault(), !u && _.current && _.current.click();
         return;
       }
@@ -643,7 +643,7 @@ function Wt(e) {
         return;
       }
       if (p.target !== p.currentTarget) return;
-      const D = _t(p, i.dir, y);
+      const D = _t(p, d.dir, y);
       if (D !== void 0) {
         if (p.metaKey || p.ctrlKey || p.altKey || p.shiftKey)
           return;
@@ -661,14 +661,14 @@ function Wt(e) {
         }
         if (f.hasValidation() && L.length > 0) {
           const st = L[0]?.current, J = q.find(
-            (it) => it.ref.current === st
+            (dt) => dt.ref.current === st
           );
           if (J && J.value !== c) {
-            const it = Array.from(x.keys()).indexOf(
+            const dt = Array.from(x.keys()).indexOf(
               v || ""
             ), ut = Array.from(x.keys()).indexOf(
               J.value
-            ) > it ? "next" : "prev";
+            ) > dt ? "next" : "prev";
             if (ut === "next") {
               if (!await f.setStateWithValidation(
                 J.value,
@@ -685,8 +685,8 @@ function Wt(e) {
     },
     [
       n,
-      i.nonInteractive,
-      i.dir,
+      d.nonInteractive,
+      d.dir,
       C,
       y,
       A,
@@ -702,7 +702,7 @@ function Wt(e) {
       a.onMouseDown?.(p), !p.defaultPrevented && (S.current = !0, u ? p.preventDefault() : n.onItemFocus(w));
     },
     [n, w, u, a.onMouseDown]
-  ), rt = () => y === "horizontal" && (g === "top" || g === "bottom") ? g === "top" ? "flex-col-reverse" : "flex-col" : g === "top" ? "flex-col-reverse" : g === "bottom" ? "flex-col" : g === "left" ? "flex-row-reverse" : "flex-row", U = y === "horizontal" && (g === "top" || g === "bottom"), ot = o.useMemo(() => U ? o.Children.toArray(a.children).filter((D) => o.isValidElement(D) ? !(D.props["data-slot"] === "stepper-indicator" || D.type === wt) : !0) : a.children, [U, a.children]);
+  ), rt = () => y === "horizontal" && (g === "top" || g === "bottom") ? g === "top" ? "ds:flex-col-reverse" : "ds:flex-col" : g === "top" ? "ds:flex-col-reverse" : g === "bottom" ? "ds:flex-col" : g === "left" ? "ds:flex-row-reverse" : "ds:flex-row", U = y === "horizontal" && (g === "top" || g === "bottom"), ot = o.useMemo(() => U ? o.Children.toArray(a.children).filter((D) => o.isValidElement(D) ? !(D.props["data-slot"] === "stepper-indicator" || D.type === wt) : !0) : a.children, [U, a.children]);
   return /* @__PURE__ */ k(
     t ? z : "button",
     {
@@ -744,10 +744,10 @@ function wt(e) {
     asChild: l,
     ref: b,
     color: a,
-    customColor: i,
+    customColor: d,
     variant: m,
     ...f
-  } = e, n = X(lt), v = et(lt), c = R((I) => I.value), d = v.value, C = R((I) => I.steps.get(d)), y = R((I) => I.steps), A = Array.from(y.keys()).indexOf(d) + 1, g = Z(c, d, C, y), x = a ?? n.color, T = i ?? n.customColor, M = m ?? n.variant ?? "normal", V = Ot(x, T, g), w = ct(T, g, !0), O = l ? z : "div", h = M === "dot";
+  } = e, n = X(lt), v = et(lt), c = R((I) => I.value), i = v.value, C = R((I) => I.steps.get(i)), y = R((I) => I.steps), A = Array.from(y.keys()).indexOf(i) + 1, g = Z(c, i, C, y), x = a ?? n.color, T = d ?? n.customColor, M = m ?? n.variant ?? "normal", V = Ot(x, T, g), w = ct(T, g, !0), O = l ? z : "div", h = M === "dot";
   return /* @__PURE__ */ k(
     O,
     {
@@ -775,9 +775,9 @@ function Bt(e) {
     forceMount: l = !1,
     ref: b,
     color: a,
-    customColor: i,
+    customColor: d,
     ...m
-  } = e, f = X(pt), n = et(pt), v = R((h) => h.value), c = f.orientation, d = f.labelPosition ?? "right", C = R((h) => h.steps);
+  } = e, f = X(pt), n = et(pt), v = R((h) => h.value), c = f.orientation, i = f.labelPosition ?? "right", C = R((h) => h.steps);
   if (Array.from(C.keys()).indexOf(n.value) === C.size - 1 && !l)
     return null;
   const g = Z(
@@ -786,7 +786,7 @@ function Bt(e) {
     n.stepState,
     C,
     "separator"
-  ), x = a ?? f.color, T = i ?? f.customColor, M = xt(x, T, g), V = ct(T, g, !1), w = s ? z : "div", O = () => c === "horizontal" ? "h-px flex-1" : d === "top" || d === "bottom" ? "w-px absolute left-1/2 -translate-x-1/2 top-full h-full -z-10" : d === "left" ? "w-px absolute right-0 top-full h-full -z-10 translate-x-1/2" : "w-px absolute left-0 top-full h-full -z-10 -translate-x-1/2";
+  ), x = a ?? f.color, T = d ?? f.customColor, M = xt(x, T, g), V = ct(T, g, !1), w = s ? z : "div", O = () => c === "horizontal" ? "ds:h-px ds:flex-1" : i === "top" || i === "bottom" ? "ds:w-px ds:absolute ds:left-1/2 ds:-translate-x-1/2 ds:top-full ds:h-full ds:-z-10" : i === "left" ? "ds:w-px ds:absolute ds:right-0 ds:top-full ds:h-full ds:-z-10 ds:translate-x-1/2" : "ds:w-px ds:absolute ds:left-0 ds:top-full ds:h-full ds:-z-10 ds:-translate-x-1/2";
   return /* @__PURE__ */ k(
     w,
     {
@@ -810,7 +810,7 @@ function Bt(e) {
   );
 }
 function Re(e) {
-  const { className: t, asChild: s, ref: l, ...b } = e, a = X(ft), i = et(ft), m = H(a.id, "title", i.value);
+  const { className: t, asChild: s, ref: l, ...b } = e, a = X(ft), d = et(ft), m = H(a.id, "title", d.value);
   return /* @__PURE__ */ k(
     s ? z : "span",
     {
@@ -824,7 +824,7 @@ function Re(e) {
   );
 }
 function Te(e) {
-  const { className: t, asChild: s, ref: l, ...b } = e, a = X(mt), i = et(mt), m = H(a.id, "description", i.value);
+  const { className: t, asChild: s, ref: l, ...b } = e, a = X(mt), d = et(mt), m = H(a.id, "description", d.value);
   return /* @__PURE__ */ k(
     s ? z : "span",
     {
@@ -844,8 +844,8 @@ function Me(e) {
     forceMount: l = !1,
     ref: b,
     className: a,
-    ...i
-  } = e, m = X(Et), f = R((d) => d.value), n = H(m.id, "content", t), v = H(m.id, "trigger", t);
+    ...d
+  } = e, m = X(Et), f = R((i) => i.value), n = H(m.id, "content", t), v = H(m.id, "trigger", t);
   return t !== f && !l ? null : /* @__PURE__ */ k(
     s ? z : "div",
     {
@@ -854,16 +854,16 @@ function Me(e) {
       "aria-labelledby": v,
       "data-slot": "stepper-content",
       dir: m.dir,
-      ...i,
+      ...d,
       ref: b,
       className: B("ds:flex-1 ds:outline-none", a)
     }
   );
 }
 function De(e) {
-  const { asChild: t, disabled: s, ...l } = e, b = tt(Nt), a = R((d) => d.value), i = R((d) => d.steps), m = Array.from(i.keys()), f = a ? m.indexOf(a) : -1, n = s || f <= 0, v = o.useCallback(
-    async (d) => {
-      if (l.onClick?.(d), d.defaultPrevented || n) return;
+  const { asChild: t, disabled: s, ...l } = e, b = tt(Nt), a = R((i) => i.value), d = R((i) => i.steps), m = Array.from(d.keys()), f = a ? m.indexOf(a) : -1, n = s || f <= 0, v = o.useCallback(
+    async (i) => {
+      if (l.onClick?.(i), i.defaultPrevented || n) return;
       const C = Math.max(f - 1, 0), y = m[C];
       y && b.setState("value", y);
     },
@@ -881,9 +881,9 @@ function De(e) {
   );
 }
 function Oe(e) {
-  const { asChild: t, disabled: s, ...l } = e, b = tt(Rt), a = R((d) => d.value), i = R((d) => d.steps), m = Array.from(i.keys()), f = a ? m.indexOf(a) : -1, n = s || f >= m.length - 1, v = o.useCallback(
-    async (d) => {
-      if (l.onClick?.(d), d.defaultPrevented || n) return;
+  const { asChild: t, disabled: s, ...l } = e, b = tt(Rt), a = R((i) => i.value), d = R((i) => i.steps), m = Array.from(d.keys()), f = a ? m.indexOf(a) : -1, n = s || f >= m.length - 1, v = o.useCallback(
+    async (i) => {
+      if (l.onClick?.(i), i.defaultPrevented || n) return;
       const C = Math.min(f + 1, m.length - 1), y = m[C];
       y && await b.setStateWithValidation(y, "next");
     },