@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/test-results.js

@@ -0,0 +1,349 @@
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { CheckCircle2Icon, XCircleIcon, CircleIcon, ChevronRightIcon, CircleDotIcon } from 'lucide-react';
+import { createContext, useContext, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var TestResultsContext = createContext({});
+var formatDuration = (ms) => {
+  if (ms < 1e3) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+var TestResultsHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b px-4 py-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TestResultsDuration = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = useContext(TestResultsContext);
+  if (!summary?.duration) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-sm", className), ...props, children: children ?? formatDuration(summary.duration) });
+};
+var TestResultsSummary = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = useContext(TestResultsContext);
+  if (!summary) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        className: "gap-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-3" }),
+          summary.passed,
+          " passed"
+        ]
+      }
+    ),
+    summary.failed > 0 && /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        className: "gap-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3" }),
+          summary.failed,
+          " failed"
+        ]
+      }
+    ),
+    summary.skipped > 0 && /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        className: "gap-1 bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(CircleIcon, { className: "size-3" }),
+          summary.skipped,
+          " skipped"
+        ]
+      }
+    )
+  ] }) });
+};
+var TestResults = ({
+  summary,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ summary }), [summary]);
+  return /* @__PURE__ */ jsx(TestResultsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-lg border bg-background", className),
+      ...props,
+      children: children ?? (summary && /* @__PURE__ */ jsxs(TestResultsHeader, { children: [
+        /* @__PURE__ */ jsx(TestResultsSummary, {}),
+        /* @__PURE__ */ jsx(TestResultsDuration, {})
+      ] }))
+    }
+  ) });
+};
+var TestResultsProgress = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = useContext(TestResultsContext);
+  if (!summary) {
+    return null;
+  }
+  const passedPercent = summary.passed / summary.total * 100;
+  const failedPercent = summary.failed / summary.total * 100;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-2 overflow-hidden rounded-full bg-muted", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-green-500 transition-all",
+          style: { width: `${passedPercent}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-red-500 transition-all",
+          style: { width: `${failedPercent}%` }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        summary.passed,
+        "/",
+        summary.total,
+        " tests passed"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        passedPercent.toFixed(0),
+        "%"
+      ] })
+    ] })
+  ] }) });
+};
+var TestResultsContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-2 p-4", className), ...props, children });
+var TestSuiteContext = createContext({
+  name: "",
+  status: "passed"
+});
+var statusStyles = {
+  failed: "text-red-600 dark:text-red-400",
+  passed: "text-green-600 dark:text-green-400",
+  running: "text-blue-600 dark:text-blue-400",
+  skipped: "text-yellow-600 dark:text-yellow-400"
+};
+var statusIcons = {
+  failed: /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4" }),
+  passed: /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-4" }),
+  running: /* @__PURE__ */ jsx(CircleDotIcon, { className: "size-4 animate-pulse" }),
+  skipped: /* @__PURE__ */ jsx(CircleIcon, { className: "size-4" })
+};
+var TestStatusIcon = ({ status }) => /* @__PURE__ */ jsx("span", { className: cn("shrink-0", statusStyles[status]), children: statusIcons[status] });
+var TestSuite = ({
+  name,
+  status,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ name, status }), [name, status]);
+  return /* @__PURE__ */ jsx(TestSuiteContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Collapsible, { className: cn("rounded-lg border", className), ...props, children }) });
+};
+var TestSuiteName = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { name, status } = useContext(TestSuiteContext);
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+        /* @__PURE__ */ jsx(TestStatusIcon, { status }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: children ?? name })
+      ]
+    }
+  );
+};
+var TestSuiteStats = ({
+  passed = 0,
+  failed = 0,
+  skipped = 0,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("ml-auto flex items-center gap-2 text-xs", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      passed > 0 && /* @__PURE__ */ jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
+        passed,
+        " passed"
+      ] }),
+      failed > 0 && /* @__PURE__ */ jsxs("span", { className: "text-red-600 dark:text-red-400", children: [
+        failed,
+        " failed"
+      ] }),
+      skipped > 0 && /* @__PURE__ */ jsxs("span", { className: "text-yellow-600 dark:text-yellow-400", children: [
+        skipped,
+        " skipped"
+      ] })
+    ] })
+  }
+);
+var TestSuiteContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("border-t", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "divide-y", children }) });
+var TestContext = createContext({
+  name: "",
+  status: "passed"
+});
+var TestName = ({ className, children, ...props }) => {
+  const { name } = useContext(TestContext);
+  return /* @__PURE__ */ jsx("span", { className: cn("flex-1", className), ...props, children: children ?? name });
+};
+var TestDuration = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { duration } = useContext(TestContext);
+  if (duration === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-muted-foreground text-xs", className),
+      ...props,
+      children: children ?? `${duration}ms`
+    }
+  );
+};
+var TestStatus = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { status } = useContext(TestContext);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("shrink-0", statusStyles[status], className),
+      ...props,
+      children: children ?? statusIcons[status]
+    }
+  );
+};
+var Test = ({
+  name,
+  status,
+  duration,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ duration, name, status }),
+    [duration, name, status]
+  );
+  return /* @__PURE__ */ jsx(TestContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2 px-4 py-2 text-sm", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TestStatus, {}),
+        /* @__PURE__ */ jsx(TestName, {}),
+        duration !== void 0 && /* @__PURE__ */ jsx(TestDuration, {})
+      ] })
+    }
+  ) });
+};
+var TestError = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mt-2 rounded-md bg-red-50 p-3 dark:bg-red-900/20",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TestErrorMessage = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn(
+      "font-medium text-red-700 text-sm dark:text-red-400",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TestErrorStack = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "pre",
+  {
+    className: cn(
+      "mt-2 overflow-auto font-mono text-red-600 text-xs dark:text-red-400",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+
+export { Test, TestDuration, TestError, TestErrorMessage, TestErrorStack, TestName, TestResults, TestResultsContent, TestResultsDuration, TestResultsHeader, TestResultsProgress, TestResultsSummary, TestStatus, TestSuite, TestSuiteContent, TestSuiteName, TestSuiteStats };

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

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { ToolUIPart, DynamicToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+
+type ToolProps = ComponentProps<typeof Collapsible>;
+declare const Tool: ({ className, ...props }: ToolProps) => react_jsx_runtime.JSX.Element;
+type ToolPart = ToolUIPart | DynamicToolUIPart;
+type ToolHeaderProps = {
+    title?: string;
+    className?: string;
+} & ({
+    type: ToolUIPart["type"];
+    state: ToolUIPart["state"];
+    toolName?: never;
+} | {
+    type: DynamicToolUIPart["type"];
+    state: DynamicToolUIPart["state"];
+    toolName: string;
+});
+declare const getStatusBadge: (status: ToolPart["state"]) => react_jsx_runtime.JSX.Element;
+declare const ToolHeader: ({ className, title, type, state, toolName, ...props }: ToolHeaderProps) => react_jsx_runtime.JSX.Element;
+type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ToolContent: ({ className, ...props }: ToolContentProps) => react_jsx_runtime.JSX.Element;
+type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolPart["input"];
+};
+declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => react_jsx_runtime.JSX.Element;
+type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolPart["output"];
+    errorText: ToolPart["errorText"];
+};
+declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Tool, ToolContent, type ToolContentProps, ToolHeader, type ToolHeaderProps, ToolInput, type ToolInputProps, ToolOutput, type ToolOutputProps, type ToolPart, type ToolProps, getStatusBadge };

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

@@ -0,0 +1,2 @@
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, getStatusBadge } from '../../chunk-X5YUF2YM.js';
+import '../../chunk-CFM57HOS.js';

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeToolbar } from '@xyflow/react';
+import { ComponentProps } from 'react';
+
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+declare const Toolbar: ({ className, ...props }: ToolbarProps) => react_jsx_runtime.JSX.Element;
+
+export { Toolbar };

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

@@ -0,0 +1,18 @@
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { NodeToolbar, Position } from '@xyflow/react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ai-elements/toolbar.tsx
+var Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  NodeToolbar,
+  {
+    className: cn(
+      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
+      className
+    ),
+    position: Position.Bottom,
+    ...props
+  }
+);
+
+export { Toolbar };

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

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Experimental_TranscriptionResult } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+
+type TranscriptionProps = Omit<ComponentProps<"div">, "children"> & {
+    segments: TranscriptionSegment[];
+    currentTime?: number;
+    onSeek?: (time: number) => void;
+    children: (segment: TranscriptionSegment, index: number) => ReactNode;
+};
+declare const Transcription: ({ segments, currentTime: externalCurrentTime, onSeek, className, children, ...props }: TranscriptionProps) => react_jsx_runtime.JSX.Element;
+type TranscriptionSegmentProps = ComponentProps<"button"> & {
+    segment: TranscriptionSegment;
+    index: number;
+};
+type TranscriptionSegment = Experimental_TranscriptionResult["segments"][number];
+declare const TranscriptionSegment: ({ segment, index, className, onClick, ...props }: TranscriptionSegmentProps) => react_jsx_runtime.JSX.Element;
+
+export { Transcription, type TranscriptionProps, TranscriptionSegment, type TranscriptionSegmentProps };

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

@@ -0,0 +1,90 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { createContext, useMemo, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TranscriptionContext = createContext(
+  null
+);
+var useTranscription = () => {
+  const context = useContext(TranscriptionContext);
+  if (!context) {
+    throw new Error(
+      "Transcription components must be used within Transcription"
+    );
+  }
+  return context;
+};
+var Transcription = ({
+  segments,
+  currentTime: externalCurrentTime,
+  onSeek,
+  className,
+  children,
+  ...props
+}) => {
+  const [currentTime, setCurrentTime] = useControllableState({
+    defaultProp: 0,
+    onChange: onSeek,
+    prop: externalCurrentTime
+  });
+  const contextValue = useMemo(
+    () => ({ currentTime, onSeek, onTimeUpdate: setCurrentTime, segments }),
+    [currentTime, onSeek, setCurrentTime, segments]
+  );
+  return /* @__PURE__ */ jsx(TranscriptionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap gap-1 text-sm leading-relaxed",
+        className
+      ),
+      "data-slot": "transcription",
+      ...props,
+      children: segments.filter((segment) => segment.text.trim()).map((segment, index) => children(segment, index))
+    }
+  ) });
+};
+var TranscriptionSegment = ({
+  segment,
+  index,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { currentTime, onSeek } = useTranscription();
+  const isActive = currentTime >= segment.startSecond && currentTime < segment.endSecond;
+  const isPast = currentTime >= segment.endSecond;
+  const handleClick = useCallback(
+    (event) => {
+      if (onSeek) {
+        onSeek(segment.startSecond);
+      }
+      onClick?.(event);
+    },
+    [onSeek, segment.startSecond, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "inline text-left",
+        isActive && "text-primary",
+        isPast && "text-muted-foreground",
+        !(isActive || isPast) && "text-muted-foreground/60",
+        onSeek && "cursor-pointer hover:text-foreground",
+        !onSeek && "cursor-default",
+        className
+      ),
+      "data-active": isActive,
+      "data-index": index,
+      "data-slot": "transcription-segment",
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: segment.text
+    }
+  );
+};
+
+export { Transcription, TranscriptionSegment };

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

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@chatsdk-dev/ui/components/command';
+import { Dialog, DialogContent, DialogTrigger } from '@chatsdk-dev/ui/components/dialog';
+import { ComponentProps, ReactNode } from 'react';
+
+interface VoiceSelectorContextValue {
+    value: string | undefined;
+    setValue: (value: string | undefined) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+declare const useVoiceSelector: () => VoiceSelectorContextValue;
+type VoiceSelectorProps = ComponentProps<typeof Dialog> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string | undefined) => void;
+};
+declare const VoiceSelector: ({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, children, ...props }: VoiceSelectorProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+declare const VoiceSelectorTrigger: (props: VoiceSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorContentProps = ComponentProps<typeof DialogContent> & {
+    title?: ReactNode;
+};
+declare const VoiceSelectorContent: ({ className, children, title, ...props }: VoiceSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+declare const VoiceSelectorDialog: (props: VoiceSelectorDialogProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorInputProps = ComponentProps<typeof CommandInput>;
+declare const VoiceSelectorInput: ({ className, ...props }: VoiceSelectorInputProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorListProps = ComponentProps<typeof CommandList>;
+declare const VoiceSelectorList: (props: VoiceSelectorListProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+declare const VoiceSelectorEmpty: (props: VoiceSelectorEmptyProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+declare const VoiceSelectorGroup: (props: VoiceSelectorGroupProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorItemProps = ComponentProps<typeof CommandItem>;
+declare const VoiceSelectorItem: ({ className, ...props }: VoiceSelectorItemProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+declare const VoiceSelectorShortcut: (props: VoiceSelectorShortcutProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
+declare const VoiceSelectorSeparator: (props: VoiceSelectorSeparatorProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorGenderProps = ComponentProps<"span"> & {
+    value?: "male" | "female" | "transgender" | "androgyne" | "non-binary" | "intersex";
+};
+declare const VoiceSelectorGender: ({ className, value, children, ...props }: VoiceSelectorGenderProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorAccentProps = ComponentProps<"span"> & {
+    value?: "american" | "british" | "australian" | "canadian" | "irish" | "scottish" | "indian" | "south-african" | "new-zealand" | "spanish" | "french" | "german" | "italian" | "portuguese" | "brazilian" | "mexican" | "argentinian" | "japanese" | "chinese" | "korean" | "russian" | "arabic" | "dutch" | "swedish" | "norwegian" | "danish" | "finnish" | "polish" | "turkish" | "greek" | string;
+};
+declare const VoiceSelectorAccent: ({ className, value, children, ...props }: VoiceSelectorAccentProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorAgeProps = ComponentProps<"span">;
+declare const VoiceSelectorAge: ({ className, ...props }: VoiceSelectorAgeProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorNameProps = ComponentProps<"span">;
+declare const VoiceSelectorName: ({ className, ...props }: VoiceSelectorNameProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorDescriptionProps = ComponentProps<"span">;
+declare const VoiceSelectorDescription: ({ className, ...props }: VoiceSelectorDescriptionProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorAttributesProps = ComponentProps<"div">;
+declare const VoiceSelectorAttributes: ({ className, children, ...props }: VoiceSelectorAttributesProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorBulletProps = ComponentProps<"span">;
+declare const VoiceSelectorBullet: ({ className, ...props }: VoiceSelectorBulletProps) => react_jsx_runtime.JSX.Element;
+type VoiceSelectorPreviewProps = Omit<ComponentProps<"button">, "children"> & {
+    playing?: boolean;
+    loading?: boolean;
+    onPlay?: () => void;
+};
+declare const VoiceSelectorPreview: ({ className, playing, loading, onPlay, onClick, ...props }: VoiceSelectorPreviewProps) => react_jsx_runtime.JSX.Element;
+
+export { VoiceSelector, VoiceSelectorAccent, type VoiceSelectorAccentProps, VoiceSelectorAge, type VoiceSelectorAgeProps, VoiceSelectorAttributes, type VoiceSelectorAttributesProps, VoiceSelectorBullet, type VoiceSelectorBulletProps, VoiceSelectorContent, type VoiceSelectorContentProps, VoiceSelectorDescription, type VoiceSelectorDescriptionProps, VoiceSelectorDialog, type VoiceSelectorDialogProps, VoiceSelectorEmpty, type VoiceSelectorEmptyProps, VoiceSelectorGender, type VoiceSelectorGenderProps, VoiceSelectorGroup, type VoiceSelectorGroupProps, VoiceSelectorInput, type VoiceSelectorInputProps, VoiceSelectorItem, type VoiceSelectorItemProps, VoiceSelectorList, type VoiceSelectorListProps, VoiceSelectorName, type VoiceSelectorNameProps, VoiceSelectorPreview, type VoiceSelectorPreviewProps, type VoiceSelectorProps, VoiceSelectorSeparator, type VoiceSelectorSeparatorProps, VoiceSelectorShortcut, type VoiceSelectorShortcutProps, VoiceSelectorTrigger, type VoiceSelectorTriggerProps, useVoiceSelector };