@vllnt/ui 0.1.11 → 0.2.0

package/dist/components/market-treemap/market-treemap.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+function getSpan(value, maxValue) {
+  const normalized = value / Math.max(maxValue, 1);
+  if (normalized >= 0.7) {
+    return "md:col-span-2 md:row-span-2";
+  }
+  if (normalized >= 0.4) {
+    return "md:col-span-2";
+  }
+  return "";
+}
+function getTone(change) {
+  const isPositive = change >= 0;
+  return {
+    isPositive,
+    tileClassName: isPositive ? "border-emerald-500/30 bg-emerald-500/10" : "border-rose-500/30 bg-rose-500/10",
+    trendClassName: isPositive ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400"
+  };
+}
+function MarketTreemapTile({
+  item,
+  maxValue
+}) {
+  const tone = getTone(item.change);
+  const TrendIcon = tone.isPositive ? ArrowUpRight : ArrowDownRight;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "flex min-h-[120px] flex-col justify-between rounded-2xl border p-4 transition-transform duration-200 hover:-translate-y-0.5",
+        tone.tileClassName,
+        getSpan(item.value, maxValue)
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: item.sector ?? "Market" }),
+            /* @__PURE__ */ jsx("h3", { className: "mt-1 text-xl font-semibold text-foreground", children: item.label })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "inline-flex items-center gap-1 text-sm font-medium",
+                tone.trendClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(TrendIcon, { className: "h-4 w-4" }),
+                item.change > 0 ? "+" : "",
+                item.change.toFixed(2),
+                "%"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Weight ",
+            item.value.toLocaleString()
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "rounded-full bg-background/70 px-2 py-1 text-xs uppercase tracking-[0.2em] text-foreground", children: tone.isPositive ? "Advancing" : "Declining" })
+        ] })
+      ]
+    }
+  );
+}
+const MarketTreemap = React.forwardRef(({ className, items, ...props }, reference) => {
+  if (items.length === 0) {
+    return null;
+  }
+  const maxValue = Math.max(...items.map((item) => item.value));
+  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-center 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: "Sector heatmap" }),
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Market treemap" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Tile size maps market cap proxy; color reflects session change." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid auto-rows-[120px] grid-cols-1 gap-3 md:auto-rows-[120px] md:grid-cols-4", children: items.map((item) => /* @__PURE__ */ jsx(MarketTreemapTile, { item, maxValue }, item.label)) })
+      ]
+    }
+  );
+});
+MarketTreemap.displayName = "MarketTreemap";
+export {
+  MarketTreemap
+};

package/dist/components/marquee/index.js

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

package/dist/components/marquee/marquee.js

@@ -0,0 +1,98 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function getGapValue(gap) {
+  return typeof gap === "number" ? `${gap}px` : gap;
+}
+function getMaskImage(vertical) {
+  return vertical ? "linear-gradient(to bottom, transparent, black 12%, black 88%, transparent)" : "linear-gradient(to right, transparent, black 12%, black 88%, transparent)";
+}
+function getTrackItems(children, repeat) {
+  const items = React.Children.toArray(children);
+  return Array.from(
+    { length: Math.max(1, repeat) },
+    (_, copyIndex) => items.map((item, itemIndex) => /* @__PURE__ */ jsx("div", { className: "shrink-0", children: item }, `${copyIndex}-${itemIndex}`))
+  ).flat();
+}
+function getDuration(duration, speed) {
+  if (duration !== void 0) {
+    return duration;
+  }
+  switch (speed) {
+    case "fast":
+      return 10;
+    case "normal":
+      return 20;
+    case "slow":
+      return 32;
+  }
+}
+const Marquee = React.forwardRef(
+  ({
+    children,
+    className,
+    duration,
+    fade = true,
+    gap = "1rem",
+    pauseOnHover = false,
+    repeat = 1,
+    reverse = false,
+    speed = "normal",
+    style,
+    vertical = false,
+    ...props
+  }, ref) => {
+    const resolvedGap = getGapValue(gap);
+    const resolvedDuration = getDuration(duration, speed);
+    const trackItems = getTrackItems(children, repeat);
+    const animationStyle = {
+      animationDirection: reverse ? "reverse" : "normal",
+      animationDuration: `${resolvedDuration}s`,
+      animationIterationCount: "infinite",
+      animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
+      animationTimingFunction: "linear"
+    };
+    const maskImage = getMaskImage(vertical);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "group relative overflow-hidden",
+          vertical ? "flex h-full flex-col" : "flex w-full flex-row",
+          className
+        ),
+        ref,
+        style: fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
+              pauseOnHover && "group-hover:[animation-play-state:paused]",
+              vertical ? "min-h-full flex-col" : "min-w-full flex-row"
+            ),
+            style: animationStyle,
+            children: [0, 1].map((groupIndex) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": groupIndex === 1,
+                className: cn(
+                  "flex shrink-0",
+                  vertical ? "flex-col items-stretch" : "flex-row items-center"
+                ),
+                style: { gap: resolvedGap },
+                children: trackItems
+              },
+              groupIndex
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+export {
+  Marquee
+};

package/dist/components/metric-gauge/index.js

@@ -0,0 +1,6 @@
+import {
+  MetricGauge
+} from "./metric-gauge";
+export {
+  MetricGauge
+};

package/dist/components/metric-gauge/metric-gauge.js

@@ -0,0 +1,213 @@
+import { Fragment, 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 DEFAULT_THRESHOLDS = [
+  { colorClassName: "text-emerald-500", label: "Nominal", value: 60 },
+  { colorClassName: "text-amber-500", label: "Elevated", value: 85 },
+  { colorClassName: "text-destructive", label: "Critical", value: 100 }
+];
+const GAUGE_CENTER = { x: 100, y: 100 };
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function polarToCartesian(radius, angle, center) {
+  const radians = (angle - 90) * Math.PI / 180;
+  return {
+    x: center.x + radius * Math.cos(radians),
+    y: center.y + radius * Math.sin(radians)
+  };
+}
+function describeArc(radius, angles, center) {
+  const start = polarToCartesian(radius, angles.end, center);
+  const end = polarToCartesian(radius, angles.start, center);
+  const largeArcFlag = angles.end - angles.start <= 180 ? 0 : 1;
+  return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`;
+}
+function formatMetricValue(value, unit) {
+  const rounded = Number.isInteger(value) ? value.toString() : value.toFixed(1);
+  return unit ? `${rounded}${unit}` : rounded;
+}
+function getActiveThreshold(percent, thresholds) {
+  return thresholds.find((threshold) => percent <= threshold.value) ?? thresholds.at(-1);
+}
+function GaugeDialSvg({
+  activeThreshold,
+  endAngle,
+  label
+}) {
+  const gaugePath = describeArc(72, { end: 90, start: -90 }, GAUGE_CENTER);
+  const activePath = describeArc(
+    72,
+    { end: endAngle, start: -90 },
+    GAUGE_CENTER
+  );
+  const needlePoint = polarToCartesian(60, endAngle, GAUGE_CENTER);
+  return /* @__PURE__ */ jsxs("svg", { "aria-label": label, className: "h-auto w-full", viewBox: "0 0 200 128", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: gaugePath,
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeOpacity: "0.12",
+        strokeWidth: "14"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: cn(activeThreshold.colorClassName),
+        d: activePath,
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeWidth: "14"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        className: cn(activeThreshold.colorClassName),
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeWidth: "4",
+        x1: GAUGE_CENTER.x,
+        x2: needlePoint.x,
+        y1: GAUGE_CENTER.y,
+        y2: needlePoint.y
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: "fill-background stroke-border",
+        cx: GAUGE_CENTER.x,
+        cy: GAUGE_CENTER.y,
+        r: "8"
+      }
+    )
+  ] });
+}
+function GaugeDial({
+  activeThreshold,
+  endAngle,
+  label,
+  max,
+  min,
+  percent,
+  safeValue,
+  unit
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto w-full max-w-[280px]", children: [
+      /* @__PURE__ */ jsx(
+        GaugeDialSvg,
+        {
+          activeThreshold,
+          endAngle,
+          label
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 top-12 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight", children: formatMetricValue(safeValue, unit) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+          "Range ",
+          formatMetricValue(min, unit),
+          "\u2013",
+          formatMetricValue(max, unit)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: formatMetricValue(min, unit) }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        Math.round(percent),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: formatMetricValue(max, unit) })
+    ] })
+  ] });
+}
+function GaugeLegend({ thresholds }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: thresholds.map((threshold) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-2 rounded-md border px-2.5 py-1 text-xs",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "h-2 w-2 rounded-full bg-current",
+              threshold.colorClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: threshold.label }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          "\u2264 ",
+          threshold.value,
+          "%"
+        ] })
+      ]
+    },
+    `${threshold.label}-${threshold.value}`
+  )) });
+}
+const MetricGauge = React.forwardRef(
+  ({
+    className,
+    description,
+    label,
+    max,
+    min = 0,
+    thresholds = DEFAULT_THRESHOLDS,
+    unit,
+    value,
+    ...props
+  }, ref) => {
+    const safeValue = clamp(value, min, max);
+    const percent = max === min ? 0 : (safeValue - min) / (max - min) * 100;
+    const endAngle = -90 + 180 * (percent / 100);
+    const activeThreshold = getActiveThreshold(percent, thresholds);
+    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-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: label }),
+          description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+        ] }),
+        activeThreshold ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: activeThreshold.label }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        activeThreshold ? /* @__PURE__ */ jsx(
+          GaugeDial,
+          {
+            activeThreshold,
+            endAngle,
+            label,
+            max,
+            min,
+            percent,
+            safeValue,
+            unit
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(GaugeLegend, { thresholds })
+      ] })
+    ] });
+  }
+);
+MetricGauge.displayName = "MetricGauge";
+export {
+  MetricGauge
+};

package/dist/components/model-selector/model-selector.js

@@ -12,7 +12,13 @@ import {
   CommandItem,
   CommandList
 } from "../command";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -346,7 +352,10 @@ function ModelSelector(props) {
     sortBy
   } = useModelSelectorState(props);
   return /* @__PURE__ */ jsx(Dialog, { onOpenChange: handleClose, open: props.open, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
-    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Select Model" }) }),
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Select Model" }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "Search, filter, and select an AI model" })
+    ] }),
     /* @__PURE__ */ jsx(
       ModelSelectorFilters,
       {

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

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

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

@@ -0,0 +1,167 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+function getNumericBound(bound) {
+  if (bound === void 0) {
+    return;
+  }
+  const parsedBound = Number(bound);
+  return Number.isNaN(parsedBound) ? void 0 : parsedBound;
+}
+function useNumberInputState(controlledValue, defaultValue, onValueChange) {
+  const [internalValue, setInternalValue] = React.useState(
+    defaultValue
+  );
+  const resolvedValue = controlledValue ?? internalValue;
+  const commitValue = (nextValue) => {
+    if (controlledValue === void 0) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  return { commitValue, resolvedValue };
+}
+function clampNumber(nextValue, min, max) {
+  let result = nextValue;
+  if (min !== void 0) {
+    result = Math.max(min, result);
+  }
+  if (max !== void 0) {
+    result = Math.min(max, result);
+  }
+  return result;
+}
+function StepButton({
+  direction,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "h-full px-3",
+        direction === "decrement" ? "rounded-r-none border-r" : "rounded-l-none border-l"
+      ),
+      disabled,
+      onClick,
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      children: direction === "decrement" ? /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+    }
+  );
+}
+function NumberInputField({
+  disabled,
+  onValueChange,
+  placeholder,
+  reference,
+  resolvedValue,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      className: "h-full w-full border-0 bg-transparent px-3 text-center text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+      disabled,
+      inputMode: "decimal",
+      onChange: (event) => {
+        if (event.target.value === "") {
+          onValueChange();
+          return;
+        }
+        const parsedValue = Number(event.target.value);
+        if (!Number.isNaN(parsedValue)) {
+          onValueChange(parsedValue);
+        }
+      },
+      placeholder,
+      ref: reference,
+      type: "number",
+      value: resolvedValue ?? ""
+    }
+  );
+}
+function NumberInputComponent({
+  className,
+  defaultValue,
+  disabled,
+  max,
+  min,
+  onValueChange,
+  placeholder,
+  step = 1,
+  value,
+  ...props
+}, reference) {
+  const { commitValue, resolvedValue } = useNumberInputState(
+    value,
+    defaultValue,
+    onValueChange
+  );
+  const parsedMin = getNumericBound(min);
+  const parsedMax = getNumericBound(max);
+  const handleStepChange = (direction) => {
+    const baseValue = resolvedValue ?? parsedMin ?? 0;
+    commitValue(
+      clampNumber(baseValue + direction * step, parsedMin, parsedMax)
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-10 w-full items-center rounded-md border border-input bg-background ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          StepButton,
+          {
+            direction: "decrement",
+            disabled,
+            onClick: () => {
+              handleStepChange(-1);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberInputField,
+          {
+            ...props,
+            disabled,
+            onValueChange: (nextValue) => {
+              commitValue(
+                nextValue === void 0 ? void 0 : clampNumber(nextValue, parsedMin, parsedMax)
+              );
+            },
+            placeholder,
+            reference,
+            resolvedValue
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StepButton,
+          {
+            direction: "increment",
+            disabled,
+            onClick: () => {
+              handleStepChange(1);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const NumberInput = React.forwardRef(NumberInputComponent);
+NumberInput.displayName = "NumberInput";
+export {
+  NumberInput
+};

package/dist/components/number-ticker/index.js

@@ -0,0 +1,4 @@
+import { NumberTicker } from "./number-ticker";
+export {
+  NumberTicker
+};

package/dist/components/number-ticker/number-ticker.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const NumberTicker = React.forwardRef(
+  ({
+    className,
+    delay = 0,
+    duration = 1.2,
+    formatOptions,
+    from = 0,
+    locale,
+    value,
+    ...props
+  }, ref) => {
+    const [currentValue, setCurrentValue] = React.useState(from);
+    React.useEffect(() => {
+      const reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reducedMotion || duration <= 0) {
+        setCurrentValue(value);
+        return;
+      }
+      let animationFrame = 0;
+      let timeoutId = 0;
+      const startDelay = Math.max(0, delay * 1e3);
+      const durationMs = duration * 1e3;
+      timeoutId = window.setTimeout(() => {
+        const startTime = performance.now();
+        const tick = (timestamp) => {
+          const elapsed = timestamp - startTime;
+          const progress = Math.min(elapsed / durationMs, 1);
+          const nextValue = from + (value - from) * progress;
+          setCurrentValue(nextValue);
+          if (progress < 1) {
+            animationFrame = window.requestAnimationFrame(tick);
+          }
+        };
+        animationFrame = window.requestAnimationFrame(tick);
+      }, startDelay);
+      return () => {
+        window.clearTimeout(timeoutId);
+        window.cancelAnimationFrame(animationFrame);
+      };
+    }, [delay, duration, from, value]);
+    const formatter = React.useMemo(
+      () => new Intl.NumberFormat(locale, formatOptions),
+      [formatOptions, locale]
+    );
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("tabular-nums tracking-tight", className),
+        ref,
+        ...props,
+        children: formatter.format(currentValue)
+      }
+    );
+  }
+);
+NumberTicker.displayName = "NumberTicker";
+export {
+  NumberTicker
+};