@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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 size-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(
+            "size-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 handleScrubberValueChange = (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: handleScrubberValueChange,
+            ratio,
+            scrubberId: inputId,
+            span,
+            start,
+            step,
+            ticks,
+            tone,
+            value: clamped
+          }
+        )
+      ]
+    }
+  );
+});
+TimelineScrubber.displayName = "TimelineScrubber";
+export {
+  TimelineScrubber
+};

package/dist/components/tldr-section/tldr-section.js

@@ -3,20 +3,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 function TLDRSection({ children, label }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [showSkeleton, setShowSkeleton] = useState(false);
+  const hasBeenOpenedRef = useRef(false);
   const timerReference = useRef(null);
   useEffect(() => {
-    if (isExpanded && !hasBeenOpened) {
+    if (isExpanded && !hasBeenOpenedRef.current) {
       if (timerReference.current) {
         clearTimeout(timerReference.current);
       }
       const rafId = requestAnimationFrame(() => {
-        setIsLoading(true);
-        setHasBeenOpened(true);
+        setShowSkeleton(true);
+        hasBeenOpenedRef.current = true;
       });
       timerReference.current = setTimeout(() => {
-        setIsLoading(false);
+        setShowSkeleton(false);
         timerReference.current = null;
       }, 800);
       return () => {
@@ -25,6 +25,7 @@ function TLDRSection({ children, label }) {
           clearTimeout(timerReference.current);
           timerReference.current = null;
         }
+        setShowSkeleton(false);
       };
     }
     return () => {
@@ -32,6 +33,7 @@ function TLDRSection({ children, label }) {
         clearTimeout(timerReference.current);
         timerReference.current = null;
       }
+      setShowSkeleton(false);
     };
   }, [isExpanded]);
   return /* @__PURE__ */ jsxs("div", { className: "my-8 rounded-lg border border-border bg-muted/30 overflow-hidden", children: [
@@ -48,7 +50,7 @@ function TLDRSection({ children, label }) {
             /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "w-5 h-5 text-muted-foreground",
+                className: "size-5 text-muted-foreground",
                 fill: "none",
                 stroke: "currentColor",
                 strokeWidth: "2",
@@ -69,7 +71,7 @@ function TLDRSection({ children, label }) {
           /* @__PURE__ */ jsx(
             "svg",
             {
-              className: `w-4 h-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`,
+              className: `size-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`,
               fill: "none",
               stroke: "currentColor",
               strokeWidth: "2",
@@ -88,7 +90,7 @@ function TLDRSection({ children, label }) {
         ]
       }
     ),
-    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    isExpanded ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 pt-2 border-t border-border", children: showSkeleton ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-5/6", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),
       /* @__PURE__ */ jsx("div", { className: "relative h-4 bg-muted/50 rounded overflow-hidden w-4/5", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer" }) }),

package/dist/components/toolbar/index.js

@@ -0,0 +1,8 @@
+import {
+  Toolbar,
+  ToolbarSeparator
+} from "./toolbar";
+export {
+  Toolbar,
+  ToolbarSeparator
+};

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+const Toolbar = forwardRef(
+  ({ className, onKeyDown, orientation = "horizontal", ...props }, ref) => {
+    function handleKeyDown(event) {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+      const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      const isNext = event.key === nextKey;
+      const isPrevious = event.key === previousKey;
+      const isHome = event.key === "Home";
+      const isEnd = event.key === "End";
+      if (!isNext && !isPrevious && !isHome && !isEnd) return;
+      const items = [
+        ...event.currentTarget.querySelectorAll(
+          FOCUSABLE_SELECTOR
+        )
+      ];
+      if (items.length === 0) return;
+      event.preventDefault();
+      const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const currentIndex = active ? items.indexOf(active) : -1;
+      let nextIndex = 0;
+      if (isHome) {
+        nextIndex = 0;
+      } else if (isEnd) {
+        nextIndex = items.length - 1;
+      } else if (isNext) {
+        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-orientation": orientation,
+        className: cn(
+          "flex items-center gap-1 rounded-md border border-border bg-background p-1",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        ref,
+        role: "toolbar",
+        ...props
+      }
+    );
+  }
+);
+Toolbar.displayName = "Toolbar";
+const ToolbarSeparator = forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "vertical" ? "mx-1 h-6 w-px" : "my-1 h-px w-full",
+        className
+      ),
+      ref,
+      role: "separator",
+      ...props
+    }
+  )
+);
+ToolbarSeparator.displayName = "ToolbarSeparator";
+export {
+  Toolbar,
+  ToolbarSeparator
+};

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/tour/tour.js

@@ -2,9 +2,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
-import { Button } from "../button";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "../card/card";
 function TourHeader({
   progress,
   step,
@@ -60,7 +66,7 @@ function TourFooter({
       {
         "aria-label": `Go to ${step.title}`,
         className: cn(
-          "h-2.5 w-2.5 rounded-full transition-colors",
+          "size-2.5 rounded-full transition-colors",
           index === currentStep ? "bg-primary" : "bg-muted-foreground/30"
         ),
         onClick: () => {

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
+};