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

package/dist/components/animated-grid-pattern/animated-grid-pattern.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function createSquares(count) {
+  return Array.from({ length: count }, () => ({
+    delay: Math.random() * 5,
+    duration: 3 + Math.random() * 4,
+    x: Math.floor(Math.random() * 40),
+    y: Math.floor(Math.random() * 40)
+  }));
+}
+function GridSquare({
+  height,
+  square,
+  width
+}) {
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      className: "animate-pulse fill-foreground/10 motion-reduce:animate-none",
+      height: height - 1,
+      style: {
+        animationDelay: `${square.delay}s`,
+        animationDuration: `${square.duration}s`
+      },
+      width: width - 1,
+      x: square.x * width + 1,
+      y: square.y * height + 1
+    }
+  );
+}
+const AnimatedGridPattern = React.forwardRef(({ className, height = 40, squares = 24, width = 40, ...props }, ref) => {
+  const [cells] = React.useState(() => createSquares(squares));
+  const patternId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 h-full w-full text-border",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "pattern",
+          {
+            height,
+            id: patternId,
+            patternUnits: "userSpaceOnUse",
+            width,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: `M ${String(width)} 0 L 0 0 0 ${String(height)}`,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 1
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx("rect", { fill: `url(#${patternId})`, height: "100%", width: "100%" }),
+        cells.map((square, index) => /* @__PURE__ */ jsx(GridSquare, { height, square, width }, index))
+      ]
+    }
+  );
+});
+AnimatedGridPattern.displayName = "AnimatedGridPattern";
+export {
+  AnimatedGridPattern
+};

package/dist/components/animated-grid-pattern/index.js

@@ -0,0 +1,6 @@
+import {
+  AnimatedGridPattern
+} from "./animated-grid-pattern";
+export {
+  AnimatedGridPattern
+};

package/dist/components/animated-list/animated-list.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const AnimatedList = React.forwardRef(
+  ({ children, className, delay = 100, ...props }, ref) => {
+    const items = React.Children.toArray(children);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex flex-col gap-2", className),
+        ref,
+        ...props,
+        children: items.map((child, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block animate-in fade-in-0 slide-in-from-bottom-2 motion-reduce:animate-none",
+            style: {
+              animationDelay: `${index * delay}ms`,
+              animationFillMode: "both"
+            },
+            children: child
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+AnimatedList.displayName = "AnimatedList";
+export {
+  AnimatedList
+};

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

@@ -0,0 +1,4 @@
+import { AnimatedList } from "./animated-list";
+export {
+  AnimatedList
+};

package/dist/components/animated-tabs/animated-tabs.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function indicatorPosition(button) {
+  if (button === null) {
+    return { left: 0, width: 0 };
+  }
+  return { left: button.offsetLeft, width: button.offsetWidth };
+}
+function TabButton({
+  active,
+  label,
+  onSelect,
+  reference
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-selected": active,
+      className: cn(
+        "relative z-10 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+        active ? "text-primary-foreground" : "text-muted-foreground"
+      ),
+      onClick: onSelect,
+      ref: reference,
+      role: "tab",
+      type: "button",
+      children: label
+    }
+  );
+}
+const AnimatedTabs = React.forwardRef(
+  ({ className, defaultValue, onValueChange, tabs, ...props }, ref) => {
+    const [active, setActive] = React.useState(defaultValue ?? tabs[0]?.value);
+    const [indicator, setIndicator] = React.useState({
+      left: 0,
+      width: 0
+    });
+    const buttons = React.useRef(/* @__PURE__ */ new Map());
+    React.useLayoutEffect(() => {
+      setIndicator(
+        indicatorPosition(buttons.current.get(active ?? "") ?? null)
+      );
+    }, [active]);
+    const handleSelect = (value) => {
+      setActive(value);
+      onValueChange?.(value);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative inline-flex items-center gap-1 rounded-lg border border-border bg-muted p-1",
+          className
+        ),
+        ref,
+        role: "tablist",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-1 z-0 h-[calc(100%-0.5rem)] rounded-md bg-primary transition-all duration-300 ease-out motion-reduce:transition-none",
+              style: { left: indicator.left, width: indicator.width }
+            }
+          ),
+          tabs.map((tab) => /* @__PURE__ */ jsx(
+            TabButton,
+            {
+              active: tab.value === active,
+              label: tab.label,
+              onSelect: () => {
+                handleSelect(tab.value);
+              },
+              reference: (node) => {
+                if (node === null) {
+                  buttons.current.delete(tab.value);
+                } else {
+                  buttons.current.set(tab.value, node);
+                }
+              }
+            },
+            tab.value
+          ))
+        ]
+      }
+    );
+  }
+);
+AnimatedTabs.displayName = "AnimatedTabs";
+export {
+  AnimatedTabs
+};

package/dist/components/animated-tabs/index.js

@@ -0,0 +1,6 @@
+import {
+  AnimatedTabs
+} from "./animated-tabs";
+export {
+  AnimatedTabs
+};

package/dist/components/animated-testimonials/animated-testimonials.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const AnimatedTestimonials = React.forwardRef(({ autoplay = false, className, testimonials, ...props }, ref) => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const count = testimonials.length;
+  const goTo = React.useCallback(
+    (step) => {
+      setActiveIndex((current) => (current + step + count) % count);
+    },
+    [count]
+  );
+  React.useEffect(() => {
+    if (!autoplay || count <= 1) {
+      return;
+    }
+    const timer = setInterval(() => {
+      goTo(1);
+    }, 5e3);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [autoplay, count, goTo]);
+  const active = testimonials[activeIndex];
+  if (active === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-xl border bg-card p-6 text-card-foreground shadow-sm",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TestimonialCard, { index: activeIndex, testimonial: active }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded-md border px-3 py-1 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+              onClick: () => {
+                goTo(-1);
+              },
+              type: "button",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded-md border px-3 py-1 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+              onClick: () => {
+                goTo(1);
+              },
+              type: "button",
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+AnimatedTestimonials.displayName = "AnimatedTestimonials";
+function TestimonialCard({
+  index,
+  testimonial
+}) {
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: "animate-in fade-in-0 slide-in-from-right-4 motion-reduce:animate-none",
+      children: [
+        /* @__PURE__ */ jsx("blockquote", { className: "text-lg text-foreground", children: testimonial.quote }),
+        /* @__PURE__ */ jsxs("figcaption", { className: "mt-2 text-sm text-muted-foreground", children: [
+          testimonial.name,
+          " \u2014 ",
+          testimonial.title
+        ] })
+      ]
+    },
+    index
+  );
+}
+export {
+  AnimatedTestimonials
+};

package/dist/components/animated-testimonials/index.js

@@ -0,0 +1,6 @@
+import {
+  AnimatedTestimonials
+} from "./animated-testimonials";
+export {
+  AnimatedTestimonials
+};

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
@@ -23,10 +24,7 @@ const ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS = {
 const DEFAULT_RANDOM_CHARACTERS = ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS.matrix;
 function getSegments(text, splitBy) {
   if (splitBy === "character") {
-    const segmenter = new Intl.Segmenter(void 0, {
-      granularity: "grapheme"
-    });
-    return Array.from(segmenter.segment(text), ({ segment }) => segment);
+    return Array.from(GLYPH_SEGMENTER.segment(text), ({ segment }) => segment);
   }
   return text.match(/\S+\s*/g) ?? [];
 }
@@ -89,13 +87,16 @@ function buildRevealPlan(direction, length, randomness) {
   return revealPlan;
 }
 function useRevealProgress(active, length, stagger) {
-  const [progress, setProgress] = React.useState(0);
+  const [progress, setProgress] = React.useState(() => active ? 0 : length);
+  const [revealKey, setRevealKey] = React.useState({ active, length, stagger });
+  if (revealKey.active !== active || revealKey.length !== length || revealKey.stagger !== stagger) {
+    setRevealKey({ active, length, stagger });
+    setProgress(active ? 0 : length);
+  }
   React.useEffect(() => {
     if (!active) {
-      setProgress(length);
       return;
     }
-    setProgress(0);
     const revealInterval = window.setInterval(
       () => {
         setProgress((current) => {

package/dist/components/animated-tooltip/animated-tooltip.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function Tooltip({
+  content,
+  side
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute left-1/2 z-50 -translate-x-1/2 animate-in fade-in-0 zoom-in-95 whitespace-nowrap rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+        side === "top" ? "bottom-full mb-2" : "top-full mt-2"
+      ),
+      role: "tooltip",
+      children: content
+    }
+  );
+}
+const AnimatedTooltip = React.forwardRef(({ children, className, content, side = "top", ...props }, ref) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative inline-flex", className),
+      onBlur: () => {
+        setOpen(false);
+      },
+      onFocus: () => {
+        setOpen(true);
+      },
+      onPointerEnter: () => {
+        setOpen(true);
+      },
+      onPointerLeave: () => {
+        setOpen(false);
+      },
+      ref,
+      ...props,
+      children: [
+        children,
+        open ? /* @__PURE__ */ jsx(Tooltip, { content, side }) : void 0
+      ]
+    }
+  );
+});
+AnimatedTooltip.displayName = "AnimatedTooltip";
+export {
+  AnimatedTooltip
+};

package/dist/components/animated-tooltip/index.js

@@ -0,0 +1,6 @@
+import {
+  AnimatedTooltip
+} from "./animated-tooltip";
+export {
+  AnimatedTooltip
+};

package/dist/components/annotation/annotation.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
 const toneClasses = {
   amber: "bg-amber-500/20 text-amber-950 dark:text-amber-100",
   emerald: "bg-emerald-500/20 text-emerald-950 dark:text-emerald-100",