@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/jsx-preview.js

@@ -0,0 +1,206 @@
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { AlertCircle } from 'lucide-react';
+import { createContext, memo, useState, useMemo, useRef, useEffect, useCallback, useContext } from 'react';
+import JsxParser from 'react-jsx-parser';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var JSXPreviewContext = createContext(null);
+var TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+var useJSXPreview = () => {
+  const context = useContext(JSXPreviewContext);
+  if (!context) {
+    throw new Error("JSXPreview components must be used within JSXPreview");
+  }
+  return context;
+};
+var matchJsxTag = (code) => {
+  if (code.trim() === "") {
+    return null;
+  }
+  const match = code.match(TAG_REGEX);
+  if (!match || match.index === void 0) {
+    return null;
+  }
+  const [fullMatch, tagName, attributes, selfClosing] = match;
+  let type;
+  if (selfClosing) {
+    type = "self-closing";
+  } else if (fullMatch.startsWith("</")) {
+    type = "closing";
+  } else {
+    type = "opening";
+  }
+  return {
+    attributes: attributes?.trim(),
+    endIndex: match.index + fullMatch.length,
+    startIndex: match.index,
+    tag: fullMatch,
+    tagName,
+    type
+  };
+};
+var stripIncompleteTag = (text) => {
+  const lastOpen = text.lastIndexOf("<");
+  if (lastOpen === -1) {
+    return text;
+  }
+  const afterOpen = text.slice(lastOpen);
+  if (!afterOpen.includes(">")) {
+    return text.slice(0, lastOpen);
+  }
+  return text;
+};
+var completeJsxTag = (code) => {
+  const stack = [];
+  let result = "";
+  let currentPosition = 0;
+  while (currentPosition < code.length) {
+    const match = matchJsxTag(code.slice(currentPosition));
+    if (!match) {
+      result += stripIncompleteTag(code.slice(currentPosition));
+      break;
+    }
+    const { tagName, type, endIndex } = match;
+    result += code.slice(currentPosition, currentPosition + endIndex);
+    if (type === "opening") {
+      stack.push(tagName ?? "");
+    } else if (type === "closing") {
+      stack.pop();
+    }
+    currentPosition += endIndex;
+  }
+  return result + stack.reverse().map((tag) => `</${tag}>`).join("");
+};
+var JSXPreview = memo(
+  ({
+    jsx: jsx2,
+    isStreaming = false,
+    components,
+    bindings,
+    onError,
+    className,
+    children,
+    ...props
+  }) => {
+    const [prevJsx, setPrevJsx] = useState(jsx2);
+    const [error, setError] = useState(null);
+    const [_lastGoodJsx, setLastGoodJsx] = useState("");
+    if (jsx2 !== prevJsx) {
+      setPrevJsx(jsx2);
+      setError(null);
+    }
+    const processedJsx = useMemo(
+      () => isStreaming ? completeJsxTag(jsx2) : jsx2,
+      [jsx2, isStreaming]
+    );
+    const contextValue = useMemo(
+      () => ({
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx: jsx2,
+        onErrorProp: onError,
+        processedJsx,
+        setError,
+        setLastGoodJsx
+      }),
+      [
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx2,
+        onError,
+        processedJsx,
+        setError
+      ]
+    );
+    return /* @__PURE__ */ jsx(JSXPreviewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), ...props, children }) });
+  }
+);
+JSXPreview.displayName = "JSXPreview";
+var JSXPreviewContent = memo(
+  ({ className, ...props }) => {
+    const {
+      processedJsx,
+      isStreaming,
+      components,
+      bindings,
+      setError,
+      setLastGoodJsx,
+      onErrorProp
+    } = useJSXPreview();
+    const errorReportedRef = useRef(null);
+    const lastGoodJsxRef = useRef("");
+    const [hadError, setHadError] = useState(false);
+    useEffect(() => {
+      errorReportedRef.current = null;
+      setHadError(false);
+    }, [processedJsx]);
+    const handleError = useCallback(
+      (err) => {
+        if (errorReportedRef.current === processedJsx) {
+          return;
+        }
+        errorReportedRef.current = processedJsx;
+        if (isStreaming) {
+          setHadError(true);
+          return;
+        }
+        setError(err);
+        onErrorProp?.(err);
+      },
+      [processedJsx, isStreaming, onErrorProp, setError]
+    );
+    useEffect(() => {
+      if (!errorReportedRef.current) {
+        lastGoodJsxRef.current = processedJsx;
+        setLastGoodJsx(processedJsx);
+      }
+    }, [processedJsx, setLastGoodJsx]);
+    const displayJsx = isStreaming && hadError ? lastGoodJsxRef.current : processedJsx;
+    return /* @__PURE__ */ jsx("div", { className: cn("jsx-preview-content", className), ...props, children: /* @__PURE__ */ jsx(
+      JsxParser,
+      {
+        bindings,
+        components,
+        jsx: displayJsx,
+        onError: handleError,
+        renderInWrapper: false
+      }
+    ) });
+  }
+);
+JSXPreviewContent.displayName = "JSXPreviewContent";
+var renderChildren = (children, error) => {
+  if (typeof children === "function") {
+    return children(error);
+  }
+  return children;
+};
+var JSXPreviewError = memo(
+  ({ className, children, ...props }) => {
+    const { error } = useJSXPreview();
+    if (!error) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm",
+          className
+        ),
+        ...props,
+        children: children ? renderChildren(children, error) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: error.message })
+        ] })
+      }
+    );
+  }
+);
+JSXPreviewError.displayName = "JSXPreviewError";
+
+export { JSXPreview, JSXPreviewContent, JSXPreviewError, useJSXPreview };

package/dist/components/ai-elements/loader.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+};
+declare const Loader: ({ className, size, ...props }: LoaderProps) => react_jsx_runtime.JSX.Element;
+
+export { Loader, type LoaderProps };

package/dist/components/ai-elements/loader.js

@@ -0,0 +1,115 @@
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ai-elements/loader.tsx
+var LoaderIcon = ({ size = 16 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    height: size,
+    strokeLinejoin: "round",
+    style: { color: "currentcolor" },
+    viewBox: "0 0 16 16",
+    width: size,
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Loader" }),
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 16V12",
+            opacity: "0.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.29773 1.52783L5.64887 4.7639",
+            opacity: "0.9",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12.7023 1.52783L10.3511 4.7639",
+            opacity: "0.1",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12.7023 14.472L10.3511 11.236",
+            opacity: "0.4",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3.29773 14.472L5.64887 11.236",
+            opacity: "0.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M15.6085 5.52783L11.8043 6.7639",
+            opacity: "0.2",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0.391602 10.472L4.19583 9.23598",
+            opacity: "0.7",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M15.6085 10.4722L11.8043 9.2361",
+            opacity: "0.3",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M0.391602 5.52783L4.19583 6.7639",
+            opacity: "0.8",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ jsx("rect", { fill: "white", height: "16", width: "16" }) }) })
+    ]
+  }
+);
+var Loader = ({ className, size = 16, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(LoaderIcon, { size })
+  }
+);
+
+export { Loader };

package/dist/components/ai-elements/message.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { ButtonGroup } from '@chatsdk-dev/ui/components/button-group';
+import { UIMessage } from 'ai';
+import { Streamdown } from 'streamdown';
+
+type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: UIMessage["role"];
+};
+declare const Message: ({ className, from, ...props }: MessageProps) => react_jsx_runtime.JSX.Element;
+type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => react_jsx_runtime.JSX.Element;
+type MessageActionsProps = ComponentProps<"div">;
+declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => react_jsx_runtime.JSX.Element;
+type MessageActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+};
+declare const MessageAction: ({ tooltip, children, label, variant, size, ...props }: MessageActionProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+};
+declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => react_jsx_runtime.JSX.Element[];
+type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
+declare const MessageBranchSelector: ({ className, ...props }: MessageBranchSelectorProps) => react_jsx_runtime.JSX.Element | null;
+type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchNextProps = ComponentProps<typeof Button>;
+declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps) => react_jsx_runtime.JSX.Element;
+type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => react_jsx_runtime.JSX.Element;
+type MessageResponseProps = ComponentProps<typeof Streamdown>;
+declare const MessageResponse: react.MemoExoticComponent<({ className, ...props }: MessageResponseProps) => react_jsx_runtime.JSX.Element>;
+type MessageToolbarProps = ComponentProps<"div">;
+declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => react_jsx_runtime.JSX.Element;
+
+export { Message, MessageAction, type MessageActionProps, MessageActions, type MessageActionsProps, MessageBranch, MessageBranchContent, type MessageBranchContentProps, MessageBranchNext, type MessageBranchNextProps, MessageBranchPage, type MessageBranchPageProps, MessageBranchPrevious, type MessageBranchPreviousProps, type MessageBranchProps, MessageBranchSelector, type MessageBranchSelectorProps, MessageContent, type MessageContentProps, type MessageProps, MessageResponse, type MessageResponseProps, MessageToolbar, type MessageToolbarProps };

package/dist/components/ai-elements/message.js

@@ -0,0 +1,259 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { ButtonGroup, ButtonGroupText } from '@chatsdk-dev/ui/components/button-group';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@chatsdk-dev/ui/components/tooltip';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import { math } from '@streamdown/math';
+import { mermaid } from '@streamdown/mermaid';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { createContext, memo, useState, useCallback, useMemo, useEffect, useContext } from 'react';
+import { Streamdown } from 'streamdown';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className
+    ),
+    ...props
+  }
+);
+var MessageContent = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:text-foreground",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var MessageActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props, children });
+var MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(Button, { size, type: "button", variant, ...props, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+  ] });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { render: () => button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var MessageBranchContext = createContext(
+  null
+);
+var useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+  return context;
+};
+var MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState([]);
+  const handleBranchChange = useCallback(
+    (newBranch) => {
+      setCurrentBranch(newBranch);
+      onBranchChange?.(newBranch);
+    },
+    [onBranchChange]
+  );
+  const goToPrevious = useCallback(() => {
+    const newBranch = currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const goToNext = useCallback(() => {
+    const newBranch = currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  }, [currentBranch, branches.length, handleBranchChange]);
+  const contextValue = useMemo(
+    () => ({
+      branches,
+      currentBranch,
+      goToNext,
+      goToPrevious,
+      setBranches,
+      totalBranches: branches.length
+    }),
+    [branches, currentBranch, goToNext, goToPrevious]
+  );
+  return /* @__PURE__ */ jsx(MessageBranchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid w-full gap-2 [&>div]:pb-0", className),
+      ...props
+    }
+  ) });
+};
+var MessageBranchContent = ({
+  children,
+  ...props
+}) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = useMemo(
+    () => Array.isArray(children) ? children : [children],
+    [children]
+  );
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return childrenArray.map((branch, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      ),
+      ...props,
+      children: branch
+    },
+    branch.key
+  ));
+};
+var MessageBranchSelector = ({
+  className,
+  ...props
+}) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ButtonGroup,
+    {
+      className: cn(
+        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        className
+      ),
+      orientation: "horizontal",
+      ...props
+    }
+  );
+};
+var MessageBranchPrevious = ({
+  children,
+  ...props
+}) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Previous branch",
+      disabled: totalBranches <= 1,
+      onClick: goToPrevious,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+    }
+  );
+};
+var MessageBranchNext = ({
+  children,
+  ...props
+}) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Next branch",
+      disabled: totalBranches <= 1,
+      onClick: goToNext,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14 })
+    }
+  );
+};
+var MessageBranchPage = ({
+  className,
+  ...props
+}) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return /* @__PURE__ */ jsxs(
+    ButtonGroupText,
+    {
+      className: cn(
+        "border-none bg-transparent text-muted-foreground shadow-none",
+        className
+      ),
+      ...props,
+      children: [
+        currentBranch + 1,
+        " of ",
+        totalBranches
+      ]
+    }
+  );
+};
+var streamdownPlugins = { cjk, code, math, mermaid };
+var MessageResponse = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    Streamdown,
+    {
+      className: cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      ),
+      plugins: streamdownPlugins,
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children && nextProps.isAnimating === prevProps.isAnimating
+);
+MessageResponse.displayName = "MessageResponse";
+var MessageToolbar = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Message, MessageAction, MessageActions, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

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

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@chatsdk-dev/ui/components/command';
+import { Popover, PopoverContent } from '@chatsdk-dev/ui/components/popover';
+import { ComponentProps, ReactNode } from 'react';
+
+declare const useAudioDevices: () => {
+    devices: MediaDeviceInfo[];
+    error: string | null;
+    hasPermission: boolean;
+    loadDevices: () => Promise<void>;
+    loading: boolean;
+};
+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;
+
+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 };