@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/mic-selector.cjs

@@ -0,0 +1,275 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _reactusecontrollablestate = require('@radix-ui/react-use-controllable-state');
+var _button = require('../ui/button');
+
+
+
+
+
+
+var _command = require('../ui/command');
+
+
+
+
+var _popover = require('../ui/popover');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+var _react = require('react');
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+const MicSelectorContext = _react.createContext.call(void 0, {
+  data: [],
+  onOpenChange: void 0,
+  onValueChange: void 0,
+  open: false,
+  setWidth: void 0,
+  value: void 0,
+  width: 200
+});
+const MicSelector = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}) => {
+  const [value, onValueChange] = _reactusecontrollablestate.useControllableState.call(void 0, {
+    defaultProp: defaultValue,
+    onChange: controlledOnValueChange,
+    prop: controlledValue
+  });
+  const [open, onOpenChange] = _reactusecontrollablestate.useControllableState.call(void 0, {
+    defaultProp: defaultOpen,
+    onChange: controlledOnOpenChange,
+    prop: controlledOpen
+  });
+  const [width, setWidth] = _react.useState.call(void 0, 200);
+  const { devices, loading, hasPermission, loadDevices } = useAudioDevices();
+  _react.useEffect.call(void 0, () => {
+    if (open && !hasPermission && !loading) {
+      loadDevices();
+    }
+  }, [open, hasPermission, loading, loadDevices]);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      data: devices,
+      onOpenChange,
+      onValueChange,
+      open,
+      setWidth,
+      value,
+      width
+    }),
+    [devices, onOpenChange, onValueChange, open, setWidth, value, width]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MicSelectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _popover.Popover, { ...props, onOpenChange, open }) });
+};
+const MicSelectorTrigger = ({
+  children,
+  ...props
+}) => {
+  const { setWidth } = _react.use.call(void 0, MicSelectorContext);
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.target.offsetWidth;
+        if (newWidth) {
+          _optionalChain([setWidth, 'optionalCall', _ => _(newWidth)]);
+        }
+      }
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setWidth]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _button.Button, { variant: "outline", ...props, ref, children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _lucidereact.ChevronsUpDownIcon,
+      {
+        className: "shrink-0 text-muted-foreground",
+        size: 16
+      }
+    )
+  ] }) });
+};
+const MicSelectorContent = ({
+  className,
+  popoverOptions,
+  ...props
+}) => {
+  const { width, onValueChange, value } = _react.use.call(void 0, MicSelectorContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _popover.PopoverContent,
+    {
+      className: _utils.cn.call(void 0, "p-0", className),
+      style: { width },
+      ...popoverOptions,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.Command, { onValueChange, value, ...props })
+    }
+  );
+};
+const MicSelectorInput = ({ ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandInput, { placeholder: "Search microphones\u2026", ...props });
+const MicSelectorList = ({
+  children,
+  ...props
+}) => {
+  const { data } = _react.use.call(void 0, MicSelectorContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandList, { ...props, children: children(data) });
+};
+const MicSelectorEmpty = ({
+  children = "No microphone found.",
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandEmpty, { ...props, children });
+const MicSelectorItem = (props) => {
+  const { onValueChange, onOpenChange } = _react.use.call(void 0, MicSelectorContext);
+  const handleSelect = _react.useCallback.call(void 0, 
+    (currentValue) => {
+      _optionalChain([onValueChange, 'optionalCall', _2 => _2(currentValue)]);
+      _optionalChain([onOpenChange, 'optionalCall', _3 => _3(false)]);
+    },
+    [onValueChange, onOpenChange]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandItem, { onSelect: handleSelect, ...props });
+};
+const MicSelectorLabel = ({
+  device,
+  className,
+  ...props
+}) => {
+  const matches = device.label.match(deviceIdRegex);
+  if (!matches) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className, ...props, children: device.label });
+  }
+  const [, deviceId] = matches;
+  const name = device.label.replace(deviceIdRegex, "");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: name }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-muted-foreground", children: [
+      " (",
+      deviceId,
+      ")"
+    ] })
+  ] });
+};
+const MicSelectorValue = ({
+  className,
+  ...props
+}) => {
+  const { data, value } = _react.use.call(void 0, MicSelectorContext);
+  const currentDevice = data.find((d) => d.deviceId === value);
+  if (!currentDevice) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "flex-1 text-left", className), ...props, children: "Select microphone\u2026" });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    MicSelectorLabel,
+    {
+      className: _utils.cn.call(void 0, "flex-1 text-left", className),
+      device: currentDevice,
+      ...props
+    }
+  );
+};
+const useAudioDevices = () => {
+  const [devices, setDevices] = _react.useState.call(void 0, []);
+  const [loading, setLoading] = _react.useState.call(void 0, true);
+  const [error, setError] = _react.useState.call(void 0, null);
+  const [hasPermission, setHasPermission] = _react.useState.call(void 0, false);
+  const loadDevicesWithoutPermission = _react.useCallback.call(void 0, async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+      setDevices(audioInputs);
+    } catch (error2) {
+      const message = error2 instanceof Error ? error2.message : "Failed to get audio devices";
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const loadDevicesWithPermission = _react.useCallback.call(void 0, async () => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const tempStream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      for (const track of tempStream.getTracks()) {
+        track.stop();
+      }
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+      setDevices(audioInputs);
+      setHasPermission(true);
+    } catch (error2) {
+      const message = error2 instanceof Error ? error2.message : "Failed to get audio devices";
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+  _react.useEffect.call(void 0, () => {
+    loadDevicesWithoutPermission();
+  }, [loadDevicesWithoutPermission]);
+  _react.useEffect.call(void 0, () => {
+    const handleDeviceChange = () => {
+      if (hasPermission) {
+        loadDevicesWithPermission();
+      } else {
+        loadDevicesWithoutPermission();
+      }
+    };
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+    return () => {
+      navigator.mediaDevices.removeEventListener(
+        "devicechange",
+        handleDeviceChange
+      );
+    };
+  }, [hasPermission, loadDevicesWithPermission, loadDevicesWithoutPermission]);
+  return {
+    devices,
+    error,
+    hasPermission,
+    loadDevices: loadDevicesWithPermission,
+    loading
+  };
+};
+
+
+
+
+
+
+
+
+
+
+
+exports.MicSelector = MicSelector; exports.MicSelectorContent = MicSelectorContent; exports.MicSelectorEmpty = MicSelectorEmpty; exports.MicSelectorInput = MicSelectorInput; exports.MicSelectorItem = MicSelectorItem; exports.MicSelectorLabel = MicSelectorLabel; exports.MicSelectorList = MicSelectorList; exports.MicSelectorTrigger = MicSelectorTrigger; exports.MicSelectorValue = MicSelectorValue; exports.useAudioDevices = useAudioDevices;

package/dist/components/ai-elements/mic-selector.d.cts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { Button } from '../ui/button.cjs';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/command.cjs';
+import { Popover, PopoverContent } from '../ui/popover.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'cmdk';
+import '../ui/dialog.cjs';
+import 'radix-ui';
+
+type MicSelectorProps = ComponentProps<typeof Popover> & {
+    defaultValue?: string;
+    value?: string | undefined;
+    onValueChange?: (value: string | undefined) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const MicSelector: ({ defaultValue, value: controlledValue, onValueChange: controlledOnValueChange, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...props }: MicSelectorProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorTriggerProps = ComponentProps<typeof Button>;
+declare const MicSelectorTrigger: ({ children, ...props }: MicSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorContentProps = ComponentProps<typeof Command> & {
+    popoverOptions?: ComponentProps<typeof PopoverContent>;
+};
+declare const MicSelectorContent: ({ className, popoverOptions, ...props }: MicSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorInputProps = ComponentProps<typeof CommandInput> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+declare const MicSelectorInput: ({ ...props }: MicSelectorInputProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorListProps = Omit<ComponentProps<typeof CommandList>, "children"> & {
+    children: (devices: MediaDeviceInfo[]) => ReactNode;
+};
+declare const MicSelectorList: ({ children, ...props }: MicSelectorListProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const MicSelectorEmpty: ({ children, ...props }: MicSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorItemProps = ComponentProps<typeof CommandItem>;
+declare const MicSelectorItem: (props: MicSelectorItemProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorLabelProps = ComponentProps<"span"> & {
+    device: MediaDeviceInfo;
+};
+declare const MicSelectorLabel: ({ device, className, ...props }: MicSelectorLabelProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorValueProps = ComponentProps<"span">;
+declare const MicSelectorValue: ({ className, ...props }: MicSelectorValueProps) => react_jsx_runtime.JSX.Element;
+declare const useAudioDevices: () => {
+    devices: MediaDeviceInfo[];
+    error: string | null;
+    hasPermission: boolean;
+    loadDevices: () => Promise<void>;
+    loading: boolean;
+};
+
+export { MicSelector, MicSelectorContent, type MicSelectorContentProps, MicSelectorEmpty, type MicSelectorEmptyProps, MicSelectorInput, type MicSelectorInputProps, MicSelectorItem, type MicSelectorItemProps, MicSelectorLabel, type MicSelectorLabelProps, MicSelectorList, type MicSelectorListProps, type MicSelectorProps, MicSelectorTrigger, type MicSelectorTriggerProps, MicSelectorValue, type MicSelectorValueProps, useAudioDevices };

package/dist/components/ai-elements/mic-selector.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { Button } from '../ui/button.js';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/command.js';
+import { Popover, PopoverContent } from '../ui/popover.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'cmdk';
+import '../ui/dialog.js';
+import 'radix-ui';
+
+type MicSelectorProps = ComponentProps<typeof Popover> & {
+    defaultValue?: string;
+    value?: string | undefined;
+    onValueChange?: (value: string | undefined) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const MicSelector: ({ defaultValue, value: controlledValue, onValueChange: controlledOnValueChange, defaultOpen, open: controlledOpen, onOpenChange: controlledOnOpenChange, ...props }: MicSelectorProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorTriggerProps = ComponentProps<typeof Button>;
+declare const MicSelectorTrigger: ({ children, ...props }: MicSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorContentProps = ComponentProps<typeof Command> & {
+    popoverOptions?: ComponentProps<typeof PopoverContent>;
+};
+declare const MicSelectorContent: ({ className, popoverOptions, ...props }: MicSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorInputProps = ComponentProps<typeof CommandInput> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+declare const MicSelectorInput: ({ ...props }: MicSelectorInputProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorListProps = Omit<ComponentProps<typeof CommandList>, "children"> & {
+    children: (devices: MediaDeviceInfo[]) => ReactNode;
+};
+declare const MicSelectorList: ({ children, ...props }: MicSelectorListProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const MicSelectorEmpty: ({ children, ...props }: MicSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorItemProps = ComponentProps<typeof CommandItem>;
+declare const MicSelectorItem: (props: MicSelectorItemProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorLabelProps = ComponentProps<"span"> & {
+    device: MediaDeviceInfo;
+};
+declare const MicSelectorLabel: ({ device, className, ...props }: MicSelectorLabelProps) => react_jsx_runtime.JSX.Element;
+type MicSelectorValueProps = ComponentProps<"span">;
+declare const MicSelectorValue: ({ className, ...props }: MicSelectorValueProps) => react_jsx_runtime.JSX.Element;
+declare const useAudioDevices: () => {
+    devices: MediaDeviceInfo[];
+    error: string | null;
+    hasPermission: boolean;
+    loadDevices: () => Promise<void>;
+    loading: boolean;
+};
+
+export { MicSelector, MicSelectorContent, type MicSelectorContentProps, MicSelectorEmpty, type MicSelectorEmptyProps, MicSelectorInput, type MicSelectorInputProps, MicSelectorItem, type MicSelectorItemProps, MicSelectorLabel, type MicSelectorLabelProps, MicSelectorList, type MicSelectorListProps, type MicSelectorProps, MicSelectorTrigger, type MicSelectorTriggerProps, MicSelectorValue, type MicSelectorValueProps, useAudioDevices };

package/dist/components/ai-elements/mic-selector.js

@@ -0,0 +1,275 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../ui/popover";
+import { cn } from "../../lib/utils";
+import { ChevronsUpDownIcon } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+const MicSelectorContext = createContext({
+  data: [],
+  onOpenChange: void 0,
+  onValueChange: void 0,
+  open: false,
+  setWidth: void 0,
+  value: void 0,
+  width: 200
+});
+const MicSelector = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}) => {
+  const [value, onValueChange] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: controlledOnValueChange,
+    prop: controlledValue
+  });
+  const [open, onOpenChange] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: controlledOnOpenChange,
+    prop: controlledOpen
+  });
+  const [width, setWidth] = useState(200);
+  const { devices, loading, hasPermission, loadDevices } = useAudioDevices();
+  useEffect(() => {
+    if (open && !hasPermission && !loading) {
+      loadDevices();
+    }
+  }, [open, hasPermission, loading, loadDevices]);
+  const contextValue = useMemo(
+    () => ({
+      data: devices,
+      onOpenChange,
+      onValueChange,
+      open,
+      setWidth,
+      value,
+      width
+    }),
+    [devices, onOpenChange, onValueChange, open, setWidth, value, width]
+  );
+  return /* @__PURE__ */ jsx(MicSelectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Popover, { ...props, onOpenChange, open }) });
+};
+const MicSelectorTrigger = ({
+  children,
+  ...props
+}) => {
+  const { setWidth } = use(MicSelectorContext);
+  const ref = useRef(null);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.target.offsetWidth;
+        if (newWidth) {
+          setWidth?.(newWidth);
+        }
+      }
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setWidth]);
+  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", ...props, ref, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      ChevronsUpDownIcon,
+      {
+        className: "shrink-0 text-muted-foreground",
+        size: 16
+      }
+    )
+  ] }) });
+};
+const MicSelectorContent = ({
+  className,
+  popoverOptions,
+  ...props
+}) => {
+  const { width, onValueChange, value } = use(MicSelectorContext);
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      className: cn("p-0", className),
+      style: { width },
+      ...popoverOptions,
+      children: /* @__PURE__ */ jsx(Command, { onValueChange, value, ...props })
+    }
+  );
+};
+const MicSelectorInput = ({ ...props }) => /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search microphones\u2026", ...props });
+const MicSelectorList = ({
+  children,
+  ...props
+}) => {
+  const { data } = use(MicSelectorContext);
+  return /* @__PURE__ */ jsx(CommandList, { ...props, children: children(data) });
+};
+const MicSelectorEmpty = ({
+  children = "No microphone found.",
+  ...props
+}) => /* @__PURE__ */ jsx(CommandEmpty, { ...props, children });
+const MicSelectorItem = (props) => {
+  const { onValueChange, onOpenChange } = use(MicSelectorContext);
+  const handleSelect = useCallback(
+    (currentValue) => {
+      onValueChange?.(currentValue);
+      onOpenChange?.(false);
+    },
+    [onValueChange, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(CommandItem, { onSelect: handleSelect, ...props });
+};
+const MicSelectorLabel = ({
+  device,
+  className,
+  ...props
+}) => {
+  const matches = device.label.match(deviceIdRegex);
+  if (!matches) {
+    return /* @__PURE__ */ jsx("span", { className, ...props, children: device.label });
+  }
+  const [, deviceId] = matches;
+  const name = device.label.replace(deviceIdRegex, "");
+  return /* @__PURE__ */ jsxs("span", { className, ...props, children: [
+    /* @__PURE__ */ jsx("span", { children: name }),
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      " (",
+      deviceId,
+      ")"
+    ] })
+  ] });
+};
+const MicSelectorValue = ({
+  className,
+  ...props
+}) => {
+  const { data, value } = use(MicSelectorContext);
+  const currentDevice = data.find((d) => d.deviceId === value);
+  if (!currentDevice) {
+    return /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-left", className), ...props, children: "Select microphone\u2026" });
+  }
+  return /* @__PURE__ */ jsx(
+    MicSelectorLabel,
+    {
+      className: cn("flex-1 text-left", className),
+      device: currentDevice,
+      ...props
+    }
+  );
+};
+const useAudioDevices = () => {
+  const [devices, setDevices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [hasPermission, setHasPermission] = useState(false);
+  const loadDevicesWithoutPermission = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+      setDevices(audioInputs);
+    } catch (error2) {
+      const message = error2 instanceof Error ? error2.message : "Failed to get audio devices";
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const loadDevicesWithPermission = useCallback(async () => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const tempStream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      for (const track of tempStream.getTracks()) {
+        track.stop();
+      }
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter(
+        (device) => device.kind === "audioinput"
+      );
+      setDevices(audioInputs);
+      setHasPermission(true);
+    } catch (error2) {
+      const message = error2 instanceof Error ? error2.message : "Failed to get audio devices";
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+  useEffect(() => {
+    loadDevicesWithoutPermission();
+  }, [loadDevicesWithoutPermission]);
+  useEffect(() => {
+    const handleDeviceChange = () => {
+      if (hasPermission) {
+        loadDevicesWithPermission();
+      } else {
+        loadDevicesWithoutPermission();
+      }
+    };
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+    return () => {
+      navigator.mediaDevices.removeEventListener(
+        "devicechange",
+        handleDeviceChange
+      );
+    };
+  }, [hasPermission, loadDevicesWithPermission, loadDevicesWithoutPermission]);
+  return {
+    devices,
+    error,
+    hasPermission,
+    loadDevices: loadDevicesWithPermission,
+    loading
+  };
+};
+export {
+  MicSelector,
+  MicSelectorContent,
+  MicSelectorEmpty,
+  MicSelectorInput,
+  MicSelectorItem,
+  MicSelectorLabel,
+  MicSelectorList,
+  MicSelectorTrigger,
+  MicSelectorValue,
+  useAudioDevices
+};