@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/threshold-ring/threshold-ring.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_STROKE = {
+  danger: "stroke-red-500",
+  neutral: "stroke-foreground",
+  success: "stroke-emerald-500",
+  warn: "stroke-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Threshold ring"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const polar = (input) => {
+  const rad = (input.angle - 90) * (Math.PI / 180);
+  return {
+    x: input.cx + input.r * Math.cos(rad),
+    y: input.cy + input.r * Math.sin(rad)
+  };
+};
+const computeGeometry = (input) => {
+  const safeMax = input.max <= 0 ? 1 : input.max;
+  const ratio = clamp(input.value / safeMax, 0, 1);
+  const cx = input.size / 2;
+  const cy = input.size / 2;
+  const r = (input.size - input.stroke) / 2;
+  const circumference = 2 * Math.PI * r;
+  const tickAngle = input.threshold === void 0 ? null : clamp(input.threshold / safeMax, 0, 1) * 360;
+  return {
+    circumference,
+    cx,
+    cy,
+    r,
+    ratio,
+    size: input.size,
+    stroke: input.stroke,
+    tickAngle
+  };
+};
+const Tick = (props) => {
+  const { geom } = props;
+  if (geom.tickAngle === null) {
+    return null;
+  }
+  const inner = polar({
+    angle: geom.tickAngle,
+    cx: geom.cx,
+    cy: geom.cy,
+    r: geom.r - geom.stroke / 2
+  });
+  const outer = polar({
+    angle: geom.tickAngle,
+    cx: geom.cx,
+    cy: geom.cy,
+    r: geom.r + geom.stroke / 2
+  });
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      className: "stroke-foreground/80",
+      "data-threshold-ring-tick": true,
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      x1: inner.x,
+      x2: outer.x,
+      y1: inner.y,
+      y2: outer.y
+    }
+  );
+};
+const ThresholdRing = forwardRef(
+  (props, ref) => {
+    const {
+      centerLabel,
+      className,
+      labels,
+      max = 1,
+      size = 64,
+      stroke = 6,
+      threshold,
+      tone = "neutral",
+      value,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const geom = computeGeometry({ max, size, stroke, threshold, value });
+    const dash = `${geom.ratio * geom.circumference} ${geom.circumference}`;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("inline-block", className),
+        "data-threshold-ring": true,
+        "data-threshold-tone": tone,
+        height: geom.size,
+        ref,
+        role: "img",
+        viewBox: `0 0 ${geom.size} ${geom.size}`,
+        width: geom.size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "stroke-muted",
+              cx: geom.cx,
+              cy: geom.cy,
+              fill: "none",
+              r: geom.r,
+              strokeWidth: geom.stroke
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("transition-all duration-300", TONE_STROKE[tone]),
+              cx: geom.cx,
+              cy: geom.cy,
+              "data-threshold-ring-arc": true,
+              fill: "none",
+              r: geom.r,
+              strokeDasharray: dash,
+              strokeLinecap: "round",
+              strokeWidth: geom.stroke,
+              transform: `rotate(-90 ${geom.cx} ${geom.cy})`
+            }
+          ),
+          /* @__PURE__ */ jsx(Tick, { geom }),
+          centerLabel ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "fill-foreground text-[10px] font-semibold",
+              "data-threshold-ring-label": true,
+              dominantBaseline: "central",
+              textAnchor: "middle",
+              x: geom.cx,
+              y: geom.cy,
+              children: centerLabel
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThresholdRing.displayName = "ThresholdRing";
+export {
+  ThresholdRing
+};

package/dist/components/timeline/index.js

@@ -0,0 +1,12 @@
+import {
+  Timeline,
+  TimelineItem,
+  timelineVariants,
+  useTimelineOrientation
+} from "./timeline";
+export {
+  Timeline,
+  TimelineItem,
+  timelineVariants,
+  useTimelineOrientation
+};

package/dist/components/timeline/timeline.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const STATUS_CLASSES = {
+  active: {
+    connector: "border-solid border-primary",
+    markerBorder: "border-primary",
+    markerFill: "bg-background ring-2 ring-primary"
+  },
+  completed: {
+    connector: "border-solid border-primary",
+    markerBorder: "border-primary",
+    markerFill: "bg-primary"
+  },
+  upcoming: {
+    connector: "border-dashed border-muted-foreground/40",
+    markerBorder: "border-muted-foreground/40",
+    markerFill: "bg-background"
+  }
+};
+const COLOR_OVERRIDES = {
+  amber: {
+    border: "border-amber-500",
+    fill: "bg-amber-500"
+  },
+  blue: {
+    border: "border-blue-500",
+    fill: "bg-blue-500"
+  },
+  emerald: {
+    border: "border-emerald-500",
+    fill: "bg-emerald-500"
+  },
+  neutral: {
+    border: "border-muted-foreground",
+    fill: "bg-muted-foreground"
+  },
+  purple: {
+    border: "border-purple-500",
+    fill: "bg-purple-500"
+  },
+  red: {
+    border: "border-red-500",
+    fill: "bg-red-500"
+  },
+  rose: {
+    border: "border-rose-500",
+    fill: "bg-rose-500"
+  }
+};
+const TimelineContext = createContext({
+  orientation: "vertical"
+});
+function useTimelineOrientation() {
+  return useContext(TimelineContext).orientation;
+}
+const timelineVariants = cva("flex", {
+  defaultVariants: {
+    orientation: "vertical"
+  },
+  variants: {
+    orientation: {
+      horizontal: "flex-row gap-0 overflow-x-auto",
+      vertical: "flex-col gap-0"
+    }
+  }
+});
+const Timeline = forwardRef(
+  ({ children, className, orientation, ...rest }, ref) => {
+    const resolvedOrientation = orientation ?? "vertical";
+    const contextValue = useMemo(
+      () => ({ orientation: resolvedOrientation }),
+      [resolvedOrientation]
+    );
+    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: cn(timelineVariants({ orientation }), className),
+        "data-orientation": resolvedOrientation,
+        ref,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+Timeline.displayName = "Timeline";
+function Marker({ color, icon, status }) {
+  const palette = STATUS_CLASSES[status];
+  const override = color ? COLOR_OVERRIDES[color] : void 0;
+  const borderClass = override?.border ?? palette.markerBorder;
+  const fillClass = override?.fill ?? palette.markerFill;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "relative z-10 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 bg-background text-[10px]",
+        borderClass
+      ),
+      children: icon ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex h-full w-full items-center justify-center text-foreground [&>svg]:h-3 [&>svg]:w-3",
+            status === "completed" ? "text-primary-foreground" : ""
+          ),
+          children: icon
+        }
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-2.5 w-2.5 rounded-full",
+            override ? fillClass : palette.markerFill
+          )
+        }
+      )
+    }
+  );
+}
+function Connector({ orientation, status }) {
+  const palette = STATUS_CLASSES[status];
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "absolute top-3 h-0 w-full border-t-2",
+          palette.connector
+        ),
+        style: { left: "calc(50% + 0.75rem)" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute left-3 top-6 h-full w-0 -translate-x-1/2 border-l-2",
+        palette.connector
+      )
+    }
+  );
+}
+function ItemBody({
+  children,
+  date,
+  description,
+  orientation,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-col gap-0.5",
+        orientation === "horizontal" ? "items-center text-center" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-wrap items-baseline gap-x-2 gap-y-0.5",
+              orientation === "horizontal" ? "justify-center" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight text-foreground", children: title }),
+              date ? /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-muted-foreground", children: date }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-foreground", children }) : null
+      ]
+    }
+  );
+}
+const TimelineItem = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      color,
+      date,
+      description,
+      icon,
+      isLast = false,
+      status = "upcoming",
+      title,
+      ...rest
+    } = props;
+    const orientation = useTimelineOrientation();
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn(
+          "relative",
+          orientation === "horizontal" ? "flex flex-1 flex-col items-center gap-2 px-3 pt-1" : "flex items-start gap-3 pb-6 last:pb-0",
+          className
+        ),
+        "data-status": status,
+        ref,
+        ...rest,
+        children: [
+          isLast ? null : /* @__PURE__ */ jsx(Connector, { orientation, status }),
+          /* @__PURE__ */ jsx(Marker, { color, icon, status }),
+          /* @__PURE__ */ jsx(
+            ItemBody,
+            {
+              date,
+              description,
+              orientation,
+              title,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+export {
+  Timeline,
+  TimelineItem,
+  timelineVariants,
+  useTimelineOrientation
+};

package/dist/components/timeline-scrubber/index.js

@@ -0,0 +1,6 @@
+import {
+  TimelineScrubber
+} from "./timeline-scrubber";
+export {
+  TimelineScrubber
+};

package/dist/components/timeline-scrubber/timeline-scrubber.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useId
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_FILL = {
+  danger: "bg-red-500",
+  neutral: "bg-foreground",
+  primary: "bg-blue-500",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  region: "Timeline scrubber"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const Labels = (props) => {
+  const fmt = props.formatValue;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("span", { "data-timeline-scrubber-start": true, children: fmt ? fmt(props.start) : props.start }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-semibold text-foreground",
+        "data-timeline-scrubber-cursor": true,
+        children: fmt ? fmt(props.clamped) : props.clamped
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-timeline-scrubber-end": true, children: fmt ? fmt(props.end) : props.end })
+  ] });
+};
+const Track = (props) => /* @__PURE__ */ jsxs("div", { className: "relative h-6", children: [
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full",
+        TONE_FILL[props.tone]
+      ),
+      "data-timeline-scrubber-fill": true,
+      style: { width: `${props.ratio * 100}%` }
+    }
+  ),
+  props.ticks?.map((tick) => /* @__PURE__ */ jsx(
+    TickMark,
+    {
+      scrubberId: props.scrubberId,
+      span: props.span,
+      start: props.start,
+      tick
+    },
+    tick.id
+  )),
+  /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": props.ariaLabel,
+      className: "absolute inset-0 h-full w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-timeline-scrubber-input": true,
+      id: props.inputId,
+      max: props.max,
+      min: props.min,
+      onChange: props.onChange,
+      step: props.step,
+      type: "range",
+      value: props.value
+    }
+  )
+] });
+const TickMark = (props) => {
+  const { scrubberId, span, start, tick } = props;
+  const ratio = clamp((tick.value - start) / span, 0, 1);
+  const tone = tick.tone ?? "neutral";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "absolute top-1/2 h-2.5 w-px -translate-y-1/2 rounded-full",
+        TONE_FILL[tone]
+      ),
+      "data-scrubber-tick": tick.id,
+      "data-scrubber-tick-of": scrubberId,
+      "data-scrubber-tick-tone": tone,
+      style: { left: `${ratio * 100}%` },
+      title: typeof tick.label === "string" ? tick.label : void 0
+    }
+  );
+};
+const TimelineScrubber = forwardRef((props, ref) => {
+  const {
+    className,
+    end,
+    formatValue,
+    labels,
+    onValueChange,
+    start,
+    step = 1,
+    ticks,
+    tone = "primary",
+    value,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inputId = useId();
+  const safeEnd = end <= start ? start + 1 : end;
+  const span = safeEnd - start;
+  const clamped = clamp(value, start, safeEnd);
+  const ratio = clamp((clamped - start) / span, 0, 1);
+  const handleChange = (event) => {
+    onValueChange(clamp(Number(event.target.value), start, safeEnd));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 text-[11px] text-muted-foreground",
+        className
+      ),
+      "data-timeline-scrubber": true,
+      "data-timeline-tone": tone,
+      ref,
+      role: "group",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Labels,
+          {
+            clamped,
+            end: safeEnd,
+            formatValue,
+            start
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Track,
+          {
+            ariaLabel: resolvedLabels.region,
+            inputId,
+            max: safeEnd,
+            min: start,
+            onChange: handleChange,
+            ratio,
+            scrubberId: inputId,
+            span,
+            start,
+            step,
+            ticks,
+            tone,
+            value: clamped
+          }
+        )
+      ]
+    }
+  );
+});
+TimelineScrubber.displayName = "TimelineScrubber";
+export {
+  TimelineScrubber
+};

package/dist/components/top-bar/index.js

@@ -0,0 +1,4 @@
+import { TopBar } from "./top-bar";
+export {
+  TopBar
+};

package/dist/components/top-bar/top-bar.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const TopBar = forwardRef(
+  ({ children, className, leading, subtitle, title, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
+          title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title ? /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground", children: title }) : null,
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: subtitle }) : null
+          ] }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+TopBar.displayName = "TopBar";
+export {
+  TopBar
+};

package/dist/components/transaction-list/index.js

@@ -0,0 +1,14 @@
+import {
+  formatTransactionAmount,
+  formatTransactionDate,
+  TransactionList,
+  TransactionListPinned,
+  TransactionListSubscriptionRow
+} from "./transaction-list";
+export {
+  TransactionList,
+  TransactionListPinned,
+  TransactionListSubscriptionRow,
+  formatTransactionAmount,
+  formatTransactionDate
+};