@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/table/table.js

@@ -1,27 +1,42 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const Table = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+const Table = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     className: cn("w-full caption-bottom text-sm", className),
     ref,
     ...props
   }
-) }));
+) });
 Table.displayName = "Table";
-const TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b", className), ref, ...props }));
+const TableHeader = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b", className), ref, ...props });
 TableHeader.displayName = "TableHeader";
-const TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableBody = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "tbody",
   {
     className: cn("[&_tr:last-child]:border-0", className),
     ref,
     ...props
   }
-));
+);
 TableBody.displayName = "TableBody";
-const TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableFooter = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     className: cn(
@@ -31,9 +46,13 @@ const TableFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ref,
     ...props
   }
-));
+);
 TableFooter.displayName = "TableFooter";
-const TableRow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableRow = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "tr",
   {
     className: cn(
@@ -43,9 +62,13 @@ const TableRow = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ js
     ref,
     ...props
   }
-));
+);
 TableRow.displayName = "TableRow";
-const TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableHead = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "th",
   {
     className: cn(
@@ -55,25 +78,33 @@ const TableHead = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
     ref,
     ...props
   }
-));
+);
 TableHead.displayName = "TableHead";
-const TableCell = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableCell = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "td",
   {
     className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
     ref,
     ...props
   }
-));
+);
 TableCell.displayName = "TableCell";
-const TableCaption = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const TableCaption = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   "caption",
   {
     className: cn("mt-4 text-sm text-muted-foreground", className),
     ref,
     ...props
   }
-));
+);
 TableCaption.displayName = "TableCaption";
 export {
   Table,

package/dist/components/table-of-contents-panel/table-of-contents-panel.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
+import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
+import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 function TableOfContentsPanelImpl({
   as: Heading = "h2",
@@ -22,25 +24,12 @@ function TableOfContentsPanelImpl({
   const panelRef = useRef(null);
   const closeButtonRef = useRef(null);
   useEffect(() => {
-    if (!isOpen) return;
-    closeButtonRef.current?.focus();
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
-  useEffect(() => {
-    document.body.style.overflow = isOpen ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
+    if (isOpen) {
+      closeButtonRef.current?.focus();
+    }
   }, [isOpen]);
+  useEscapeKey(onClose, { enabled: isOpen, preventDefault: true });
+  useBodyScrollLock(isOpen);
   if (!isOpen) return null;
   const completionPercent = totalSections > 0 ? Math.round(completionCount / totalSections * 100) : 0;
   return /* @__PURE__ */ jsxs(

package/dist/components/tabs/tabs.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState } from "react";
+import { createContext, use, useMemo, useState } from "react";
 import { cn } from "../../lib/utils";
 const TabsContext = createContext(null);
 function useTabsContext() {
-  const context = useContext(TabsContext);
+  const context = use(TabsContext);
   if (!context) {
     throw new Error("Tab components must be used within a Tabs component");
   }

package/dist/components/tag-group/index.js

@@ -0,0 +1,8 @@
+import {
+  TagGroup,
+  TagGroupItem
+} from "./tag-group";
+export {
+  TagGroup,
+  TagGroupItem
+};

package/dist/components/tag-group/tag-group.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+const TagGroupContext = React.createContext(null);
+function useTagGroupContext() {
+  const context = React.use(TagGroupContext);
+  if (!context) {
+    throw new Error("TagGroupItem must be used within a TagGroup");
+  }
+  return context;
+}
+function nextSelection(current, item, selectionMode) {
+  if (selectionMode === "single") {
+    return current.includes(item) ? [] : [item];
+  }
+  return current.includes(item) ? current.filter((entry) => entry !== item) : [...current, item];
+}
+function useTagSelection({
+  defaultValue,
+  onValueChange,
+  selectionMode,
+  value
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const selectedValues = value ?? internalValue;
+  const select = (item) => {
+    if (selectionMode === "none") {
+      return;
+    }
+    const next = nextSelection(selectedValues, item, selectionMode);
+    if (value === void 0) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  };
+  return { select, selectedValues };
+}
+const TagGroup = ({
+  children,
+  className,
+  defaultValue = [],
+  disabled = false,
+  label,
+  onValueChange,
+  ref,
+  selectionMode = "none",
+  value
+}) => {
+  const { select, selectedValues } = useTagSelection({
+    defaultValue,
+    onValueChange,
+    selectionMode,
+    value
+  });
+  const context = React.useMemo(
+    () => ({ disabled, select, selectedValues, selectionMode }),
+    [disabled, select, selectedValues, selectionMode]
+  );
+  return /* @__PURE__ */ jsx(TagGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ref,
+      role: "group",
+      children
+    }
+  ) });
+};
+TagGroup.displayName = "TagGroup";
+const TagGroupItem = ({
+  children,
+  className,
+  onRemove,
+  ref,
+  value
+}) => {
+  const { disabled, select, selectedValues, selectionMode } = useTagGroupContext();
+  const selectable = selectionMode !== "none";
+  const selected = selectedValues.includes(value);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-sm transition-colors",
+        selected ? "border-transparent bg-primary text-primary-foreground" : "border-border bg-muted text-foreground",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      "data-selected": selected || void 0,
+      ref,
+      children: [
+        selectable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-pressed": selected,
+            className: "outline-none focus-visible:underline",
+            disabled,
+            onClick: () => {
+              select(value);
+            },
+            type: "button",
+            children
+          }
+        ) : /* @__PURE__ */ jsx("span", { children }),
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Remove tag",
+            className: "rounded-sm opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+            disabled,
+            onClick: onRemove,
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+TagGroupItem.displayName = "TagGroupItem";
+export {
+  TagGroup,
+  TagGroupItem
+};

package/dist/components/tags-input/tags-input.js

@@ -119,67 +119,66 @@ function TagList({ disabled, onRemove, tags }) {
     tag
   )) });
 }
-const TagsInput = React.forwardRef(
-  ({
-    className,
-    defaultValue = [],
-    disabled = false,
-    onBlur,
-    onKeyDown,
+const TagsInput = ({
+  className,
+  defaultValue = [],
+  disabled = false,
+  onBlur,
+  onKeyDown,
+  onValueChange,
+  placeholder = "Add a tag",
+  ref,
+  value,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = React.useState("");
+  const { tags, updateTags } = useTagsInputState({
+    defaultValue,
     onValueChange,
-    placeholder = "Add a tag",
-    value,
-    ...props
-  }, ref) => {
-    const [inputValue, setInputValue] = React.useState("");
-    const { tags, updateTags } = useTagsInputState({
-      defaultValue,
-      onValueChange,
-      value
-    });
-    const { handleKeyDown, removeTag } = useTagsInputHandlers({
-      disabled,
-      inputValue,
-      onKeyDown,
-      setInputValue,
-      tags,
-      updateTags
-    });
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-disabled": disabled || void 0,
-        className: cn(
-          "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          disabled && "cursor-not-allowed opacity-50",
-          className
-        ),
-        "data-disabled": disabled ? "true" : void 0,
-        role: "group",
-        children: [
-          /* @__PURE__ */ jsx(TagList, { disabled, onRemove: removeTag, tags }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ...props,
-              className: "min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
-              disabled,
-              onBlur,
-              onChange: (event) => {
-                setInputValue(event.target.value);
-              },
-              onKeyDown: handleKeyDown,
-              placeholder,
-              ref,
-              type: "text",
-              value: inputValue
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+    value
+  });
+  const { handleKeyDown, removeTag } = useTagsInputHandlers({
+    disabled,
+    inputValue,
+    onKeyDown,
+    setInputValue,
+    tags,
+    updateTags
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      "data-disabled": disabled ? "true" : void 0,
+      role: "group",
+      children: [
+        /* @__PURE__ */ jsx(TagList, { disabled, onRemove: removeTag, tags }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            className: "min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+            disabled,
+            onBlur,
+            onChange: (event) => {
+              setInputValue(event.target.value);
+            },
+            onKeyDown: handleKeyDown,
+            placeholder,
+            ref,
+            type: "text",
+            value: inputValue
+          }
+        )
+      ]
+    }
+  );
+};
 TagsInput.displayName = "TagsInput";
 export {
   TagsInput

package/dist/components/terminal/terminal.js

@@ -1,8 +1,8 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Check, Copy, Terminal as TerminalIcon } from "lucide-react";
 import { Button } from "../button/button";
+import { useCopyToClipboard } from "../copy-button/copy-button";
 function getCommandContents(lines) {
   return lines.reduce((commands, line) => {
     if (line.type === "command") {
@@ -16,14 +16,10 @@ function Terminal({
   lines,
   title = "Terminal"
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
   const commands = getCommandContents(lines);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(commands.join("\n"));
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+  const handleCopy = () => {
+    void copy(commands.join("\n"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
@@ -74,7 +70,7 @@ function SimpleTerminal({
   children,
   title = "Terminal"
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
   const lines = children.trim().split("\n").map((line) => {
     if (line.startsWith("$ ")) {
       return { content: line.slice(2), type: "command" };
@@ -85,12 +81,8 @@ function SimpleTerminal({
     return { content: line, type: "output" };
   });
   const commands = getCommandContents(lines);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(commands.join("\n"));
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+  const handleCopy = () => {
+    void copy(commands.join("\n"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [

package/dist/components/text-animate/index.js

@@ -0,0 +1,6 @@
+import {
+  TextAnimate
+} from "./text-animate";
+export {
+  TextAnimate
+};

package/dist/components/text-animate/text-animate.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function splitText(text, by) {
+  if (by === "character") {
+    return text.match(/[\s\S]/gu) ?? [];
+  }
+  return text.split(/(\s+)/).filter((segment) => segment.length > 0);
+}
+function useInView(enabled) {
+  const nodeRef = React.useRef(null);
+  const [inView, setInView] = React.useState(!enabled);
+  React.useEffect(() => {
+    const node = nodeRef.current;
+    if (!enabled || !node || typeof IntersectionObserver !== "function") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setInView(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [enabled]);
+  return [nodeRef, inView];
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+const animationClasses = {
+  blur: "[filter:blur(6px)] opacity-0",
+  fade: "animate-in fade-in-0",
+  "slide-up": "animate-in fade-in-0 slide-in-from-bottom-2"
+};
+function Segment({
+  animation,
+  delay,
+  index,
+  inView,
+  value
+}) {
+  const blur = animation === "blur";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block whitespace-pre",
+        blur ? cn(
+          "transition-[filter,opacity] duration-500",
+          inView ? "opacity-100 [filter:blur(0)]" : animationClasses.blur
+        ) : inView && cn("fill-mode-both", animationClasses[animation])
+      ),
+      style: { animationDelay: `${index * delay}ms` },
+      children: value
+    }
+  );
+}
+const TextAnimate = ({
+  animation = "fade",
+  by = "word",
+  children,
+  className,
+  delay = 60,
+  ref,
+  startOnView = true,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const [nodeRef, inView] = useInView(startOnView);
+  const segments = splitText(children, by);
+  const visible = reduced || inView;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      ref: (node) => {
+        nodeRef.current = node;
+        assignRef(ref, node);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: segments.map((value, index) => /* @__PURE__ */ jsx(
+          Segment,
+          {
+            animation: reduced ? "fade" : animation,
+            delay: reduced ? 0 : delay,
+            index,
+            inView: visible,
+            value
+          },
+          `${value}-${index}`
+        )) }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children })
+      ]
+    }
+  );
+};
+TextAnimate.displayName = "TextAnimate";
+export {
+  TextAnimate
+};

package/dist/components/text-field/index.js

@@ -0,0 +1,4 @@
+import { TextField } from "./text-field";
+export {
+  TextField
+};