@vllnt/ui 0.2.0 → 0.2.1-canary.73a93ee

package/dist/components/multi-select/multi-select.js

@@ -0,0 +1,258 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+function getUniqueValues(values) {
+  return values.filter((value, index) => values.indexOf(value) === index);
+}
+function shouldOpenFromKey(key) {
+  return key === " " || key === "ArrowDown" || key === "Enter";
+}
+function TriggerContent({ placeholder, selectedOptions }) {
+  if (selectedOptions.length === 0) {
+    return /* @__PURE__ */ jsx("span", { children: placeholder });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: selectedOptions.map((option) => /* @__PURE__ */ jsx(Badge, { className: "max-w-full", variant: "secondary", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }) }, option.value)) });
+}
+function OptionList({
+  disabled,
+  emptyText,
+  onSelect,
+  options,
+  searchable,
+  searchPlaceholder,
+  selectedValues
+}) {
+  return /* @__PURE__ */ jsxs(Command, { children: [
+    searchable ? /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }) : null,
+    /* @__PURE__ */ jsxs(CommandList, { "aria-multiselectable": "true", children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+      /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", { children: options.map((option) => {
+        const isSelected = selectedValues.includes(option.value);
+        return /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            "aria-disabled": option.disabled || void 0,
+            "aria-selected": isSelected,
+            className: "gap-2",
+            disabled: disabled || option.disabled,
+            onSelect: () => {
+              onSelect(option.value);
+            },
+            role: "option",
+            value: option.label,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-4 w-4 items-center justify-center rounded-sm border border-input bg-background text-primary transition-opacity",
+                    isSelected ? "opacity-100" : "opacity-50"
+                  ),
+                  children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : null
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label })
+            ]
+          },
+          option.value
+        );
+      }) }) })
+    ] })
+  ] });
+}
+function MultiSelectContent({
+  contentId,
+  disabled,
+  emptyText,
+  onSelect,
+  options,
+  searchable,
+  searchPlaceholder,
+  selectedValues
+}) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      align: "start",
+      className: "w-[var(--radix-popover-trigger-width)] p-0",
+      id: contentId,
+      children: /* @__PURE__ */ jsx(
+        OptionList,
+        {
+          disabled,
+          emptyText,
+          onSelect,
+          options,
+          searchable,
+          searchPlaceholder,
+          selectedValues
+        }
+      )
+    }
+  );
+}
+function useMultiSelectState({
+  defaultValue,
+  onOpenChange,
+  onValueChange,
+  value
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => getUniqueValues(defaultValue)
+  );
+  const isControlled = value !== void 0;
+  const selectedValues = React.useMemo(
+    () => getUniqueValues(value ?? uncontrolledValue),
+    [uncontrolledValue, value]
+  );
+  const setSelectedValues = React.useCallback(
+    (nextValue) => {
+      const uniqueValues = getUniqueValues(nextValue);
+      if (!isControlled) {
+        setUncontrolledValue(uniqueValues);
+      }
+      onValueChange?.(uniqueValues);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  return {
+    handleOpenChange,
+    open,
+    selectedValues,
+    setSelectedValues
+  };
+}
+const MultiSelectTrigger = React.forwardRef(
+  ({
+    className,
+    contentId,
+    disabled = false,
+    onKeyDown,
+    open,
+    placeholder = "Select options",
+    selectedOptions,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-controls": contentId,
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      className: cn(
+        "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
+        selectedOptions.length === 0 && "text-muted-foreground",
+        className
+      ),
+      disabled,
+      onKeyDown,
+      ref,
+      role: "combobox",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: /* @__PURE__ */ jsx(
+          TriggerContent,
+          {
+            placeholder,
+            selectedOptions
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+      ]
+    }
+  )
+);
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+const MultiSelect = React.forwardRef(
+  ({
+    defaultValue = [],
+    emptyText = "No options found.",
+    onKeyDown,
+    onOpenChange,
+    onValueChange,
+    options,
+    searchable = false,
+    searchPlaceholder = "Search options...",
+    value,
+    ...props
+  }, ref) => {
+    const contentId = React.useId();
+    const { handleOpenChange, open, selectedValues, setSelectedValues } = useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
+    const selectedOptions = React.useMemo(
+      () => options.filter((option) => selectedValues.includes(option.value)),
+      [options, selectedValues]
+    );
+    const handleSelect = React.useCallback(
+      (nextValue) => {
+        const nextSelectedValues = selectedValues.includes(nextValue) ? selectedValues.filter((valueItem) => valueItem !== nextValue) : [...selectedValues, nextValue];
+        setSelectedValues(nextSelectedValues);
+      },
+      [selectedValues, setSelectedValues]
+    );
+    const handleTriggerKeyDown = React.useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || props.disabled) {
+          return;
+        }
+        if (shouldOpenFromKey(event.key)) {
+          event.preventDefault();
+          handleOpenChange(true);
+        }
+      },
+      [handleOpenChange, onKeyDown, props.disabled]
+    );
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: handleOpenChange, open, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        MultiSelectTrigger,
+        {
+          ...props,
+          contentId,
+          onKeyDown: handleTriggerKeyDown,
+          open,
+          ref,
+          selectedOptions
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        MultiSelectContent,
+        {
+          contentId,
+          disabled: props.disabled || false,
+          emptyText,
+          onSelect: handleSelect,
+          options,
+          searchable,
+          searchPlaceholder,
+          selectedValues
+        }
+      )
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect
+};

package/dist/components/object-card/index.js

@@ -0,0 +1,6 @@
+import {
+  ObjectCard
+} from "./object-card";
+export {
+  ObjectCard
+};

package/dist/components/object-card/object-card.js

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+const stateClasses = {
+  blocked: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  complete: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  idle: "border-border/70 bg-muted/60 text-muted-foreground",
+  running: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300"
+};
+function ObjectCardHeader({
+  kind,
+  ports,
+  state,
+  summary,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: "rounded-full border-border/60 bg-background/70 px-2.5 py-1 text-[11px] uppercase tracking-[0.2em] text-muted-foreground",
+            variant: "outline",
+            children: kind
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium capitalize",
+              stateClasses[state]
+            ),
+            children: state
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
+        summary ? /* @__PURE__ */ jsx("p", { className: "max-w-[32ch] text-sm leading-6 text-muted-foreground", children: summary }) : null
+      ] })
+    ] }),
+    ports ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-start", children: ports }) : null
+  ] });
+}
+function ObjectCardMetrics({ metrics }) {
+  if (!metrics?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-3 rounded-2xl border border-border/60 bg-background/75 p-3", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: metric.label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium text-foreground", children: metric.value })
+  ] }, metric.label)) });
+}
+function ObjectCardActions({ actions }) {
+  if (!actions?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: actions.map((action) => {
+    const handleActionClick = () => {
+      action.onClick?.();
+    };
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "rounded-full",
+        onClick: handleActionClick,
+        size: "sm",
+        type: "button",
+        variant: "outline",
+        children: action.label
+      },
+      action.label
+    );
+  }) });
+}
+const ObjectCard = forwardRef(
+  ({
+    actions,
+    children,
+    className,
+    footer,
+    kind = "Object",
+    metrics = [],
+    ports,
+    state = "idle",
+    summary,
+    title,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
+        className
+      ),
+      "data-state": state,
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,hsl(var(--foreground)/0.22),transparent)]" }),
+        /* @__PURE__ */ jsx(
+          ObjectCardHeader,
+          {
+            kind,
+            ports,
+            state,
+            summary,
+            title
+          }
+        ),
+        /* @__PURE__ */ jsx(ObjectCardMetrics, { metrics }),
+        children ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children }) : null,
+        /* @__PURE__ */ jsx(ObjectCardActions, { actions }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 pt-3 text-sm text-muted-foreground", children: footer }) : null
+      ]
+    }
+  )
+);
+ObjectCard.displayName = "ObjectCard";
+export {
+  ObjectCard
+};

package/dist/components/object-handle/index.js

@@ -0,0 +1,4 @@
+import { ObjectHandle } from "./object-handle";
+export {
+  ObjectHandle
+};

package/dist/components/object-handle/object-handle.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const ObjectHandle = forwardRef(
+  ({ className, hint, label = "Move", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
+        className
+      ),
+      ref,
+      type: "button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "grid grid-cols-2 gap-0.5 text-[8px] leading-none",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label }),
+        hint ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/80", children: hint }) : null
+      ]
+    }
+  )
+);
+ObjectHandle.displayName = "ObjectHandle";
+export {
+  ObjectHandle
+};

package/dist/components/overview-board/index.js

@@ -0,0 +1,8 @@
+import {
+  OverviewBoard,
+  OverviewCard
+} from "./overview-board";
+export {
+  OverviewBoard,
+  OverviewCard
+};

package/dist/components/overview-board/overview-board.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AlertCircle, ArrowRight, Inbox, ListTodo, Siren } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+const toneClassNames = {
+  danger: "border-red-500/30 bg-red-500/8",
+  default: "border-border/70 bg-background/80",
+  warning: "border-amber-500/30 bg-amber-500/8"
+};
+const toneAccentClassNames = {
+  danger: "text-red-600 dark:text-red-300",
+  default: "text-primary",
+  warning: "text-amber-600 dark:text-amber-300"
+};
+const OverviewCard = forwardRef(
+  ({
+    className,
+    ctaLabel,
+    description,
+    handleCtaClick,
+    heading,
+    icon,
+    metric,
+    tone = "default",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_hsl(var(--foreground)/0.06)] backdrop-blur-xl",
+        toneClassNames[tone],
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: heading }),
+            /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight text-foreground", children: metric })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex size-10 items-center justify-center rounded-xl bg-background/80",
+                toneAccentClassNames[tone]
+              ),
+              children: icon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: description }),
+        ctaLabel ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleCtaClick,
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: [
+              ctaLabel,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+            ]
+          }
+        ) }) : null
+      ]
+    }
+  )
+);
+OverviewCard.displayName = "OverviewCard";
+function getDefaultIcon(heading) {
+  if (typeof heading !== "string") {
+    return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("error")) {
+    return /* @__PURE__ */ jsx(AlertCircle, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("action")) {
+    return /* @__PURE__ */ jsx(ListTodo, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("run")) {
+    return /* @__PURE__ */ jsx(Siren, { className: "size-5" });
+  }
+  return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
+}
+const OverviewBoard = forwardRef(
+  ({ className, eyebrow, heading, items, subtitle, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground", children: eyebrow }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-foreground", children: heading }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-6 text-muted-foreground", children: subtitle }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: items.map((item) => {
+          const handleCtaClick = item.handleCtaClick;
+          return /* @__PURE__ */ jsx(
+            OverviewCard,
+            {
+              ctaLabel: item.ctaLabel,
+              description: item.description,
+              handleCtaClick,
+              heading: item.heading,
+              icon: item.icon ?? getDefaultIcon(item.heading),
+              metric: item.metric,
+              tone: item.tone
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  )
+);
+OverviewBoard.displayName = "OverviewBoard";
+export {
+  OverviewBoard,
+  OverviewCard
+};

package/dist/components/presence-stack/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceStack
+} from "./presence-stack";
+export {
+  PresenceStack
+};

package/dist/components/presence-stack/presence-stack.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATUS_DOT = {
+  active: "bg-emerald-500",
+  away: "bg-amber-500",
+  idle: "bg-muted-foreground",
+  offline: "bg-muted-foreground/40"
+};
+const DEFAULT_LABELS = {
+  overflowSuffix: "more",
+  region: "Live presence"
+};
+const Avatar = (props) => {
+  const { user } = props;
+  const status = user.status ?? "active";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative -ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full border-2 border-background text-[11px] font-semibold text-white shadow-sm first:ml-0",
+      "data-presence-stack-status": status,
+      "data-presence-stack-user": user.id,
+      style: { backgroundColor: user.color ?? "var(--foreground)" },
+      title: user.name,
+      children: [
+        user.initial,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-background",
+              STATUS_DOT[status]
+            ),
+            "data-presence-stack-dot": true
+          }
+        )
+      ]
+    }
+  );
+};
+const PresenceStack = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      max = 5,
+      onOverflowActivate,
+      users,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const visible = max >= users.length ? users : users.slice(0, max);
+    const hidden = users.length - visible.length;
+    const handleOverflow = () => {
+      onOverflowActivate?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("inline-flex items-center pl-2", className),
+        "data-presence-stack": true,
+        ref,
+        role: "group",
+        ...rest,
+        children: [
+          visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
+          hidden > 0 ? renderOverflow({
+            count: hidden,
+            handleClick: handleOverflow,
+            handlerProvided: Boolean(onOverflowActivate),
+            labels: resolvedLabels
+          }) : null
+        ]
+      }
+    );
+  }
+);
+PresenceStack.displayName = "PresenceStack";
+const renderOverflow = (input) => {
+  const text = `+${input.count}`;
+  const aria = `${input.count} ${input.labels.overflowSuffix}`;
+  const className = "relative -ml-2 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-background bg-muted px-1.5 text-[10px] font-semibold text-muted-foreground shadow-sm";
+  if (input.handlerProvided) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": aria,
+        className: cn(
+          className,
+          "transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-presence-stack-overflow": true,
+        onClick: input.handleClick,
+        type: "button",
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": aria, className, "data-presence-stack-overflow": true, children: text });
+};
+export {
+  PresenceStack
+};

package/dist/components/presence-sync-indicator/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceSyncIndicator
+} from "./presence-sync-indicator";
+export {
+  PresenceSyncIndicator
+};