@vllnt/ui 0.1.11 → 0.2.0

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

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { ArrowDownRight, ArrowRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Card, CardContent, CardDescription, CardHeader } from "../card";
+const statCardVariants = cva("overflow-hidden border shadow-sm", {
+  defaultVariants: {
+    tone: "neutral"
+  },
+  variants: {
+    tone: {
+      danger: "border-red-200/70 dark:border-red-950/70",
+      neutral: "",
+      success: "border-emerald-200/70 dark:border-emerald-950/70",
+      warning: "border-amber-200/70 dark:border-amber-950/70"
+    }
+  }
+});
+const accentVariants = cva("h-1 w-full", {
+  defaultVariants: {
+    tone: "neutral"
+  },
+  variants: {
+    tone: {
+      danger: "bg-red-500/80",
+      neutral: "bg-primary/70",
+      success: "bg-emerald-500/80",
+      warning: "bg-amber-500/80"
+    }
+  }
+});
+const changeVariants = cva(
+  "inline-flex items-center gap-1 text-xs font-medium",
+  {
+    defaultVariants: {
+      trend: "neutral"
+    },
+    variants: {
+      trend: {
+        down: "text-red-600 dark:text-red-400",
+        neutral: "text-muted-foreground",
+        up: "text-emerald-600 dark:text-emerald-400"
+      }
+    }
+  }
+);
+function TrendIcon({ trend }) {
+  if (trend === "up") {
+    return /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5" });
+  }
+  if (trend === "down") {
+    return /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-3.5 w-3.5" });
+  }
+  return /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" });
+}
+const StatCard = React.forwardRef(
+  ({
+    change,
+    className,
+    description,
+    icon,
+    label,
+    meta,
+    tone,
+    trend = "neutral",
+    value,
+    ...props
+  }, reference) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(statCardVariants({ tone }), className),
+      ref: reference,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: accentVariants({ tone }) }),
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 space-y-0 pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx(CardDescription, { className: "text-xs font-medium uppercase tracking-[0.14em]", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight", children: value })
+          ] }),
+          icon ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-muted/50 p-2 text-muted-foreground", children: icon }) : null
+        ] }),
+        description || change || meta ? /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+          change || meta ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            change ? /* @__PURE__ */ jsxs("div", { className: changeVariants({ trend }), children: [
+              /* @__PURE__ */ jsx(TrendIcon, { trend }),
+              /* @__PURE__ */ jsx("span", { children: change })
+            ] }) : null,
+            meta ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: meta }) : null
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  )
+);
+StatCard.displayName = "StatCard";
+export {
+  StatCard,
+  statCardVariants
+};

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

@@ -0,0 +1,6 @@
+import {
+  StatusBoard
+} from "./status-board";
+export {
+  StatusBoard
+};

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

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+const STATUS_META = {
+  critical: {
+    badgeVariant: "destructive",
+    dotClassName: "bg-destructive",
+    label: "Critical",
+    panelClassName: "border-destructive/30 bg-destructive/5"
+  },
+  healthy: {
+    badgeVariant: "default",
+    dotClassName: "bg-emerald-500",
+    label: "Healthy",
+    panelClassName: "border-emerald-500/25 bg-emerald-500/5"
+  },
+  maintenance: {
+    badgeVariant: "secondary",
+    dotClassName: "bg-sky-500",
+    label: "Maintenance",
+    panelClassName: "border-sky-500/25 bg-sky-500/5"
+  },
+  offline: {
+    badgeVariant: "outline",
+    dotClassName: "bg-muted-foreground",
+    label: "Offline",
+    panelClassName: "border-border bg-muted/30"
+  },
+  warning: {
+    badgeVariant: "secondary",
+    dotClassName: "bg-amber-500",
+    label: "Warning",
+    panelClassName: "border-amber-500/25 bg-amber-500/5"
+  }
+};
+const STATUS_ORDER = [
+  "healthy",
+  "warning",
+  "critical",
+  "maintenance",
+  "offline"
+];
+function getColumnsClassName(columns) {
+  if (columns === 2) {
+    return "md:grid-cols-2";
+  }
+  if (columns === 4) {
+    return "md:grid-cols-2 xl:grid-cols-4";
+  }
+  return "md:grid-cols-2 xl:grid-cols-3";
+}
+function getSummary(items) {
+  const counts = items.reduce(
+    (summary, item) => ({
+      ...summary,
+      [item.status]: summary[item.status] + 1
+    }),
+    {
+      critical: 0,
+      healthy: 0,
+      maintenance: 0,
+      offline: 0,
+      warning: 0
+    }
+  );
+  return STATUS_ORDER.map((status) => ({
+    count: counts[status],
+    status
+  })).filter((entry) => entry.count > 0);
+}
+function StatusBoardSummary({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: getSummary(items).map(({ count, status }) => {
+    const meta = STATUS_META[status];
+    return /* @__PURE__ */ jsxs(Badge, { variant: meta.badgeVariant, children: [
+      count,
+      " ",
+      meta.label
+    ] }, status);
+  }) });
+}
+function StatusBoardCard({ item }) {
+  const meta = STATUS_META[item.status];
+  return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", meta.panelClassName), children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "gap-3 space-y-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("h-2.5 w-2.5 rounded-full", meta.dotClassName)
+            }
+          ),
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base leading-none", children: item.label })
+        ] }),
+        item.description ? /* @__PURE__ */ jsx(CardDescription, { children: item.description }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { variant: meta.badgeVariant, children: meta.label })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "flex items-end justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { children: item.value ? /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold tracking-tight", children: item.value }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No metric reported" }) }),
+      item.meta ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.meta }) : null
+    ] })
+  ] });
+}
+const StatusBoard = React.forwardRef(
+  ({
+    className,
+    columns = 3,
+    description,
+    items,
+    title = "Status board",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(StatusBoardSummary, { items })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", getColumnsClassName(columns)), children: items.map((item) => /* @__PURE__ */ jsx(StatusBoardCard, { item }, item.label)) })
+    ] });
+  }
+);
+StatusBoard.displayName = "StatusBoard";
+export {
+  StatusBoard
+};

package/dist/components/status-indicator/index.js

@@ -0,0 +1,10 @@
+import {
+  dotVariants,
+  StatusIndicator,
+  statusIndicatorVariants
+} from "./status-indicator";
+export {
+  StatusIndicator,
+  dotVariants,
+  statusIndicatorVariants
+};

package/dist/components/status-indicator/status-indicator.js

@@ -0,0 +1,175 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const statusIndicatorVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-full border font-medium transition-colors",
+  {
+    compoundVariants: [
+      {
+        className: "border-border text-foreground",
+        tone: "neutral",
+        variant: "outline"
+      },
+      {
+        className: "border-transparent bg-muted text-foreground",
+        tone: "neutral",
+        variant: "soft"
+      },
+      {
+        className: "bg-foreground text-background",
+        tone: "neutral",
+        variant: "solid"
+      },
+      {
+        className: "border-emerald-200 text-emerald-700 dark:border-emerald-900 dark:text-emerald-300",
+        tone: "success",
+        variant: "outline"
+      },
+      {
+        className: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300",
+        tone: "success",
+        variant: "soft"
+      },
+      {
+        className: "bg-emerald-600 text-white dark:bg-emerald-500",
+        tone: "success",
+        variant: "solid"
+      },
+      {
+        className: "border-amber-200 text-amber-700 dark:border-amber-900 dark:text-amber-300",
+        tone: "warning",
+        variant: "outline"
+      },
+      {
+        className: "bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300",
+        tone: "warning",
+        variant: "soft"
+      },
+      {
+        className: "bg-amber-500 text-amber-950 dark:bg-amber-400 dark:text-amber-950",
+        tone: "warning",
+        variant: "solid"
+      },
+      {
+        className: "border-red-200 text-red-700 dark:border-red-900 dark:text-red-300",
+        tone: "danger",
+        variant: "outline"
+      },
+      {
+        className: "bg-red-100 text-red-800 dark:bg-red-950/60 dark:text-red-300",
+        tone: "danger",
+        variant: "soft"
+      },
+      {
+        className: "bg-red-600 text-white dark:bg-red-500",
+        tone: "danger",
+        variant: "solid"
+      },
+      {
+        className: "border-sky-200 text-sky-700 dark:border-sky-900 dark:text-sky-300",
+        tone: "info",
+        variant: "outline"
+      },
+      {
+        className: "bg-sky-100 text-sky-800 dark:bg-sky-950/60 dark:text-sky-300",
+        tone: "info",
+        variant: "soft"
+      },
+      {
+        className: "bg-sky-600 text-white dark:bg-sky-500",
+        tone: "info",
+        variant: "solid"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      tone: "neutral",
+      variant: "soft"
+    },
+    variants: {
+      size: {
+        lg: "min-h-8 px-3 text-sm",
+        md: "min-h-7 px-2.5 text-xs",
+        sm: "min-h-6 px-2 text-[11px]"
+      },
+      tone: {
+        danger: "",
+        info: "",
+        neutral: "",
+        success: "",
+        warning: ""
+      },
+      variant: {
+        outline: "bg-background",
+        soft: "border-transparent",
+        solid: "border-transparent text-primary-foreground"
+      }
+    }
+  }
+);
+const dotVariants = cva("rounded-full", {
+  defaultVariants: {
+    size: "md",
+    tone: "neutral"
+  },
+  variants: {
+    size: {
+      lg: "h-2.5 w-2.5",
+      md: "h-2 w-2",
+      sm: "h-1.5 w-1.5"
+    },
+    tone: {
+      danger: "bg-red-500",
+      info: "bg-sky-500",
+      neutral: "bg-muted-foreground",
+      success: "bg-emerald-500",
+      warning: "bg-amber-500"
+    }
+  }
+});
+const StatusIndicator = React.forwardRef(
+  ({
+    children,
+    className,
+    label,
+    pulse = false,
+    showDot = true,
+    size,
+    tone,
+    variant,
+    ...props
+  }, reference) => {
+    const content = children ?? label;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          statusIndicatorVariants({ size, tone, variant }),
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: [
+          showDot ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                dotVariants({ size, tone }),
+                pulse ? "animate-pulse" : void 0
+              )
+            }
+          ) : null,
+          content
+        ]
+      }
+    );
+  }
+);
+StatusIndicator.displayName = "StatusIndicator";
+export {
+  StatusIndicator,
+  dotVariants,
+  statusIndicatorVariants
+};

package/dist/components/stepper/index.js

@@ -0,0 +1,4 @@
+import { Stepper } from "./stepper";
+export {
+  Stepper
+};

package/dist/components/stepper/stepper.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Circle } from "lucide-react";
+import { cn } from "../../lib/utils";
+function getStepState(index, currentStep) {
+  const stepNumber = index + 1;
+  if (stepNumber < currentStep) return "complete";
+  if (stepNumber === currentStep) return "current";
+  return "upcoming";
+}
+function StepIcon({
+  showNumbers,
+  state,
+  stepNumber
+}) {
+  if (state === "complete") {
+    return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
+  }
+  if (!showNumbers) {
+    return /* @__PURE__ */ jsx(Circle, { className: "h-3.5 w-3.5 fill-current stroke-none" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: stepNumber });
+}
+function StepperItem({
+  index,
+  isVertical,
+  onStepClick,
+  showNumbers,
+  step,
+  stepState,
+  totalSteps
+}) {
+  const clickable = Boolean(onStepClick);
+  const stepNumber = index + 1;
+  return /* @__PURE__ */ jsxs("li", { className: cn("relative", !isVertical && "min-w-0"), children: [
+    !isVertical && index < totalSteps - 1 ? /* @__PURE__ */ jsx("div", { className: "absolute left-[calc(50%+1rem)] right-[calc(-50%+1rem)] top-4 hidden h-px bg-border md:block" }) : null,
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "flex w-full items-start gap-3 rounded-lg text-left transition-colors",
+          clickable ? "hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "cursor-default",
+          isVertical ? "p-2" : "flex-col items-start p-2 md:p-0"
+        ),
+        disabled: !clickable,
+        onClick: () => {
+          onStepClick?.(step, index);
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-current": stepState === "current" ? "step" : void 0,
+              className: cn(
+                "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors",
+                stepState === "complete" && "border-primary bg-primary text-primary-foreground",
+                stepState === "current" && "border-primary bg-primary/10 text-primary shadow-sm",
+                stepState === "upcoming" && "border-border bg-background text-muted-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(
+                StepIcon,
+                {
+                  showNumbers,
+                  state: stepState,
+                  stepNumber
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 space-y-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: step.title }),
+              step.meta ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground", children: step.meta }) : null
+            ] }),
+            step.description ? /* @__PURE__ */ jsx("span", { className: "block text-sm text-muted-foreground", children: step.description }) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Stepper({
+  className,
+  currentStep,
+  onStepClick,
+  orientation = "horizontal",
+  showNumbers = true,
+  steps
+}) {
+  const isVertical = orientation === "vertical";
+  if (steps.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("my-6 rounded-xl border bg-card p-4", className), children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cn("gap-3", isVertical ? "flex flex-col" : "grid gap-4"),
+      style: isVertical ? void 0 : { gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))` },
+      children: steps.map((step, index) => /* @__PURE__ */ jsx(
+        StepperItem,
+        {
+          index,
+          isVertical,
+          onStepClick,
+          showNumbers,
+          step,
+          stepState: getStepState(index, currentStep),
+          totalSteps: steps.length
+        },
+        step.id
+      ))
+    }
+  ) });
+}
+export {
+  Stepper
+};

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

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