@vvedantb/ui 0.1.1 → 0.1.2

package/src/ai-elements/suggestion.tsx

@@ -1,191 +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>
-  );
-};
+"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

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

package/src/index.ts

@@ -1,96 +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";
+// 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

@@ -1,35 +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 },
-  },
-};
+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 },
+  },
+};