@vllnt/ui 0.1.11 → 0.2.0-canary.4abf494

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

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../card/card";
+import {
+  CreditBadge
+} from "../credit-badge/credit-badge";
+function DetailRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-right font-medium", children: value })
+  ] });
+}
+function WalletDetails({
+  availableLabel,
+  balanceLabel,
+  note,
+  pendingLabel,
+  renewsLabel
+}) {
+  return /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/70 bg-background px-4 py-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Current balance" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: balanceLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-4", children: [
+      availableLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Available now", value: availableLabel }) : null,
+      pendingLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Pending", value: pendingLabel }) : null,
+      renewsLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Refresh", value: renewsLabel }) : null
+    ] }),
+    note ? /* @__PURE__ */ jsx("p", { className: "rounded-lg bg-muted px-4 py-3 text-sm text-muted-foreground", children: note }) : null
+  ] });
+}
+function WalletActions({
+  primaryActionLabel,
+  secondaryActionLabel
+}) {
+  if (!primaryActionLabel && !secondaryActionLabel) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(CardFooter, { className: "flex flex-col gap-2 sm:flex-row sm:justify-end", children: [
+    secondaryActionLabel ? /* @__PURE__ */ jsx(Button, { className: "w-full sm:w-auto", variant: "outline", children: secondaryActionLabel }) : null,
+    primaryActionLabel ? /* @__PURE__ */ jsx(Button, { className: "w-full sm:w-auto", children: primaryActionLabel }) : null
+  ] });
+}
+const WalletCard = React.forwardRef(
+  ({
+    availableLabel,
+    balanceLabel,
+    className,
+    note,
+    pendingLabel,
+    primaryActionLabel,
+    renewsLabel,
+    secondaryActionLabel,
+    status,
+    ...props
+  }, reference) => {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn(
+          "w-full max-w-md border-border/70 bg-card shadow-sm",
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-4 pb-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: "Wallet" }),
+              /* @__PURE__ */ jsx(CardDescription, { children: "Track credits, pending top-ups, and replenishment timing." })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Available balance" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: renewsLabel ?? "Credits refresh automatically when enabled." })
+              ] }),
+              /* @__PURE__ */ jsx(CreditBadge, { amount: balanceLabel, status })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            WalletDetails,
+            {
+              availableLabel,
+              balanceLabel,
+              note,
+              pendingLabel,
+              renewsLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            WalletActions,
+            {
+              primaryActionLabel,
+              secondaryActionLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+WalletCard.displayName = "WalletCard";
+export {
+  WalletCard
+};

package/dist/components/watchlist/index.js

@@ -0,0 +1,6 @@
+import {
+  Watchlist
+} from "./watchlist";
+export {
+  Watchlist
+};

package/dist/components/watchlist/watchlist.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight, Star } from "lucide-react";
+import { cn } from "../../lib/utils";
+function formatPrice(price) {
+  return typeof price === "number" ? price.toLocaleString(void 0, {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2
+  }) : price;
+}
+function formatChange(change) {
+  const sign = change > 0 ? "+" : "";
+  return `${sign}${change.toFixed(2)}%`;
+}
+function WatchlistRow({ item }) {
+  const isPositive = item.change >= 0;
+  const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
+  return /* @__PURE__ */ jsxs("li", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-3 rounded-xl px-3 py-2.5 transition-colors hover:bg-muted/40", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "flex h-7 w-7 items-center justify-center rounded-full border",
+          item.starred ? "border-amber-400/40 bg-amber-400/10 text-amber-500" : "border-border bg-background text-muted-foreground"
+        ),
+        children: /* @__PURE__ */ jsx(
+          Star,
+          {
+            className: cn("h-3.5 w-3.5", item.starred && "fill-current"),
+            strokeWidth: 1.75
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: item.symbol }),
+      item.name ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: item.name }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tabular-nums text-foreground", children: formatPrice(item.price) }),
+      item.volume ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground tabular-nums", children: item.volume }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full border px-2 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 w-3" }),
+          formatChange(item.change)
+        ]
+      }
+    )
+  ] });
+}
+const Watchlist = React.forwardRef(
+  ({
+    className,
+    eyebrow = "Tracked symbols",
+    items,
+    title = "Watchlist",
+    ...props
+  }, reference) => {
+    if (items.length === 0) {
+      return null;
+    }
+    const advancing = items.filter((item) => item.change >= 0).length;
+    const declining = items.length - advancing;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": title,
+        className: cn(
+          "rounded-2xl border border-border bg-card/80 p-4 shadow-sm",
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "mb-3 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: eyebrow }),
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400", children: [
+                /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3 w-3" }),
+                advancing,
+                " up"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400", children: [
+                /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-3 w-3" }),
+                declining,
+                " down"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border/60", children: items.map((item) => /* @__PURE__ */ jsx(WatchlistRow, { item }, item.symbol)) })
+        ]
+      }
+    );
+  }
+);
+Watchlist.displayName = "Watchlist";
+export {
+  Watchlist
+};

package/dist/components/world-clock-bar/index.js

@@ -0,0 +1,6 @@
+import {
+  WorldClockBar
+} from "./world-clock-bar";
+export {
+  WorldClockBar
+};

package/dist/components/world-clock-bar/world-clock-bar.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+function useLiveDate(now, updateIntervalMs) {
+  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());
+    }, updateIntervalMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fixedNow, updateIntervalMs]);
+  return liveNow;
+}
+function formatZoneDateTime(zone, date, showDate) {
+  const locale = zone.locale ?? "en-US";
+  const timeFormatter = new Intl.DateTimeFormat(locale, {
+    hour: "numeric",
+    minute: "2-digit",
+    timeZone: zone.timeZone,
+    timeZoneName: "short"
+  });
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    timeZone: zone.timeZone,
+    weekday: "short"
+  });
+  return {
+    date: showDate ? dateFormatter.format(date) : "",
+    time: timeFormatter.format(date)
+  };
+}
+function WorldClockCard({
+  date,
+  showDate,
+  zone
+}) {
+  const formatted = formatZoneDateTime(zone, date, showDate);
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-[190px] rounded-lg border bg-card px-4 py-3 shadow-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: zone.city }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: formatted.time }),
+    showDate ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: formatted.date }) : null,
+    /* @__PURE__ */ jsx("div", { className: "mt-3 text-[11px] uppercase tracking-[0.16em] text-muted-foreground", children: zone.timeZone })
+  ] });
+}
+const WorldClockBar = React.forwardRef(
+  ({
+    className,
+    now,
+    showDate = true,
+    title = "World clock",
+    updateIntervalMs = 6e4,
+    zones,
+    ...props
+  }, ref) => {
+    const liveNow = useLiveDate(now, updateIntervalMs);
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), ref, ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Synchronized time across distributed teams and regions." })
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+          zones.length,
+          " zones"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-3 overflow-x-auto pb-1", children: zones.map((zone) => /* @__PURE__ */ jsx(
+        WorldClockCard,
+        {
+          date: liveNow,
+          showDate,
+          zone
+        },
+        `${zone.city}-${zone.timeZone}`
+      )) })
+    ] });
+  }
+);
+WorldClockBar.displayName = "WorldClockBar";
+export {
+  WorldClockBar
+};