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

package/dist/components/blur-reveal/blur-reveal.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function useInView() {
+  const elementRef = React.useRef(null);
+  const [inView, setInView] = React.useState(false);
+  React.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || typeof IntersectionObserver !== "function") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry?.isIntersecting) {
+        setInView(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return [elementRef, inView];
+}
+const BlurReveal = React.forwardRef(
+  ({ children, className, delay = 0, style, ...props }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const [elementRef, inView] = useInView();
+    const revealed = reduced || inView;
+    const setReferences = (node) => {
+      elementRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "transition-all duration-700",
+          revealed ? "opacity-100 [filter:blur(0)]" : "opacity-0 [filter:blur(12px)]",
+          className
+        ),
+        ref: setReferences,
+        style: { transitionDelay: `${delay}ms`, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+BlurReveal.displayName = "BlurReveal";
+export {
+  BlurReveal
+};

package/dist/components/blur-reveal/index.js

@@ -0,0 +1,4 @@
+import { BlurReveal } from "./blur-reveal";
+export {
+  BlurReveal
+};

package/dist/components/border-beam/border-beam.js

@@ -5,8 +5,8 @@ const BorderBeam = React.forwardRef(
   ({
     borderWidth = 1,
     className,
-    colorFrom = "hsl(var(--primary) / 0.85)",
-    colorTo = "hsl(var(--ring) / 0.25)",
+    colorFrom = "oklch(var(--primary) / 0.85)",
+    colorTo = "oklch(var(--ring) / 0.25)",
     delay = 0,
     duration = 6,
     reverse = false,

package/dist/components/bottom-activity-strip/bottom-activity-strip.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const DEFAULT_LABELS = {
+  empty: "No recent activity",
+  region: "Recent activity"
+};
+const ChipBody = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("size-1.5 rounded-full", TONE_DOT[tone])
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: event.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", "data-strip-event-ts": true, children: event.ts })
+  ] });
+};
+const Chip = (props) => {
+  const { event } = props;
+  const tone = event.tone ?? "neutral";
+  if (event.onActivate) {
+    const handleActivateEvent = () => {
+      event.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-strip-event": event.id,
+        "data-strip-event-tone": tone,
+        onClick: handleActivateEvent,
+        type: "button",
+        children: /* @__PURE__ */ jsx(ChipBody, { event })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "flex items-center rounded-full border border-border bg-background px-2 py-1 text-[11px]",
+      "data-strip-event": event.id,
+      "data-strip-event-tone": tone,
+      children: /* @__PURE__ */ jsx(ChipBody, { event })
+    }
+  );
+};
+const BottomActivityStrip = forwardRef((props, ref) => {
+  const { className, events, labels, maxEvents, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const visible = maxEvents === void 0 || maxEvents >= events.length ? events : events.slice(0, maxEvents);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full items-center gap-2 overflow-x-auto rounded-md border border-border bg-background/90 px-2 py-1 text-foreground",
+        className
+      ),
+      "data-bottom-activity-strip": true,
+      ref,
+      ...rest,
+      children: visible.length === 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "px-2 text-[11px] text-muted-foreground",
+          "data-strip-state": "empty",
+          children: resolvedLabels.empty
+        }
+      ) : visible.map((event) => /* @__PURE__ */ jsx(Chip, { event }, event.id))
+    }
+  );
+});
+BottomActivityStrip.displayName = "BottomActivityStrip";
+export {
+  BottomActivityStrip
+};

package/dist/components/bottom-activity-strip/index.js

@@ -0,0 +1,6 @@
+import {
+  BottomActivityStrip
+} from "./bottom-activity-strip";
+export {
+  BottomActivityStrip
+};

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

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const BottomBar = forwardRef(
+  ({ center, className, leading, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
+        center ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center gap-2", children: center }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+      ]
+    }
+  )
+);
+BottomBar.displayName = "BottomBar";
+export {
+  BottomBar
+};

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

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

package/dist/components/breadcrumb/breadcrumb.js

@@ -20,39 +20,46 @@ function Breadcrumb({
     {
       "aria-label": "Breadcrumb",
       className: cn("flex items-center space-x-1 text-sm", className),
-      children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
-        item.href ? /* @__PURE__ */ jsxs(
-          Link,
-          {
-            className: "flex items-center gap-1 hover:text-foreground transition-colors",
-            href: item.href,
-            children: [
+      children: items.map((item, index) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center",
+          children: [
+            index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
+            item.href ? /* @__PURE__ */ jsxs(
+              Link,
+              {
+                className: "flex items-center gap-1 hover:text-foreground transition-colors",
+                href: item.href,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        // Truncate plain string labels; custom React elements handle their own overflow
+                        typeof item.label === "string" && "truncate",
+                        variant === "minimal" ? "text-muted-foreground" : "text-foreground"
+                      ),
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
               item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: cn(
-                    // Truncate plain string labels; custom React elements handle their own overflow
-                    typeof item.label === "string" && "truncate",
-                    variant === "minimal" ? "text-muted-foreground" : "text-foreground"
-                  ),
+                  className: cn(typeof item.label === "string" && "truncate"),
                   children: item.label
                 }
               )
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-          item.icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.icon }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(typeof item.label === "string" && "truncate"),
-              children: item.label
-            }
-          )
-        ] })
-      ] }, index))
+            ] })
+          ]
+        },
+        typeof item.label === "string" ? item.label : `breadcrumb-${index}`
+      ))
     }
   );
 }

package/dist/components/button/button.js

@@ -13,7 +13,7 @@ const buttonVariants = cva(
     variants: {
       size: {
         default: "h-10 px-4 py-2",
-        icon: "h-10 w-10",
+        icon: "size-10",
         lg: "h-11 rounded-md px-8",
         sm: "h-9 rounded-md px-3"
       },

package/dist/components/button-group/button-group.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const buttonGroupVariants = cva(
+  "isolate inline-flex w-fit [&>*:focus-visible]:z-10 [&>*:focus-within]:z-10",
+  {
+    defaultVariants: {
+      orientation: "horizontal"
+    },
+    variants: {
+      orientation: {
+        horizontal: "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
+      }
+    }
+  }
+);
+const ButtonGroup = React.forwardRef(
+  ({ className, orientation, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(buttonGroupVariants({ orientation }), className),
+      "data-slot": "button-group",
+      ref,
+      role: "group",
+      ...props
+    }
+  )
+);
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  ButtonGroup,
+  buttonGroupVariants
+};

package/dist/components/button-group/index.js

@@ -0,0 +1,8 @@
+import {
+  ButtonGroup,
+  buttonGroupVariants
+} from "./button-group";
+export {
+  ButtonGroup,
+  buttonGroupVariants
+};

package/dist/components/calendar/calendar.js

@@ -5,10 +5,10 @@ import { DayPicker } from "react-day-picker";
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "../button/button";
 function IconLeft() {
-  return /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" });
 }
 function IconRight() {
-  return /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" });
 }
 function ChevronComponent({
   orientation = "right"
@@ -28,17 +28,17 @@ function Calendar({
       classNames: {
         button_next: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
         ),
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
         ),
         caption_label: "text-sm font-medium",
-        day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: "size-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "size-9 p-0 font-normal aria-selected:opacity-100"
         ),
         disabled: "text-muted-foreground opacity-50",
         hidden: "invisible",

package/dist/components/callout/callout.js

@@ -45,7 +45,7 @@ function Callout({
       ),
       role: "alert",
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "h-5 w-5 flex-shrink-0 mt-0.5", children: icon }) : null,
+        icon ? /* @__PURE__ */ jsx("span", { className: "size-5 flex-shrink-0 mt-0.5", children: icon }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           displayTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", children: displayTitle }) : null,
           /* @__PURE__ */ jsx("div", { className: "text-sm [&>p]:mb-0 [&>p:last-child]:mb-0", children })

package/dist/components/candlestick-chart/candlestick-chart.js

@@ -59,7 +59,7 @@ function PriceGrid({
     /* @__PURE__ */ jsx(
       "line",
       {
-        stroke: "hsl(var(--border))",
+        stroke: "oklch(var(--border))",
         strokeDasharray: "4 6",
         strokeOpacity: "0.8",
         x1: "0",
@@ -71,7 +71,7 @@ function PriceGrid({
     /* @__PURE__ */ jsx(
       "text",
       {
-        fill: "hsl(var(--muted-foreground))",
+        fill: "oklch(var(--muted-foreground))",
         fontSize: "11",
         textAnchor: "end",
         x: width - 6,
@@ -79,7 +79,7 @@ function PriceGrid({
         children: formatValue(tick.value)
       }
     )
-  ] }, tick.value));
+  ] }, tick.y));
 }
 function CandleMarks({
   data,
@@ -95,12 +95,12 @@ function CandleMarks({
     const bodyY = Math.min(openY, closeY);
     const bodyHeight = Math.max(Math.abs(openY - closeY), 3);
     const isBullish = candle.close >= candle.open;
-    const fill = isBullish ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
-    return /* @__PURE__ */ jsxs("g", { children: [
+    const colorClass = isBullish ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
+    return /* @__PURE__ */ jsxs("g", { className: colorClass, children: [
       /* @__PURE__ */ jsx(
         "line",
         {
-          stroke: fill,
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeWidth: 2,
           x1: centerX,
@@ -112,11 +112,11 @@ function CandleMarks({
       /* @__PURE__ */ jsx(
         "rect",
         {
-          fill,
+          fill: "currentColor",
           fillOpacity: isBullish ? 0.25 : 0.18,
           height: bodyHeight,
           rx: 4,
-          stroke: fill,
+          stroke: "currentColor",
           strokeWidth: 1.5,
           width: metrics.bodyWidth,
           x: centerX - metrics.bodyWidth / 2,
@@ -127,7 +127,7 @@ function CandleMarks({
       /* @__PURE__ */ jsx(
         "text",
         {
-          fill: "hsl(var(--muted-foreground))",
+          fill: "oklch(var(--muted-foreground))",
           fontSize: "11",
           textAnchor: "middle",
           x: centerX,
@@ -135,7 +135,7 @@ function CandleMarks({
           children: candle.label
         }
       )
-    ] }, candle.label);
+    ] }, `${candle.label}-${index.toString()}`);
   });
 }
 function SessionPill({ sessionChange }) {
@@ -149,7 +149,7 @@ function SessionPill({ sessionChange }) {
         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-4 w-4" }),
+        /* @__PURE__ */ jsx(TrendIcon, { className: "size-4" }),
         sessionChange >= 0 ? "+" : "",
         formatValue(sessionChange)
       ]
@@ -158,6 +158,7 @@ function SessionPill({ sessionChange }) {
 }
 const CandlestickChart = React.forwardRef(
   ({
+    as: Heading = "h3",
     className,
     data,
     height = DEFAULT_HEIGHT,
@@ -185,7 +186,7 @@ const CandlestickChart = React.forwardRef(
           /* @__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: "OHLC session" }),
-              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
+              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Candlestick chart" })
             ] }),
             /* @__PURE__ */ jsx(SessionPill, { sessionChange })
           ] }),