@mieweb/ui 0.1.0

package/dist/chunk-VV4N4WY6.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var inputVariants = classVarianceAuthority.cva(
+  [
+    "w-full px-3 py-2",
+    "border border-input rounded-lg",
+    "bg-background text-foreground",
+    "placeholder:text-muted-foreground",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-sm",
+        md: "h-10 text-base",
+        lg: "h-12 text-lg"
+      },
+      hasError: {
+        true: "border-destructive focus:ring-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
+    }
+  }
+);
+var Input = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    hasError,
+    error,
+    helperText,
+    label,
+    hideLabel,
+    required,
+    disabled,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const generatedId = React__namespace.useId();
+    const inputId = id || generatedId;
+    const errorId = `${inputId}-error`;
+    const helperId = `${inputId}-helper`;
+    const describedByIds = [
+      error ? errorId : null,
+      helperText ? helperId : null,
+      ariaDescribedBy
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn("flex flex-col gap-1.5", disabled && "opacity-50"), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: chunkOR5DRJCW_cjs.cn(
+            "text-foreground text-sm font-medium",
+            hideLabel && "sr-only"
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", "aria-hidden": "true", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: inputId,
+          ref,
+          className: chunkOR5DRJCW_cjs.cn(
+            inputVariants({ size, hasError: hasError || !!error }),
+            className
+          ),
+          "aria-invalid": hasError || !!error,
+          "aria-describedby": describedByIds || void 0,
+          required,
+          disabled,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-destructive text-sm", role: "alert", children: error }),
+      helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-muted-foreground text-sm", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+exports.Input = Input;
+exports.inputVariants = inputVariants;
+//# sourceMappingURL=chunk-VV4N4WY6.cjs.map
+//# sourceMappingURL=chunk-VV4N4WY6.cjs.map

package/dist/chunk-VV4N4WY6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"names":["cva","React","cn","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAM,aAAA,GAAgBA,0BAAA;AAAA,EACpB;AAAA,IACE,kBAAA;AAAA,IACA,gCAAA;AAAA,IACA,+BAAA;AAAA,IACA,mCAAA;AAAA,IACA,gCAAA;AAAA,IACA,0EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,aAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,2CAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,QAAA,EAAU;AAAA;AACZ;AAEJ;AA2BA,IAAM,KAAA,GAAcC,gBAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAA;AAAA,IACA,kBAAA,EAAoB,eAAA;AAAA,IACpB,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,cAAoBA,gBAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAM,WAAA;AACtB,IAAA,MAAM,OAAA,GAAU,GAAG,OAAO,CAAA,MAAA,CAAA;AAC1B,IAAA,MAAM,QAAA,GAAW,GAAG,OAAO,CAAA,OAAA,CAAA;AAE3B,IAAA,MAAM,cAAA,GAAiB;AAAA,MACrB,QAAQ,OAAA,GAAU,IAAA;AAAA,MAClB,aAAa,QAAA,GAAW,IAAA;AAAA,MACxB;AAAA,KACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,IAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,qBAAG,uBAAA,EAAyB,QAAA,IAAY,YAAY,CAAA,EACjE,QAAA,EAAA;AAAA,MAAA,KAAA,oBACCC,eAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,SAAA,EAAWD,oBAAA;AAAA,YACT,qCAAA;AAAA,YACA,SAAA,IAAa;AAAA,WACf;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,KAAA;AAAA,YACA,4BACCE,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uBAAA,EAAwB,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAE3D;AAAA;AAAA;AAAA,OAEJ;AAAA,sBAEFA,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,OAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAA,EAAWF,oBAAA;AAAA,YACT,aAAA,CAAc,EAAE,IAAA,EAAM,QAAA,EAAU,YAAY,CAAC,CAAC,OAAO,CAAA;AAAA,YACrD;AAAA,WACF;AAAA,UACA,cAAA,EAAc,QAAA,IAAY,CAAC,CAAC,KAAA;AAAA,UAC5B,oBAAkB,cAAA,IAAkB,MAAA;AAAA,UACpC,QAAA;AAAA,UACA,QAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,KAAA,mCACE,GAAA,EAAA,EAAE,EAAA,EAAI,SAAS,SAAA,EAAU,0BAAA,EAA2B,IAAA,EAAK,OAAA,EACvD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,UAAA,IAAc,CAAC,KAAA,oBACdE,cAAA,CAAC,OAAE,EAAA,EAAI,QAAA,EAAU,SAAA,EAAU,+BAAA,EACxB,QAAA,EAAA,UAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-VV4N4WY6.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst inputVariants = cva(\n  [\n    'w-full px-3 py-2',\n    'border border-input rounded-lg',\n    'bg-background text-foreground',\n    'placeholder:text-muted-foreground',\n    'transition-colors duration-200',\n    'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-8 text-sm',\n        md: 'h-10 text-base',\n        lg: 'h-12 text-lg',\n      },\n      hasError: {\n        true: 'border-destructive focus:ring-destructive',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n    },\n  }\n);\n\nexport interface InputProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  /** Error message to display below the input */\n  error?: string;\n  /** Helper text to display below the input */\n  helperText?: string;\n  /** Label for the input */\n  label?: string;\n  /** Whether the label should be visually hidden (still accessible) */\n  hideLabel?: boolean;\n  /** Whether the input is required */\n  required?: boolean;\n}\n\n/**\n * A styled input component with support for labels, errors, and helper text.\n *\n * @example\n * ```tsx\n * <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n * <Input label=\"Password\" type=\"password\" error=\"Password is required\" hasError />\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size,\n      hasError,\n      error,\n      helperText,\n      label,\n      hideLabel,\n      required,\n      disabled,\n      id,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const errorId = `${inputId}-error`;\n    const helperId = `${inputId}-helper`;\n\n    const describedByIds = [\n      error ? errorId : null,\n      helperText ? helperId : null,\n      ariaDescribedBy,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={cn('flex flex-col gap-1.5', disabled && 'opacity-50')}>\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'text-foreground text-sm font-medium',\n              hideLabel && 'sr-only'\n            )}\n          >\n            {label}\n            {required && (\n              <span className=\"text-destructive ml-1\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <input\n          id={inputId}\n          ref={ref}\n          className={cn(\n            inputVariants({ size, hasError: hasError || !!error }),\n            className\n          )}\n          aria-invalid={hasError || !!error}\n          aria-describedby={describedByIds || undefined}\n          required={required}\n          disabled={disabled}\n          {...props}\n        />\n        {error && (\n          <p id={errorId} className=\"text-destructive text-sm\" role=\"alert\">\n            {error}\n          </p>\n        )}\n        {helperText && !error && (\n          <p id={helperId} className=\"text-muted-foreground text-sm\">\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport { Input, inputVariants };\n"]}

package/dist/chunk-VWXGUNBR.cjs

@@ -0,0 +1,574 @@
+'use strict';
+
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var audioPlayerVariants = classVarianceAuthority.cva("", {
+  variants: {
+    variant: {
+      inline: "inline-flex items-center gap-2",
+      compact: [
+        "flex items-center gap-3 p-3",
+        "rounded-lg border border-border",
+        "bg-card text-card-foreground"
+      ],
+      waveform: [
+        "flex flex-col gap-3 p-4",
+        "rounded-xl border border-border",
+        "bg-card text-card-foreground"
+      ]
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "compact", size: "sm", class: "p-2 gap-2" },
+    { variant: "compact", size: "lg", class: "p-4 gap-4" },
+    { variant: "waveform", size: "sm", class: "p-3 gap-2" },
+    { variant: "waveform", size: "lg", class: "p-5 gap-4" }
+  ],
+  defaultVariants: {
+    variant: "compact",
+    size: "md"
+  }
+});
+var playButtonVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-full transition-all duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "active:scale-95"
+  ],
+  {
+    variants: {
+      variant: {
+        inline: [
+          "text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100",
+          "dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800"
+        ],
+        compact: [
+          "bg-primary-600 text-white",
+          "hover:bg-primary-700",
+          "active:bg-primary-800"
+        ],
+        waveform: [
+          "bg-primary-600 text-white",
+          "hover:bg-primary-700",
+          "active:bg-primary-800"
+        ]
+      },
+      size: {
+        sm: "h-7 w-7",
+        md: "h-9 w-9",
+        lg: "h-11 w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "compact",
+      size: "md"
+    }
+  }
+);
+function formatTime(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds)) return "0:00";
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+function PlayIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" })
+    }
+  );
+}
+function PauseIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+    }
+  );
+}
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: chunkOR5DRJCW_cjs.cn("animate-spin", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+function ProgressBar({
+  currentTime,
+  duration,
+  onSeek,
+  disabled
+}) {
+  const progressRef = React__namespace.useRef(null);
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  const handleClick = (e) => {
+    if (disabled || !progressRef.current || duration <= 0) return;
+    const rect = progressRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = x / rect.width;
+    onSeek(percentage * duration);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: progressRef,
+      role: "slider",
+      "aria-label": "Audio progress",
+      "aria-valuemin": 0,
+      "aria-valuemax": duration,
+      "aria-valuenow": currentTime,
+      "aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+      tabIndex: disabled ? -1 : 0,
+      className: chunkOR5DRJCW_cjs.cn(
+        "relative h-1.5 flex-1 cursor-pointer rounded-full bg-neutral-200 dark:bg-neutral-700",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (disabled) return;
+        const step = duration * 0.05;
+        if (e.key === "ArrowRight") {
+          onSeek(Math.min(currentTime + step, duration));
+        } else if (e.key === "ArrowLeft") {
+          onSeek(Math.max(currentTime - step, 0));
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "bg-primary-600 absolute inset-y-0 left-0 rounded-full transition-all",
+            style: { width: `${progress}%` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "bg-primary-600 absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full shadow-sm transition-all",
+            style: { left: `calc(${progress}% - 6px)` }
+          }
+        )
+      ]
+    }
+  );
+}
+function Waveform({
+  src,
+  isPlaying,
+  playbackRate = 1,
+  onReady,
+  onTimeUpdate,
+  onFinish,
+  onSeek,
+  waveColor,
+  progressColor,
+  height = 64
+}) {
+  const containerRef = React__namespace.useRef(null);
+  const wavesurferRef = React__namespace.useRef(null);
+  const [isLoaded, setIsLoaded] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (!containerRef.current) return;
+    const initWaveSurfer = async () => {
+      try {
+        const WaveSurfer = (await import('wavesurfer.js')).default;
+        if (wavesurferRef.current) {
+          wavesurferRef.current.destroy();
+        }
+        wavesurferRef.current = WaveSurfer.create({
+          container: containerRef.current,
+          waveColor: waveColor || "#d1d5db",
+          progressColor: progressColor || "var(--color-primary-600, #2563eb)",
+          cursorColor: "transparent",
+          barWidth: 2,
+          barGap: 2,
+          barRadius: 2,
+          height,
+          normalize: true,
+          interact: true
+        });
+        wavesurferRef.current.on("ready", () => {
+          setIsLoaded(true);
+          onReady(wavesurferRef.current.getDuration());
+        });
+        wavesurferRef.current.on("audioprocess", () => {
+          onTimeUpdate(wavesurferRef.current.getCurrentTime());
+        });
+        wavesurferRef.current.on("seeking", () => {
+          onTimeUpdate(wavesurferRef.current.getCurrentTime());
+        });
+        wavesurferRef.current.on("interaction", () => {
+          onSeek(wavesurferRef.current.getCurrentTime());
+        });
+        wavesurferRef.current.on("finish", () => {
+          onFinish();
+        });
+        wavesurferRef.current.load(src);
+      } catch (error) {
+        console.error("Failed to load WaveSurfer:", error);
+      }
+    };
+    initWaveSurfer();
+    return () => {
+      if (wavesurferRef.current) {
+        wavesurferRef.current.destroy();
+        wavesurferRef.current = null;
+      }
+    };
+  }, [src]);
+  React__namespace.useEffect(() => {
+    if (!wavesurferRef.current || !isLoaded) return;
+    if (isPlaying) {
+      wavesurferRef.current.play();
+    } else {
+      wavesurferRef.current.pause();
+    }
+  }, [isPlaying, isLoaded]);
+  React__namespace.useEffect(() => {
+    if (!wavesurferRef.current || !isLoaded) return;
+    wavesurferRef.current.setPlaybackRate(playbackRate);
+  }, [playbackRate, isLoaded]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: chunkOR5DRJCW_cjs.cn(
+        "w-full rounded-lg bg-neutral-100 dark:bg-neutral-800",
+        !isLoaded && "animate-pulse"
+      ),
+      style: { height }
+    }
+  );
+}
+function AudioPlayer({
+  src,
+  title,
+  variant = "compact",
+  size = "md",
+  onStateChange,
+  onEnded,
+  onError,
+  onTimeUpdate,
+  showTime = true,
+  showDuration = true,
+  waveColor,
+  progressColor,
+  waveformHeight = 64,
+  disabled = false,
+  className,
+  "aria-label": ariaLabel,
+  playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2],
+  showPlaybackRate = false,
+  /** Whether to preload audio (set to false for lists with many items) */
+  preload = false,
+  /** Fallback duration in seconds to display before audio is loaded */
+  fallbackDuration
+}) {
+  const [state, setState] = React__namespace.useState("idle");
+  const [currentTime, setCurrentTime] = React__namespace.useState(0);
+  const [duration, setDuration] = React__namespace.useState(0);
+  const [playbackRate, setPlaybackRate] = React__namespace.useState(1);
+  const [audioInitialized, setAudioInitialized] = React__namespace.useState(false);
+  const audioRef = React__namespace.useRef(null);
+  const isPlaying = state === "playing";
+  const isLoading = state === "loading";
+  const updateState = React__namespace.useCallback(
+    (newState) => {
+      setState(newState);
+      onStateChange?.(newState);
+    },
+    [onStateChange]
+  );
+  const initAudio = React__namespace.useCallback(() => {
+    if (variant === "waveform" || audioInitialized) return null;
+    const audio = new globalThis.Audio(src);
+    audioRef.current = audio;
+    setAudioInitialized(true);
+    audio.addEventListener("loadstart", () => updateState("loading"));
+    audio.addEventListener("canplay", () => {
+      updateState("idle");
+    });
+    audio.addEventListener("loadedmetadata", () => {
+      setDuration(audio.duration);
+    });
+    audio.addEventListener("timeupdate", () => {
+      setCurrentTime(audio.currentTime);
+      onTimeUpdate?.(audio.currentTime, audio.duration);
+    });
+    audio.addEventListener("ended", () => {
+      updateState("idle");
+      setCurrentTime(0);
+      onEnded?.();
+    });
+    audio.addEventListener("error", () => {
+      updateState("error");
+      onError?.(new Error("Failed to load audio"));
+    });
+    return audio;
+  }, [
+    src,
+    variant,
+    audioInitialized,
+    updateState,
+    onTimeUpdate,
+    onEnded,
+    onError
+  ]);
+  React__namespace.useEffect(() => {
+    if (preload && !audioInitialized && variant !== "waveform") {
+      initAudio();
+    }
+  }, [preload, audioInitialized, variant, initAudio]);
+  React__namespace.useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = "";
+      }
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.playbackRate = playbackRate;
+    }
+  }, [playbackRate]);
+  const handlePlay = React__namespace.useCallback(() => {
+    if (disabled) return;
+    if (variant === "waveform") {
+      if (isLoading) return;
+      updateState(isPlaying ? "paused" : "playing");
+      return;
+    }
+    if (!audioInitialized && !isLoading) {
+      const audio = initAudio();
+      if (audio) {
+        updateState("loading");
+        audio.addEventListener(
+          "canplay",
+          () => {
+            audio.play().catch((error) => {
+              updateState("error");
+              onError?.(error);
+            });
+            updateState("playing");
+          },
+          { once: true }
+        );
+      }
+      return;
+    }
+    if (isLoading) return;
+    if (isPlaying) {
+      if (audioRef.current) {
+        audioRef.current.pause();
+      }
+      updateState("paused");
+    } else {
+      if (audioRef.current) {
+        audioRef.current.play().catch((error) => {
+          updateState("error");
+          onError?.(error);
+        });
+        updateState("playing");
+      }
+    }
+  }, [
+    disabled,
+    variant,
+    audioInitialized,
+    isLoading,
+    isPlaying,
+    initAudio,
+    updateState,
+    onError
+  ]);
+  const handleSeek = React__namespace.useCallback((time) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = time;
+      setCurrentTime(time);
+    }
+  }, []);
+  const handleWaveformReady = React__namespace.useCallback((dur) => {
+    setDuration(dur);
+    setState("idle");
+  }, []);
+  const handleWaveformTimeUpdate = React__namespace.useCallback(
+    (time) => {
+      setCurrentTime(time);
+      onTimeUpdate?.(time, duration);
+    },
+    [duration, onTimeUpdate]
+  );
+  const handleWaveformFinish = React__namespace.useCallback(() => {
+    updateState("idle");
+    setCurrentTime(0);
+    onEnded?.();
+  }, [updateState, onEnded]);
+  const handleWaveformSeek = React__namespace.useCallback((time) => {
+    setCurrentTime(time);
+  }, []);
+  const iconSize = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+  const getAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    if (title) return `${isPlaying ? "Pause" : "Play"} ${title}`;
+    return isPlaying ? "Pause audio" : "Play audio";
+  };
+  const renderPlayButton = () => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handlePlay,
+      disabled: disabled || isLoading,
+      className: chunkOR5DRJCW_cjs.cn(playButtonVariants({ variant, size })),
+      "aria-label": getAriaLabel(),
+      "aria-pressed": isPlaying,
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: iconSize }) : isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(PauseIcon, { className: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, { className: iconSize })
+    }
+  );
+  const renderTime = () => {
+    if (!showTime) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-xs text-neutral-500 tabular-nums dark:text-neutral-400", children: [
+      formatTime(currentTime),
+      " / ",
+      formatTime(duration)
+    ] });
+  };
+  const renderPlaybackRateControl = () => {
+    if (!showPlaybackRate) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        value: playbackRate,
+        onChange: (e) => setPlaybackRate(Number(e.target.value)),
+        className: "rounded border border-neutral-200 bg-transparent px-1 py-0.5 text-xs dark:border-neutral-700",
+        "aria-label": "Playback speed",
+        children: playbackRates.map((rate) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: rate, children: [
+          rate,
+          "x"
+        ] }, rate))
+      }
+    );
+  };
+  if (variant === "inline") {
+    const displayDuration = duration > 0 ? duration : fallbackDuration ?? 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn(audioPlayerVariants({ variant, size }), className), children: [
+      renderPlayButton(),
+      title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: title }),
+      showDuration && displayDuration > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-neutral-500 tabular-nums dark:text-neutral-400", children: isPlaying ? formatTime(currentTime) : formatTime(displayDuration) })
+    ] });
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn(audioPlayerVariants({ variant, size }), className), children: [
+      renderPlayButton(),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ProgressBar,
+        {
+          currentTime,
+          duration,
+          onSeek: handleSeek,
+          disabled
+        }
+      ),
+      renderTime(),
+      renderPlaybackRateControl()
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkOR5DRJCW_cjs.cn(audioPlayerVariants({ variant, size }), className), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Waveform,
+      {
+        src,
+        isPlaying,
+        playbackRate,
+        onReady: handleWaveformReady,
+        onTimeUpdate: handleWaveformTimeUpdate,
+        onFinish: handleWaveformFinish,
+        onSeek: handleWaveformSeek,
+        waveColor,
+        progressColor,
+        height: waveformHeight
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      renderPlayButton(),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center justify-between", children: [
+        renderTime(),
+        renderPlaybackRateControl()
+      ] })
+    ] })
+  ] });
+}
+AudioPlayer.displayName = "AudioPlayer";
+
+exports.AudioPlayer = AudioPlayer;
+exports.ProgressBar = ProgressBar;
+exports.audioPlayerVariants = audioPlayerVariants;
+exports.formatTime = formatTime;
+exports.playButtonVariants = playButtonVariants;
+//# sourceMappingURL=chunk-VWXGUNBR.cjs.map
+//# sourceMappingURL=chunk-VWXGUNBR.cjs.map