@vvedantb/ui 0.0.0-stage → 0.1.0

package/src/ai-elements/speech-input.tsx

@@ -0,0 +1,290 @@
+"use client";
+import type { ComponentProps } from "react";
+import { IconMicrophone, IconSquare } from "@tabler/icons-react";
+import { Button } from "../ui/button";
+import { Spinner } from "../ui/spinner";
+import { cn } from "../utils/cn";
+import { useEffect, useRef, useState } from "react";
+interface SpeechRecognition extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  start(): void;
+  stop(): void;
+  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onend: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onresult:
+    | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void)
+    | null;
+  onerror:
+    | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void)
+    | null;
+}
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+interface SpeechRecognitionResultList {
+  readonly length: number;
+  item(index: number): SpeechRecognitionResult;
+  [index: number]: SpeechRecognitionResult;
+}
+interface SpeechRecognitionResult {
+  readonly length: number;
+  item(index: number): SpeechRecognitionAlternative;
+  [index: number]: SpeechRecognitionAlternative;
+  isFinal: boolean;
+}
+interface SpeechRecognitionAlternative {
+  transcript: string;
+  confidence: number;
+}
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string;
+}
+declare global {
+  interface Window {
+    SpeechRecognition: new () => SpeechRecognition;
+    webkitSpeechRecognition: new () => SpeechRecognition;
+  }
+}
+type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
+export type SpeechInputProps = ComponentProps<typeof Button> & {
+  onTranscriptionChange?: (text: string) => void;
+  onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
+  lang?: string;
+};
+const detectSpeechInputMode = (): SpeechInputMode => {
+  if (typeof window === "undefined") {
+    return "none";
+  }
+  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+    return "speech-recognition";
+  }
+  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
+    return "media-recorder";
+  }
+  return "none";
+};
+export const SpeechInput = ({
+  className,
+  onTranscriptionChange,
+  onAudioRecorded,
+  lang = "en-US",
+  ...props
+}: SpeechInputProps) => {
+  const [isListening, setIsListening] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [mode] = useState<SpeechInputMode>(detectSpeechInputMode);
+  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
+  const recognitionRef = useRef<SpeechRecognition | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const onTranscriptionChangeRef = useRef<
+    SpeechInputProps["onTranscriptionChange"]
+  >(onTranscriptionChange);
+  const onAudioRecordedRef =
+    useRef<SpeechInputProps["onAudioRecorded"]>(onAudioRecorded);
+  onTranscriptionChangeRef.current = onTranscriptionChange;
+  onAudioRecordedRef.current = onAudioRecorded;
+  useEffect(() => {
+    if (mode !== "speech-recognition") {
+      return;
+    }
+    const SpeechRecognitionCtor =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
+    const speechRecognition = new SpeechRecognitionCtor();
+    speechRecognition.continuous = true;
+    speechRecognition.interimResults = true;
+    speechRecognition.lang = lang;
+    const handleStart = () => {
+      setIsListening(true);
+    };
+    const handleEnd = () => {
+      setIsListening(false);
+    };
+    const handleResult = (event: Event) => {
+      const speechEvent = event as SpeechRecognitionEvent;
+      let finalTranscript = "";
+      for (
+        let i = speechEvent.resultIndex;
+        i < speechEvent.results.length;
+        i += 1
+      ) {
+        const result = speechEvent.results[i];
+        if (result?.isFinal) {
+          finalTranscript += result[0]?.transcript ?? "";
+        }
+      }
+      if (finalTranscript) {
+        onTranscriptionChangeRef.current?.(finalTranscript);
+      }
+    };
+    const handleError = () => {
+      setIsListening(false);
+    };
+    speechRecognition.addEventListener("start", handleStart);
+    speechRecognition.addEventListener("end", handleEnd);
+    speechRecognition.addEventListener("result", handleResult);
+    speechRecognition.addEventListener("error", handleError);
+    recognitionRef.current = speechRecognition;
+    setIsRecognitionReady(true);
+    return () => {
+      speechRecognition.removeEventListener("start", handleStart);
+      speechRecognition.removeEventListener("end", handleEnd);
+      speechRecognition.removeEventListener("result", handleResult);
+      speechRecognition.removeEventListener("error", handleError);
+      speechRecognition.stop();
+      recognitionRef.current = null;
+      setIsRecognitionReady(false);
+    };
+  }, [mode, lang]);
+  useEffect(
+    () => () => {
+      if (mediaRecorderRef.current?.state === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+    },
+    [],
+  );
+  const startMediaRecorder = async () => {
+    if (!onAudioRecordedRef.current) {
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mediaRecorder = new MediaRecorder(stream);
+      audioChunksRef.current = [];
+      const handleDataAvailable = (event: BlobEvent) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      const handleStop = async () => {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+        const audioBlob = new Blob(audioChunksRef.current, {
+          type: "audio/webm",
+        });
+        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
+          setIsProcessing(true);
+          try {
+            const transcript = await onAudioRecordedRef.current(audioBlob);
+            if (transcript) {
+              onTranscriptionChangeRef.current?.(transcript);
+            }
+          } catch {
+          } finally {
+            setIsProcessing(false);
+          }
+        }
+      };
+      const handleError = () => {
+        setIsListening(false);
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+      };
+      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
+      mediaRecorder.addEventListener("stop", handleStop);
+      mediaRecorder.addEventListener("error", handleError);
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.start();
+      setIsListening(true);
+    } catch {
+      setIsListening(false);
+    }
+  };
+  const stopMediaRecorder = () => {
+    if (mediaRecorderRef.current?.state === "recording") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsListening(false);
+  };
+  const toggleListening = () => {
+    if (mode === "speech-recognition" && recognitionRef.current) {
+      if (isListening) {
+        recognitionRef.current.stop();
+      } else {
+        recognitionRef.current.start();
+      }
+    } else if (mode === "media-recorder") {
+      if (isListening) {
+        stopMediaRecorder();
+      } else {
+        startMediaRecorder();
+      }
+    }
+  };
+  const isDisabled =
+    mode === "none" ||
+    (mode === "speech-recognition" && !isRecognitionReady) ||
+    (mode === "media-recorder" && !onAudioRecorded) ||
+    isProcessing;
+  return (
+    <div className="relative inline-flex items-center justify-center">
+      {isListening
+        ? [0, 1, 2].map((index) => (
+            <div
+              className="absolute inset-0 animate-ping rounded-full border-2 border-danger/30"
+              key={index}
+              style={{
+                animationDelay: `${index * 0.3}s`,
+                animationDuration: "2s",
+              }}
+            />
+          ))
+        : null}
+
+      <Button
+        className={cn(
+          "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
+          isListening
+            ? "bg-destructive text-danger-foreground hover:bg-destructive/80 hover:text-danger-foreground"
+            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+          className,
+        )}
+        disabled={isDisabled}
+        onClick={toggleListening}
+        {...props}
+      >
+        <span className="relative inline-flex size-4 items-center justify-center">
+          <span
+            className={cn(
+              "absolute inset-0 flex items-center justify-center transition-opacity duration-150 ease-out",
+              isProcessing ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <Spinner />
+          </span>
+          <span
+            className={cn(
+              "absolute inset-0 flex items-center justify-center transition-opacity duration-150 ease-out",
+              !isProcessing && isListening ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <IconSquare className="size-4" />
+          </span>
+          <span
+            className={cn(
+              "flex items-center justify-center transition-opacity duration-150 ease-out",
+              isProcessing || isListening ? "opacity-0" : "opacity-100",
+            )}
+          >
+            <IconMicrophone className="size-4" />
+          </span>
+        </span>
+      </Button>
+    </div>
+  );
+};

package/src/ai-elements/suggestion.tsx

@@ -0,0 +1,191 @@
+"use client";
+import type { ComponentProps, ReactNode } from "react";
+import { useRef, useState, useEffect } from "react";
+import { Button } from "../ui/button";
+import { cn } from "../utils/cn";
+import { flatInteractiveClass } from "../ui/surface-classes";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { AnimatePresence, motion } from "motion/react";
+import { fastTransition } from "../motion/presets.vibot";
+export type SuggestionsProps = {
+  className?: string;
+  children?: ReactNode;
+  orientation?: "horizontal" | "vertical";
+};
+function HorizontalSuggestions({
+  className,
+  children,
+}: Pick<SuggestionsProps, "className" | "children">) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const isDragging = useRef(false);
+  const dragStartX = useRef(0);
+  const dragScrollLeft = useRef(0);
+  const checkScrollability = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+  };
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    checkScrollability();
+    el.addEventListener("scroll", checkScrollability, { passive: true });
+    const ro = new ResizeObserver(checkScrollability);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", checkScrollability);
+      ro.disconnect();
+    };
+  }, [checkScrollability]);
+  const scrollBy = (amount: number) => {
+    scrollRef.current?.scrollBy({ left: amount, behavior: "smooth" });
+  };
+  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isDragging.current = true;
+    dragStartX.current = e.pageX - el.offsetLeft;
+    dragScrollLeft.current = el.scrollLeft;
+    el.style.cursor = "grabbing";
+  };
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!isDragging.current) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    e.preventDefault();
+    const x = e.pageX - el.offsetLeft;
+    el.scrollLeft = dragScrollLeft.current - (x - dragStartX.current);
+  };
+  const handleMouseUp = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    isDragging.current = false;
+    el.style.cursor = "grab";
+  };
+  return (
+    <div className={cn("flex w-full items-center gap-1", className)}>
+      <AnimatePresence initial={false}>
+        {canScrollLeft ? (
+          <motion.div
+            key="scroll-left"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={fastTransition}
+          >
+            <Button
+              size="icon"
+              variant="ghost"
+              type="button"
+              onClick={() => scrollBy(-200)}
+              className={cn(
+                flatInteractiveClass,
+                "h-7 w-7 shrink-0 rounded-full",
+              )}
+            >
+              <IconChevronLeft size={14} />
+            </Button>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-x-auto select-none cursor-grab [&::-webkit-scrollbar]:hidden"
+        style={{ scrollbarWidth: "none" }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        <div className="flex w-max flex-nowrap items-center gap-2 px-1">
+          {children}
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {canScrollRight ? (
+          <motion.div
+            key="scroll-right"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={fastTransition}
+          >
+            <Button
+              size="icon"
+              variant="ghost"
+              type="button"
+              onClick={() => scrollBy(200)}
+              className={cn(
+                flatInteractiveClass,
+                "h-7 w-7 shrink-0 rounded-full",
+              )}
+            >
+              <IconChevronRight size={14} />
+            </Button>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}
+export const Suggestions = ({
+  className,
+  children,
+  orientation = "horizontal",
+}: SuggestionsProps) => {
+  if (orientation === "vertical") {
+    return (
+      <div
+        className={cn(
+          "flex w-full flex-col items-stretch gap-2",
+          "[&_button]:h-auto [&_button]:w-full [&_button]:justify-start [&_button]:rounded-lg [&_button]:whitespace-normal [&_button]:text-left [&_button]:py-2",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+  return (
+    <HorizontalSuggestions className={className}>
+      {children}
+    </HorizontalSuggestions>
+  );
+};
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+};
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = () => {
+    onClick?.(suggestion);
+  };
+  return (
+    <Button
+      className={cn(
+        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted hover:bg-surface-tertiary hover:text-foreground",
+        className,
+      )}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  );
+};

package/src/css.d.ts

@@ -0,0 +1,2 @@
+// Ambient declarations for CSS side-effect imports (e.g. `import "./sonner.css"`).
+declare module "*.css";

package/src/index.ts

@@ -0,0 +1,96 @@
+// Colour, radius, shadow and font tokens live in @vvedantb/tokens. Import that
+// stylesheet in the app. This package does not ship a second token set.
+export { cn } from "./utils/cn";
+export { floatingSurfaceClass } from "./ui/_menu-classes";
+export * from "./ui/surface-classes";
+export * from "./motion/presets";
+
+export * from "./ui/badge";
+export * from "./ui/breadcrumb";
+export * from "./ui/button";
+export * from "./ui/button-group";
+export * from "./ui/card";
+export * from "./ui/carousel";
+export * from "./ui/checkbox";
+export * from "./ui/collapsible";
+export * from "./ui/command";
+export * from "./ui/context-menu";
+export * from "./ui/dialog";
+export * from "./ui/dropdown-menu";
+export * from "./ui/hover-card";
+export * from "./ui/input";
+export * from "./ui/label";
+export * from "./ui/labeled-switch-row";
+export * from "./ui/pagination";
+export * from "./ui/popover";
+export * from "./ui/progress";
+export {
+  Select as RadixSelect,
+  SelectContent as RadixSelectContent,
+  SelectGroup as RadixSelectGroup,
+  SelectItem as RadixSelectItem,
+  SelectLabel as RadixSelectLabel,
+  SelectScrollDownButton as RadixSelectScrollDownButton,
+  SelectScrollUpButton as RadixSelectScrollUpButton,
+  SelectSeparator as RadixSelectSeparator,
+  SelectTrigger as RadixSelectTrigger,
+  SelectValue as RadixSelectValue,
+} from "./ui/radix-select";
+export * from "./ui/search-input";
+export * from "./ui/select";
+export * from "./ui/separator";
+export * from "./ui/skeleton";
+export * from "./ui/sonner";
+export * from "./ui/spinner";
+export * from "./ui/switch";
+export * from "./ui/table";
+export * from "./ui/tabs";
+export * from "./ui/textarea";
+export * from "./ui/time-picker";
+export * from "./ui/tooltip";
+export * from "./ui/kbd";
+export * from "./ui/sheet";
+export * from "./ui/visually-hidden";
+export * from "./ui/clearInputDissolve";
+
+// Dual copies: richer file uses the plain name; the other keeps a suffix.
+export * from "./ui/accordion";
+export {
+  Accordion as AccordionVerve,
+  AccordionItem as AccordionItemVerve,
+  AccordionTrigger as AccordionTriggerVerve,
+  AccordionContent as AccordionContentVerve,
+} from "./ui/accordion.verve";
+export * from "./ui/clear-input";
+export { ClearInput as ClearInputVibot } from "./ui/clear-input.vibot";
+export * from "./ui/input-group";
+export {
+  InputGroup as InputGroupVerve,
+  InputGroupAddon as InputGroupAddonVerve,
+  InputGroupButton as InputGroupButtonVerve,
+  InputGroupText as InputGroupTextVerve,
+  InputGroupInput as InputGroupInputVerve,
+  InputGroupTextarea as InputGroupTextareaVerve,
+} from "./ui/input-group.verve";
+export * from "./ui/scroll-area";
+export {
+  ScrollArea as ScrollAreaVerve,
+  ScrollBar as ScrollBarVerve,
+} from "./ui/scroll-area.verve";
+
+export * from "./ai-elements/artifact";
+export * from "./ai-elements/attachments";
+export * from "./ai-elements/chain-of-thought";
+export * from "./ai-elements/code-block";
+export * from "./ai-elements/conversation";
+export * from "./ai-elements/image";
+export * from "./ai-elements/inline-citation";
+export * from "./ai-elements/message";
+export * from "./ai-elements/model-selector";
+export * from "./ai-elements/prompt-input";
+export * from "./ai-elements/queue";
+export * from "./ai-elements/reasoning";
+export * from "./ai-elements/shimmer";
+export * from "./ai-elements/sources";
+export * from "./ai-elements/speech-input";
+export * from "./ai-elements/suggestion";

package/src/motion/presets.ts

@@ -0,0 +1,35 @@
+import type { Transition, Variants } from "motion/react";
+
+export const motionEase: [number, number, number, number] = [0.22, 1, 0.36, 1];
+
+export const motionDuration = {
+  fast: 0.22,
+  base: 0.3,
+  slow: 0.36,
+} as const;
+
+export const motionTiming = {
+  route: 0.3,
+  sidebar: 0.28,
+  stagger: 0.03,
+} as const;
+
+export const motionDistance = {
+  routeX: 12,
+  pageY: 8,
+} as const;
+
+export const defaultTransition: Transition = {
+  duration: motionDuration.base,
+  ease: motionEase,
+};
+
+export const fadeUp: Variants = {
+  hidden: { opacity: 0, y: motionDistance.pageY },
+  show: { opacity: 1, y: 0, transition: defaultTransition },
+  exit: {
+    opacity: 0,
+    y: 6,
+    transition: { duration: motionDuration.fast, ease: motionEase },
+  },
+};