@hex-core/components 1.6.0 → 1.7.0

package/dist/_tsup-dts-rollup.d.ts

@@ -2830,6 +2830,42 @@ declare const spacerVariants: (props?: ({
 export { spacerVariants }
 export { spacerVariants as spacerVariants_alias_1 }
 
+/**
+ * Renders a mic toggle button wired to the Web Speech API.
+ * @param props - controlled listening state + transcript callback
+ * @returns A button element that toggles speech recognition
+ */
+declare function SpeechRecognition({ isListening, onListeningChange, onTranscript, onError, lang, continuous, interimResults, startLabel, stopLabel, notSupportedLabel, disabled, className, ...rest }: SpeechRecognitionProps): JSX.Element;
+export { SpeechRecognition }
+export { SpeechRecognition as SpeechRecognition_alias_1 }
+
+declare interface SpeechRecognitionProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, "onError"> {
+    /** Controlled listening state. */
+    isListening: boolean;
+    /** Called when listening starts/stops (user toggle or browser auto-end). */
+    onListeningChange: (listening: boolean) => void;
+    /** Called per transcript chunk. `isFinal` indicates a finalized phrase. */
+    onTranscript: (text: string, isFinal: boolean) => void;
+    /** Called on browser error (e.g. "not-allowed", "no-speech", "network"). */
+    onError?: (error: string, message?: string) => void;
+    /** BCP-47 language tag. Default `"en-US"`. */
+    lang?: string;
+    /** Keep listening across pauses. Default `true`. */
+    continuous?: boolean;
+    /** Emit interim (in-progress) results. Default `true`. */
+    interimResults?: boolean;
+    /** Accessible name when idle. Default `"Start dictation"`. */
+    startLabel?: string;
+    /** Accessible name when listening. Default `"Stop dictation"`. */
+    stopLabel?: string;
+    /** Accessible name + tooltip when the browser lacks the API. */
+    notSupportedLabel?: string;
+}
+export { SpeechRecognitionProps }
+export { SpeechRecognitionProps as SpeechRecognitionProps_alias_1 }
+
+export declare const speechRecognitionSchema: ComponentSchemaDefinition;
+
 /**
  * Vertical flex flow with token-bound gap. Children stack top-to-bottom.
  * @param props - Stack props including `gap`, `align`, and `justify` variant keys.

package/dist/index.d.ts

@@ -298,6 +298,8 @@ export { MessageList } from './_tsup-dts-rollup.js';
 export { MessageListProps } from './_tsup-dts-rollup.js';
 export { Composer } from './_tsup-dts-rollup.js';
 export { ComposerProps } from './_tsup-dts-rollup.js';
+export { SpeechRecognition } from './_tsup-dts-rollup.js';
+export { SpeechRecognitionProps } from './_tsup-dts-rollup.js';
 export { LoadingIndicator } from './_tsup-dts-rollup.js';
 export { loadingIndicatorVariants } from './_tsup-dts-rollup.js';
 export { LoadingIndicatorProps } from './_tsup-dts-rollup.js';

package/dist/index.js

@@ -4977,6 +4977,145 @@ function Composer({
     }
   );
 }
+function getSpeechRecognitionCtor() {
+  if (typeof window === "undefined") return null;
+  const w = window;
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+function SpeechRecognition({
+  isListening,
+  onListeningChange,
+  onTranscript,
+  onError,
+  lang = "en-US",
+  continuous = true,
+  interimResults = true,
+  startLabel = "Start dictation",
+  stopLabel = "Stop dictation",
+  notSupportedLabel = "Speech recognition not supported in this browser",
+  disabled,
+  className,
+  ...rest
+}) {
+  const recognitionRef = React44.useRef(null);
+  const [isSupported, setIsSupported] = React44.useState(true);
+  const onTranscriptRef = React44.useRef(onTranscript);
+  const onListeningChangeRef = React44.useRef(onListeningChange);
+  const onErrorRef = React44.useRef(onError);
+  onTranscriptRef.current = onTranscript;
+  onListeningChangeRef.current = onListeningChange;
+  onErrorRef.current = onError;
+  const mountedRef = React44.useRef(true);
+  React44.useEffect(
+    () => () => {
+      mountedRef.current = false;
+    },
+    []
+  );
+  const rebuildingRef = React44.useRef(false);
+  const isListeningRef = React44.useRef(isListening);
+  isListeningRef.current = isListening;
+  React44.useEffect(() => {
+    const Ctor = getSpeechRecognitionCtor();
+    setIsSupported(Ctor !== null);
+  }, []);
+  React44.useEffect(() => {
+    if (!isListening) return;
+    const Ctor = getSpeechRecognitionCtor();
+    if (!Ctor) return;
+    const instance = new Ctor();
+    instance.continuous = continuous;
+    instance.interimResults = interimResults;
+    instance.lang = lang;
+    instance.onresult = (event) => {
+      if (!mountedRef.current) return;
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const result = event.results[i];
+        const transcript = result[0]?.transcript ?? "";
+        if (transcript) onTranscriptRef.current(transcript, result.isFinal);
+      }
+    };
+    instance.onerror = (event) => {
+      if (!mountedRef.current) return;
+      onErrorRef.current?.(event.error, event.message);
+      if (event.error !== "aborted") onListeningChangeRef.current(false);
+    };
+    instance.onend = () => {
+      if (!mountedRef.current) return;
+      if (rebuildingRef.current) return;
+      onListeningChangeRef.current(false);
+    };
+    recognitionRef.current = instance;
+    try {
+      instance.start();
+    } catch (err) {
+      onErrorRef.current?.("start-failed", err instanceof Error ? err.message : String(err));
+      onListeningChangeRef.current(false);
+    }
+    return () => {
+      rebuildingRef.current = isListeningRef.current;
+      instance.onresult = null;
+      instance.onerror = null;
+      instance.onend = null;
+      try {
+        instance.abort();
+      } catch {
+      }
+      recognitionRef.current = null;
+      queueMicrotask(() => {
+        rebuildingRef.current = false;
+      });
+    };
+  }, [isListening, continuous, interimResults, lang]);
+  const tooltip = !isSupported ? notSupportedLabel : isListening ? stopLabel : startLabel;
+  const accessibleName = isSupported ? startLabel : notSupportedLabel;
+  const isDisabled = disabled || !isSupported;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...rest,
+      disabled: isDisabled,
+      "aria-label": accessibleName,
+      "aria-pressed": isListening,
+      title: tooltip,
+      onClick: (event) => {
+        rest.onClick?.(event);
+        if (event.defaultPrevented || isDisabled) return;
+        onListeningChange(!isListening);
+      },
+      className: cn(
+        "inline-flex h-9 w-9 items-center justify-center rounded-md border bg-background",
+        "text-foreground transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        isListening && "animate-pulse border-destructive text-destructive",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "aria-hidden": true,
+          viewBox: "0 0 16 16",
+          width: "14",
+          height: "14",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx("rect", { x: "6", y: "2", width: "4", height: "8", rx: "2" }),
+            /* @__PURE__ */ jsx("path", { d: "M3.5 7.5a4.5 4.5 0 0 0 9 0" }),
+            /* @__PURE__ */ jsx("path", { d: "M8 12v2" }),
+            /* @__PURE__ */ jsx("path", { d: "M5.5 14h5" })
+          ]
+        }
+      )
+    }
+  );
+}
 var loadingIndicatorVariants = cva("inline-flex items-center gap-2 text-muted-foreground", {
   variants: {
     size: {
@@ -5670,6 +5809,6 @@ function FileIcon2(props) {
   );
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Attachment, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Citation, Cluster, CodeBlock, CodeBlockCopy2 as CodeBlockCopy, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, Empty, ErrorState, FileTree, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Loading, LoadingIndicator, Markdown, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, Message, MessageActions, MessageList, MultiCombobox, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, Stack, Stepper, Suggestion, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, alertVariants, attachmentVariants, badgeVariants, buttonVariants, clusterVariants, cn, containerVariants, emptyVariants, errorStateVariants, formatHslTriplet, gridVariants, hexToHslTriplet, hslToRgb, hslTripletToHex, loadingIndicatorVariants, loadingVariants, messageVariants, navigationMenuTriggerStyle, parseHslTriplet, rgbToHsl, spacerVariants, stackVariants, tagVariants, toggleVariants, toolbarVariants, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Attachment, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Citation, Cluster, CodeBlock, CodeBlockCopy2 as CodeBlockCopy, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, Empty, ErrorState, FileTree, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Loading, LoadingIndicator, Markdown, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, Message, MessageActions, MessageList, MultiCombobox, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, SpeechRecognition, Stack, Stepper, Suggestion, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, alertVariants, attachmentVariants, badgeVariants, buttonVariants, clusterVariants, cn, containerVariants, emptyVariants, errorStateVariants, formatHslTriplet, gridVariants, hexToHslTriplet, hslToRgb, hslTripletToHex, loadingIndicatorVariants, loadingVariants, messageVariants, navigationMenuTriggerStyle, parseHslTriplet, rgbToHsl, spacerVariants, stackVariants, tagVariants, toggleVariants, toolbarVariants, useFormField, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map