@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,246 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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 _voiceselectoraccent = require('./voice-selector-accent');
+var _button = require('../ui/button');
+
+
+
+
+
+
+
+
+
+
+var _command = require('../ui/command');
+
+
+
+
+
+var _dialog = require('../ui/dialog');
+var _spinner = require('../ui/spinner');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+
+
+
+
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+const VoiceSelectorContext = _react.createContext.call(void 0, 
+  null
+);
+const useVoiceSelector = () => {
+  const context = _react.use.call(void 0, VoiceSelectorContext);
+  if (!context) {
+    throw new Error(
+      "VoiceSelector components must be used within VoiceSelector"
+    );
+  }
+  return context;
+};
+const VoiceSelector = ({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}) => {
+  const [value, setValue] = _reactusecontrollablestate.useControllableState.call(void 0, {
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  const [open, setOpen] = _reactusecontrollablestate.useControllableState.call(void 0, {
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const voiceSelectorContext = _react.useMemo.call(void 0, 
+    () => ({ open, setOpen, setValue, value }),
+    [value, setValue, open, setOpen]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VoiceSelectorContext.Provider, { value: voiceSelectorContext, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.Dialog, { onOpenChange: setOpen, open, ...props, children }) });
+};
+const VoiceSelectorTrigger = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.DialogTrigger, { ...props });
+const VoiceSelectorContent = ({
+  className,
+  children,
+  title = "Voice Selector",
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _dialog.DialogContent,
+  {
+    "aria-describedby": void 0,
+    className: _utils.cn.call(void 0, "p-0", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dialog.DialogTitle, { className: "sr-only", children: title }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+    ]
+  }
+);
+const VoiceSelectorDialog = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandDialog, { ...props });
+const VoiceSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandInput, { className: _utils.cn.call(void 0, "h-auto py-3.5", className), ...props });
+const VoiceSelectorList = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandList, { ...props });
+const VoiceSelectorEmpty = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandEmpty, { ...props });
+const VoiceSelectorGroup = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandGroup, { ...props });
+const VoiceSelectorItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandItem, { className: _utils.cn.call(void 0, "px-4 py-2", className), ...props });
+const VoiceSelectorShortcut = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandShortcut, { ...props });
+const VoiceSelectorSeparator = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _command.CommandSeparator, { ...props });
+const VoiceSelectorGender = ({
+  className,
+  value,
+  children,
+  ...props
+}) => {
+  let icon = null;
+  switch (value) {
+    case "male": {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MarsIcon, { className: "size-4" });
+      break;
+    }
+    case "female": {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.VenusIcon, { className: "size-4" });
+      break;
+    }
+    case "transgender": {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.TransgenderIcon, { className: "size-4" });
+      break;
+    }
+    case "androgyne": {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MarsStrokeIcon, { className: "size-4" });
+      break;
+    }
+    case "non-binary": {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.NonBinaryIcon, { className: "size-4" });
+      break;
+    }
+    case "intersex": {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.VenusAndMarsIcon, { className: "size-4" });
+      break;
+    }
+    default: {
+      icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleSmallIcon, { className: "size-4" });
+    }
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "text-muted-foreground text-xs", className), ...props, children: _nullishCoalesce(children, () => ( icon)) });
+};
+const VoiceSelectorAge = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    className: _utils.cn.call(void 0, "text-muted-foreground text-xs tabular-nums", className),
+    ...props
+  }
+);
+const VoiceSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    className: _utils.cn.call(void 0, "flex-1 truncate text-left font-medium", className),
+    ...props
+  }
+);
+const VoiceSelectorDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "text-muted-foreground text-xs", className), ...props });
+const VoiceSelectorAttributes = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center text-xs", className), ...props, children });
+const VoiceSelectorBullet = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    "aria-hidden": "true",
+    className: _utils.cn.call(void 0, "select-none text-border", className),
+    ...props,
+    children: "\u2022"
+  }
+);
+const VoiceSelectorPreview = ({
+  className,
+  playing,
+  loading,
+  onPlay,
+  onClick,
+  ...props
+}) => {
+  const handleClick = _react.useCallback.call(void 0, 
+    (event) => {
+      event.stopPropagation();
+      _optionalChain([onClick, 'optionalCall', _ => _(event)]);
+      _optionalChain([onPlay, 'optionalCall', _2 => _2()]);
+    },
+    [onClick, onPlay]
+  );
+  let icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.PlayIcon, { className: "size-3" });
+  if (loading) {
+    icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _spinner.Spinner, { className: "size-3" });
+  } else if (playing) {
+    icon = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.PauseIcon, { className: "size-3" });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      "aria-label": playing ? "Pause preview" : "Play preview",
+      className: _utils.cn.call(void 0, "size-6", className),
+      disabled: loading,
+      onClick: handleClick,
+      size: "icon-sm",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: icon
+    }
+  );
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.VoiceSelector = VoiceSelector; exports.VoiceSelectorAccent = _voiceselectoraccent.VoiceSelectorAccent; exports.VoiceSelectorAge = VoiceSelectorAge; exports.VoiceSelectorAttributes = VoiceSelectorAttributes; exports.VoiceSelectorBullet = VoiceSelectorBullet; exports.VoiceSelectorContent = VoiceSelectorContent; exports.VoiceSelectorDescription = VoiceSelectorDescription; exports.VoiceSelectorDialog = VoiceSelectorDialog; exports.VoiceSelectorEmpty = VoiceSelectorEmpty; exports.VoiceSelectorGender = VoiceSelectorGender; exports.VoiceSelectorGroup = VoiceSelectorGroup; exports.VoiceSelectorInput = VoiceSelectorInput; exports.VoiceSelectorItem = VoiceSelectorItem; exports.VoiceSelectorList = VoiceSelectorList; exports.VoiceSelectorName = VoiceSelectorName; exports.VoiceSelectorPreview = VoiceSelectorPreview; exports.VoiceSelectorSeparator = VoiceSelectorSeparator; exports.VoiceSelectorShortcut = VoiceSelectorShortcut; exports.VoiceSelectorTrigger = VoiceSelectorTrigger; exports.useVoiceSelector = useVoiceSelector;

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

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+export { VoiceSelectorAccent, VoiceSelectorAccentProps } from './voice-selector-accent.cjs';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../ui/command.cjs';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog.cjs';
+import 'cmdk';
+import 'radix-ui';
+
+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 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, 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 };

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

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+export { VoiceSelectorAccent, VoiceSelectorAccentProps } from './voice-selector-accent.js';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '../ui/command.js';
+import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog.js';
+import 'cmdk';
+import 'radix-ui';
+
+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 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, 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 };

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

@@ -0,0 +1,246 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  VoiceSelectorAccent
+} from "./voice-selector-accent";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut
+} from "../ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger
+} from "../ui/dialog";
+import { Spinner } from "../ui/spinner";
+import { cn } from "../../lib/utils";
+import {
+  CircleSmallIcon,
+  MarsIcon,
+  MarsStrokeIcon,
+  NonBinaryIcon,
+  PauseIcon,
+  PlayIcon,
+  TransgenderIcon,
+  VenusAndMarsIcon,
+  VenusIcon
+} from "lucide-react";
+import { createContext, useCallback, use, useMemo } from "react";
+const VoiceSelectorContext = createContext(
+  null
+);
+const useVoiceSelector = () => {
+  const context = use(VoiceSelectorContext);
+  if (!context) {
+    throw new Error(
+      "VoiceSelector components must be used within VoiceSelector"
+    );
+  }
+  return context;
+};
+const VoiceSelector = ({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}) => {
+  const [value, setValue] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const voiceSelectorContext = useMemo(
+    () => ({ open, setOpen, setValue, value }),
+    [value, setValue, open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(VoiceSelectorContext.Provider, { value: voiceSelectorContext, children: /* @__PURE__ */ jsx(Dialog, { onOpenChange: setOpen, open, ...props, children }) });
+};
+const VoiceSelectorTrigger = (props) => /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+const VoiceSelectorContent = ({
+  className,
+  children,
+  title = "Voice Selector",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    "aria-describedby": void 0,
+    className: cn("p-0", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+      /* @__PURE__ */ jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-auto", children })
+    ]
+  }
+);
+const VoiceSelectorDialog = (props) => /* @__PURE__ */ jsx(CommandDialog, { ...props });
+const VoiceSelectorInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn("h-auto py-3.5", className), ...props });
+const VoiceSelectorList = (props) => /* @__PURE__ */ jsx(CommandList, { ...props });
+const VoiceSelectorEmpty = (props) => /* @__PURE__ */ jsx(CommandEmpty, { ...props });
+const VoiceSelectorGroup = (props) => /* @__PURE__ */ jsx(CommandGroup, { ...props });
+const VoiceSelectorItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandItem, { className: cn("px-4 py-2", className), ...props });
+const VoiceSelectorShortcut = (props) => /* @__PURE__ */ jsx(CommandShortcut, { ...props });
+const VoiceSelectorSeparator = (props) => /* @__PURE__ */ jsx(CommandSeparator, { ...props });
+const VoiceSelectorGender = ({
+  className,
+  value,
+  children,
+  ...props
+}) => {
+  let icon = null;
+  switch (value) {
+    case "male": {
+      icon = /* @__PURE__ */ jsx(MarsIcon, { className: "size-4" });
+      break;
+    }
+    case "female": {
+      icon = /* @__PURE__ */ jsx(VenusIcon, { className: "size-4" });
+      break;
+    }
+    case "transgender": {
+      icon = /* @__PURE__ */ jsx(TransgenderIcon, { className: "size-4" });
+      break;
+    }
+    case "androgyne": {
+      icon = /* @__PURE__ */ jsx(MarsStrokeIcon, { className: "size-4" });
+      break;
+    }
+    case "non-binary": {
+      icon = /* @__PURE__ */ jsx(NonBinaryIcon, { className: "size-4" });
+      break;
+    }
+    case "intersex": {
+      icon = /* @__PURE__ */ jsx(VenusAndMarsIcon, { className: "size-4" });
+      break;
+    }
+    default: {
+      icon = /* @__PURE__ */ jsx(CircleSmallIcon, { className: "size-4" });
+    }
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props, children: children ?? icon });
+};
+const VoiceSelectorAge = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("text-muted-foreground text-xs tabular-nums", className),
+    ...props
+  }
+);
+const VoiceSelectorName = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("flex-1 truncate text-left font-medium", className),
+    ...props
+  }
+);
+const VoiceSelectorDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props });
+const VoiceSelectorAttributes = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center text-xs", className), ...props, children });
+const VoiceSelectorBullet = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: cn("select-none text-border", className),
+    ...props,
+    children: "\u2022"
+  }
+);
+const VoiceSelectorPreview = ({
+  className,
+  playing,
+  loading,
+  onPlay,
+  onClick,
+  ...props
+}) => {
+  const handleClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClick?.(event);
+      onPlay?.();
+    },
+    [onClick, onPlay]
+  );
+  let icon = /* @__PURE__ */ jsx(PlayIcon, { className: "size-3" });
+  if (loading) {
+    icon = /* @__PURE__ */ jsx(Spinner, { className: "size-3" });
+  } else if (playing) {
+    icon = /* @__PURE__ */ jsx(PauseIcon, { className: "size-3" });
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": playing ? "Pause preview" : "Play preview",
+      className: cn("size-6", className),
+      disabled: loading,
+      onClick: handleClick,
+      size: "icon-sm",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: icon
+    }
+  );
+};
+export {
+  VoiceSelector,
+  VoiceSelectorAccent,
+  VoiceSelectorAge,
+  VoiceSelectorAttributes,
+  VoiceSelectorBullet,
+  VoiceSelectorContent,
+  VoiceSelectorDescription,
+  VoiceSelectorDialog,
+  VoiceSelectorEmpty,
+  VoiceSelectorGender,
+  VoiceSelectorGroup,
+  VoiceSelectorInput,
+  VoiceSelectorItem,
+  VoiceSelectorList,
+  VoiceSelectorName,
+  VoiceSelectorPreview,
+  VoiceSelectorSeparator,
+  VoiceSelectorShortcut,
+  VoiceSelectorTrigger,
+  useVoiceSelector
+};