@vllnt/ui 0.1.11 → 0.2.0

package/dist/components/order-book/index.js

@@ -0,0 +1,6 @@
+import {
+  OrderBook
+} from "./order-book";
+export {
+  OrderBook
+};

package/dist/components/order-book/order-book.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function withCumulativeTotal(levels) {
+  let runningTotal = 0;
+  return levels.map((level) => {
+    runningTotal += level.total ?? level.size;
+    return {
+      ...level,
+      total: level.total ?? runningTotal
+    };
+  });
+}
+function formatNumber(value, precision = 2) {
+  return value.toLocaleString(void 0, {
+    maximumFractionDigits: precision,
+    minimumFractionDigits: precision
+  });
+}
+function BookSide({
+  accent,
+  levels,
+  precision,
+  title
+}) {
+  const maxTotal = Math.max(...levels.map((level) => level.total ?? 0), 1);
+  const barClassName = accent === "ask" ? "bg-rose-500/12 border-rose-500/15" : "bg-emerald-500/12 border-emerald-500/15";
+  const priceClassName = accent === "ask" ? "text-rose-600 dark:text-rose-400" : "text-emerald-600 dark:text-emerald-400";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground", children: title }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Depth by total size" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border/70 bg-background/60 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.2fr_1fr_1fr] gap-3 px-3 py-2 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: "Price" }),
+        /* @__PURE__ */ jsx("span", { className: "text-right", children: "Size" }),
+        /* @__PURE__ */ jsx("span", { className: "text-right", children: "Total" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: levels.map((level) => {
+        const width = `${(level.total ?? 0) / maxTotal * 100}%`;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative overflow-hidden rounded-xl border border-transparent px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-y-0 right-0 rounded-xl border",
+                    barClassName
+                  ),
+                  style: { width }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-[1.2fr_1fr_1fr] gap-3 text-sm tabular-nums", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("font-medium", priceClassName), children: formatNumber(level.price, precision) }),
+                /* @__PURE__ */ jsx("span", { className: "text-right text-foreground", children: formatNumber(level.size, 3) }),
+                /* @__PURE__ */ jsx("span", { className: "text-right text-muted-foreground", children: formatNumber(level.total ?? 0, 3) })
+              ] })
+            ]
+          },
+          `${accent}-${level.price}-${level.size}`
+        );
+      }) })
+    ] })
+  ] });
+}
+const OrderBook = React.forwardRef(
+  ({ asks, bids, className, precision = 2, ...props }, reference) => {
+    if (asks.length === 0 && bids.length === 0) {
+      return null;
+    }
+    const askLevels = withCumulativeTotal(asks);
+    const bidLevels = withCumulativeTotal(bids);
+    const bestAsk = askLevels[0];
+    const bestBid = bidLevels[0];
+    const spread = bestAsk && bestBid ? Math.max(bestAsk.price - bestBid.price, 0) : 0;
+    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: "Level II" }),
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Order book" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums", children: [
+              "Spread ",
+              formatNumber(spread, precision)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(
+              BookSide,
+              {
+                accent: "ask",
+                levels: askLevels,
+                precision,
+                title: "Asks"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              BookSide,
+              {
+                accent: "bid",
+                levels: bidLevels,
+                precision,
+                title: "Bids"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+OrderBook.displayName = "OrderBook";
+export {
+  OrderBook
+};

package/dist/components/password-input/index.js

@@ -0,0 +1,4 @@
+import { PasswordInput } from "./password-input";
+export {
+  PasswordInput
+};

package/dist/components/password-input/password-input.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/utils";
+const PasswordInput = React.forwardRef(
+  ({
+    className,
+    hideLabel = "Hide password",
+    showLabel = "Show password",
+    ...props
+  }, reference) => {
+    const [visible, setVisible] = React.useState(false);
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            className
+          ),
+          ref: reference,
+          type: visible ? "text" : "password",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": visible ? hideLabel : showLabel,
+          className: "absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground",
+          onClick: () => {
+            setVisible((previous) => !previous);
+          },
+          type: "button",
+          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+        }
+      )
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+export {
+  PasswordInput
+};

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

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

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

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { badgeVariants } from "../badge/badge";
+function getPlanLabel(tier) {
+  switch (tier) {
+    case "enterprise":
+      return "Enterprise";
+    case "free":
+      return "Free";
+    case "growth":
+      return "Growth";
+    case "starter":
+      return "Starter";
+  }
+}
+function getPlanClasses(tier, state) {
+  if (state === "legacy") {
+    return "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300";
+  }
+  if (state === "trial") {
+    return "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300";
+  }
+  switch (tier) {
+    case "enterprise":
+      return "border-primary/30 bg-primary/10 text-primary";
+    case "free":
+      return "border-border bg-muted text-muted-foreground";
+    case "growth":
+      return "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300";
+    case "starter":
+      return "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300";
+  }
+}
+const PlanBadge = React.forwardRef(
+  ({ className, label, state = "current", tier, ...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 tracking-[0.02em] shadow-none",
+          getPlanClasses(tier, state),
+          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: label ?? getPlanLabel(tier) }),
+          state === "trial" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Trial" }) : null,
+          state === "legacy" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Legacy" }) : null
+        ]
+      }
+    );
+  }
+);
+PlanBadge.displayName = "PlanBadge";
+export {
+  PlanBadge
+};

package/dist/components/rating/index.js

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

package/dist/components/rating/rating.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Star } from "lucide-react";
+import { cn } from "../../lib/utils";
+const sizeClasses = {
+  lg: "h-6 w-6",
+  md: "h-5 w-5",
+  sm: "h-4 w-4"
+};
+function RatingStars({
+  activeValue,
+  hoveredValue,
+  label,
+  max,
+  onHoverChange,
+  onSelect,
+  readOnly,
+  size
+}) {
+  const stars = useMemo(
+    () => Array.from({ length: max }, (_, index) => index + 1),
+    [max]
+  );
+  const displayValue = hoveredValue || activeValue;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: "inline-flex items-center gap-1",
+      role: "radiogroup",
+      children: stars.map((starValue) => {
+        const isFilled = starValue <= displayValue;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-checked": activeValue === starValue,
+            "aria-label": `${starValue} ${starValue === 1 ? "star" : "stars"}`,
+            className: cn(
+              "rounded-sm text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              !readOnly && "hover:text-amber-500",
+              isFilled && "text-amber-500"
+            ),
+            disabled: readOnly,
+            onBlur: () => {
+              onHoverChange(0);
+            },
+            onClick: () => {
+              onSelect(starValue);
+            },
+            onMouseEnter: () => {
+              if (!readOnly) {
+                onHoverChange(starValue);
+              }
+            },
+            onMouseLeave: () => {
+              onHoverChange(0);
+            },
+            role: "radio",
+            type: "button",
+            children: /* @__PURE__ */ jsx(
+              Star,
+              {
+                className: cn(sizeClasses[size], isFilled && "fill-current"),
+                strokeWidth: 1.75
+              }
+            )
+          },
+          starValue
+        );
+      })
+    }
+  );
+}
+function Rating({
+  allowClear = false,
+  className,
+  defaultValue = 0,
+  label = "Rating",
+  max = 5,
+  onValueChange,
+  readOnly = false,
+  showValue = false,
+  size = "md",
+  value
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [hoveredValue, setHoveredValue] = useState(0);
+  const activeValue = isControlled ? value ?? 0 : internalValue;
+  const handleSelect = (nextValue) => {
+    const resolvedValue = allowClear && activeValue === nextValue ? 0 : nextValue;
+    if (!isControlled) {
+      setInternalValue(resolvedValue);
+    }
+    onValueChange?.(resolvedValue);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("inline-flex flex-col gap-2", className), children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      RatingStars,
+      {
+        activeValue,
+        hoveredValue,
+        label,
+        max,
+        onHoverChange: setHoveredValue,
+        onSelect: handleSelect,
+        readOnly,
+        size
+      }
+    ),
+    showValue ? /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+      activeValue,
+      "/",
+      max
+    ] }) : null
+  ] }) });
+}
+export {
+  Rating
+};

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

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

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

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { badgeVariants } from "../badge/badge";
+function getRoleLabel(accountRole) {
+  switch (accountRole) {
+    case "admin":
+      return "Admin";
+    case "billing":
+      return "Billing";
+    case "member":
+      return "Member";
+    case "owner":
+      return "Owner";
+  }
+}
+function getRoleClasses(accountRole) {
+  switch (accountRole) {
+    case "admin":
+      return "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300";
+    case "billing":
+      return "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300";
+    case "member":
+      return "border-border bg-muted text-muted-foreground";
+    case "owner":
+      return "border-primary/30 bg-primary/10 text-primary";
+  }
+}
+const RoleBadge = React.forwardRef(
+  ({ accountRole, className, label, ...props }, reference) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          badgeVariants({ variant: "outline" }),
+          "rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none",
+          getRoleClasses(accountRole),
+          className
+        ),
+        ref: reference,
+        ...props,
+        children: label ?? getRoleLabel(accountRole)
+      }
+    );
+  }
+);
+RoleBadge.displayName = "RoleBadge";
+export {
+  RoleBadge
+};

package/dist/components/scope-selector/index.js

@@ -0,0 +1,6 @@
+import {
+  ScopeSelector
+} from "./scope-selector";
+export {
+  ScopeSelector
+};