@mieweb/ui 0.1.0

package/dist/chunk-HLW3XD5R.cjs

@@ -0,0 +1,322 @@
+'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 recordButtonVariants = classVarianceAuthority.cva(
+  [
+    "relative 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"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "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"
+        ],
+        filled: [
+          "bg-neutral-100 text-neutral-600 hover:bg-neutral-200",
+          "dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+        ],
+        primary: [
+          "bg-primary-600 text-white hover:bg-primary-700",
+          "dark:bg-primary-500 dark:hover:bg-primary-600"
+        ]
+      },
+      size: {
+        sm: "h-7 w-7",
+        md: "h-9 w-9",
+        lg: "h-11 w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var recordingIndicatorVariants = classVarianceAuthority.cva(
+  [
+    "absolute -top-1 -right-1",
+    "flex items-center justify-center",
+    "rounded-full bg-red-500 text-white",
+    "animate-pulse"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3",
+        md: "h-4 w-4",
+        lg: "h-5 w-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+function MicrophoneIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 2,
+      stroke: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
+        }
+      )
+    }
+  );
+}
+function StopIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" })
+    }
+  );
+}
+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 RecordButton({
+  onRecordingComplete,
+  onRecordingStart,
+  onError,
+  maxDuration = 0,
+  mimeType = "audio/webm",
+  disabled = false,
+  variant,
+  size,
+  className,
+  "aria-label": ariaLabel,
+  showDuration = false,
+  idleIcon,
+  recordingIcon,
+  transcriptionState,
+  showTranscriptionState = false
+}) {
+  const [state, setState] = React__namespace.useState("idle");
+  const [duration, setDuration] = React__namespace.useState(0);
+  const mediaRecorderRef = React__namespace.useRef(null);
+  const streamRef = React__namespace.useRef(null);
+  const chunksRef = React__namespace.useRef([]);
+  const timerRef = React__namespace.useRef(void 0);
+  const startTimeRef = React__namespace.useRef(0);
+  const isRecording = state === "recording";
+  const isProcessing = state === "processing";
+  const isTranscribing = transcriptionState === "transcribing" || transcriptionState === "streaming";
+  React__namespace.useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, []);
+  const stopRecording = React__namespace.useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+    }
+  }, []);
+  const startRecording = React__namespace.useCallback(async () => {
+    if (disabled || isRecording || isProcessing) return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const options = { mimeType };
+      if (!MediaRecorder.isTypeSupported(mimeType)) {
+        mediaRecorderRef.current = new MediaRecorder(stream);
+      } else {
+        mediaRecorderRef.current = new MediaRecorder(stream, options);
+      }
+      chunksRef.current = [];
+      mediaRecorderRef.current.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+      mediaRecorderRef.current.onstop = () => {
+        setState("processing");
+        const blob = new Blob(chunksRef.current, { type: mimeType });
+        const finalDuration = duration;
+        setTimeout(() => {
+          onRecordingComplete?.(blob, finalDuration);
+          setState("idle");
+          setDuration(0);
+        }, 200);
+      };
+      mediaRecorderRef.current.start(100);
+      startTimeRef.current = Date.now();
+      setState("recording");
+      onRecordingStart?.();
+      timerRef.current = window.setInterval(() => {
+        const elapsed = (Date.now() - startTimeRef.current) / 1e3;
+        setDuration(elapsed);
+        if (maxDuration > 0 && elapsed >= maxDuration) {
+          stopRecording();
+        }
+      }, 100);
+    } catch (error) {
+      onError?.(error);
+      setState("idle");
+    }
+  }, [
+    disabled,
+    isRecording,
+    isProcessing,
+    mimeType,
+    maxDuration,
+    duration,
+    onRecordingComplete,
+    onRecordingStart,
+    onError,
+    stopRecording
+  ]);
+  const handleClick = React__namespace.useCallback(() => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  }, [isRecording, startRecording, stopRecording]);
+  const iconSize = size === "sm" ? "h-4 w-4" : size === "lg" ? "h-6 w-6" : "h-5 w-5";
+  const getIcon = () => {
+    if (isProcessing || isTranscribing) {
+      return /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: iconSize });
+    }
+    if (isRecording) {
+      return recordingIcon || /* @__PURE__ */ jsxRuntime.jsx(StopIcon, { className: iconSize });
+    }
+    return idleIcon || /* @__PURE__ */ jsxRuntime.jsx(MicrophoneIcon, { className: iconSize });
+  };
+  const getAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    if (isTranscribing) return "Transcribing audio";
+    if (isProcessing) return "Processing recording";
+    if (isRecording) return "Stop recording";
+    return "Start recording";
+  };
+  const getTranscriptionLabel = () => {
+    if (transcriptionState === "streaming") return "Listening...";
+    if (transcriptionState === "transcribing") return "Transcribing...";
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: disabled || isProcessing || isTranscribing,
+        className: chunkOR5DRJCW_cjs.cn(
+          recordButtonVariants({ variant, size }),
+          isRecording && "text-red-600 dark:text-red-400",
+          isTranscribing && "text-primary-600 dark:text-primary-400",
+          className
+        ),
+        "aria-label": getAriaLabel(),
+        "aria-pressed": isRecording,
+        children: [
+          getIcon(),
+          isRecording && !isTranscribing && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: chunkOR5DRJCW_cjs.cn(recordingIndicatorVariants({ size })),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    showDuration && isRecording && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-xs text-red-600 tabular-nums dark:text-red-400", children: formatDuration(duration) }),
+    showTranscriptionState && getTranscriptionLabel() && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-600 dark:text-primary-400 text-xs font-medium", children: getTranscriptionLabel() })
+  ] });
+}
+RecordButton.displayName = "RecordButton";
+
+exports.RecordButton = RecordButton;
+exports.formatDuration = formatDuration;
+exports.recordButtonVariants = recordButtonVariants;
+exports.recordingIndicatorVariants = recordingIndicatorVariants;
+//# sourceMappingURL=chunk-HLW3XD5R.cjs.map
+//# sourceMappingURL=chunk-HLW3XD5R.cjs.map

package/dist/chunk-HLW3XD5R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RecordButton/RecordButton.tsx"],"names":["cva","jsx","jsxs","cn","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,IAAM,oBAAA,GAAuBA,0BAAA;AAAA,EAC3B;AAAA,IACE,kDAAA;AAAA,IACA,0CAAA;AAAA,IACA,qGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,8DAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,sDAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,OAAA,EAAS;AAAA,UACP,gDAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,IAAM,0BAAA,GAA6BA,0BAAA;AAAA,EACjC;AAAA,IACE,0BAAA;AAAA,IACA,kCAAA;AAAA,IACA,oCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAMA,SAAS,eAAe,OAAA,EAAyB;AAC/C,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,OAAA,GAAU,EAAE,CAAA;AACpC,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,OAAA,GAAU,EAAE,CAAA;AACpC,EAAA,OAAO,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAA,CAAK,UAAS,CAAE,QAAA,CAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA;AACpD;AAMA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAU,EAA2B;AAC7D,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,IAAA,EAAK,MAAA;AAAA,MACL,OAAA,EAAQ,WAAA;AAAA,MACR,WAAA,EAAa,CAAA;AAAA,MACb,MAAA,EAAO,cAAA;AAAA,MACP,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,kBAAAA,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UACf,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA,GACF;AAEJ;AAEA,SAAS,QAAA,CAAS,EAAE,SAAA,EAAU,EAA2B;AACvD,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,IAAA,EAAK,cAAA;AAAA,MACL,OAAA,EAAQ,WAAA;AAAA,MACR,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,GAAA,EAAI,CAAA,EAAE,GAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI;AAAA;AAAA,GAClD;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAU,EAA2B;AAC1D,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,oBAAA,CAAG,cAAA,EAAgB,SAAS,CAAA;AAAA,MACvC,IAAA,EAAK,MAAA;AAAA,MACL,OAAA,EAAQ,WAAA;AAAA,MACR,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAF,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,EAAA,EAAG,IAAA;AAAA,YACH,EAAA,EAAG,IAAA;AAAA,YACH,CAAA,EAAE,IAAA;AAAA,YACF,MAAA,EAAO,cAAA;AAAA,YACP,WAAA,EAAY;AAAA;AAAA,SACd;AAAA,wBACAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,IAAA,EAAK,cAAA;AAAA,YACL,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ;AA+BA,SAAS,YAAA,CAAa;AAAA,EACpB,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA,GAAc,CAAA;AAAA,EACd,QAAA,GAAW,YAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,YAAA,GAAe,KAAA;AAAA,EACf,QAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,sBAAA,GAAyB;AAC3B,CAAA,EAAsB;AACpB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAUG,0BAA4B,MAAM,CAAA;AAClE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAUA,0BAAS,CAAC,CAAA;AAEhD,EAAA,MAAM,gBAAA,GAAyBA,wBAA6B,IAAI,CAAA;AAChE,EAAA,MAAM,SAAA,GAAkBA,wBAA2B,IAAI,CAAA;AACvD,EAAA,MAAM,SAAA,GAAkBA,gBAAA,CAAA,MAAA,CAAe,EAAE,CAAA;AACzC,EAAA,MAAM,QAAA,GAAiBA,wBAA2B,MAAS,CAAA;AAC3D,EAAA,MAAM,YAAA,GAAqBA,wBAAe,CAAC,CAAA;AAE3C,EAAA,MAAM,cAAc,KAAA,KAAU,WAAA;AAC9B,EAAA,MAAM,eAAe,KAAA,KAAU,YAAA;AAC/B,EAAA,MAAM,cAAA,GACJ,kBAAA,KAAuB,cAAA,IAAkB,kBAAA,KAAuB,WAAA;AAGlE,EAAMA,2BAAU,MAAM;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,aAAA,CAAc,SAAS,OAAO,CAAA;AAAA,MAChC;AACA,MAAA,IAAI,UAAU,OAAA,EAAS;AACrB,QAAA,SAAA,CAAU,OAAA,CAAQ,WAAU,CAAE,OAAA,CAAQ,CAAC,KAAA,KAAU,KAAA,CAAM,MAAM,CAAA;AAAA,MAC/D;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,aAAA,GAAsBA,6BAAY,MAAM;AAC5C,IAAA,IAAI,SAAS,OAAA,EAAS;AACpB,MAAA,aAAA,CAAc,SAAS,OAAO,CAAA;AAAA,IAChC;AAEA,IAAA,IACE,gBAAA,CAAiB,OAAA,IACjB,gBAAA,CAAiB,OAAA,CAAQ,UAAU,UAAA,EACnC;AACA,MAAA,gBAAA,CAAiB,QAAQ,IAAA,EAAK;AAAA,IAChC;AAEA,IAAA,IAAI,UAAU,OAAA,EAAS;AACrB,MAAA,SAAA,CAAU,OAAA,CAAQ,WAAU,CAAE,OAAA,CAAQ,CAAC,KAAA,KAAU,KAAA,CAAM,MAAM,CAAA;AAAA,IAC/D;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,cAAA,GAAuBA,6BAAY,YAAY;AACnD,IAAA,IAAI,QAAA,IAAY,eAAe,YAAA,EAAc;AAE7C,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,MAAM,SAAA,CAAU,YAAA,CAAa,aAAa,EAAE,KAAA,EAAO,MAAM,CAAA;AACxE,MAAA,SAAA,CAAU,OAAA,GAAU,MAAA;AAEpB,MAAA,MAAM,OAAA,GAAU,EAAE,QAAA,EAAS;AAC3B,MAAA,IAAI,CAAC,aAAA,CAAc,eAAA,CAAgB,QAAQ,CAAA,EAAG;AAC5C,QAAA,gBAAA,CAAiB,OAAA,GAAU,IAAI,aAAA,CAAc,MAAM,CAAA;AAAA,MACrD,CAAA,MAAO;AACL,QAAA,gBAAA,CAAiB,OAAA,GAAU,IAAI,aAAA,CAAc,MAAA,EAAQ,OAAO,CAAA;AAAA,MAC9D;AAEA,MAAA,SAAA,CAAU,UAAU,EAAC;AAErB,MAAA,gBAAA,CAAiB,OAAA,CAAQ,eAAA,GAAkB,CAAC,CAAA,KAAM;AAChD,QAAA,IAAI,CAAA,CAAE,IAAA,CAAK,IAAA,GAAO,CAAA,EAAG;AACnB,UAAA,SAAA,CAAU,OAAA,CAAQ,IAAA,CAAK,CAAA,CAAE,IAAI,CAAA;AAAA,QAC/B;AAAA,MACF,CAAA;AAEA,MAAA,gBAAA,CAAiB,OAAA,CAAQ,SAAS,MAAM;AACtC,QAAA,QAAA,CAAS,YAAY,CAAA;AAErB,QAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,SAAA,CAAU,SAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAC3D,QAAA,MAAM,aAAA,GAAgB,QAAA;AAGtB,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,mBAAA,GAAsB,MAAM,aAAa,CAAA;AACzC,UAAA,QAAA,CAAS,MAAM,CAAA;AACf,UAAA,WAAA,CAAY,CAAC,CAAA;AAAA,QACf,GAAG,GAAG,CAAA;AAAA,MACR,CAAA;AAEA,MAAA,gBAAA,CAAiB,OAAA,CAAQ,MAAM,GAAG,CAAA;AAClC,MAAA,YAAA,CAAa,OAAA,GAAU,KAAK,GAAA,EAAI;AAChC,MAAA,QAAA,CAAS,WAAW,CAAA;AACpB,MAAA,gBAAA,IAAmB;AAEnB,MAAA,QAAA,CAAS,OAAA,GAAU,MAAA,CAAO,WAAA,CAAY,MAAM;AAC1C,QAAA,MAAM,OAAA,GAAA,CAAW,IAAA,CAAK,GAAA,EAAI,GAAI,aAAa,OAAA,IAAW,GAAA;AACtD,QAAA,WAAA,CAAY,OAAO,CAAA;AAEnB,QAAA,IAAI,WAAA,GAAc,CAAA,IAAK,OAAA,IAAW,WAAA,EAAa;AAC7C,UAAA,aAAA,EAAc;AAAA,QAChB;AAAA,MACF,GAAG,GAAG,CAAA;AAAA,IACR,SAAS,KAAA,EAAO;AACd,MAAA,OAAA,GAAU,KAAc,CAAA;AACxB,MAAA,QAAA,CAAS,MAAM,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG;AAAA,IACD,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,WAAA,GAAoBA,6BAAY,MAAM;AAC1C,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,aAAA,EAAc;AAAA,IAChB,CAAA,MAAO;AACL,MAAA,cAAA,EAAe;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,cAAA,EAAgB,aAAa,CAAC,CAAA;AAE/C,EAAA,MAAM,WACJ,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA,KAAS,OAAO,SAAA,GAAY,SAAA;AAE1D,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,gBAAgB,cAAA,EAAgB;AAClC,MAAA,uBAAOH,cAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,QAAA,EAAU,CAAA;AAAA,IAC3C;AACA,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,OAAO,aAAA,oBAAiBA,cAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,QAAA,EAAU,CAAA;AAAA,IACzD;AACA,IAAA,OAAO,QAAA,oBAAYA,cAAA,CAAC,cAAA,EAAA,EAAe,SAAA,EAAW,QAAA,EAAU,CAAA;AAAA,EAC1D,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,IAAI,WAAW,OAAO,SAAA;AACtB,IAAA,IAAI,gBAAgB,OAAO,oBAAA;AAC3B,IAAA,IAAI,cAAc,OAAO,sBAAA;AACzB,IAAA,IAAI,aAAa,OAAO,gBAAA;AACxB,IAAA,OAAO,iBAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,IAAI,kBAAA,KAAuB,aAAa,OAAO,cAAA;AAC/C,IAAA,IAAI,kBAAA,KAAuB,gBAAgB,OAAO,iBAAA;AAClD,IAAA,OAAO,IAAA;AAAA,EACT,CAAA;AAEA,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACb,QAAA,EAAA;AAAA,oBAAAA,eAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,WAAA;AAAA,QACT,QAAA,EAAU,YAAY,YAAA,IAAgB,cAAA;AAAA,QACtC,SAAA,EAAWC,oBAAA;AAAA,UACT,oBAAA,CAAqB,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAAA,UACtC,WAAA,IAAe,gCAAA;AAAA,UACf,cAAA,IAAkB,wCAAA;AAAA,UAClB;AAAA,SACF;AAAA,QACA,cAAY,YAAA,EAAa;AAAA,QACzB,cAAA,EAAc,WAAA;AAAA,QAEb,QAAA,EAAA;AAAA,UAAA,OAAA,EAAQ;AAAA,UACR,WAAA,IAAe,CAAC,cAAA,oBACfF,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAWE,oBAAA,CAAG,0BAAA,CAA2B,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,cAClD,aAAA,EAAY;AAAA;AAAA;AACd;AAAA;AAAA,KAEJ;AAAA,IACC,YAAA,IAAgB,+BACfF,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,+DAAA,EACb,QAAA,EAAA,cAAA,CAAe,QAAQ,CAAA,EAC1B,CAAA;AAAA,IAED,sBAAA,IAA0B,uBAAsB,oBAC/CA,cAAA,CAAC,UAAK,SAAA,EAAU,4DAAA,EACb,iCAAsB,EACzB;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-HLW3XD5R.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type RecordButtonState = 'idle' | 'recording' | 'processing';\n\n/** Transcription state for integration with transcription services */\nexport type TranscriptionState =\n  | 'idle'\n  | 'recording'\n  | 'transcribing'\n  | 'streaming'\n  | 'complete'\n  | 'error';\n\nexport interface TranscriptionResult {\n  /** The transcribed text */\n  text: string;\n  /** Whether this is a partial (streaming) or final result */\n  isFinal: boolean;\n  /** Confidence score (0-1) if available */\n  confidence?: number;\n}\n\nexport interface RecordButtonProps extends VariantProps<\n  typeof recordButtonVariants\n> {\n  /** Callback when recording is complete with the audio blob */\n  onRecordingComplete?: (blob: Blob, duration: number) => void;\n  /** Callback when recording starts */\n  onRecordingStart?: () => void;\n  /** Callback when an error occurs */\n  onError?: (error: Error) => void;\n  /** Maximum recording duration in seconds (0 for unlimited) */\n  maxDuration?: number;\n  /** Audio MIME type */\n  mimeType?: string;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Accessible label */\n  'aria-label'?: string;\n  /** Show recording duration while recording */\n  showDuration?: boolean;\n  /** Custom idle icon */\n  idleIcon?: React.ReactNode;\n  /** Custom recording icon */\n  recordingIcon?: React.ReactNode;\n  /** Current transcription state (for external control) */\n  transcriptionState?: TranscriptionState;\n  /** Show transcription state indicator */\n  showTranscriptionState?: boolean;\n}\n\n// ============================================================================\n// Variants\n// ============================================================================\n\nconst recordButtonVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'rounded-full transition-all duration-200',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ],\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100',\n          'dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800',\n        ],\n        filled: [\n          'bg-neutral-100 text-neutral-600 hover:bg-neutral-200',\n          'dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n        primary: [\n          'bg-primary-600 text-white hover:bg-primary-700',\n          'dark:bg-primary-500 dark:hover:bg-primary-600',\n        ],\n      },\n      size: {\n        sm: 'h-7 w-7',\n        md: 'h-9 w-9',\n        lg: 'h-11 w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n);\n\nconst recordingIndicatorVariants = cva(\n  [\n    'absolute -top-1 -right-1',\n    'flex items-center justify-center',\n    'rounded-full bg-red-500 text-white',\n    'animate-pulse',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-3 w-3',\n        md: 'h-4 w-4',\n        lg: 'h-5 w-5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\nfunction formatDuration(seconds: number): string {\n  const mins = Math.floor(seconds / 60);\n  const secs = Math.floor(seconds % 60);\n  return `${mins}:${secs.toString().padStart(2, '0')}`;\n}\n\n// ============================================================================\n// Icons\n// ============================================================================\n\nfunction MicrophoneIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth={2}\n      stroke=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z\"\n      />\n    </svg>\n  );\n}\n\nfunction StopIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" />\n    </svg>\n  );\n}\n\nfunction SpinnerIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={cn('animate-spin', className)}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\n/**\n * A simple microphone recording button that can be placed anywhere.\n * Perfect for adding voice input to text fields, chat inputs, or forms.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <RecordButton\n *   onRecordingComplete={(blob, duration) => {\n *     console.log('Recorded:', blob, duration);\n *   }}\n * />\n *\n * // In an input field\n * <div className=\"relative\">\n *   <Input className=\"pr-12\" />\n *   <div className=\"absolute right-2 top-1/2 -translate-y-1/2\">\n *     <RecordButton size=\"sm\" onRecordingComplete={handleRecording} />\n *   </div>\n * </div>\n *\n * // With max duration\n * <RecordButton maxDuration={30} showDuration />\n * ```\n */\nfunction RecordButton({\n  onRecordingComplete,\n  onRecordingStart,\n  onError,\n  maxDuration = 0,\n  mimeType = 'audio/webm',\n  disabled = false,\n  variant,\n  size,\n  className,\n  'aria-label': ariaLabel,\n  showDuration = false,\n  idleIcon,\n  recordingIcon,\n  transcriptionState,\n  showTranscriptionState = false,\n}: RecordButtonProps) {\n  const [state, setState] = React.useState<RecordButtonState>('idle');\n  const [duration, setDuration] = React.useState(0);\n\n  const mediaRecorderRef = React.useRef<MediaRecorder | null>(null);\n  const streamRef = React.useRef<MediaStream | null>(null);\n  const chunksRef = React.useRef<Blob[]>([]);\n  const timerRef = React.useRef<number | undefined>(undefined);\n  const startTimeRef = React.useRef<number>(0);\n\n  const isRecording = state === 'recording';\n  const isProcessing = state === 'processing';\n  const isTranscribing =\n    transcriptionState === 'transcribing' || transcriptionState === 'streaming';\n\n  // Cleanup on unmount\n  React.useEffect(() => {\n    return () => {\n      if (timerRef.current) {\n        clearInterval(timerRef.current);\n      }\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop());\n      }\n    };\n  }, []);\n\n  const stopRecording = React.useCallback(() => {\n    if (timerRef.current) {\n      clearInterval(timerRef.current);\n    }\n\n    if (\n      mediaRecorderRef.current &&\n      mediaRecorderRef.current.state !== 'inactive'\n    ) {\n      mediaRecorderRef.current.stop();\n    }\n\n    if (streamRef.current) {\n      streamRef.current.getTracks().forEach((track) => track.stop());\n    }\n  }, []);\n\n  const startRecording = React.useCallback(async () => {\n    if (disabled || isRecording || isProcessing) return;\n\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n      streamRef.current = stream;\n\n      const options = { mimeType };\n      if (!MediaRecorder.isTypeSupported(mimeType)) {\n        mediaRecorderRef.current = new MediaRecorder(stream);\n      } else {\n        mediaRecorderRef.current = new MediaRecorder(stream, options);\n      }\n\n      chunksRef.current = [];\n\n      mediaRecorderRef.current.ondataavailable = (e) => {\n        if (e.data.size > 0) {\n          chunksRef.current.push(e.data);\n        }\n      };\n\n      mediaRecorderRef.current.onstop = () => {\n        setState('processing');\n\n        const blob = new Blob(chunksRef.current, { type: mimeType });\n        const finalDuration = duration;\n\n        // Small delay to show processing state\n        setTimeout(() => {\n          onRecordingComplete?.(blob, finalDuration);\n          setState('idle');\n          setDuration(0);\n        }, 200);\n      };\n\n      mediaRecorderRef.current.start(100);\n      startTimeRef.current = Date.now();\n      setState('recording');\n      onRecordingStart?.();\n\n      timerRef.current = window.setInterval(() => {\n        const elapsed = (Date.now() - startTimeRef.current) / 1000;\n        setDuration(elapsed);\n\n        if (maxDuration > 0 && elapsed >= maxDuration) {\n          stopRecording();\n        }\n      }, 100);\n    } catch (error) {\n      onError?.(error as Error);\n      setState('idle');\n    }\n  }, [\n    disabled,\n    isRecording,\n    isProcessing,\n    mimeType,\n    maxDuration,\n    duration,\n    onRecordingComplete,\n    onRecordingStart,\n    onError,\n    stopRecording,\n  ]);\n\n  const handleClick = React.useCallback(() => {\n    if (isRecording) {\n      stopRecording();\n    } else {\n      startRecording();\n    }\n  }, [isRecording, startRecording, stopRecording]);\n\n  const iconSize =\n    size === 'sm' ? 'h-4 w-4' : size === 'lg' ? 'h-6 w-6' : 'h-5 w-5';\n\n  const getIcon = () => {\n    if (isProcessing || isTranscribing) {\n      return <SpinnerIcon className={iconSize} />;\n    }\n    if (isRecording) {\n      return recordingIcon || <StopIcon className={iconSize} />;\n    }\n    return idleIcon || <MicrophoneIcon className={iconSize} />;\n  };\n\n  const getAriaLabel = () => {\n    if (ariaLabel) return ariaLabel;\n    if (isTranscribing) return 'Transcribing audio';\n    if (isProcessing) return 'Processing recording';\n    if (isRecording) return 'Stop recording';\n    return 'Start recording';\n  };\n\n  const getTranscriptionLabel = () => {\n    if (transcriptionState === 'streaming') return 'Listening...';\n    if (transcriptionState === 'transcribing') return 'Transcribing...';\n    return null;\n  };\n\n  return (\n    <div className=\"relative inline-flex items-center gap-2\">\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        disabled={disabled || isProcessing || isTranscribing}\n        className={cn(\n          recordButtonVariants({ variant, size }),\n          isRecording && 'text-red-600 dark:text-red-400',\n          isTranscribing && 'text-primary-600 dark:text-primary-400',\n          className\n        )}\n        aria-label={getAriaLabel()}\n        aria-pressed={isRecording}\n      >\n        {getIcon()}\n        {isRecording && !isTranscribing && (\n          <span\n            className={cn(recordingIndicatorVariants({ size }))}\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n      {showDuration && isRecording && (\n        <span className=\"font-mono text-xs text-red-600 tabular-nums dark:text-red-400\">\n          {formatDuration(duration)}\n        </span>\n      )}\n      {showTranscriptionState && getTranscriptionLabel() && (\n        <span className=\"text-primary-600 dark:text-primary-400 text-xs font-medium\">\n          {getTranscriptionLabel()}\n        </span>\n      )}\n    </div>\n  );\n}\n\nRecordButton.displayName = 'RecordButton';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n  RecordButton,\n  recordButtonVariants,\n  recordingIndicatorVariants,\n  formatDuration,\n};\n"]}