@vllnt/ui 0.2.0 → 0.2.1-canary.9c473e0

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,178 @@
+"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.map(normalizeTag).filter(
+    (tag, index, values) => tag.length > 0 && values.indexOf(tag) === index
+  );
+}
+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: "h-3.5 w-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
+};

package/dist/components/top-bar/index.js

@@ -0,0 +1,4 @@
+import { TopBar } from "./top-bar";
+export {
+  TopBar
+};

package/dist/components/top-bar/top-bar.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const TopBar = forwardRef(
+  ({ children, className, leading, subtitle, title, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
+          title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: subtitle }) : null
+          ] }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+TopBar.displayName = "TopBar";
+export {
+  TopBar
+};

package/dist/components/usage-breakdown/usage-breakdown.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";

package/dist/components/workspace-switcher/index.js

@@ -0,0 +1,6 @@
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
+export {
+  WorkspaceSwitcher
+};

package/dist/components/workspace-switcher/workspace-switcher.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+const WorkspaceSwitcher = forwardRef(
+  ({ className, defaultValue, onValueChange, value, workspaces, ...props }, ref) => {
+    const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
+    const [internalValue, setInternalValue] = useState(fallbackValue);
+    const currentValue = value ?? internalValue;
+    const currentWorkspace = useMemo(
+      () => workspaces.find((workspace) => workspace.id === currentValue),
+      [currentValue, workspaces]
+    );
+    function handleSelect(nextValue) {
+      if (value === void 0) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
+          className
+        ),
+        ref,
+        role: "radiogroup",
+        ...props,
+        children: [
+          workspaces.map((workspace) => {
+            const isActive = workspace.id === currentValue;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-checked": isActive,
+                className: cn(
+                  "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+                  isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                onClick: () => {
+                  handleSelect(workspace.id);
+                },
+                role: "radio",
+                title: workspace.description,
+                type: "button",
+                children: workspace.label
+              },
+              workspace.id
+            );
+          }),
+          currentWorkspace?.description ? /* @__PURE__ */ jsx("span", { className: "hidden pl-2 pr-1 text-xs text-muted-foreground md:inline", children: currentWorkspace.description }) : null
+        ]
+      }
+    );
+  }
+);
+WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
+export {
+  WorkspaceSwitcher
+};

package/dist/components/zoom-hud/index.js

@@ -0,0 +1,4 @@
+import { ZoomHUD } from "./zoom-hud";
+export {
+  ZoomHUD
+};

package/dist/components/zoom-hud/zoom-hud.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Minus, Plus, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+const ZoomHUD = forwardRef(
+  ({ className, onReset, onZoomIn, onZoomOut, zoom, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Zoom out",
+            onClick: onZoomOut,
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Zoom in",
+            onClick: onZoomIn,
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Reset zoom",
+            onClick: onReset,
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  )
+);
+ZoomHUD.displayName = "ZoomHUD";
+export {
+  ZoomHUD
+};