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

package/dist/components/thread-bubble/index.js

@@ -0,0 +1,6 @@
+import {
+  ThreadBubble
+} from "./thread-bubble";
+export {
+  ThreadBubble
+};

package/dist/components/thread-bubble/thread-bubble.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No replies yet",
+  region: "Comment thread"
+};
+const Message = (props) => {
+  const { message } = props;
+  return /* @__PURE__ */ jsxs("li", { className: "space-y-0.5", "data-thread-bubble-message": message.id, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-2 text-[10px]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-semibold",
+          "data-thread-bubble-author": true,
+          style: message.authorColor ? { color: message.authorColor } : void 0,
+          children: message.author
+        }
+      ),
+      message.ts ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-thread-bubble-ts": true, children: message.ts }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground", "data-thread-bubble-body": true, children: message.body })
+  ] });
+};
+const ThreadBubble = forwardRef(
+  (props, ref) => {
+    const { className, footer, labels, messages, onResolve, title, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const handleResolve = () => {
+      onResolve?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+          className
+        ),
+        "data-thread-bubble": true,
+        ref,
+        ...rest,
+        children: [
+          title || onResolve ? /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground", children: [
+            title ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", "data-thread-bubble-title": true, children: title }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+            onResolve ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-thread-bubble-resolve": true,
+                onClick: handleResolve,
+                type: "button",
+                children: "Resolve"
+              }
+            ) : null
+          ] }) : null,
+          messages.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "px-1 py-2 text-center text-[11px] text-muted-foreground",
+              "data-thread-bubble-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx("ul", { className: "space-y-2 overflow-y-auto", "data-thread-bubble-list": true, children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) }),
+          footer ? /* @__PURE__ */ jsx(
+            "footer",
+            {
+              className: "border-t border-border pt-2",
+              "data-thread-bubble-footer": true,
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThreadBubble.displayName = "ThreadBubble";
+export {
+  ThreadBubble
+};

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

@@ -0,0 +1,6 @@
+import {
+  ThresholdRing
+} from "./threshold-ring";
+export {
+  ThresholdRing
+};

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/ticker-tape/ticker-tape.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowDownRight, ArrowUpRight, Dot } from "lucide-react";
+import { formatChange } from "../../lib/format";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 const tickerTapeKeyframes = `
 @keyframes ticker-tape-scroll {
   from {
@@ -17,12 +18,8 @@ const tickerTapeKeyframes = `
 function formatPrice(price) {
   return typeof price === "number" ? price.toLocaleString() : price;
 }
-function formatChange(change) {
-  const sign = change > 0 ? "+" : "";
-  return `${sign}${change.toFixed(2)}%`;
-}
 function TickerTapeRow({ items }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-center gap-3 px-3 py-3", children: items.map((item) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-center gap-3 p-3", children: items.map((item) => {
     const isPositive = item.change >= 0;
     const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
     return /* @__PURE__ */ jsxs(
@@ -43,13 +40,13 @@ function TickerTapeRow({ items }) {
               ),
               variant: "outline",
               children: [
-                /* @__PURE__ */ jsx(TrendIcon, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx(TrendIcon, { className: "size-3" }),
                 formatChange(item.change)
               ]
             }
           ),
           item.volume ? /* @__PURE__ */ jsxs("span", { className: "hidden items-center text-xs text-muted-foreground sm:inline-flex", children: [
-            /* @__PURE__ */ jsx(Dot, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx(Dot, { className: "size-3.5" }),
             item.volume
           ] }) : null
         ]

package/dist/components/tilt-card/index.js

@@ -0,0 +1,4 @@
+import { TiltCard } from "./tilt-card";
+export {
+  TiltCard
+};

package/dist/components/tilt-card/tilt-card.js

@@ -0,0 +1,65 @@
+"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 clamp(value, max) {
+  return Math.min(Math.max(value, -max), max);
+}
+const TiltCard = React.forwardRef(
+  ({ children, className, maxTilt = 12, style, ...props }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const [transform, setTransform] = React.useState();
+    const handlePointerMove = (event) => {
+      if (reduced) {
+        return;
+      }
+      const bounds = event.currentTarget.getBoundingClientRect();
+      const offsetX = (event.clientX - bounds.left) / bounds.width - 0.5;
+      const offsetY = (event.clientY - bounds.top) / bounds.height - 0.5;
+      const rotateY = clamp(offsetX * maxTilt * 2, maxTilt);
+      const rotateX = clamp(-offsetY * maxTilt * 2, maxTilt);
+      setTransform(
+        `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+      );
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "transition-transform duration-200 ease-out will-change-transform",
+          className
+        ),
+        onPointerLeave: () => {
+          setTransform(void 0);
+        },
+        onPointerMove: handlePointerMove,
+        ref,
+        style: { transform, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+TiltCard.displayName = "TiltCard";
+export {
+  TiltCard
+};

package/dist/components/time-field/index.js

@@ -0,0 +1,4 @@
+import { TimeField } from "./time-field";
+export {
+  TimeField
+};

package/dist/components/time-field/time-field.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../../lib/utils";
+const TimeField = React.forwardRef(
+  ({ className, defaultValue = "", onValueChange, value, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = value ?? internalValue;
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(Clock, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          className: cn(
+            "flex h-10 w-full rounded-md border border-input bg-background py-2 pl-9 pr-3 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 [&::-webkit-calendar-picker-indicator]:opacity-60",
+            className
+          ),
+          onChange: (event) => {
+            if (value === void 0) {
+              setInternalValue(event.target.value);
+            }
+            onValueChange?.(event.target.value);
+          },
+          ref,
+          type: "time",
+          value: currentValue
+        }
+      )
+    ] });
+  }
+);
+TimeField.displayName = "TimeField";
+export {
+  TimeField
+};

package/dist/components/time-picker/index.js

@@ -0,0 +1,4 @@
+import { TimePicker } from "./time-picker";
+export {
+  TimePicker
+};

package/dist/components/time-picker/time-picker.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Clock } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+function pad(value) {
+  return value.toString().padStart(2, "0");
+}
+function buildOptions(count, step) {
+  return Array.from(
+    { length: Math.ceil(count / step) },
+    (_unused, index) => pad(index * step)
+  );
+}
+function splitTime(value) {
+  const [hour = "", minute = ""] = value.split(":");
+  return { hour, minute };
+}
+function TimeColumn({ label, onSelect, options, selected }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: "flex max-h-56 flex-col gap-1 overflow-y-auto px-1",
+      role: "listbox",
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-selected": option === selected,
+          className: cn(
+            "rounded-sm px-3 py-1.5 text-sm tabular-nums outline-none transition-colors hover:bg-accent focus-visible:bg-accent",
+            option === selected && "bg-primary text-primary-foreground hover:bg-primary"
+          ),
+          onClick: () => {
+            onSelect(option);
+          },
+          role: "option",
+          type: "button",
+          children: option
+        },
+        option
+      ))
+    }
+  );
+}
+const TimePicker = React.forwardRef(
+  ({
+    className,
+    defaultValue = "",
+    minuteStep = 5,
+    onValueChange,
+    placeholder = "Select time",
+    value
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = value ?? internalValue;
+    const { hour, minute } = splitTime(currentValue);
+    const commit = (nextHour, nextMinute) => {
+      const next = `${nextHour || "00"}:${nextMinute || "00"}`;
+      if (value === void 0) {
+        setInternalValue(next);
+      }
+      onValueChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: cn(
+            "w-full justify-start text-left font-normal",
+            !currentValue && "text-muted-foreground",
+            className
+          ),
+          ref,
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ jsx(Clock, { className: "mr-2 size-4" }),
+            currentValue || placeholder
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-auto p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            label: "Hour",
+            onSelect: (nextHour) => {
+              commit(nextHour, minute);
+            },
+            options: buildOptions(24, 1),
+            selected: hour
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            label: "Minute",
+            onSelect: (nextMinute) => {
+              commit(hour, nextMinute);
+            },
+            options: buildOptions(60, minuteStep),
+            selected: minute
+          }
+        )
+      ] }) })
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+export {
+  TimePicker
+};

package/dist/components/timeline/index.js

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