@mieweb/ui 0.1.0

package/dist/chunk-FIXAVBUA.cjs

@@ -0,0 +1,200 @@
+'use strict';
+
+var chunkSWMRCGL4_cjs = require('./chunk-SWMRCGL4.cjs');
+var chunkFHY3K6PL_cjs = require('./chunk-FHY3K6PL.cjs');
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+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 placementStyles = {
+  "bottom-start": "top-full left-0 mt-2",
+  "bottom-end": "top-full right-0 mt-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2"
+};
+function Dropdown({
+  trigger,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  placement = "bottom-start",
+  className,
+  width = "auto",
+  disabled = false
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React__namespace.useState(false);
+  const containerRef = React__namespace.useRef(null);
+  const menuId = React__namespace.useId();
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = React__namespace.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleToggle = React__namespace.useCallback(() => {
+    if (!disabled) {
+      setOpen(!isOpen);
+    }
+  }, [disabled, isOpen, setOpen]);
+  const handleClose = React__namespace.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  chunkSWMRCGL4_cjs.useClickOutside(containerRef, handleClose);
+  chunkFHY3K6PL_cjs.useEscapeKey(handleClose, isOpen);
+  const triggerElement = React__namespace.cloneElement(trigger, {
+    onClick: handleToggle,
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? menuId : void 0,
+    disabled: disabled || trigger.props.disabled
+  });
+  const widthStyle = typeof width === "number" ? { width: `${width}px` } : width === "trigger" ? { minWidth: "100%" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
+    triggerElement,
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: menuId,
+        role: "menu",
+        style: widthStyle,
+        className: chunkOR5DRJCW_cjs.cn(
+          "absolute z-50 min-w-[12rem]",
+          "rounded-xl border border-neutral-200 bg-white shadow-lg",
+          "dark:border-neutral-700 dark:bg-neutral-800",
+          "animate-in fade-in zoom-in-95 duration-100",
+          placementStyles[placement],
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+Dropdown.displayName = "Dropdown";
+var DropdownHeader = React__namespace.forwardRef(
+  ({ className, avatar, title, subtitle, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: chunkOR5DRJCW_cjs.cn(
+          "border-b border-neutral-200 p-4 dark:border-neutral-700",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            avatar,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold text-neutral-900 dark:text-white", children: title }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-neutral-500 dark:text-neutral-400", children: subtitle })
+            ] })
+          ] }),
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownHeader.displayName = "DropdownHeader";
+var DropdownContent = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunkOR5DRJCW_cjs.cn("p-2", className), ...props });
+  }
+);
+DropdownContent.displayName = "DropdownContent";
+var DropdownItem = React__namespace.forwardRef(
+  ({ className, icon, variant = "default", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        role: "menuitem",
+        className: chunkOR5DRJCW_cjs.cn(
+          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+          "transition-colors duration-150",
+          "focus:outline-none",
+          variant === "default" && [
+            "text-neutral-700 dark:text-neutral-300",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-700",
+            "focus:bg-neutral-100 dark:focus:bg-neutral-700"
+          ],
+          variant === "danger" && [
+            "text-red-600 dark:text-red-400",
+            "hover:bg-red-50 dark:hover:bg-red-900/20",
+            "focus:bg-red-50 dark:focus:bg-red-900/20"
+          ],
+          className
+        ),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 shrink-0", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children })
+        ]
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      className: chunkOR5DRJCW_cjs.cn(
+        "border-t border-neutral-200 dark:border-neutral-700",
+        className
+      )
+    }
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+function DropdownLabel({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkOR5DRJCW_cjs.cn(
+        "px-3 py-1.5 text-xs font-semibold tracking-wider uppercase",
+        "text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      children
+    }
+  );
+}
+DropdownLabel.displayName = "DropdownLabel";
+
+exports.Dropdown = Dropdown;
+exports.DropdownContent = DropdownContent;
+exports.DropdownHeader = DropdownHeader;
+exports.DropdownItem = DropdownItem;
+exports.DropdownLabel = DropdownLabel;
+exports.DropdownSeparator = DropdownSeparator;
+//# sourceMappingURL=chunk-FIXAVBUA.cjs.map
+//# sourceMappingURL=chunk-FIXAVBUA.cjs.map

package/dist/chunk-FIXAVBUA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"names":["React","useClickOutside","useEscapeKey","jsxs","jsx","cn"],"mappings":"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","file":"chunk-FIXAVBUA.cjs","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\nexport type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'bottom';\n\nexport interface DropdownProps {\n  /** The trigger element (usually a button) */\n  trigger: React.ReactElement<{\n    onClick?: () => void;\n    disabled?: boolean;\n    'aria-haspopup'?: string;\n    'aria-expanded'?: boolean;\n    'aria-controls'?: string;\n  }>;\n  /** Dropdown content */\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Placement of the dropdown */\n  placement?: DropdownPlacement;\n  /** Additional class name for the dropdown menu */\n  className?: string;\n  /** Width of the dropdown menu */\n  width?: 'auto' | 'trigger' | number;\n  /** Whether the dropdown is disabled */\n  disabled?: boolean;\n}\n\nconst placementStyles: Record<DropdownPlacement, string> = {\n  'bottom-start': 'top-full left-0 mt-2',\n  'bottom-end': 'top-full right-0 mt-2',\n  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',\n};\n\n/**\n * An accessible dropdown menu component.\n *\n * @example\n * ```tsx\n * <Dropdown\n *   trigger={<Button>Options</Button>}\n * >\n *   <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>\n *   <DropdownItem onClick={() => console.log('Delete')} variant=\"danger\">Delete</DropdownItem>\n * </Dropdown>\n * ```\n */\nfunction Dropdown({\n  trigger,\n  children,\n  open: controlledOpen,\n  onOpenChange,\n  placement = 'bottom-start',\n  className,\n  width = 'auto',\n  disabled = false,\n}: DropdownProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const menuId = React.useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const setOpen = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(value);\n      }\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const handleToggle = React.useCallback(() => {\n    if (!disabled) {\n      setOpen(!isOpen);\n    }\n  }, [disabled, isOpen, setOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n\n  useClickOutside(containerRef, handleClose);\n  useEscapeKey(handleClose, isOpen);\n\n  // Clone trigger to add event handlers\n  const triggerElement = React.cloneElement(trigger, {\n    onClick: handleToggle,\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? menuId : undefined,\n    disabled: disabled || trigger.props.disabled,\n  });\n\n  const widthStyle =\n    typeof width === 'number'\n      ? { width: `${width}px` }\n      : width === 'trigger'\n        ? { minWidth: '100%' }\n        : {};\n\n  return (\n    <div ref={containerRef} className=\"relative inline-flex\">\n      {triggerElement}\n      {isOpen && (\n        <div\n          id={menuId}\n          role=\"menu\"\n          style={widthStyle}\n          className={cn(\n            'absolute z-50 min-w-[12rem]',\n            'rounded-xl border border-neutral-200 bg-white shadow-lg',\n            'dark:border-neutral-700 dark:bg-neutral-800',\n            'animate-in fade-in zoom-in-95 duration-100',\n            placementStyles[placement],\n            className\n          )}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nDropdown.displayName = 'Dropdown';\n\n// ============================================================================\n// Dropdown Header Component\n// ============================================================================\n\nexport interface DropdownHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Avatar element or image */\n  avatar?: React.ReactNode;\n  /** Primary text (e.g., user name) */\n  title: React.ReactNode;\n  /** Secondary text (e.g., email) */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * A header section for dropdown menus, typically used for user info.\n *\n * @example\n * ```tsx\n * <DropdownHeader\n *   avatar={<Avatar name=\"John Doe\" />}\n *   title=\"John Doe\"\n *   subtitle=\"john@example.com\"\n * />\n * ```\n */\nconst DropdownHeader = React.forwardRef<HTMLDivElement, DropdownHeaderProps>(\n  ({ className, avatar, title, subtitle, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'border-b border-neutral-200 p-4 dark:border-neutral-700',\n          className\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-3\">\n          {avatar}\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"truncate text-sm font-semibold text-neutral-900 dark:text-white\">\n              {title}\n            </p>\n            {subtitle && (\n              <p className=\"truncate text-xs text-neutral-500 dark:text-neutral-400\">\n                {subtitle}\n              </p>\n            )}\n          </div>\n        </div>\n        {children}\n      </div>\n    );\n  }\n);\n\nDropdownHeader.displayName = 'DropdownHeader';\n\n// ============================================================================\n// Dropdown Content Component\n// ============================================================================\n\nexport type DropdownContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container for dropdown menu items with proper padding.\n */\nconst DropdownContent = React.forwardRef<HTMLDivElement, DropdownContentProps>(\n  ({ className, ...props }, ref) => {\n    return <div ref={ref} className={cn('p-2', className)} {...props} />;\n  }\n);\n\nDropdownContent.displayName = 'DropdownContent';\n\n// ============================================================================\n// Dropdown Item Component\n// ============================================================================\n\nexport interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Danger variant for destructive actions */\n  variant?: 'default' | 'danger';\n}\n\n/**\n * An item within a Dropdown menu.\n */\nconst DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(\n  ({ className, icon, variant = 'default', children, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        role=\"menuitem\"\n        className={cn(\n          'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm',\n          'transition-colors duration-150',\n          'focus:outline-none',\n          variant === 'default' && [\n            'text-neutral-700 dark:text-neutral-300',\n            'hover:bg-neutral-100 dark:hover:bg-neutral-700',\n            'focus:bg-neutral-100 dark:focus:bg-neutral-700',\n          ],\n          variant === 'danger' && [\n            'text-red-600 dark:text-red-400',\n            'hover:bg-red-50 dark:hover:bg-red-900/20',\n            'focus:bg-red-50 dark:focus:bg-red-900/20',\n          ],\n          className\n        )}\n        {...props}\n      >\n        {icon && <span className=\"h-4 w-4 shrink-0\">{icon}</span>}\n        <span className=\"font-medium\">{children}</span>\n      </button>\n    );\n  }\n);\n\nDropdownItem.displayName = 'DropdownItem';\n\n// ============================================================================\n// Dropdown Separator Component\n// ============================================================================\n\n/**\n * A separator between dropdown items.\n */\nfunction DropdownSeparator({ className }: { className?: string }) {\n  return (\n    <hr\n      className={cn(\n        'border-t border-neutral-200 dark:border-neutral-700',\n        className\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = 'DropdownSeparator';\n\n// ============================================================================\n// Dropdown Label Component\n// ============================================================================\n\n/**\n * A label/header for a group of dropdown items.\n */\nfunction DropdownLabel({\n  className,\n  children,\n}: {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        'px-3 py-1.5 text-xs font-semibold tracking-wider uppercase',\n        'text-neutral-500 dark:text-neutral-400',\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDropdownLabel.displayName = 'DropdownLabel';\n\nexport {\n  Dropdown,\n  DropdownHeader,\n  DropdownContent,\n  DropdownItem,\n  DropdownSeparator,\n  DropdownLabel,\n};\n"]}

package/dist/chunk-FQ5G7J24.js

@@ -0,0 +1,297 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var recordButtonVariants = 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 = 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__ */ jsx(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      strokeWidth: 2,
+      stroke: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ 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__ */ jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" })
+    }
+  );
+}
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("animate-spin", className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ 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.useState("idle");
+  const [duration, setDuration] = React.useState(0);
+  const mediaRecorderRef = React.useRef(null);
+  const streamRef = React.useRef(null);
+  const chunksRef = React.useRef([]);
+  const timerRef = React.useRef(void 0);
+  const startTimeRef = React.useRef(0);
+  const isRecording = state === "recording";
+  const isProcessing = state === "processing";
+  const isTranscribing = transcriptionState === "transcribing" || transcriptionState === "streaming";
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, []);
+  const stopRecording = React.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.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.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__ */ jsx(SpinnerIcon, { className: iconSize });
+    }
+    if (isRecording) {
+      return recordingIcon || /* @__PURE__ */ jsx(StopIcon, { className: iconSize });
+    }
+    return idleIcon || /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: disabled || isProcessing || isTranscribing,
+        className: 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__ */ jsx(
+            "span",
+            {
+              className: cn(recordingIndicatorVariants({ size })),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    showDuration && isRecording && /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-red-600 tabular-nums dark:text-red-400", children: formatDuration(duration) }),
+    showTranscriptionState && getTranscriptionLabel() && /* @__PURE__ */ jsx("span", { className: "text-primary-600 dark:text-primary-400 text-xs font-medium", children: getTranscriptionLabel() })
+  ] });
+}
+RecordButton.displayName = "RecordButton";
+
+export { RecordButton, formatDuration, recordButtonVariants, recordingIndicatorVariants };
+//# sourceMappingURL=chunk-FQ5G7J24.js.map
+//# sourceMappingURL=chunk-FQ5G7J24.js.map

package/dist/chunk-FQ5G7J24.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RecordButton/RecordButton.tsx"],"names":[],"mappings":"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","file":"chunk-FQ5G7J24.js","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"]}