@vllnt/ui 0.1.11 → 0.2.0

package/dist/components/candlestick-chart/candlestick-chart.js

@@ -0,0 +1,215 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+const DEFAULT_WIDTH = 760;
+const DEFAULT_HEIGHT = 260;
+function formatValue(value) {
+  return value.toLocaleString(void 0, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2
+  });
+}
+function buildMetrics(data, height, width) {
+  const allValues = data.flatMap((candle) => [
+    candle.high,
+    candle.low,
+    candle.open,
+    candle.close
+  ]);
+  const minPrice = Math.min(...allValues);
+  const maxPrice = Math.max(...allValues);
+  const range = maxPrice - minPrice || 1;
+  const topPadding = 20;
+  const bottomPadding = 30;
+  const chartHeight = height - topPadding - bottomPadding;
+  const columnWidth = width / data.length;
+  const bodyWidth = Math.max(columnWidth * 0.56, 8);
+  return {
+    bodyWidth,
+    bottomPadding,
+    chartHeight,
+    columnWidth,
+    maxPrice,
+    minPrice,
+    range,
+    topPadding
+  };
+}
+function getYForPrice(price, metrics) {
+  const ratio = (price - metrics.minPrice) / metrics.range;
+  return metrics.topPadding + metrics.chartHeight - ratio * metrics.chartHeight;
+}
+function PriceGrid({
+  metrics,
+  showGrid,
+  width
+}) {
+  if (!showGrid) {
+    return null;
+  }
+  const ticks = Array.from({ length: 4 }, (_, index) => {
+    const ratio = index / 3;
+    return {
+      value: metrics.maxPrice - ratio * metrics.range,
+      y: metrics.topPadding + ratio * metrics.chartHeight
+    };
+  });
+  return ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        stroke: "hsl(var(--border))",
+        strokeDasharray: "4 6",
+        strokeOpacity: "0.8",
+        x1: "0",
+        x2: width,
+        y1: tick.y,
+        y2: tick.y
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        fill: "hsl(var(--muted-foreground))",
+        fontSize: "11",
+        textAnchor: "end",
+        x: width - 6,
+        y: tick.y - 4,
+        children: formatValue(tick.value)
+      }
+    )
+  ] }, tick.value));
+}
+function CandleMarks({
+  data,
+  height,
+  metrics
+}) {
+  return data.map((candle, index) => {
+    const centerX = metrics.columnWidth * index + metrics.columnWidth / 2;
+    const wickTop = getYForPrice(candle.high, metrics);
+    const wickBottom = getYForPrice(candle.low, metrics);
+    const openY = getYForPrice(candle.open, metrics);
+    const closeY = getYForPrice(candle.close, metrics);
+    const bodyY = Math.min(openY, closeY);
+    const bodyHeight = Math.max(Math.abs(openY - closeY), 3);
+    const isBullish = candle.close >= candle.open;
+    const fill = isBullish ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          stroke: fill,
+          strokeLinecap: "round",
+          strokeWidth: 2,
+          x1: centerX,
+          x2: centerX,
+          y1: wickTop,
+          y2: wickBottom
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill,
+          fillOpacity: isBullish ? 0.25 : 0.18,
+          height: bodyHeight,
+          rx: 4,
+          stroke: fill,
+          strokeWidth: 1.5,
+          width: metrics.bodyWidth,
+          x: centerX - metrics.bodyWidth / 2,
+          y: bodyY,
+          children: /* @__PURE__ */ jsx("title", { children: `${candle.label}: O ${formatValue(candle.open)} H ${formatValue(candle.high)} L ${formatValue(candle.low)} C ${formatValue(candle.close)}` })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          fill: "hsl(var(--muted-foreground))",
+          fontSize: "11",
+          textAnchor: "middle",
+          x: centerX,
+          y: height - 8,
+          children: candle.label
+        }
+      )
+    ] }, candle.label);
+  });
+}
+function SessionPill({ sessionChange }) {
+  const isPositive = sessionChange >= 0;
+  const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium",
+        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-4 w-4" }),
+        sessionChange >= 0 ? "+" : "",
+        formatValue(sessionChange)
+      ]
+    }
+  );
+}
+const CandlestickChart = React.forwardRef(
+  ({
+    className,
+    data,
+    height = DEFAULT_HEIGHT,
+    showGrid = true,
+    width = DEFAULT_WIDTH,
+    ...props
+  }, reference) => {
+    const firstCandle = data[0];
+    const finalCandle = data.at(-1);
+    if (!firstCandle || !finalCandle) {
+      return null;
+    }
+    const metrics = buildMetrics(data, height, width);
+    const sessionChange = finalCandle.close - firstCandle.open;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "OHLC session" }),
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
+            ] }),
+            /* @__PURE__ */ jsx(SessionPill, { sessionChange })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-label": "Candlestick chart",
+              className: "h-full w-full",
+              height,
+              role: "img",
+              viewBox: `0 0 ${width} ${height}`,
+              width,
+              children: [
+                /* @__PURE__ */ jsx(PriceGrid, { metrics, showGrid, width }),
+                /* @__PURE__ */ jsx(CandleMarks, { data, height, metrics })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CandlestickChart.displayName = "CandlestickChart";
+export {
+  CandlestickChart
+};

package/dist/components/candlestick-chart/index.js

@@ -0,0 +1,6 @@
+import {
+  CandlestickChart
+} from "./candlestick-chart";
+export {
+  CandlestickChart
+};

package/dist/components/combobox/combobox.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+function useComboboxValue(value, onValueChange) {
+  const [internalValue, setInternalValue] = React.useState(value ?? "");
+  React.useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const resolvedValue = value ?? internalValue;
+  const setResolvedValue = (nextValue) => {
+    if (value === void 0) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  return { resolvedValue, setResolvedValue };
+}
+function ComboboxOptionItem({
+  onSelect,
+  option,
+  selectedValue
+}) {
+  const keywords = option.keywords?.join(" ") ?? "";
+  return /* @__PURE__ */ jsxs(
+    CommandItem,
+    {
+      disabled: option.disabled,
+      onSelect: () => {
+        onSelect(option.value);
+      },
+      value: `${option.label} ${option.value} ${keywords}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Check,
+          {
+            className: cn(
+              "mr-2 h-4 w-4",
+              selectedValue === option.value ? "opacity-100" : "opacity-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+      ]
+    }
+  );
+}
+const Combobox = React.forwardRef(
+  ({
+    className,
+    commandClassName,
+    emptyText = "No option found.",
+    onValueChange,
+    options,
+    placeholder = "Select an option",
+    searchPlaceholder = "Search options...",
+    triggerClassName,
+    value
+  }, reference) => {
+    const [open, setOpen] = React.useState(false);
+    const { resolvedValue, setResolvedValue } = useComboboxValue(
+      value,
+      onValueChange
+    );
+    const selectedOption = options.find(
+      (option) => option.value === resolvedValue
+    );
+    const handleSelect = (nextValue) => {
+      setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          "aria-expanded": open,
+          className: cn("w-full justify-between", triggerClassName),
+          ref: reference,
+          role: "combobox",
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: cn(
+            "w-[var(--radix-popover-trigger-width)] p-0",
+            className
+          ),
+          children: /* @__PURE__ */ jsxs(Command, { className: commandClassName, children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
+                ComboboxOptionItem,
+                {
+                  onSelect: handleSelect,
+                  option,
+                  selectedValue: resolvedValue
+                },
+                option.value
+              )) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+export {
+  Combobox
+};

package/dist/components/combobox/index.js

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

package/dist/components/countdown-timer/countdown-timer.js

@@ -0,0 +1,184 @@
+"use client";
+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";
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+function useLiveDate(now, tickMs) {
+  const fixedNow = React.useMemo(
+    () => now ? normalizeDate(now) : void 0,
+    [now]
+  );
+  const [liveNow, setLiveNow] = React.useState(fixedNow ?? /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    if (fixedNow) {
+      setLiveNow(fixedNow);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setLiveNow(/* @__PURE__ */ new Date());
+    }, tickMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fixedNow, tickMs]);
+  return liveNow;
+}
+function getRemainingMs(deadline, now) {
+  return deadline.getTime() - now.getTime();
+}
+function getStatus(remainingMs, warningThresholdMs) {
+  if (remainingMs <= 0) {
+    return {
+      badgeVariant: "destructive",
+      label: "Breached",
+      toneClassName: "bg-destructive"
+    };
+  }
+  if (remainingMs <= warningThresholdMs) {
+    return {
+      badgeVariant: "secondary",
+      label: "At risk",
+      toneClassName: "bg-amber-500"
+    };
+  }
+  return {
+    badgeVariant: "default",
+    label: "On track",
+    toneClassName: "bg-emerald-500"
+  };
+}
+function formatSegments(milliseconds) {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1e3));
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  return [
+    { label: "Days", value: String(days).padStart(2, "0") },
+    { label: "Hours", value: String(hours).padStart(2, "0") },
+    { label: "Minutes", value: String(minutes).padStart(2, "0") },
+    { label: "Seconds", value: String(seconds).padStart(2, "0") }
+  ];
+}
+function formatDeadline(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    timeZoneName: "short"
+  }).format(date);
+}
+function getProgress(deadline, now, startedAt) {
+  if (!startedAt) {
+    return 0;
+  }
+  const total = deadline.getTime() - startedAt.getTime();
+  if (total <= 0) {
+    return 100;
+  }
+  const elapsed = now.getTime() - startedAt.getTime();
+  return Math.min(100, Math.max(0, elapsed / total * 100));
+}
+function TimerSegments({ segments }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: segments.map((segment) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-lg border bg-background/80 px-3 py-4 text-center",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold tracking-tight", children: segment.value }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: segment.label })
+      ]
+    },
+    segment.label
+  )) });
+}
+function TimerProgress({
+  progress,
+  remainingMs,
+  segments,
+  startedAt,
+  toneClassName
+}) {
+  const progressWidth = startedAt ? progress : remainingMs <= 0 ? 100 : 0;
+  const statusText = startedAt ? `${Math.round(progress)}% used` : segments.map((segment) => segment.value).join(":");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: startedAt ? "SLA elapsed" : "Time remaining" }),
+      /* @__PURE__ */ jsx("span", { children: statusText })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-2 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("h-full transition-all", toneClassName),
+        style: { width: `${progressWidth}%` }
+      }
+    ) })
+  ] });
+}
+const CountdownTimer = React.forwardRef(
+  ({
+    className,
+    deadline,
+    description,
+    now,
+    startedAt,
+    tickMs = 1e3,
+    title = "Countdown timer",
+    warningThresholdMs = 15 * 60 * 1e3,
+    ...props
+  }, ref) => {
+    const deadlineDate = React.useMemo(
+      () => normalizeDate(deadline),
+      [deadline]
+    );
+    const startedAtDate = React.useMemo(
+      () => startedAt ? normalizeDate(startedAt) : void 0,
+      [startedAt]
+    );
+    const liveNow = useLiveDate(now, tickMs);
+    const remainingMs = getRemainingMs(deadlineDate, liveNow);
+    const status = getStatus(remainingMs, warningThresholdMs);
+    const segments = formatSegments(Math.abs(remainingMs));
+    const progress = getProgress(deadlineDate, liveNow, startedAtDate);
+    return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
+      /* @__PURE__ */ jsx(CardHeader, { className: "space-y-2 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
+          /* @__PURE__ */ jsx(CardDescription, { children: description ?? `Deadline ${formatDeadline(deadlineDate)}` })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { variant: status.badgeVariant, children: status.label })
+      ] }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(TimerSegments, { segments }),
+        /* @__PURE__ */ jsx(
+          TimerProgress,
+          {
+            progress,
+            remainingMs,
+            segments,
+            startedAt: startedAtDate,
+            toneClassName: status.toneClassName
+          }
+        )
+      ] })
+    ] });
+  }
+);
+CountdownTimer.displayName = "CountdownTimer";
+export {
+  CountdownTimer
+};

package/dist/components/countdown-timer/index.js

@@ -0,0 +1,4 @@
+import { CountdownTimer } from "./countdown-timer";
+export {
+  CountdownTimer
+};

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { badgeVariants } from "../badge/badge";
+function getStatusLabel(status) {
+  switch (status) {
+    case "depleted":
+      return "No credits left";
+    case "healthy":
+      return "Credits available";
+    case "low":
+      return "Credits running low";
+    case "overdue":
+      return "Balance overdue";
+  }
+}
+function getStatusClasses(status) {
+  switch (status) {
+    case "depleted":
+      return "border-slate-500/30 bg-slate-500/10 text-slate-700 dark:text-slate-300";
+    case "healthy":
+      return "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+    case "low":
+      return "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+    case "overdue":
+      return "border-destructive/30 bg-destructive/10 text-destructive";
+  }
+}
+const CreditBadge = React.forwardRef(
+  ({ amount, className, label, status, ...props }, reference) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          badgeVariants({ variant: "outline" }),
+          "gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+          getStatusClasses(status),
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "h-1.5 w-1.5 rounded-full bg-current"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: amount ? `${amount} \u2022 ${label ?? getStatusLabel(status)}` : label ?? getStatusLabel(status) })
+        ]
+      }
+    );
+  }
+);
+CreditBadge.displayName = "CreditBadge";
+export {
+  CreditBadge
+};

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

@@ -0,0 +1,6 @@
+import {
+  CreditBadge
+} from "./credit-badge";
+export {
+  CreditBadge
+};