@mieweb/ui 0.10.0-dev.4 → 0.10.0-dev.41

package/dist/{chunk-JYZW2PZS.cjs → chunk-254QK722.cjs}

@@ -17,6 +17,7 @@ function useMediaTransport(options = {}) {
   } = options;
   const [element, setElementState] = react.useState(null);
   const [state, setStateRaw] = react.useState("idle");
+  const stateRef = react.useRef("idle");
   const [currentTimeMs, setCurrentTimeMs] = react.useState(0);
   const [durationMs, setDurationMs] = react.useState(0);
   const [playbackRate, setPlaybackRateState] = react.useState(initialRate);
@@ -40,11 +41,10 @@ function useMediaTransport(options = {}) {
     errorLabel
   };
   const setState = react.useCallback((next) => {
-    setStateRaw((prev) => {
-      if (prev === next) return prev;
-      handlers.current.onStateChange?.(next);
-      return next;
-    });
+    if (stateRef.current === next) return;
+    stateRef.current = next;
+    setStateRaw(next);
+    handlers.current.onStateChange?.(next);
   }, []);
   const setMediaElement = react.useCallback((el) => {
     elementRef.current = el;
@@ -162,5 +162,5 @@ function useMediaTransport(options = {}) {
 }
 
 exports.useMediaTransport = useMediaTransport;
-//# sourceMappingURL=chunk-JYZW2PZS.cjs.map
-//# sourceMappingURL=chunk-JYZW2PZS.cjs.map
+//# sourceMappingURL=chunk-254QK722.cjs.map
+//# sourceMappingURL=chunk-254QK722.cjs.map

package/dist/chunk-254QK722.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useMediaTransport.ts"],"names":["useState","useRef","useCallback","useEffect"],"mappings":"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","file":"chunk-254QK722.cjs","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type MediaTransportState =\n  | 'idle'\n  | 'loading'\n  | 'playing'\n  | 'paused'\n  | 'error';\n\nexport interface UseMediaTransportOptions {\n  /** Fired on every native `timeupdate` and on metadata load, in milliseconds. */\n  onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n  /** Fired whenever the derived transport state changes. */\n  onStateChange?: (state: MediaTransportState) => void;\n  /** Fired when playback reaches the end. */\n  onEnded?: () => void;\n  /** Fired on a media error, with a descriptive Error. */\n  onError?: (error: Error) => void;\n  /** Initial playback rate (default `1`). Kept in sync with the element. */\n  initialRate?: number;\n  /** Transport state to enter when playback ends (default `'paused'`). */\n  endedState?: Extract<MediaTransportState, 'idle' | 'paused'>;\n  /** Reset the position to `0` when playback ends (default `false`). */\n  resetTimeOnEnd?: boolean;\n  /** Human-readable label used in the error message (default `'media'`). */\n  errorLabel?: string;\n}\n\nexport interface UseMediaTransportReturn {\n  /**\n   * Callback ref for the `<audio>`/`<video>` element to control. Pass this to\n   * the element's `ref` (or call it imperatively). Transport listeners attach\n   * when an element mounts and detach when it unmounts.\n   */\n  setMediaElement: (element: HTMLMediaElement | null) => void;\n  /** The currently attached media element, or `null`. */\n  mediaElement: HTMLMediaElement | null;\n\n  /** Derived transport state. */\n  state: MediaTransportState;\n  /** Current playback position in milliseconds. */\n  currentTimeMs: number;\n  /** Media duration in milliseconds (`0` until known / non-finite). */\n  durationMs: number;\n  /** Current playback rate. */\n  playbackRate: number;\n  /** `true` while `state === 'playing'`. */\n  isPlaying: boolean;\n  /** `true` while `state === 'loading'`. */\n  isLoading: boolean;\n\n  /** Start playback. */\n  play: () => void;\n  /** Pause playback. */\n  pause: () => void;\n  /** Toggle between play and pause. */\n  togglePlay: () => void;\n  /** Seek to a position in milliseconds. */\n  seekToMs: (timeMs: number) => void;\n  /** Set the playback rate multiplier. */\n  setPlaybackRate: (rate: number) => void;\n  /** Read the current position in milliseconds. */\n  getCurrentTimeMs: () => number;\n  /** Read the duration in milliseconds (`0` when unknown). */\n  getDurationMs: () => number;\n  /** Whether playback is currently paused (reads the element directly). */\n  isPaused: () => boolean;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nconst toMs = (seconds: number): number =>\n  Number.isFinite(seconds) ? seconds * 1000 : 0;\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/**\n * Headless playback transport for a native `HTMLMediaElement`.\n *\n * Owns the derived transport state (idle/loading/playing/paused/error),\n * position, duration and playback rate, and exposes imperative controls — all\n * in **milliseconds**. It never creates or renders an element: pass the\n * returned {@link UseMediaTransportReturn.setMediaElement} callback to an\n * `<audio>`/`<video>` `ref` and the hook wires the native listeners.\n *\n * Shared by `MediaPlayer` (ms API) and, at the boundary, `AudioPlayer`\n * (seconds API — convert with `ms / 1000`). The WaveSurfer waveform variant is\n * out of scope; this hook targets native media transport only.\n *\n * @example\n * ```tsx\n * function Player({ src }: { src: string }) {\n *   const t = useMediaTransport({ onEnded: () => console.log('done') });\n *   return (\n *     <div>\n *       <video ref={t.setMediaElement} src={src} controls />\n *       <button onClick={t.togglePlay}>{t.isPlaying ? 'Pause' : 'Play'}</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaTransport(\n  options: UseMediaTransportOptions = {}\n): UseMediaTransportReturn {\n  const {\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    initialRate = 1,\n    endedState = 'paused',\n    resetTimeOnEnd = false,\n    errorLabel = 'media',\n  } = options;\n\n  const [element, setElementState] = useState<HTMLMediaElement | null>(null);\n  const [state, setStateRaw] = useState<MediaTransportState>('idle');\n  const stateRef = useRef<MediaTransportState>('idle');\n  const [currentTimeMs, setCurrentTimeMs] = useState(0);\n  const [durationMs, setDurationMs] = useState(0);\n  const [playbackRate, setPlaybackRateState] = useState(initialRate);\n\n  const elementRef = useRef<HTMLMediaElement | null>(null);\n\n  // Keep the latest callbacks/options in a ref so the listener effect does not\n  // re-subscribe on every render when callers pass inline functions.\n  const handlers = useRef({\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    endedState,\n    resetTimeOnEnd,\n    errorLabel,\n  });\n  handlers.current = {\n    onTimeUpdate,\n    onStateChange,\n    onEnded,\n    onError,\n    endedState,\n    resetTimeOnEnd,\n    errorLabel,\n  };\n\n  const setState = useCallback((next: MediaTransportState) => {\n    if (stateRef.current === next) return;\n    stateRef.current = next;\n    setStateRaw(next);\n    // Consumers often update parent state here. Keep that notification outside\n    // React's state updater, which may run during render or twice in StrictMode.\n    handlers.current.onStateChange?.(next);\n  }, []);\n\n  const setMediaElement = useCallback((el: HTMLMediaElement | null) => {\n    elementRef.current = el;\n    setElementState(el);\n  }, []);\n\n  // Attach native transport listeners whenever an element mounts.\n  useEffect(() => {\n    if (!element) return;\n\n    const emitTime = () => {\n      const ms = toMs(element.currentTime);\n      const dur = toMs(element.duration);\n      setCurrentTimeMs(ms);\n      handlers.current.onTimeUpdate?.(ms, dur);\n    };\n\n    const onLoadStart = () => setState('loading');\n    const onCanPlay = () => setState('idle');\n    const onLoadedMetadata = () => {\n      setDurationMs(toMs(element.duration));\n      emitTime();\n    };\n    const onTimeUpdateEvt = () => emitTime();\n    const onPlay = () => setState('playing');\n    const onPlaying = () => setState('playing');\n    const onPause = () => setState('paused');\n    const onEndedEvt = () => {\n      setState(handlers.current.endedState);\n      if (handlers.current.resetTimeOnEnd) {\n        element.currentTime = 0;\n        setCurrentTimeMs(0);\n      }\n      handlers.current.onEnded?.();\n    };\n    const onErrorEvt = () => {\n      setState('error');\n      handlers.current.onError?.(\n        new Error(`Failed to load ${handlers.current.errorLabel}`)\n      );\n    };\n\n    element.addEventListener('loadstart', onLoadStart);\n    element.addEventListener('canplay', onCanPlay);\n    element.addEventListener('loadedmetadata', onLoadedMetadata);\n    element.addEventListener('timeupdate', onTimeUpdateEvt);\n    element.addEventListener('play', onPlay);\n    element.addEventListener('playing', onPlaying);\n    element.addEventListener('pause', onPause);\n    element.addEventListener('ended', onEndedEvt);\n    element.addEventListener('error', onErrorEvt);\n\n    // Sync duration if metadata is already available on attach.\n    if (Number.isFinite(element.duration)) {\n      setDurationMs(toMs(element.duration));\n    }\n\n    return () => {\n      element.removeEventListener('loadstart', onLoadStart);\n      element.removeEventListener('canplay', onCanPlay);\n      element.removeEventListener('loadedmetadata', onLoadedMetadata);\n      element.removeEventListener('timeupdate', onTimeUpdateEvt);\n      element.removeEventListener('play', onPlay);\n      element.removeEventListener('playing', onPlaying);\n      element.removeEventListener('pause', onPause);\n      element.removeEventListener('ended', onEndedEvt);\n      element.removeEventListener('error', onErrorEvt);\n    };\n  }, [element, setState]);\n\n  // Keep the element's playback rate in sync with hook state.\n  useEffect(() => {\n    if (element) element.playbackRate = playbackRate;\n  }, [element, playbackRate]);\n\n  const play = useCallback(() => {\n    void elementRef.current?.play();\n  }, []);\n\n  const pause = useCallback(() => {\n    elementRef.current?.pause();\n  }, []);\n\n  const togglePlay = useCallback(() => {\n    const el = elementRef.current;\n    if (!el) return;\n    if (el.paused) void el.play();\n    else el.pause();\n  }, []);\n\n  const seekToMs = useCallback((timeMs: number) => {\n    const el = elementRef.current;\n    if (el) {\n      el.currentTime = timeMs / 1000;\n      setCurrentTimeMs(timeMs);\n    }\n  }, []);\n\n  const setPlaybackRate = useCallback((rate: number) => {\n    setPlaybackRateState(rate);\n    if (elementRef.current) elementRef.current.playbackRate = rate;\n  }, []);\n\n  const getCurrentTimeMs = useCallback(\n    () => toMs(elementRef.current?.currentTime ?? 0),\n    []\n  );\n\n  const getDurationMs = useCallback(\n    () => toMs(elementRef.current?.duration ?? 0),\n    []\n  );\n\n  const isPaused = useCallback(() => elementRef.current?.paused ?? true, []);\n\n  return {\n    setMediaElement,\n    mediaElement: element,\n    state,\n    currentTimeMs,\n    durationMs,\n    playbackRate,\n    isPlaying: state === 'playing',\n    isLoading: state === 'loading',\n    play,\n    pause,\n    togglePlay,\n    seekToMs,\n    setPlaybackRate,\n    getCurrentTimeMs,\n    getDurationMs,\n    isPaused,\n  };\n}\n"]}

package/dist/{chunk-VPIYTQCV.cjs → chunk-2I4IRQQG.cjs}

@@ -42,7 +42,9 @@ var progressBarTrackVariants = classVarianceAuthority.cva(
   }
 );
 var progressBarFillVariants = classVarianceAuthority.cva(
-  ["h-full rounded-full transition-all duration-300 ease-out"],
+  [
+    "h-full rounded-full motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-out"
+  ],
   {
     variants: {
       variant: {
@@ -76,6 +78,8 @@ function Progress({
   value,
   max = 100,
   label,
+  srLabel,
+  valueText,
   showValue = false,
   formatValue,
   size,
@@ -83,6 +87,7 @@ function Progress({
   animated,
   striped,
   className,
+  fillClassName,
   indeterminate = false
 }) {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
@@ -123,8 +128,9 @@ function Progress({
         "aria-valuenow": indeterminate ? void 0 : value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
+        "aria-valuetext": indeterminate ? void 0 : valueText,
         "aria-labelledby": label ? `${progressId}-label` : void 0,
-        "aria-label": !label ? "Progress" : void 0,
+        "aria-label": !label ? srLabel ?? "Progress" : void 0,
         className: chunkS5RVSXDV_cjs.cn(progressBarTrackVariants({ size })),
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -136,7 +142,8 @@ function Progress({
               !striped && variant === "default" && "bg-primary-800",
               !striped && variant === "success" && "bg-green-500",
               !striped && variant === "warning" && "bg-yellow-500",
-              !striped && variant === "danger" && "bg-red-500"
+              !striped && variant === "danger" && "bg-red-500",
+              fillClassName
             ),
             style: indeterminate ? void 0 : { width: `${percentage}%` }
           }
@@ -253,5 +260,5 @@ exports.Progress = Progress;
 exports.circularProgressVariants = circularProgressVariants;
 exports.progressBarFillVariants = progressBarFillVariants;
 exports.progressBarTrackVariants = progressBarTrackVariants;
-//# sourceMappingURL=chunk-VPIYTQCV.cjs.map
-//# sourceMappingURL=chunk-VPIYTQCV.cjs.map
+//# sourceMappingURL=chunk-2I4IRQQG.cjs.map
+//# sourceMappingURL=chunk-2I4IRQQG.cjs.map

package/dist/chunk-2I4IRQQG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Progress/Progress.tsx"],"names":["cva","React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAM,wBAAA,GAA2BA,0BAAA;AAAA,EAC/B,CAAC,wEAAwE,CAAA;AAAA,EACzE;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,IAAM,uBAAA,GAA0BA,0BAAA;AAAA,EAC9B;AAAA,IACE;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EAAS,cAAA;AAAA,QACT,OAAA,EAAS,eAAA;AAAA,QACT,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM;AAAA,UACJ,kBAAA;AAAA,UACA,8CAAA;AAAA,UACA,uBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,KAAA;AAAA,MACV,OAAA,EAAS;AAAA;AACX;AAEJ;AA0CA,SAAS,QAAA,CAAS;AAAA,EAChB,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA,GAAgB;AAClB,CAAA,EAAkB;AAChB,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAK,QAAQ,GAAA,GAAO,GAAA,EAAK,CAAC,CAAA,EAAG,GAAG,CAAA;AACjE,EAAA,MAAM,aAAmBC,gBAAA,CAAA,KAAA,EAAM;AAE/B,EAAA,MAAM,YAAA,GAAe,WAAA,GACjB,WAAA,CAAY,KAAA,EAAO,GAAG,IACtB,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,UAAU,CAAC,CAAA,CAAA,CAAA;AAE7B,EAAA,uBACEC,eAAA,CAAC,SAAI,WAAA,EAAU,UAAA,EAAW,WAAWC,oBAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACvD,QAAA,EAAA;AAAA,IAAA,CAAA,KAAA,IAAS,SAAA,qBACTD,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,oBAAA;AAAA,QACV,SAAA,EAAU,0CAAA;AAAA,QAET,QAAA,EAAA;AAAA,UAAA,KAAA,oBACCE,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,EAAA,EAAI,GAAG,UAAU,CAAA,MAAA,CAAA;AAAA,cACjB,SAAA,EAAU,qCAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,SAAA,IAAa,CAAC,aAAA,oBACbA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAA,EAAU,gBAAA;AAAA,cACV,SAAA,EAAU,gDAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,oBAEFA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,gBAAA;AAAA,QACV,IAAA,EAAK,aAAA;AAAA,QACL,eAAA,EAAe,gBAAgB,MAAA,GAAY,KAAA;AAAA,QAC3C,eAAA,EAAe,CAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,gBAAA,EAAgB,gBAAgB,MAAA,GAAY,SAAA;AAAA,QAC5C,iBAAA,EAAiB,KAAA,GAAQ,CAAA,EAAG,UAAU,CAAA,MAAA,CAAA,GAAW,MAAA;AAAA,QACjD,YAAA,EAAY,CAAC,KAAA,GAAS,OAAA,IAAW,UAAA,GAAc,MAAA;AAAA,QAC/C,WAAWD,oBAAA,CAAG,wBAAA,CAAyB,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,QAEhD,QAAA,kBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,eAAA;AAAA,YACV,SAAA,EAAWD,oBAAA;AAAA,cACT,uBAAA,CAAwB,EAAE,OAAA,EAAS,QAAA,EAAU,SAAS,CAAA;AAAA,cACtD,aAAA,IACE,yDAAA;AAAA,cACF,CAAC,OAAA,IAAW,OAAA,KAAY,SAAA,IAAa,gBAAA;AAAA,cACrC,CAAC,OAAA,IAAW,OAAA,KAAY,SAAA,IAAa,cAAA;AAAA,cACrC,CAAC,OAAA,IAAW,OAAA,KAAY,SAAA,IAAa,eAAA;AAAA,cACrC,CAAC,OAAA,IAAW,OAAA,KAAY,QAAA,IAAY,YAAA;AAAA,cACpC;AAAA,aACF;AAAA,YACA,OAAO,aAAA,GAAgB,MAAA,GAAY,EAAE,KAAA,EAAO,CAAA,EAAG,UAAU,CAAA,CAAA,CAAA;AAAI;AAAA;AAC/D;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAMvB,IAAM,wBAAA,GAA2BH,0BAAA,CAAI,CAAC,sBAAsB,CAAA,EAAG;AAAA,EAC7D,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,WAAA;AAAA,MACJ,EAAA,EAAI,WAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC;AAkCD,SAAS,gBAAA,CAAiB;AAAA,EACxB,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,OAAA,GAAU,SAAA;AAAA,EACV,IAAA;AAAA,EACA,WAAA,GAAc,CAAA;AAAA,EACd,SAAA,GAAY,KAAA;AAAA,EACZ,aAAA,GAAgB,KAAA;AAAA,EAChB;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAK,QAAQ,GAAA,GAAO,GAAA,EAAK,CAAC,CAAA,EAAG,GAAG,CAAA;AAGjE,EAAA,MAAM,OAAA,GAAU,EAAE,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAG;AACjD,EAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,IAAA,IAAQ,IAAI,CAAA;AACpC,EAAA,MAAM,MAAA,GAAA,CAAU,UAAU,WAAA,IAAe,CAAA;AACzC,EAAA,MAAM,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,MAAA;AACpC,EAAA,MAAM,MAAA,GAAS,aAAA,GAAiB,UAAA,GAAa,GAAA,GAAO,aAAA;AAEpD,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,OAAA,EAAS,oBAAA;AAAA,IACT,OAAA,EAAS,kBAAA;AAAA,IACT,OAAA,EAAS,mBAAA;AAAA,IACT,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACEE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,IAAA,EAAK,aAAA;AAAA,MACL,eAAA,EAAe,gBAAgB,MAAA,GAAY,KAAA;AAAA,MAC3C,eAAA,EAAe,CAAA;AAAA,MACf,eAAA,EAAe,GAAA;AAAA,MACf,YAAA,EAAW,UAAA;AAAA,MACX,WAAWC,oBAAA,CAAG,wBAAA,CAAyB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAE3D,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAWC,oBAAA,CAAG,sBAAA,EAAwB,aAAA,IAAiB,cAAc,CAAA;AAAA,YACrE,KAAA,EAAO,OAAA;AAAA,YACP,MAAA,EAAQ,OAAA;AAAA,YAGR,QAAA,EAAA;AAAA,8BAAAC,cAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,4CAAA;AAAA,kBACV,IAAA,EAAK,MAAA;AAAA,kBACL,WAAA;AAAA,kBACA,IAAI,OAAA,GAAU,CAAA;AAAA,kBACd,IAAI,OAAA,GAAU,CAAA;AAAA,kBACd,CAAA,EAAG;AAAA;AAAA,eACL;AAAA,8BAEAA,cAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAWD,oBAAA;AAAA,oBACT,cAAc,OAAO,CAAA;AAAA,oBACrB;AAAA,mBACF;AAAA,kBACA,IAAA,EAAK,MAAA;AAAA,kBACL,WAAA;AAAA,kBACA,aAAA,EAAc,OAAA;AAAA,kBACd,IAAI,OAAA,GAAU,CAAA;AAAA,kBACd,IAAI,OAAA,GAAU,CAAA;AAAA,kBACd,CAAA,EAAG,MAAA;AAAA,kBACH,eAAA,EAAiB,aAAA;AAAA,kBACjB,gBAAA,EAAkB,aAAA,GAAgB,aAAA,GAAgB,IAAA,GAAO;AAAA;AAAA;AAC3D;AAAA;AAAA,SACF;AAAA,QACC,SAAA,IAAa,CAAC,aAAA,oBACbD,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,yBAAA;AAAA,YACV,SAAA,EAAU,uFAAA;AAAA,YAET,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,MAAM,UAAU,CAAA;AAAA,cAAE;AAAA;AAAA;AAAA;AAC1B;AAAA;AAAA,GAEJ;AAEJ;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"chunk-2I4IRQQG.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Progress Bar Variants\n// ============================================================================\n\nconst progressBarTrackVariants = cva(\n  ['w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700'],\n  {\n    variants: {\n      size: {\n        sm: 'h-1',\n        md: 'h-2',\n        lg: 'h-3',\n        xl: 'h-4',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst progressBarFillVariants = cva(\n  [\n    'h-full rounded-full motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-out',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary-800',\n        success: 'bg-green-500',\n        warning: 'bg-yellow-500',\n        danger: 'bg-red-500',\n      },\n      animated: {\n        true: 'animate-pulse',\n        false: '',\n      },\n      striped: {\n        true: [\n          'bg-gradient-to-r',\n          'from-transparent via-white/20 to-transparent',\n          'bg-[length:1rem_100%]',\n          'animate-[progress-stripes_1s_linear_infinite]',\n        ],\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      animated: false,\n      striped: false,\n    },\n  }\n);\n\n// ============================================================================\n// Progress Bar Component\n// ============================================================================\n\nexport interface ProgressProps\n  extends\n    VariantProps<typeof progressBarTrackVariants>,\n    VariantProps<typeof progressBarFillVariants> {\n  /** Current progress value (0-100) */\n  value: number;\n  /** Maximum value (default: 100) */\n  max?: number;\n  /** Label for the progress bar */\n  label?: string;\n  /** Accessible name when no visible `label` is rendered. */\n  srLabel?: string;\n  /** Human-readable `aria-valuetext` announced instead of the raw value. */\n  valueText?: string;\n  /** Show the percentage value */\n  showValue?: boolean;\n  /** Format the displayed value */\n  formatValue?: (value: number, max: number) => string;\n  /** Additional class name */\n  className?: string;\n  /** Class for the fill, e.g. to tone its colour by value. */\n  fillClassName?: string;\n  /** Whether the progress is indeterminate */\n  indeterminate?: boolean;\n}\n\n/**\n * A progress bar component for showing completion status.\n *\n * @example\n * ```tsx\n * <Progress value={60} />\n * <Progress value={75} showValue label=\"Upload progress\" />\n * <Progress value={30} variant=\"success\" striped />\n * ```\n */\nfunction Progress({\n  value,\n  max = 100,\n  label,\n  srLabel,\n  valueText,\n  showValue = false,\n  formatValue,\n  size,\n  variant,\n  animated,\n  striped,\n  className,\n  fillClassName,\n  indeterminate = false,\n}: ProgressProps) {\n  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);\n  const progressId = React.useId();\n\n  const displayValue = formatValue\n    ? formatValue(value, max)\n    : `${Math.round(percentage)}%`;\n\n  return (\n    <div data-slot=\"progress\" className={cn('w-full', className)}>\n      {(label || showValue) && (\n        <div\n          data-slot=\"progress-label-row\"\n          className=\"mb-1.5 flex items-center justify-between\"\n        >\n          {label && (\n            <label\n              data-slot=\"progress-label\"\n              id={`${progressId}-label`}\n              className=\"text-foreground text-sm font-medium\"\n            >\n              {label}\n            </label>\n          )}\n          {showValue && !indeterminate && (\n            <span\n              data-slot=\"progress-value\"\n              className=\"text-sm text-neutral-600 dark:text-neutral-400\"\n            >\n              {displayValue}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        data-slot=\"progress-track\"\n        role=\"progressbar\"\n        aria-valuenow={indeterminate ? undefined : value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuetext={indeterminate ? undefined : valueText}\n        aria-labelledby={label ? `${progressId}-label` : undefined}\n        aria-label={!label ? (srLabel ?? 'Progress') : undefined}\n        className={cn(progressBarTrackVariants({ size }))}\n      >\n        <div\n          data-slot=\"progress-fill\"\n          className={cn(\n            progressBarFillVariants({ variant, animated, striped }),\n            indeterminate &&\n              'w-1/3 animate-[indeterminate_1.5s_ease-in-out_infinite]',\n            !striped && variant === 'default' && 'bg-primary-800',\n            !striped && variant === 'success' && 'bg-green-500',\n            !striped && variant === 'warning' && 'bg-yellow-500',\n            !striped && variant === 'danger' && 'bg-red-500',\n            fillClassName\n          )}\n          style={indeterminate ? undefined : { width: `${percentage}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n\nProgress.displayName = 'Progress';\n\n// ============================================================================\n// Circular Progress Variants\n// ============================================================================\n\nconst circularProgressVariants = cva(['relative inline-flex'], {\n  variants: {\n    size: {\n      sm: 'h-8 w-8',\n      md: 'h-12 w-12',\n      lg: 'h-16 w-16',\n      xl: 'h-24 w-24',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ============================================================================\n// Circular Progress Component\n// ============================================================================\n\nexport interface CircularProgressProps extends VariantProps<\n  typeof circularProgressVariants\n> {\n  /** Current progress value (0-100) */\n  value: number;\n  /** Maximum value (default: 100) */\n  max?: number;\n  /** Color variant */\n  variant?: 'default' | 'success' | 'warning' | 'danger';\n  /** Stroke width */\n  strokeWidth?: number;\n  /** Show the percentage value in the center */\n  showValue?: boolean;\n  /** Whether the progress is indeterminate */\n  indeterminate?: boolean;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A circular progress indicator component.\n *\n * @example\n * ```tsx\n * <CircularProgress value={75} showValue />\n * <CircularProgress value={50} variant=\"success\" size=\"lg\" />\n * ```\n */\nfunction CircularProgress({\n  value,\n  max = 100,\n  variant = 'default',\n  size,\n  strokeWidth = 4,\n  showValue = false,\n  indeterminate = false,\n  className,\n}: CircularProgressProps) {\n  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);\n\n  // SVG calculations\n  const sizeMap = { sm: 32, md: 48, lg: 64, xl: 96 };\n  const svgSize = sizeMap[size || 'md'];\n  const radius = (svgSize - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (percentage / 100) * circumference;\n\n  const variantColors = {\n    default: 'stroke-primary-500',\n    success: 'stroke-green-500',\n    warning: 'stroke-yellow-500',\n    danger: 'stroke-red-500',\n  };\n\n  return (\n    <div\n      data-slot=\"circular-progress\"\n      role=\"progressbar\"\n      aria-valuenow={indeterminate ? undefined : value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-label=\"Progress\"\n      className={cn(circularProgressVariants({ size }), className)}\n    >\n      <svg\n        aria-hidden=\"true\"\n        className={cn('-rotate-90 transform', indeterminate && 'animate-spin')}\n        width={svgSize}\n        height={svgSize}\n      >\n        {/* Background track */}\n        <circle\n          className=\"stroke-neutral-200 dark:stroke-neutral-700\"\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          cx={svgSize / 2}\n          cy={svgSize / 2}\n          r={radius}\n        />\n        {/* Progress fill */}\n        <circle\n          className={cn(\n            variantColors[variant],\n            'transition-all duration-300 ease-out'\n          )}\n          fill=\"none\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          cx={svgSize / 2}\n          cy={svgSize / 2}\n          r={radius}\n          strokeDasharray={circumference}\n          strokeDashoffset={indeterminate ? circumference * 0.75 : offset}\n        />\n      </svg>\n      {showValue && !indeterminate && (\n        <span\n          data-slot=\"circular-progress-value\"\n          className=\"text-foreground absolute inset-0 flex items-center justify-center text-xs font-medium\"\n        >\n          {Math.round(percentage)}%\n        </span>\n      )}\n    </div>\n  );\n}\n\nCircularProgress.displayName = 'CircularProgress';\n\nexport {\n  Progress,\n  CircularProgress,\n  progressBarTrackVariants,\n  progressBarFillVariants,\n  circularProgressVariants,\n};\n"]}