@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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

@@ -1,8 +1,11 @@
 "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",
   className,
   closeIcon,
   completedSections,
@@ -21,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(
@@ -55,6 +45,7 @@ function TableOfContentsPanelImpl({
           {
             "aria-hidden": "true",
             className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            "data-testid": "toc-backdrop",
             onClick: onClose
           }
         ),
@@ -68,19 +59,19 @@ function TableOfContentsPanelImpl({
             ref: panelRef,
             children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "toc-title", children: title }),
+                /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "toc-title", children: title }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     "aria-label": "Close table of contents",
-                    className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted",
+                    className: "flex size-8 items-center justify-center rounded-md hover:bg-muted",
                     onClick: onClose,
                     ref: closeButtonRef,
                     type: "button",
                     children: closeIcon ?? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-5 w-5",
+                        className: "size-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -143,13 +134,13 @@ function TableOfContentsPanelImpl({
                             "span",
                             {
                               className: cn(
-                                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border",
+                                "flex size-5 shrink-0 items-center justify-center rounded-full border",
                                 isCompleted ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground"
                               ),
                               children: isCompleted ? /* @__PURE__ */ jsx(
                                 "svg",
                                 {
-                                  className: "h-3 w-3",
+                                  className: "size-3",
                                   fill: "none",
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
@@ -175,7 +166,7 @@ function TableOfContentsPanelImpl({
                           )
                         ]
                       }
-                    ) }, `${section.id}-${index}`);
+                    ) }, section.id);
                   }) })
                 }
               ),

package/dist/components/tabs/tabs.js

@@ -13,18 +13,23 @@ function useTabsContext() {
 function Tabs({
   children,
   className,
-  defaultValue,
-  onValueChange
+  defaultValue = "",
+  onValueChange,
+  value
 }) {
-  const [activeTab, setActiveTab] = useState(defaultValue);
-  const handleSetActiveTab = (value) => {
-    setActiveTab(value);
-    onValueChange?.(value);
+  const [internalTab, setInternalTab] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const activeTab = isControlled ? value : internalTab;
+  const handleSetActiveTab = (next) => {
+    if (!isControlled) {
+      setInternalTab(next);
+    }
+    onValueChange?.(next);
   };
   const contextValue = useMemo(
     () => ({ activeTab, setActiveTab: handleSetActiveTab }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [activeTab]
+    [activeTab, isControlled]
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("my-6", className), children }) });
 }
@@ -39,8 +44,10 @@ function TabsList({ children, className }) {
   );
 }
 function TabsTrigger({
+  "aria-hidden": ariaHidden,
   children,
   className,
+  tabIndex,
   value
 }) {
   const { activeTab, setActiveTab } = useTabsContext();
@@ -48,6 +55,7 @@ function TabsTrigger({
   return /* @__PURE__ */ jsx(
     "button",
     {
+      "aria-hidden": ariaHidden,
       "aria-selected": isActive,
       className: cn(
         "px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors",
@@ -59,19 +67,29 @@ function TabsTrigger({
         setActiveTab(value);
       },
       role: "tab",
+      tabIndex,
       type: "button",
       children
     }
   );
 }
 function TabsContent({
+  "aria-hidden": ariaHidden,
   children,
   className,
   value
 }) {
   const { activeTab } = useTabsContext();
   if (activeTab !== value) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("pt-4", className), role: "tabpanel", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": ariaHidden,
+      className: cn("pt-4", className),
+      role: "tabpanel",
+      children
+    }
+  );
 }
 Tabs.List = TabsList;
 Tabs.Trigger = TabsTrigger;

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,124 @@
+"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.useContext(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 = React.forwardRef(
+  ({
+    children,
+    className,
+    defaultValue = [],
+    disabled = false,
+    label,
+    onValueChange,
+    selectionMode = "none",
+    value
+  }, ref) => {
+    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 = React.forwardRef(
+  ({ children, className, onRemove, value }, ref) => {
+    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/index.js

@@ -0,0 +1,4 @@
+import { TagsInput } from "./tags-input";
+export {
+  TagsInput
+};

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

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+function normalizeTag(tag) {
+  return tag.trim();
+}
+function getNormalizedTags(tags) {
+  return tags.reduce(
+    (state, tag) => {
+      const normalizedTag = normalizeTag(tag);
+      if (normalizedTag.length > 0 && !state.seen.has(normalizedTag)) {
+        state.seen.add(normalizedTag);
+        state.tags.push(normalizedTag);
+      }
+      return state;
+    },
+    { seen: /* @__PURE__ */ new Set(), tags: [] }
+  ).tags;
+}
+function shouldAddTagFromKey(key) {
+  return key === "Enter" || key === ",";
+}
+function useTagsInputState({
+  defaultValue,
+  onValueChange,
+  value
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => getNormalizedTags(defaultValue)
+  );
+  const isControlled = value !== void 0;
+  const tags = React.useMemo(
+    () => getNormalizedTags(value ?? uncontrolledValue),
+    [uncontrolledValue, value]
+  );
+  const updateTags = React.useCallback(
+    (nextTags) => {
+      const normalizedTags = getNormalizedTags(nextTags);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedTags);
+      }
+      onValueChange?.(normalizedTags);
+    },
+    [isControlled, onValueChange]
+  );
+  return { tags, updateTags };
+}
+function useTagsInputHandlers({
+  disabled,
+  inputValue,
+  onKeyDown,
+  setInputValue,
+  tags,
+  updateTags
+}) {
+  const removeTag = React.useCallback(
+    (tagToRemove) => {
+      updateTags(tags.filter((tag) => tag !== tagToRemove));
+    },
+    [tags, updateTags]
+  );
+  const commitTag = React.useCallback(() => {
+    const nextTag = normalizeTag(inputValue);
+    if (nextTag.length === 0 || tags.includes(nextTag)) {
+      setInputValue("");
+      return;
+    }
+    updateTags([...tags, nextTag]);
+    setInputValue("");
+  }, [inputValue, setInputValue, tags, updateTags]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      if (shouldAddTagFromKey(event.key)) {
+        event.preventDefault();
+        commitTag();
+        return;
+      }
+      if ((event.key === "Backspace" || event.key === "Delete") && inputValue.length === 0) {
+        const lastTag = tags.at(-1);
+        if (lastTag) {
+          event.preventDefault();
+          removeTag(lastTag);
+        }
+      }
+    },
+    [commitTag, disabled, inputValue.length, onKeyDown, removeTag, tags]
+  );
+  return { handleKeyDown, removeTag };
+}
+function TagList({ disabled, onRemove, tags }) {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-sm text-foreground",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: tag }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Remove ${tag}`,
+            className: "rounded-sm text-muted-foreground outline-none ring-offset-background transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            disabled,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(tag);
+            },
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        )
+      ]
+    },
+    tag
+  )) });
+}
+const TagsInput = React.forwardRef(
+  ({
+    className,
+    defaultValue = [],
+    disabled = false,
+    onBlur,
+    onKeyDown,
+    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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TagsInput.displayName = "TagsInput";
+export {
+  TagsInput
+};