@vllnt/ui 0.2.0 → 0.2.1-canary.4abeac1

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/progress-tracker/index.js

@@ -0,0 +1,20 @@
+import {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+} from "./progress-tracker";
+export {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+};