@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/alert-pulse/alert-pulse.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 const SEVERITY_STROKE = {
   error: "stroke-red-500",
@@ -18,75 +17,76 @@ const SEVERITY_LABEL = {
   warn: "Warning"
 };
 const safeRadius = (value) => value < 6 ? 6 : value;
-const AlertPulse = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      cx,
-      cy,
-      labels,
-      radius = 36,
-      reducedMotion = false,
-      severity = "warn",
-      ...rest
-    } = props;
-    const r = safeRadius(radius);
-    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
-    const size = r * 2 + 24;
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        "aria-label": ariaLabel,
-        className: cn(
-          "pointer-events-none absolute z-20 overflow-visible",
-          className
+const AlertPulse = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    cx,
+    cy,
+    labels,
+    radius = 36,
+    reducedMotion = false,
+    severity = "warn",
+    ...rest
+  } = props;
+  const r = safeRadius(radius);
+  const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+  const size = r * 2 + 24;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "pointer-events-none absolute z-20 overflow-visible",
+        className
+      ),
+      "data-alert-pulse": true,
+      "data-alert-severity": severity,
+      height: size,
+      ref,
+      role: "img",
+      style: {
+        left: cx - size / 2,
+        top: cy - size / 2
+      },
+      width: size,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: cn("origin-center", SEVERITY_STROKE[severity]),
+            cx: size / 2,
+            cy: size / 2,
+            fill: "none",
+            r,
+            strokeOpacity: 0.7,
+            strokeWidth: 2
+          }
         ),
-        "data-alert-pulse": true,
-        "data-alert-severity": severity,
-        height: size,
-        ref,
-        role: "img",
-        style: {
-          left: cx - size / 2,
-          top: cy - size / 2
-        },
-        width: size,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              className: cn("origin-center", SEVERITY_STROKE[severity]),
-              cx: size / 2,
-              cy: size / 2,
-              fill: "none",
-              r,
-              strokeOpacity: 0.7,
-              strokeWidth: 2
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              className: cn(
-                "origin-center",
-                SEVERITY_STROKE[severity],
-                SEVERITY_FILL[severity],
-                reducedMotion ? null : "animate-ping"
-              ),
-              cx: size / 2,
-              cy: size / 2,
-              "data-alert-pulse-ring": true,
-              r,
-              strokeOpacity: 0.4,
-              strokeWidth: 2
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: cn(
+              "origin-center",
+              SEVERITY_STROKE[severity],
+              SEVERITY_FILL[severity],
+              reducedMotion ? null : "animate-ping"
+            ),
+            cx: size / 2,
+            cy: size / 2,
+            "data-alert-pulse-ring": true,
+            r,
+            strokeOpacity: 0.4,
+            strokeWidth: 2
+          }
+        )
+      ]
+    }
+  );
+};
 AlertPulse.displayName = "AlertPulse";
 export {
   AlertPulse

package/dist/components/anchor-port/anchor-port.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 const toneClasses = {
   bidirectional: "border-violet-500/40 bg-violet-500/15 text-violet-700 dark:text-violet-300",
@@ -17,33 +16,32 @@ const sideClasses = {
   right: "self-end",
   top: "self-start"
 };
-const AnchorPort = forwardRef(
-  ({
-    className,
-    side = "right",
-    state = "idle",
-    tone = "bidirectional",
-    ...props
-  }, ref) => /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-label": props["aria-label"] ?? `${tone} ${side} port ${state}`,
-      className: cn(
-        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
-        toneClasses[tone],
-        stateClasses[state],
-        sideClasses[side],
-        className
-      ),
-      "data-side": side,
-      "data-state": state,
-      "data-tone": tone,
-      ref,
-      role: "img",
-      ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" })
-    }
-  )
+const AnchorPort = ({
+  className,
+  ref,
+  side = "right",
+  state = "idle",
+  tone = "bidirectional",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-label": props["aria-label"] ?? `${tone} ${side} port ${state}`,
+    className: cn(
+      "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+      toneClasses[tone],
+      stateClasses[state],
+      sideClasses[side],
+      className
+    ),
+    "data-side": side,
+    "data-state": state,
+    "data-tone": tone,
+    ref,
+    role: "img",
+    ...props,
+    children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" })
+  }
 );
 AnchorPort.displayName = "AnchorPort";
 export {

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

@@ -0,0 +1,157 @@
+"use client";
+import { Fragment, jsx, jsxs } 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 buildGeometry({
+  container,
+  curvature,
+  from,
+  to
+}) {
+  if (container === null || from === null || to === null) {
+    return { height: 0, path: "", width: 0 };
+  }
+  const base = container.getBoundingClientRect();
+  const start = from.getBoundingClientRect();
+  const end = to.getBoundingClientRect();
+  const startX = start.left - base.left + start.width / 2;
+  const startY = start.top - base.top + start.height / 2;
+  const endX = end.left - base.left + end.width / 2;
+  const endY = end.top - base.top + end.height / 2;
+  const controlX = (startX + endX) / 2;
+  const controlY = (startY + endY) / 2 - curvature;
+  const path = `M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`;
+  return { height: base.height, path, width: base.width };
+}
+function useBeamGeometry(props) {
+  const { containerRef, curvature = 0, fromRef, toRef } = props;
+  const [geometry, setGeometry] = React.useState({
+    height: 0,
+    path: "",
+    width: 0
+  });
+  React.useEffect(() => {
+    const container = containerRef.current;
+    const update = () => {
+      setGeometry(
+        buildGeometry({
+          container,
+          curvature,
+          from: fromRef.current,
+          to: toRef.current
+        })
+      );
+    };
+    update();
+    if (container === null || typeof ResizeObserver !== "function") {
+      return;
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef, curvature, fromRef, toRef]);
+  return geometry;
+}
+const AnimatedBeam = ({
+  className,
+  containerRef,
+  curvature = 0,
+  duration = 3,
+  fromRef,
+  ref,
+  reverse = false,
+  toRef,
+  ...props
+}) => {
+  const gradientId = React.useId();
+  const reduced = usePrefersReducedMotion();
+  const { height, path, width } = useBeamGeometry({
+    containerRef,
+    curvature,
+    fromRef,
+    toRef
+  });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: cn("pointer-events-none absolute inset-0", className),
+      fill: "none",
+      ref,
+      ...props,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      width,
+      children: [
+        /* @__PURE__ */ jsx("path", { className: "stroke-border", d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("path", { d: path, stroke: `url(#${gradientId})`, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            gradientUnits: "objectBoundingBox",
+            id: gradientId,
+            x1: "0%",
+            x2: "20%",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "oklch(var(--primary) / 0)" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "oklch(var(--primary))" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "oklch(var(--primary) / 0)" }),
+              reduced ? null : /* @__PURE__ */ jsx(BeamTravel, { duration, reverse })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+AnimatedBeam.displayName = "AnimatedBeam";
+function BeamTravel({
+  duration,
+  reverse
+}) {
+  const x1 = reverse ? "100%;-20%" : "-20%;100%";
+  const x2 = reverse ? "120%;0%" : "0%;120%";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "animate",
+      {
+        attributeName: "x1",
+        dur: `${duration}s`,
+        repeatCount: "indefinite",
+        values: x1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "animate",
+      {
+        attributeName: "x2",
+        dur: `${duration}s`,
+        repeatCount: "indefinite",
+        values: x2
+      }
+    )
+  ] });
+}
+export {
+  AnimatedBeam
+};

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

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

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

@@ -0,0 +1,81 @@
+"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 = ({
+  className,
+  height = 40,
+  ref,
+  squares = 24,
+  width = 40,
+  ...props
+}) => {
+  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,28 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const AnimatedList = ({
+  children,
+  className,
+  delay = 100,
+  ref,
+  ...props
+}) => {
+  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,98 @@
+"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 = ({
+  className,
+  defaultValue,
+  onValueChange,
+  ref,
+  tabs,
+  ...props
+}) => {
+  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
+};