aura-glass 2.0.39 → 2.1.0

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

@@ -0,0 +1,354 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { forwardRef, useRef, useState, useEffect, 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 { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+import { useA11yId, announceToScreenReader, createFormFieldA11y } from '../../utils/a11y.js';
+import { useGlassSound } from '../../utils/soundDesign.js';
+
+const GlassStepper = /*#__PURE__*/forwardRef(({
+  value,
+  defaultValue = 0,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision = 0,
+  disabled = false,
+  size = "md",
+  variant = "default",
+  orientation = "horizontal",
+  showInput = true,
+  allowInput = true,
+  label,
+  description,
+  error,
+  required = false,
+  formatValue = val => val.toFixed(precision),
+  parseValue = val => parseFloat(val) || 0,
+  incrementContent,
+  decrementContent,
+  repeatOnLongPress = true,
+  longPressDelay = 500,
+  longPressInterval = 100,
+  respectMotionPreference = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  className,
+  id,
+  ...props
+}, ref) => {
+  const {
+    prefersReducedMotion,
+    isMotionSafe
+  } = useMotionPreferenceContext();
+  const {
+    play
+  } = useGlassSound();
+  // Generate unique IDs for accessibility
+  const stepperId = useA11yId("glass-stepper");
+  const finalId = id || stepperId;
+  const labelId = label ? useA11yId("glass-stepper-label") : undefined;
+  const descriptionId = description ? useA11yId("glass-stepper-description") : undefined;
+  const errorId = error ? useA11yId("glass-stepper-error") : undefined;
+  const inputRef = useRef(null);
+  const longPressTimeoutRef = useRef();
+  const longPressIntervalRef = useRef();
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  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
+  useEffect(() => {
+    if (error) {
+      announceToScreenReader(`Stepper error: ${error}`, "assertive");
+    }
+  }, [error]);
+  // Initialize internal value
+  const [internalValue, setInternalValue] = useState(value ?? defaultValue);
+  const currentValue = value !== undefined ? value : internalValue;
+  // Update input value when current value changes
+  useEffect(() => {
+    if (!isInputFocused) {
+      setInputValue(formatValue(currentValue));
+    }
+  }, [currentValue, formatValue, isInputFocused]);
+  const sizeConfig = {
+    sm: {
+      button: "h-6 w-6 glass-text-xs",
+      input: "h-6 glass-px-2 glass-text-xs",
+      label: "glass-text-xs",
+      container: orientation === "horizontal" ? "glass-gap-1" : "glass-gap-0.5"
+    },
+    md: {
+      button: "h-8 w-8 glass-text-sm",
+      input: "h-8 glass-px-3 glass-text-sm",
+      label: "glass-text-sm",
+      container: orientation === "horizontal" ? "glass-gap-2" : "glass-gap-1"
+    },
+    lg: {
+      button: "h-10 w-10 glass-text-base",
+      input: "h-10 glass-px-4 glass-text-base",
+      label: "glass-text-base",
+      container: orientation === "horizontal" ? "glass-gap-3" : "glass-gap-1.5"
+    }
+  };
+  const variantConfig = {
+    default: {
+      button: "border-border/20 hover:border-primary/30 focus:border-primary/50",
+      input: "border-border/20 focus:border-primary/50",
+      buttonBg: "bg-background/50",
+      inputBg: "bg-background/30"
+    },
+    success: {
+      button: "border-green-200/30 hover:border-green-300/40 focus:border-green-400/50",
+      input: "border-green-200/30 focus:border-green-400/50",
+      buttonBg: "bg-green-50/30",
+      inputBg: "bg-green-50/20"
+    },
+    warning: {
+      button: "border-amber-200/30 hover:border-amber-300/40 focus:border-amber-400/50",
+      input: "border-amber-200/30 focus:border-amber-400/50",
+      buttonBg: "bg-amber-50/30",
+      inputBg: "bg-amber-50/20"
+    },
+    error: {
+      button: "border-red-200/30 hover:border-red-300/40 focus:border-red-400/50",
+      input: "border-red-200/30 focus:border-red-400/50",
+      buttonBg: "bg-red-50/30",
+      inputBg: "bg-red-50/20"
+    },
+    info: {
+      button: "border-blue-200/30 hover:border-blue-300/40 focus:border-blue-400/50",
+      input: "border-blue-200/30 focus:border-blue-400/50",
+      buttonBg: "bg-blue-50/30",
+      inputBg: "bg-blue-50/20"
+    }
+  };
+  const config = sizeConfig[size];
+  const colors = variantConfig[variant];
+  // Utility functions
+  const clampValue = useCallback(val => {
+    return Math.max(min, Math.min(max, val));
+  }, [min, max]);
+  const roundToPrecision = useCallback(val => {
+    return Math.round(val * Math.pow(10, precision)) / Math.pow(10, precision);
+  }, [precision]);
+  const updateValue = useCallback(newValue => {
+    const clampedValue = clampValue(newValue);
+    const roundedValue = roundToPrecision(clampedValue);
+    if (value === undefined) {
+      setInternalValue(roundedValue);
+    }
+    onChange?.(roundedValue);
+    // Announce value changes for screen readers
+    announceToScreenReader(`Value ${formatValue(roundedValue)}`, "polite");
+  }, [value, onChange, clampValue, roundToPrecision, formatValue]);
+  const increment = useCallback(() => {
+    if (disabled || currentValue >= max) return;
+    updateValue(currentValue + step);
+    play("tap");
+  }, [disabled, currentValue, max, step, updateValue, play]);
+  const decrement = useCallback(() => {
+    if (disabled || currentValue <= min) return;
+    updateValue(currentValue - step);
+    play("tap");
+  }, [disabled, currentValue, min, step, updateValue, play]);
+  const handleInputChange = useCallback(e => {
+    setInputValue(e.target.value);
+  }, []);
+  const handleInputBlur = useCallback(() => {
+    setIsInputFocused(false);
+    const parsed = parseValue(inputValue);
+    if (!isNaN(parsed)) {
+      updateValue(parsed);
+    } else {
+      setInputValue(formatValue(currentValue));
+    }
+  }, [inputValue, parseValue, updateValue, currentValue, formatValue]);
+  const handleInputKeyDown = useCallback(e => {
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault();
+        increment();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        decrement();
+        break;
+      case "Enter":
+        e.preventDefault();
+        inputRef.current?.blur();
+        break;
+      case "Escape":
+        e.preventDefault();
+        setInputValue(formatValue(currentValue));
+        inputRef.current?.blur();
+        break;
+    }
+  }, [increment, decrement, formatValue, currentValue]);
+  // Long press handlers
+  const startLongPress = useCallback(action => {
+    if (!repeatOnLongPress) return;
+    longPressTimeoutRef.current = setTimeout(() => {
+      longPressIntervalRef.current = setInterval(action, longPressInterval);
+    }, longPressDelay);
+  }, [repeatOnLongPress, longPressDelay, longPressInterval]);
+  const stopLongPress = useCallback(() => {
+    if (longPressTimeoutRef.current) {
+      clearTimeout(longPressTimeoutRef.current);
+    }
+    if (longPressIntervalRef.current) {
+      clearInterval(longPressIntervalRef.current);
+    }
+  }, []);
+  const handleIncrementMouseDown = useCallback(() => {
+    increment();
+    startLongPress(increment);
+  }, [increment, startLongPress]);
+  const handleDecrementMouseDown = useCallback(() => {
+    decrement();
+    startLongPress(decrement);
+  }, [decrement, startLongPress]);
+  // Clean up long press timers
+  useEffect(() => {
+    return () => {
+      stopLongPress();
+    };
+  }, [stopLongPress]);
+  const canIncrement = !disabled && currentValue < max;
+  const canDecrement = !disabled && currentValue > min;
+  const renderButton = (type, icon, onMouseDown, canPerformAction) => jsx(MotionFramer, {
+    preset: isMotionSafe && respectMotionPreference ? "scaleIn" : "none",
+    children: jsx(OptimizedGlassCore, {
+      elevation: "level2",
+      intensity: "medium",
+      depth: 1,
+      tint: "neutral",
+      border: "subtle",
+      animation: isMotionSafe && respectMotionPreference ? "float" : "none",
+      performanceMode: "high",
+      liftOnHover: !disabled,
+      press: true,
+      className: cn("glass-stepper-button flex items-center justify-center", "glass-radius-md border glass-glass-backdrop-blur-md transition-all duration-200 glass-contrast-guard", "focus:outline-none glass-focus select-none glass-touch-target", config.button, colors.button, colors.buttonBg, !canPerformAction && "opacity-50 cursor-not-allowed", canPerformAction && "cursor-pointer hover:scale-105 active:scale-95"),
+      onMouseDown: canPerformAction ? onMouseDown : undefined,
+      onMouseUp: stopLongPress,
+      onMouseLeave: stopLongPress,
+      onTouchStart: canPerformAction ? onMouseDown : undefined,
+      onTouchEnd: stopLongPress,
+      tabIndex: disabled ? -1 : 0,
+      role: "button",
+      "aria-label": type === "increment" ? "Increase value" : "Decrease value",
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if (canPerformAction) {
+            type === "increment" ? increment() : decrement();
+          }
+        }
+      },
+      children: icon
+    })
+  });
+  const incrementButton = renderButton("increment", incrementContent || jsx("svg", {
+    className: 'w-4 h-4',
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    children: jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M12 6v12m6-6H6"
+    })
+  }), handleIncrementMouseDown, canIncrement);
+  const decrementButton = renderButton("decrement", decrementContent || jsx("svg", {
+    className: 'w-4 h-4',
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+    children: jsx("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M18 12H6"
+    })
+  }), handleDecrementMouseDown, canDecrement);
+  const inputElement = showInput && jsx(OptimizedGlassCore, {
+    elevation: "level1",
+    intensity: "subtle",
+    depth: 0.5,
+    tint: "neutral",
+    border: "subtle",
+    className: cn("glass-stepper-input", colors.inputBg),
+    children: jsx("input", {
+      ref: inputRef,
+      type: "text",
+      value: inputValue,
+      onChange: handleInputChange,
+      onFocus: () => setIsInputFocused(true),
+      onBlur: handleInputBlur,
+      onKeyDown: handleInputKeyDown,
+      disabled: disabled || !allowInput,
+      className: cn("w-full text-center glass-radius-md border glass-glass-backdrop-blur-md glass-contrast-guard", "bg-transparent text-foreground placeholder:glass-text-secondary", "focus:outline-none glass-focus transition-all duration-200", config.input, colors.input, disabled && "cursor-not-allowed opacity-50"),
+      ...a11yProps,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": currentValue,
+      "aria-valuetext": formatValue(currentValue),
+      role: "spinbutton"
+    })
+  });
+  return jsxs("div", {
+    className: cn("glass-stepper-container", className),
+    children: [label && jsx("label", {
+      id: labelId,
+      htmlFor: finalId,
+      className: cn("glass-stepper-label block font-medium text-foreground glass-mb-2", config.label, required && 'after:content-["*"] after:glass-ml-1 after:text-destructive'),
+      children: label
+    }), jsx("div", {
+      ref: ref,
+      id: finalId,
+      className: cn("glass-stepper inline-flex items-center", orientation === "horizontal" ? "flex-row" : "flex-col", config.container, disabled && "opacity-50", error && "ring-2 ring-destructive/50 glass-radius-lg glass-p-1"),
+      ...props,
+      children: orientation === "horizontal" ? jsxs(Fragment, {
+        children: [decrementButton, inputElement, incrementButton]
+      }) : jsxs(Fragment, {
+        children: [incrementButton, inputElement, decrementButton]
+      })
+    }), description && jsx("p", {
+      id: descriptionId,
+      className: cn("glass-stepper-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-stepper-error text-destructive glass-mt-1", size === "sm" ? "glass-text-xs" : "glass-text-sm"),
+      role: "alert",
+      "aria-live": "polite",
+      children: error
+    })]
+  });
+});
+GlassStepper.displayName = "GlassStepper";
+
+export { GlassStepper, GlassStepper as default };
+//# sourceMappingURL=GlassStepper.js.map

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

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

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

@@ -0,0 +1,171 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import React, { forwardRef } 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 GlassSwitch = /*#__PURE__*/forwardRef(({
+  checked,
+  defaultChecked = false,
+  onChange,
+  onCheckedChange,
+  size = "md",
+  variant = "default",
+  label,
+  description,
+  labelPosition = "right",
+  disabled = false,
+  loading = false,
+  icons,
+  focusRing = true,
+  thumbContent,
+  error,
+  required = false,
+  respectMotionPreference = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  className,
+  id,
+  ...props
+}, ref) => {
+  const {
+    prefersReducedMotion,
+    isMotionSafe
+  } = useMotionPreferenceContext();
+  // Generate unique IDs for accessibility
+  const switchId = useA11yId("glass-switch");
+  const finalId = id || switchId;
+  const labelId = label ? useA11yId("glass-switch-label") : undefined;
+  const descriptionId = description ? useA11yId("glass-switch-description") : undefined;
+  const errorId = error ? useA11yId("glass-switch-error") : undefined;
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+  const isChecked = checked !== undefined ? checked : internalChecked;
+  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 || loading,
+    labelId: ariaLabelledBy || labelId,
+    descriptionId: ariaDescribedBy || descriptionId,
+    errorId: errorId
+  });
+  // Announce error state changes
+  React.useEffect(() => {
+    if (error) {
+      announceToScreenReader(`Switch error: ${error}`, "assertive");
+    }
+  }, [error]);
+  const handleToggle = event => {
+    if (disabled || loading) return;
+    const newChecked = !isChecked;
+    if (checked === undefined) {
+      setInternalChecked(newChecked);
+    }
+    onChange?.(newChecked);
+    onCheckedChange?.(newChecked);
+    props?.onClick?.(event);
+    // Announce state change
+    announceToScreenReader(`Switch ${newChecked ? "on" : "off"}`, "polite");
+  };
+  const sizeConfig = {
+    sm: {
+      track: "h-5 w-9",
+      thumb: "h-4 w-4",
+      translate: "translate-x-4",
+      text: "glass-text-xs",
+      gap: "glass-gap-2"
+    },
+    md: {
+      track: "h-6 w-11",
+      thumb: "h-5 w-5",
+      translate: "translate-x-5",
+      text: "glass-text-sm",
+      gap: "glass-gap-3"
+    },
+    lg: {
+      track: "h-7 w-14",
+      thumb: "h-6 w-6",
+      translate: "translate-x-7",
+      text: "glass-text-base",
+      gap: "glass-gap-4"
+    }
+  };
+  const config = sizeConfig?.[size];
+  const switchElement = jsx(OptimizedGlassCore, {
+    as: "button",
+    ref: ref,
+    role: "switch",
+    type: "button",
+    elevation: isChecked ? "level2" : "level1",
+    intensity: isChecked ? "medium" : "subtle",
+    depth: 2,
+    tint: isChecked ? "primary" : "neutral",
+    border: "subtle",
+    animation: isMotionSafe && respectMotionPreference ? "shimmer" : "none",
+    performanceMode: "medium",
+    liftOnHover: !disabled,
+    press: true,
+    className: cn("glass-switch relative inline-flex shrink-0 cursor-pointer glass-radius-full transition-all duration-200", config.track, disabled && "opacity-50 cursor-not-allowed", loading && "cursor-wait", focusRing && "glass-focus", error && "ring-2 ring-destructive/50", className),
+    onClick: handleToggle,
+    "aria-checked": !!isChecked,
+    "aria-invalid": isInvalid || undefined,
+    "aria-required": required || undefined,
+    disabled: disabled || loading,
+    id: finalId,
+    ...a11yProps,
+    ...props,
+    children: jsx("div", {
+      className: cn("pointer-events-none relative flex items-center justify-center glass-radius-full transition-all duration-200 shadow-lg", config.thumb, isChecked ? config.translate : "translate-x-0.5")
+    })
+  });
+  const labelElement = label && jsx("label", {
+    htmlFor: finalId,
+    id: labelId,
+    className: cn("glass-switch-label cursor-pointer font-medium text-foreground", config.text, disabled && "cursor-not-allowed opacity-70", required && 'after:content-["*"] after:glass-ml-1 after:text-destructive'),
+    children: label
+  });
+  const descriptionElement = description && jsx("p", {
+    id: descriptionId,
+    className: cn("glass-switch-description glass-text-secondary", size === "sm" ? "glass-text-xs" : "glass-text-sm", disabled && "opacity-70"),
+    children: description
+  });
+  const errorElement = error && jsx("p", {
+    id: errorId,
+    className: cn("glass-switch-error text-destructive glass-mt-1", size === "sm" ? "glass-text-xs" : "glass-text-sm"),
+    role: "alert",
+    "aria-live": "polite",
+    children: error
+  });
+  // Render based on label position
+  if (!label && !description && !error) {
+    return switchElement;
+  }
+  const containerClass = cn("glass-switch-container flex items-start", config.gap, labelPosition === "left" && "flex-row-reverse", labelPosition === "right" && "flex-row", labelPosition === "top" && "flex-col", labelPosition === "bottom" && "flex-col-reverse");
+  return jsxs("div", {
+    className: containerClass,
+    children: [(labelPosition === "left" || labelPosition === "right") && jsx("div", {
+      className: "glass-flex glass-items-center",
+      children: switchElement
+    }), (labelPosition === "top" || labelPosition === "bottom") && switchElement, jsxs("div", {
+      className: "glass-gap-1",
+      children: [labelElement, descriptionElement, errorElement]
+    })]
+  });
+});
+GlassSwitch.displayName = "GlassSwitch";
+
+export { GlassSwitch, GlassSwitch as default };
+//# sourceMappingURL=GlassSwitch.js.map

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

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

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

@@ -0,0 +1,159 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { AlertCircle } from 'lucide-react';
+
+const GlassTextarea = /*#__PURE__*/forwardRef(({
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = false,
+  label,
+  helperText,
+  errorText,
+  autoResize = false,
+  minRows = 3,
+  maxRows = 10,
+  showCharCount = false,
+  maxLength,
+  loading = false,
+  icon,
+  className,
+  id,
+  rows = minRows,
+  value,
+  onChange,
+  ...props
+}, ref) => {
+  const textareaRef = useRef(null);
+  const combinedRef = ref || textareaRef;
+  const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+  const currentLength = typeof value === "string" ? value?.length || 0 : 0;
+  const sizeConfig = {
+    sm: {
+      text: "glass-text-sm",
+      padding: "glass-px-3 glass-py-2",
+      minHeight: "min-h-[80px]"
+    },
+    md: {
+      text: "glass-text-sm",
+      padding: "glass-px-4 glass-py-3",
+      minHeight: "min-h-[100px]"
+    },
+    lg: {
+      text: "glass-text-base",
+      padding: "glass-px-4 glass-py-4",
+      minHeight: "min-h-[120px]"
+    }
+  };
+  const variantConfig = {
+    default: {
+      base: "bg-background/50 border border-border/20",
+      focus: "focus:border-primary focus:ring-1 focus:ring-primary"
+    },
+    filled: {
+      base: "bg-muted/50 border border-transparent",
+      focus: "focus:bg-background/50 focus:border-primary"
+    },
+    outlined: {
+      base: "bg-transparent border-2 border-border/20",
+      focus: "focus:border-primary"
+    },
+    minimal: {
+      base: "bg-transparent border-0 border-b border-border/20",
+      focus: "focus:border-primary"
+    }
+  };
+  const stateConfig = {
+    default: "",
+    error: "border-red-400 focus:border-red-400 focus:ring-red-400",
+    warning: "border-amber-400 focus:border-amber-400 focus:ring-amber-400",
+    success: "border-green-400 focus:border-green-400 focus:ring-green-400"
+  };
+  const config = sizeConfig?.[size];
+  const variantStyles = variantConfig?.[variant];
+  const stateStyles = stateConfig?.[state];
+  const hasError = state === "error" || !!errorText;
+  // Auto-resize functionality
+  useEffect(() => {
+    if (autoResize && combinedRef && "current" in combinedRef && combinedRef.current) {
+      const textarea = combinedRef.current;
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+      const paddingTop = parseInt(getComputedStyle(textarea).paddingTop);
+      const paddingBottom = parseInt(getComputedStyle(textarea).paddingBottom);
+      textarea.style.height = "auto";
+      const scrollHeight = textarea.scrollHeight;
+      const minHeight = lineHeight * minRows + paddingTop + paddingBottom;
+      const maxHeight = lineHeight * maxRows + paddingTop + paddingBottom;
+      textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
+    }
+  }, [value, autoResize, minRows, maxRows, combinedRef]);
+  const handleChange = event => {
+    onChange?.(event);
+  };
+  return jsxs("div", {
+    "data-glass-component": true,
+    className: cn("glass-textarea-wrapper", fullWidth && "w-full"),
+    children: [label && jsxs("label", {
+      htmlFor: textareaId,
+      className: cn("block font-medium text-foreground glass-mb-2", config.text, props?.disabled && "opacity-50"),
+      children: [label, props?.required && jsx("span", {
+        className: 'text-primary glass-ml-1',
+        "aria-label": "required",
+        children: "*"
+      })]
+    }), jsxs("div", {
+      className: 'relative',
+      children: [jsx("textarea", {
+        ref: combinedRef,
+        id: textareaId,
+        rows: autoResize ? undefined : rows,
+        value: value,
+        onChange: handleChange,
+        maxLength: maxLength,
+        "aria-describedby": helperText ? `${textareaId}-helper` : errorText ? `${textareaId}-error` : undefined,
+        "aria-invalid": hasError,
+        className: cn("glass-textarea", "w-full resize-none glass-radius-lg glass-backdrop-blur-md transition-all duration-200 glass-pulse-ring", "placeholder:glass-text-secondary", "focus:outline-none focus:ring-offset-2 focus:ring-offset-background",
+        // Size
+        config.text, config.padding, !autoResize && config.minHeight,
+        // Variant
+        variantStyles.base, variantStyles.focus,
+        // State
+        stateStyles,
+        // Disabled
+        props?.disabled && "opacity-50 cursor-not-allowed",
+        // Loading
+        loading && "animate-pulse cursor-wait",
+        // Full width
+        fullWidth && "w-full", className),
+        ...props
+      }), icon && jsx("div", {
+        className: cn("absolute top-3 right-3 glass-text-secondary", props?.disabled && "opacity-50"),
+        children: icon
+      }), hasError && jsx("div", {
+        className: 'absolute top-3 right-3 text-primary',
+        children: jsx(AlertCircle, {
+          className: 'h-5 w-5'
+        })
+      })]
+    }), showCharCount && maxLength && jsxs("div", {
+      className: cn("flex justify-end glass-mt-1 glass-text-xs", currentLength > maxLength * 0.9 ? "text-amber-400" : "glass-text-secondary", currentLength >= maxLength && "text-red-400"),
+      children: [currentLength, "/", maxLength]
+    }), helperText && !hasError && jsx("p", {
+      id: `${textareaId}-helper`,
+      className: cn("glass-mt-2 glass-text-xs glass-text-secondary", props?.disabled && "opacity-50"),
+      children: helperText
+    }), errorText && jsxs("p", {
+      id: `${textareaId}-error`,
+      className: 'glass-mt-2 glass-text-xs text-primary glass-flex glass-items-center glass-gap-1',
+      children: [jsx(AlertCircle, {
+        className: 'h-3 w-3'
+      }), errorText]
+    })]
+  });
+});
+GlassTextarea.displayName = "GlassTextarea";
+
+export { GlassTextarea, GlassTextarea as default };
+//# sourceMappingURL=GlassTextarea.js.map