aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/input/GlassSlider.js

@@ -0,0 +1,393 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import React, { forwardRef, useRef, useState, useCallback } from 'react';
+import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import '../../primitives/motion/MotionFramer.js';
+import { useA11yId, announceToScreenReader, createFormFieldA11y } from '../../utils/a11y.js';
+
+const GlassSlider = /*#__PURE__*/forwardRef(({
+  value,
+  defaultValue,
+  onChange,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  orientation = "horizontal",
+  size = "md",
+  variant = "default",
+  showValue = false,
+  showTicks = false,
+  ticks,
+  label,
+  description,
+  thumbContent,
+  inverted = false,
+  formatValue = val => val.toString(),
+  range = false,
+  error,
+  required = false,
+  respectMotionPreference = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  className,
+  id,
+  ...props
+}, ref) => {
+  const {
+    prefersReducedMotion,
+    isMotionSafe
+  } = useMotionPreferenceContext();
+  const shouldAnimate = isMotionSafe && !prefersReducedMotion;
+  // Generate unique IDs for accessibility
+  const sliderId = useA11yId("glass-slider");
+  const finalId = id || sliderId;
+  const labelId = label ? useA11yId("glass-slider-label") : undefined;
+  const descriptionId = description ? useA11yId("glass-slider-description") : undefined;
+  const errorId = error ? useA11yId("glass-slider-error") : undefined;
+  const trackRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragIndex, setDragIndex] = useState(0);
+  const isInvalid = !!error;
+  // Create accessibility attributes
+  const a11yProps = createFormFieldA11y({
+    id: finalId,
+    label: !ariaLabelledBy && !labelId ? ariaLabel || label : undefined,
+    description: description,
+    error: error,
+    required: required,
+    invalid: isInvalid,
+    disabled: disabled,
+    labelId: ariaLabelledBy || labelId,
+    descriptionId: ariaDescribedBy || descriptionId,
+    errorId: errorId
+  });
+  // Announce error state changes
+  React.useEffect(() => {
+    if (error) {
+      announceToScreenReader(`Slider error: ${error}`, "assertive");
+    }
+  }, [error]);
+  // Initialize internal value
+  const getInitialValue = () => {
+    if (value !== undefined) return value;
+    if (defaultValue !== undefined) return defaultValue;
+    return range ? [min, max] : min;
+  };
+  const [internalValue, setInternalValue] = useState(getInitialValue);
+  const currentValue = value !== undefined ? value : internalValue;
+  // Ensure value is always an array for consistent handling
+  const valueArray = Array.isArray(currentValue) ? currentValue : [currentValue];
+  const isRange = range || valueArray.length > 1;
+  const sizeConfig = {
+    sm: {
+      track: orientation === "horizontal" ? "h-1.5" : "w-1.5",
+      thumb: "h-4 w-4",
+      label: "glass-text-xs",
+      tick: "h-1 w-px"
+    },
+    md: {
+      track: orientation === "horizontal" ? "h-2" : "w-2",
+      thumb: "h-5 w-5",
+      label: "glass-text-sm",
+      tick: "h-1.5 w-px"
+    },
+    lg: {
+      track: orientation === "horizontal" ? "h-3" : "w-3",
+      thumb: "h-6 w-6",
+      label: "glass-text-base",
+      tick: "h-2 w-px"
+    }
+  };
+  const variantConfig = {
+    default: {
+      track: "bg-muted/50",
+      fill: "bg-primary",
+      thumb: "bg-white border-primary/20 shadow-lg"
+    },
+    success: {
+      track: "bg-muted/50",
+      fill: "bg-green-500",
+      thumb: "bg-white border-green-400/20 shadow-lg"
+    },
+    warning: {
+      track: "bg-muted/50",
+      fill: "bg-amber-500",
+      thumb: "bg-white border-amber-400/20 shadow-lg"
+    },
+    error: {
+      track: "bg-muted/50",
+      fill: "bg-red-500",
+      thumb: "bg-white border-red-400/20 shadow-lg"
+    },
+    info: {
+      track: "bg-muted/50",
+      fill: "bg-blue-500",
+      thumb: "bg-white border-blue-400/20 shadow-lg"
+    }
+  };
+  const config = sizeConfig[size];
+  const colors = variantConfig[variant];
+  // Utility functions
+  const clampValue = val => Math.max(min, Math.min(max, val));
+  const snapToStep = val => {
+    const snapped = Math.round((val - min) / step) * step + min;
+    return clampValue(snapped);
+  };
+  const getPercentage = val => {
+    return (val - min) / (max - min) * 100;
+  };
+  const getValueFromPercentage = percentage => {
+    const val = percentage / 100 * (max - min) + min;
+    return snapToStep(val);
+  };
+  // Generate tick marks
+  const generateTicks = () => {
+    if (!showTicks) return [];
+    if (Array.isArray(ticks)) {
+      return ticks.filter(tick => tick >= min && tick <= max);
+    }
+    const tickCount = typeof ticks === "number" ? ticks : Math.max(2, Math.min(10, (max - min) / step + 1));
+    const tickStep = (max - min) / (tickCount - 1);
+    return Array.from({
+      length: tickCount
+    }, (_, i) => min + i * tickStep);
+  };
+  const tickMarks = generateTicks();
+  // Handle pointer events
+  const getPointerPosition = event => {
+    if (!trackRef.current) return 0;
+    const rect = trackRef.current.getBoundingClientRect();
+    const isHorizontal = orientation === "horizontal";
+    let position;
+    if (isHorizontal) {
+      position = (event.clientX - rect.left) / rect.width * 100;
+    } else {
+      position = (rect.bottom - event.clientY) / rect.height * 100;
+    }
+    return inverted ? 100 - position : position;
+  };
+  const updateValue = useCallback(newValueArray => {
+    const clampedValues = newValueArray.map(clampValue);
+    const finalValue = isRange ? clampedValues : clampedValues[0];
+    if (value === undefined) {
+      setInternalValue(finalValue);
+    }
+    onChange?.(finalValue);
+    onValueChange?.(finalValue);
+    // Announce value changes for screen readers
+    const valueText = isRange ? `Range from ${formatValue(clampedValues[0])} to ${formatValue(clampedValues[1])}` : `Value ${formatValue(clampedValues[0])}`;
+    announceToScreenReader(valueText, "polite");
+  }, [value, onChange, onValueChange, isRange, formatValue]);
+  const handlePointerDown = (event, thumbIndex) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    setDragIndex(thumbIndex);
+    const handlePointerMove = e => {
+      const percentage = getPointerPosition(e);
+      const newValue = getValueFromPercentage(percentage);
+      const newValues = [...valueArray];
+      newValues[thumbIndex] = newValue;
+      // Ensure range values don't cross
+      if (isRange && newValues.length === 2) {
+        if (thumbIndex === 0 && newValue > newValues[1]) {
+          newValues[0] = newValues[1];
+        } else if (thumbIndex === 1 && newValue < newValues[0]) {
+          newValues[1] = newValues[0];
+        }
+      }
+      updateValue(newValues);
+    };
+    const handlePointerUp = () => {
+      setIsDragging(false);
+      setDragIndex(0);
+      onValueCommit?.(isRange ? valueArray : valueArray[0]);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  };
+  const handleTrackClick = event => {
+    if (disabled || isDragging) return;
+    const percentage = getPointerPosition(event);
+    const newValue = getValueFromPercentage(percentage);
+    if (isRange) {
+      // Find closest thumb
+      const distances = valueArray.map(val => Math.abs(val - newValue));
+      const closestIndex = distances.indexOf(Math.min(...distances));
+      const newValues = [...valueArray];
+      newValues[closestIndex] = newValue;
+      updateValue(newValues);
+    } else {
+      updateValue([newValue]);
+    }
+  };
+  // Calculate fill styles
+  const getFillStyle = () => {
+    if (isRange && valueArray.length === 2) {
+      const start = getPercentage(Math.min(...valueArray));
+      const end = getPercentage(Math.max(...valueArray));
+      if (orientation === "horizontal") {
+        return {
+          left: `${start}%`,
+          width: `${end - start}%`
+        };
+      } else {
+        return {
+          bottom: `${start}%`,
+          height: `${end - start}%`
+        };
+      }
+    } else {
+      const percentage = getPercentage(valueArray[0]);
+      if (orientation === "horizontal") {
+        return {
+          width: `${percentage}%`
+        };
+      } else {
+        return {
+          height: `${percentage}%`
+        };
+      }
+    }
+  };
+  // Render thumbs
+  const labelledBy = a11yProps["aria-labelledby"];
+  const describedBy = a11yProps["aria-describedby"];
+  const errorMessageId = a11yProps["aria-errormessage"];
+  const isFieldRequired = a11yProps["aria-required"];
+  const isFieldDisabled = a11yProps["aria-disabled"];
+  const resolvedAriaLabel = ariaLabel || (!labelledBy ? label : undefined) || "Slider control";
+  const renderThumbs = () => {
+    return valueArray.map((val, index) => {
+      const percentage = getPercentage(val);
+      const position = orientation === "horizontal" ? {
+        left: `${percentage}%`
+      } : {
+        bottom: `${percentage}%`
+      };
+      const thumbLabel = labelledBy || !resolvedAriaLabel ? undefined : isRange ? `${resolvedAriaLabel} ${index === 0 ? "start" : "end"}` : resolvedAriaLabel;
+      return jsxs(OptimizedGlassCore, {
+        elevation: "level3",
+        intensity: "strong",
+        depth: 2,
+        tint: "neutral",
+        border: "glow",
+        animation: shouldAnimate && respectMotionPreference ? "float" : "none",
+        performanceMode: "high",
+        liftOnHover: !disabled,
+        press: true,
+        className: cn("glass-slider-thumb absolute flex items-center justify-center", "glass-radius-full cursor-grab transition-all duration-200 glass-focus", "transform -translate-x-1/2 -translate-y-1/2",
+        // Size
+        config.thumb,
+        // States
+        disabled && "opacity-50 cursor-not-allowed", isDragging && dragIndex === index && (shouldAnimate && respectMotionPreference ? "scale-110" : "") + " cursor-grabbing",
+        // Position
+        orientation === "horizontal" ? "top-1/2" : "left-1/2"),
+        style: position,
+        onPointerDown: e => handlePointerDown(e, index),
+        role: "slider",
+        "aria-label": thumbLabel,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": describedBy,
+        "aria-errormessage": errorMessageId,
+        "aria-orientation": orientation,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": val,
+        "aria-valuetext": formatValue(val),
+        "aria-invalid": isInvalid || undefined,
+        "aria-required": isFieldRequired,
+        "aria-disabled": isFieldDisabled,
+        tabIndex: disabled ? -1 : 0,
+        children: [thumbContent, showValue && jsx("div", {
+          className: cn("absolute whitespace-nowrap glass-px-2 glass-py-1 glass-radius-md", "bg-background/80 border border-border/20", "text-foreground font-medium glass-backdrop-blur-md", config.label, orientation === "horizontal" ? "-top-10" : "-left-16"),
+          children: formatValue(val)
+        })]
+      }, index);
+    });
+  };
+  return jsxs("div", {
+    className: cn("glass-slider-container", className),
+    children: [label && jsx("label", {
+      id: labelId,
+      htmlFor: finalId,
+      className: cn("glass-slider-label block font-medium text-foreground glass-mb-2", config.label, required && 'after:content-["*"] after:glass-ml-1 after:text-destructive'),
+      children: label
+    }), jsxs("div", {
+      ref: ref,
+      id: finalId,
+      className: cn("glass-slider relative flex items-center", orientation === "horizontal" ? "w-full h-6" : "h-32 w-6", disabled && "opacity-50", error && "ring-2 ring-destructive/50 glass-radius-lg"),
+      role: "group",
+      "aria-labelledby": labelledBy,
+      "aria-label": labelledBy ? undefined : resolvedAriaLabel,
+      "aria-describedby": describedBy,
+      "aria-errormessage": errorMessageId,
+      "aria-required": isFieldRequired,
+      "aria-invalid": a11yProps["aria-invalid"],
+      "aria-disabled": isFieldDisabled,
+      "data-orientation": orientation,
+      ...props,
+      children: [jsxs("div", {
+        ref: trackRef,
+        className: cn("glass-slider-track relative glass-backdrop-blur-md glass-radius-full border border-border/20", orientation === "horizontal" ? "w-full" : "h-full", config.track, colors.track, "cursor-pointer"),
+        onPointerDown: handleTrackClick,
+        children: [showTicks && jsx("div", {
+          className: 'absolute inset-0',
+          children: tickMarks.map((tick, index) => {
+            const percentage = getPercentage(tick);
+            const position = orientation === "horizontal" ? {
+              left: `${percentage}%`
+            } : {
+              bottom: `${percentage}%`
+            };
+            return jsx("div", {
+              className: cn("absolute bg-foreground/30", orientation === "horizontal" ? cn(config.tick, "top-1/2 transform -translate-y-1/2") : cn(config.tick.replace("h-", "w-").replace("w-px", "h-px"), "left-1/2 transform -translate-x-1/2")),
+              style: position
+            }, index);
+          })
+        }), jsx("div", {
+          className: cn("glass-slider-fill absolute glass-radius-full transition-all duration-150", orientation === "horizontal" ? "h-full top-0" : "w-full left-0", colors.fill),
+          style: getFillStyle(),
+          children: jsx("div", {
+            className: 'absolute inset-0 glass-sheen'
+          })
+        }), jsx("div", {
+          className: 'absolute inset-0 glass-radius-full glass-gradient-primary glass-gradient-primary via-white/5 glass-gradient-primary'
+        })]
+      }), renderThumbs()]
+    }), description && jsx("p", {
+      id: descriptionId,
+      className: cn("glass-slider-description glass-text-secondary glass-mt-1", size === "sm" ? "glass-text-xs" : "glass-text-sm"),
+      children: description
+    }), error && jsx("p", {
+      id: errorId,
+      className: cn("glass-slider-error text-destructive glass-mt-1", size === "sm" ? "glass-text-xs" : "glass-text-sm"),
+      role: "alert",
+      "aria-live": "polite",
+      children: error
+    }), showValue && jsxs("div", {
+      className: cn("flex justify-between glass-mt-2", config.label, "glass-text-secondary"),
+      children: [jsx("span", {
+        children: formatValue(min)
+      }), jsx("span", {
+        children: formatValue(max)
+      })]
+    })]
+  });
+});
+GlassSlider.displayName = "GlassSlider";
+
+export { GlassSlider, GlassSlider as default };
+//# sourceMappingURL=GlassSlider.js.map

package/dist/esm/components/input/GlassSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassSlider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/input/GlassStep.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+import { GlassStepIcon } from './GlassStepIcon.js';
+import { GlassStepLabel } from './GlassStepLabel.js';
+
+// Get step state classes
+const getStepStateClasses = (active, completed, disabled, clickable) => {
+  const baseClasses = ['flex items-center relative flex-1 glass-p-2 transition-all duration-300 ease-in-out', clickable && !disabled ? 'cursor-pointer hover:bg-glass-light-primary/5 hover:scale-[1.01]' : 'cursor-default'];
+  if (disabled) {
+    baseClasses.push('opacity-50 pointer-events-none');
+  }
+  return baseClasses.filter(Boolean).join(' ');
+};
+// Get orientation classes
+const getOrientationClasses = orientation => {
+  return orientation === 'vertical' ? 'flex-col text-center' : 'flex-row text-left';
+};
+// Use the specific internal props type
+const GlassStep = /*#__PURE__*/forwardRef(({
+  step,
+  index,
+  active,
+  completed,
+  orientation,
+  onClick,
+  intent = 'neutral',
+  elevation = 'level1',
+  tier = 'medium',
+  className,
+  style
+}, ref // Receive the forwarded ref
+) => {
+  const isClickable = !!onClick;
+  const isDisabled = step.disabled || false;
+  const finalOrientation = orientation || 'horizontal';
+  const handleClick = () => {
+    if (onClick && !isDisabled) {
+      onClick(step);
+    }
+  };
+  const stepStateClasses = getStepStateClasses(active, completed, isDisabled, isClickable);
+  const orientationClasses = getOrientationClasses(finalOrientation);
+  return jsx(MotionFramer, {
+    "data-glass-component": true,
+    children: jsxs(OptimizedGlassCore, {
+      ref: ref,
+      intent: intent,
+      elevation: elevation,
+      tier: tier,
+      className: cn(stepStateClasses, orientationClasses, className),
+      style: style,
+      onClick: handleClick,
+      role: isClickable ? 'button' : 'listitem',
+      "aria-label": `Step ${index + 1}: ${step.label || step.title}${active ? ' (current)' : ''}${completed ? ' (completed)' : ''}${isDisabled ? ' (disabled)' : ''}`,
+      "aria-current": active ? 'step' : undefined,
+      "aria-disabled": isDisabled,
+      tabIndex: isClickable && !isDisabled ? 0 : -1,
+      onKeyDown: isClickable && !isDisabled ? e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick();
+        }
+      } : undefined,
+      children: [jsx(GlassStepIcon, {
+        index: index,
+        active: active,
+        completed: completed,
+        icon: step.icon,
+        intent: intent,
+        elevation: elevation,
+        tier: tier
+      }), jsx(GlassStepLabel, {
+        label: step.label || step.title,
+        active: active,
+        completed: completed,
+        orientation: finalOrientation,
+        intent: intent,
+        elevation: elevation,
+        tier: tier
+      })]
+    })
+  });
+});
+GlassStep.displayName = 'GlassStep';
+
+export { GlassStep };
+//# sourceMappingURL=GlassStep.js.map

package/dist/esm/components/input/GlassStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassStep.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/input/GlassStepIcon.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+
+// Get icon state classes
+const getIconStateClasses = (active, completed) => {
+  if (active) {
+    return "bg-primary-500 glass-text-primary border-primary-300 shadow-[0_0_12px_3px_var(--glass-color-primary,0.5)]";
+  }
+  if (completed) {
+    return "bg-success-500 glass-text-primary border-success-300";
+  }
+  return "bg-gray-200 glass-text-secondary border-gray-200 dark:bg-gray-700 dark:glass-text-secondary dark:border-gray-600";
+};
+const GlassStepIcon = ({
+  index,
+  active,
+  completed,
+  icon,
+  intent = "neutral",
+  elevation = "level2",
+  tier = "medium",
+  className,
+  style
+}) => {
+  const getIconContent = () => {
+    if (icon) {
+      // If icon is a React element, render it directly
+      return typeof icon === "string" ? icon : icon;
+    }
+    if (completed) {
+      return jsx(Check, {
+        size: 16
+      });
+    }
+    return index + 1; // Display step number
+  };
+  const iconStateClasses = getIconStateClasses(active, completed);
+  return jsx(MotionFramer, {
+    "data-glass-component": true,
+    className: 'inline-block',
+    children: jsx(OptimizedGlassCore, {
+      intent: intent,
+      elevation: elevation,
+      tier: tier,
+      "aria-hidden": "true",
+      className: cn(
+      // Base styles
+      "w-6 h-6 min-w-6 glass-radius-full", "flex items-center justify-center", "relative z-[1] flex-shrink-0", "glass-text-xs font-semibold", "transition-all duration-300 ease-in-out", "border",
+      // State-based styles
+      iconStateClasses, className),
+      style: style,
+      children: getIconContent()
+    })
+  });
+};
+GlassStepIcon.displayName = "GlassStepIcon";
+
+export { GlassStepIcon };
+//# sourceMappingURL=GlassStepIcon.js.map

package/dist/esm/components/input/GlassStepIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassStepIcon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/input/GlassStepLabel.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+
+// Get label state classes
+const getLabelStateClasses = (active, completed) => {
+  if (active) {
+    return 'text-primary-600 font-semibold dark:text-primary-400';
+  }
+  if (completed) {
+    return 'glass-text-secondary font-normal dark:glass-text-secondary';
+  }
+  return 'glass-text-secondary font-normal dark:glass-text-secondary';
+};
+// Get orientation classes
+const getOrientationClasses = orientation => {
+  return orientation === 'horizontal' ? 'glass-ml-2' : 'glass-mt-1';
+};
+const GlassStepLabel = ({
+  label,
+  active,
+  completed,
+  orientation,
+  intent = 'neutral',
+  elevation = 'level1',
+  tier = 'low',
+  className,
+  style
+}) => {
+  if (!label) {
+    return null;
+  }
+  const labelStateClasses = getLabelStateClasses(active, completed);
+  const orientationClasses = getOrientationClasses(orientation);
+  return jsx(MotionFramer, {
+    "data-glass-component": true,
+    className: cn(orientationClasses, 'transition-all duration-300 ease-in-out'),
+    children: jsx("span", {
+      className: cn(
+      // Base styles
+      'glass-text-sm leading-tight', 'transition-all duration-300 ease-in-out',
+      // State-based styles
+      labelStateClasses, className),
+      style: style,
+      children: label
+    })
+  });
+};
+GlassStepLabel.displayName = 'GlassStepLabel';
+
+export { GlassStepLabel };
+//# sourceMappingURL=GlassStepLabel.js.map

package/dist/esm/components/input/GlassStepLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassStepLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}