@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Input } from "../input/input";
+import { Label } from "../label/label";
+const TextField = ({
+  className,
+  description,
+  error,
+  id,
+  label,
+  labelClassName,
+  ref,
+  rootClassName,
+  ...props
+}) => {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const descriptionId = `${inputId}-description`;
+  const errorId = `${inputId}-error`;
+  const invalid = Boolean(error);
+  const describedBy = [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", rootClassName), children: [
+    label ? /* @__PURE__ */ jsx(
+      Label,
+      {
+        className: cn(invalid && "text-destructive", labelClassName),
+        htmlFor: inputId,
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...props,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        className,
+        id: inputId,
+        ref
+      }
+    ),
+    description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", id: descriptionId, children: description }) : null,
+    error ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-sm font-medium text-destructive",
+        id: errorId,
+        role: "alert",
+        children: error
+      }
+    ) : null
+  ] });
+};
+TextField.displayName = "TextField";
+export {
+  TextField
+};

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

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

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

@@ -0,0 +1,90 @@
+"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) {
+  return Math.min(Math.max(value, 0), 1);
+}
+function useScrollProgress(nodeRef, enabled) {
+  const [progress, setProgress] = React.useState(enabled ? 0 : 1);
+  React.useEffect(() => {
+    const node = nodeRef.current;
+    if (!enabled || !node || typeof window === "undefined") {
+      setProgress(1);
+      return;
+    }
+    const onScroll = () => {
+      const bounds = node.getBoundingClientRect();
+      const span = bounds.height + window.innerHeight;
+      setProgress(clamp((window.innerHeight - bounds.top) / span));
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, [enabled, nodeRef]);
+  return progress;
+}
+function wordOpacity(progress, total, index) {
+  return Math.min(Math.max(progress * total - index, 0.2), 1);
+}
+const TextReveal = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const nodeRef = React.useRef(null);
+  const progress = useScrollProgress(nodeRef, !reduced);
+  const words = children.split(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": children,
+      className: cn("flex flex-wrap gap-x-[0.25em]", className),
+      ref: (node) => {
+        nodeRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      ...props,
+      children: words.map((word, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "text-foreground transition-opacity duration-300",
+          style: { opacity: wordOpacity(progress, words.length, index) },
+          children: word
+        },
+        `${word}-${index}`
+      ))
+    }
+  );
+};
+TextReveal.displayName = "TextReveal";
+export {
+  TextReveal
+};

package/dist/components/text-shimmer/index.js

@@ -0,0 +1,4 @@
+import { TextShimmer } from "./text-shimmer";
+export {
+  TextShimmer
+};

package/dist/components/text-shimmer/text-shimmer.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const TextShimmer = ({
+  children,
+  className,
+  duration = 2,
+  ref,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-block animate-[vllnt-text-shimmer_linear_infinite] bg-clip-text text-transparent motion-reduce:animate-none",
+        className
+      ),
+      ref,
+      style: {
+        animationDuration: `${duration}s`,
+        background: "linear-gradient(90deg, oklch(var(--muted-foreground) / 0.5), oklch(var(--foreground)), oklch(var(--muted-foreground) / 0.5))",
+        backgroundSize: "200% auto",
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+};
+TextShimmer.displayName = "TextShimmer";
+export {
+  TextShimmer
+};

package/dist/components/textarea/textarea.js

@@ -1,21 +1,22 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const Textarea = forwardRef(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
+const Textarea = ({
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm 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",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+};
 Textarea.displayName = "Textarea";
 export {
   Textarea

package/dist/components/thinking-block/thinking-block.js

@@ -8,7 +8,7 @@ function ThinkingBlock({
   isStreaming = false,
   thinking
 }) {
-  const [isExpanded, setIsExpanded] = useState(isStreaming);
+  const [isExpanded, setIsExpanded] = useState(() => isStreaming);
   const contentId = useId();
   useEffect(() => {
     if (isStreaming) {

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

@@ -1,8 +1,5 @@
 "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",
@@ -26,59 +23,60 @@ const Message = (props) => {
     /* @__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",
+const ThreadBubble = ({
+  ref,
+  ...props
+}) => {
+  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: "border-t border-border pt-2",
-              "data-thread-bubble-footer": true,
-              children: footer
+              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/threshold-ring.js

@@ -1,8 +1,5 @@
 "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",
@@ -79,81 +76,82 @@ const Tick = (props) => {
     }
   );
 };
-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
-        ]
-      }
-    );
-  }
-);
+const ThresholdRing = ({
+  ref,
+  ...props
+}) => {
+  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,6 +1,6 @@
 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/badge";
 const tickerTapeKeyframes = `
@@ -17,10 +17,6 @@ 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 p-3", children: items.map((item) => {
     const isPositive = item.change >= 0;
@@ -58,48 +54,53 @@ function TickerTapeRow({ items }) {
     );
   }) });
 }
-const TickerTape = React.forwardRef(
-  ({ className, items, pauseOnHover = true, speedSeconds = 28, ...props }, reference) => {
-    if (items.length === 0) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": "TickerTape",
-        className: cn(
-          "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
-          className
-        ),
-        ref: reference,
-        role: "region",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("style", { children: tickerTapeKeyframes }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex w-max items-stretch",
-                pauseOnHover && "hover:[animation-play-state:paused]"
-              ),
-              style: {
-                animationDuration: `${speedSeconds}s`,
-                animationIterationCount: "infinite",
-                animationName: "ticker-tape-scroll",
-                animationTimingFunction: "linear"
-              },
-              children: [
-                /* @__PURE__ */ jsx(TickerTapeRow, { items }),
-                /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(TickerTapeRow, { items }) })
-              ]
-            }
-          )
-        ]
-      }
-    );
+const TickerTape = ({
+  className,
+  items,
+  pauseOnHover = true,
+  ref: reference,
+  speedSeconds = 28,
+  ...props
+}) => {
+  if (items.length === 0) {
+    return null;
   }
-);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "TickerTape",
+      className: cn(
+        "relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm",
+        className
+      ),
+      ref: reference,
+      role: "region",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: tickerTapeKeyframes }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-max items-stretch",
+              pauseOnHover && "hover:[animation-play-state:paused]"
+            ),
+            style: {
+              animationDuration: `${speedSeconds}s`,
+              animationIterationCount: "infinite",
+              animationName: "ticker-tape-scroll",
+              animationTimingFunction: "linear"
+            },
+            children: [
+              /* @__PURE__ */ jsx(TickerTapeRow, { items }),
+              /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(TickerTapeRow, { items }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 TickerTape.displayName = "TickerTape";
 export {
   TickerTape

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

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