@vllnt/ui 0.1.11 → 0.2.0

package/dist/components/scope-selector/scope-selector.js

@@ -0,0 +1,336 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { Check, ChevronRight, Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { ScrollArea } from "../scroll-area";
+import { Separator } from "../separator";
+function flattenNodes(nodes, parentPath = []) {
+  return nodes.flatMap((node) => {
+    const path = [...parentPath, node];
+    const current = [{ node, path }];
+    const descendants = node.children ? flattenNodes(node.children, path) : [];
+    return [...current, ...descendants];
+  });
+}
+function findSelection(nodes, value) {
+  if (!value) return void 0;
+  const flattened = flattenNodes(nodes);
+  const match = flattened.find((entry) => entry.node.id === value);
+  return match ? { node: match.node, path: match.path } : void 0;
+}
+function getVisibleNodes(tree, currentPath) {
+  const currentNode = currentPath.at(-1);
+  return currentNode?.children ?? tree;
+}
+function isSelectableNode(node) {
+  if (node.disabled) return false;
+  if (node.selectable !== void 0) return node.selectable;
+  return !node.children || node.children.length === 0;
+}
+function getPathLabel(path) {
+  return path.map((node) => node.label).join(" / ");
+}
+function filterScopeResults(flattenedNodes, query) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return [];
+  return flattenedNodes.filter(({ node, path }) => {
+    const pathLabel = getPathLabel(path).toLowerCase();
+    const description = node.description?.toLowerCase() ?? "";
+    return node.label.toLowerCase().includes(normalizedQuery) || description.includes(normalizedQuery) || pathLabel.includes(normalizedQuery);
+  });
+}
+function ScopeOptionButton({
+  node,
+  onBrowse,
+  onSelect,
+  path,
+  selectedValue,
+  showPathLabel
+}) {
+  const selectable = isSelectableNode(node);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "flex w-full items-start justify-between rounded-md border px-3 py-3 text-left transition-colors hover:bg-accent hover:text-accent-foreground",
+        selectedValue === node.id && "border-primary bg-accent",
+        node.disabled && "cursor-not-allowed opacity-50"
+      ),
+      disabled: node.disabled,
+      onClick: () => {
+        if (selectable) {
+          onSelect({ node, path });
+          return;
+        }
+        onBrowse(node);
+      },
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: node.label }),
+            node.badge ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: node.badge }) : null
+          ] }),
+          showPathLabel ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: getPathLabel(path) }) : null,
+          node.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: node.description }) : null
+        ] }),
+        selectedValue === node.id ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-4 w-4 shrink-0 text-primary" }) : node.children && node.children.length > 0 ? /* @__PURE__ */ jsx(ChevronRight, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }) : null
+      ]
+    },
+    node.id
+  );
+}
+function ScopeSearchResults({
+  onBrowse,
+  onSelect,
+  results,
+  selectedValue
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 px-1 py-1", children: results.map(({ node, path }) => /* @__PURE__ */ jsx(
+    ScopeOptionButton,
+    {
+      node,
+      onBrowse,
+      onSelect,
+      path,
+      selectedValue,
+      showPathLabel: true
+    },
+    getPathLabel(path)
+  )) });
+}
+function ScopeCurrentLevel({
+  currentPath,
+  nodes,
+  onBrowse,
+  onSelect,
+  selectedValue
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 px-1 py-1", children: nodes.map((node) => /* @__PURE__ */ jsx(
+    ScopeOptionButton,
+    {
+      node,
+      onBrowse,
+      onSelect,
+      path: [...currentPath, node],
+      selectedValue
+    },
+    node.id
+  )) });
+}
+function ScopePanel({
+  currentPath,
+  emptyMessage,
+  nodes,
+  onBrowse,
+  onSelect,
+  query,
+  searchResults,
+  selectedValue
+}) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery) {
+    if (searchResults.length === 0) {
+      return /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: "No scopes match your search." });
+    }
+    return /* @__PURE__ */ jsx(
+      ScopeSearchResults,
+      {
+        onBrowse,
+        onSelect,
+        results: searchResults,
+        selectedValue
+      }
+    );
+  }
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-sm text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx(
+    ScopeCurrentLevel,
+    {
+      currentPath,
+      nodes,
+      onBrowse,
+      onSelect,
+      selectedValue
+    }
+  );
+}
+function ScopeSelectorBreadcrumb({
+  currentPath,
+  onBack
+}) {
+  if (currentPath.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs(Button, { className: "h-7 px-2", onClick: onBack, size: "sm", variant: "ghost", children: [
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 rotate-180" }),
+      "Back"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: getPathLabel(currentPath) })
+  ] });
+}
+function ScopeSelectorPopoverBody({
+  emptyMessage,
+  searchPlaceholder,
+  state
+}) {
+  return /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-[380px] p-0", sideOffset: 8, children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: "pl-9",
+            onChange: (event) => {
+              state.setQuery(event.target.value);
+            },
+            placeholder: searchPlaceholder,
+            value: state.query
+          }
+        )
+      ] }),
+      state.query.trim() ? null : /* @__PURE__ */ jsx(
+        ScopeSelectorBreadcrumb,
+        {
+          currentPath: state.currentPath,
+          onBack: () => {
+            state.setCurrentPath(state.currentPath.slice(0, -1));
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px]", children: /* @__PURE__ */ jsx(
+      ScopePanel,
+      {
+        currentPath: state.currentPath,
+        emptyMessage,
+        nodes: state.currentLevelNodes,
+        onBrowse: state.handleBrowse,
+        onSelect: state.handleSelect,
+        query: state.query,
+        searchResults: state.searchResults,
+        selectedValue: state.selectedValue
+      }
+    ) }),
+    state.selectedSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground", children: [
+        "Selected: ",
+        state.selectedPathLabel
+      ] })
+    ] }) : null
+  ] });
+}
+function useScopeSelectorState({
+  defaultValue,
+  nodes,
+  onValueChange,
+  value
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const [currentPath, setCurrentPath] = useState([]);
+  const selectedValue = value ?? uncontrolledValue;
+  const selectedSelection = useMemo(
+    () => findSelection(nodes, selectedValue),
+    [nodes, selectedValue]
+  );
+  const flattenedNodes = useMemo(() => flattenNodes(nodes), [nodes]);
+  const searchResults = useMemo(
+    () => filterScopeResults(flattenedNodes, query),
+    [flattenedNodes, query]
+  );
+  const currentLevelNodes = getVisibleNodes(nodes, currentPath);
+  function handleSelect(selection) {
+    if (value === void 0) {
+      setUncontrolledValue(selection.node.id);
+    }
+    setCurrentPath(selection.path.slice(0, -1));
+    setQuery("");
+    setOpen(false);
+    onValueChange?.(selection);
+  }
+  function handleBrowse(node) {
+    const nextPath = findSelection(nodes, node.id)?.path ?? [];
+    setCurrentPath(nextPath);
+  }
+  function handleOpenChange(nextOpen) {
+    setOpen(nextOpen);
+    if (nextOpen) {
+      setCurrentPath(selectedSelection?.path.slice(0, -1) ?? []);
+      return;
+    }
+    setQuery("");
+  }
+  return {
+    currentLevelNodes,
+    currentPath,
+    currentPathLabel: getPathLabel(currentPath),
+    handleBrowse,
+    handleOpenChange,
+    handleSelect,
+    open,
+    query,
+    searchResults,
+    selectedPathLabel: selectedSelection ? getPathLabel(selectedSelection.path) : void 0,
+    selectedSelection,
+    selectedValue,
+    setCurrentPath,
+    setQuery
+  };
+}
+const ScopeSelector = forwardRef(
+  ({
+    className,
+    defaultValue,
+    disabled,
+    emptyMessage = "No scopes available.",
+    nodes,
+    onValueChange,
+    placeholder = "Select scope",
+    searchPlaceholder = "Search scopes...",
+    value
+  }, ref) => {
+    const state = useScopeSelectorState({
+      defaultValue,
+      nodes,
+      onValueChange,
+      value
+    });
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: state.handleOpenChange, open: state.open, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: cn("w-full justify-between", className),
+          disabled,
+          ref,
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: state.selectedPathLabel ?? placeholder }),
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0 rotate-90 text-muted-foreground" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        ScopeSelectorPopoverBody,
+        {
+          emptyMessage,
+          searchPlaceholder,
+          state
+        }
+      )
+    ] });
+  }
+);
+ScopeSelector.displayName = "ScopeSelector";
+export {
+  ScopeSelector
+};

package/dist/components/severity-badge/index.js

@@ -0,0 +1,8 @@
+import {
+  SeverityBadge,
+  severityBadgeVariants
+} from "./severity-badge";
+export {
+  SeverityBadge,
+  severityBadgeVariants
+};

package/dist/components/severity-badge/severity-badge.js

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const severityBadgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    compoundVariants: [
+      {
+        className: "border-transparent bg-destructive text-destructive-foreground",
+        level: "critical",
+        tone: "solid"
+      },
+      {
+        className: "border-destructive/30 bg-destructive/10 text-destructive",
+        level: "critical",
+        tone: "soft"
+      },
+      {
+        className: "border-destructive/40 text-destructive",
+        level: "critical",
+        tone: "outline"
+      },
+      {
+        className: "border-transparent bg-orange-500 text-white",
+        level: "high",
+        tone: "solid"
+      },
+      {
+        className: "border-orange-500/30 bg-orange-500/10 text-orange-600",
+        level: "high",
+        tone: "soft"
+      },
+      {
+        className: "border-orange-500/40 text-orange-600",
+        level: "high",
+        tone: "outline"
+      },
+      {
+        className: "border-transparent bg-amber-500 text-white",
+        level: "medium",
+        tone: "solid"
+      },
+      {
+        className: "border-amber-500/30 bg-amber-500/10 text-amber-600",
+        level: "medium",
+        tone: "soft"
+      },
+      {
+        className: "border-amber-500/40 text-amber-600",
+        level: "medium",
+        tone: "outline"
+      },
+      {
+        className: "border-transparent bg-sky-500 text-white",
+        level: "low",
+        tone: "solid"
+      },
+      {
+        className: "border-sky-500/30 bg-sky-500/10 text-sky-600",
+        level: "low",
+        tone: "soft"
+      },
+      {
+        className: "border-sky-500/40 text-sky-600",
+        level: "low",
+        tone: "outline"
+      },
+      {
+        className: "border-transparent bg-muted text-muted-foreground",
+        level: "info",
+        tone: "solid"
+      },
+      {
+        className: "border-border bg-muted/50 text-muted-foreground",
+        level: "info",
+        tone: "soft"
+      },
+      {
+        className: "border-border text-muted-foreground",
+        level: "info",
+        tone: "outline"
+      }
+    ],
+    defaultVariants: {
+      level: "info",
+      tone: "soft"
+    },
+    variants: {
+      level: {
+        critical: "",
+        high: "",
+        info: "",
+        low: "",
+        medium: ""
+      },
+      tone: {
+        outline: "",
+        soft: "",
+        solid: ""
+      }
+    }
+  }
+);
+const DOT_COLOR = {
+  critical: "bg-destructive",
+  high: "bg-orange-500",
+  info: "bg-muted-foreground",
+  low: "bg-sky-500",
+  medium: "bg-amber-500"
+};
+const DEFAULT_LABEL = {
+  critical: "Critical",
+  high: "High",
+  info: "Info",
+  low: "Low",
+  medium: "Medium"
+};
+function SeverityBadge({
+  children,
+  className,
+  level,
+  pulse = false,
+  showDot = true,
+  tone,
+  ...props
+}) {
+  const label = children ?? DEFAULT_LABEL[level];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(severityBadgeVariants({ level, tone }), className),
+      "data-level": level,
+      ...props,
+      children: [
+        showDot ? /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative flex h-2 w-2", children: [
+          pulse ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute inline-flex h-full w-full animate-ping rounded-full opacity-60",
+                DOT_COLOR[level]
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "relative inline-flex h-2 w-2 rounded-full",
+                DOT_COLOR[level]
+              )
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+export {
+  SeverityBadge,
+  severityBadgeVariants
+};

package/dist/components/sparkline-grid/index.js

@@ -0,0 +1,6 @@
+import {
+  SparklineGrid
+} from "./sparkline-grid";
+export {
+  SparklineGrid
+};

package/dist/components/sparkline-grid/sparkline-grid.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+function buildSparklinePath(data, width, height) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  return data.map((value, index) => {
+    const x = data.length === 1 ? width / 2 : index / (data.length - 1) * width;
+    const y = height - (value - min) / range * height;
+    return `${index === 0 ? "M" : "L"}${x},${y}`;
+  }).join(" ");
+}
+const gridColumns = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-2 xl:grid-cols-3",
+  4: "md:grid-cols-2 xl:grid-cols-4"
+};
+const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...props }, reference) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid grid-cols-1 gap-4", gridColumns[columns], className),
+      ref: reference,
+      ...props,
+      children: items.map((item) => {
+        const isPositive = item.change >= 0;
+        const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
+        const stroke = isPositive ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
+        return /* @__PURE__ */ jsxs(
+          "section",
+          {
+            className: "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: item.label }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-semibold tracking-tight text-foreground", children: item.value })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium tabular-nums",
+                      isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
+                      item.change > 0 ? "+" : "",
+                      item.change.toFixed(2),
+                      "%"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border/60 bg-muted/20 p-3", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-label": `${item.label} sparkline`,
+                  className: "h-16 w-full",
+                  role: "img",
+                  viewBox: "0 0 120 48",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: buildSparklinePath(item.data, 120, 48),
+                      fill: "none",
+                      stroke,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: "2.5",
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  )
+                }
+              ) })
+            ]
+          },
+          item.label
+        );
+      })
+    }
+  );
+});
+SparklineGrid.displayName = "SparklineGrid";
+export {
+  SparklineGrid
+};

package/dist/components/spinner/index.js

@@ -1,4 +1,8 @@
 import { Spinner } from "./spinner";
+import {
+  UnicodeSpinner
+} from "./unicode-spinner";
 export {
-  Spinner
+  Spinner,
+  UnicodeSpinner
 };