@vllnt/ui 0.1.11 → 0.2.0-canary.4abf494

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

@@ -0,0 +1,328 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const GLYPH_SEGMENTER = new Intl.Segmenter(void 0, {
+  granularity: "grapheme"
+});
+const ASCII_RANDOM_CHARACTERS = Array.from(
+  { length: 94 },
+  (_, index) => String.fromCodePoint(index + 33)
+).join("");
+const TERMINAL_RANDOM_CHARACTERS = "\u2502\u2503\u2500\u2501\u2504\u2505\u2508\u2509\u250C\u2510\u2514\u2518\u251C\u2524\u252C\u2534\u253C\u256D\u256E\u256F\u2570\u2571\u2572\u2573";
+const BLOCK_RANDOM_CHARACTERS = "\u2591\u2592\u2593\u2588\u258C\u2590\u2580\u2584\u25A0\u25A1\u25AA\u25AB\u2596\u2597\u2598\u2599\u259A\u259B\u259C\u259D\u259E\u259F";
+const UNICODE_SYMBOL_RANDOM_CHARACTERS = "\u25C6\u25C7\u25C8\u25CB\u25CF\u25CE\u25C9\u25CC\u25CD\u25D0\u25D1\u25D2\u25D3\u25D4\u25D5\u25E2\u25E3\u25E4\u25E5\u25E6\u203B\u2726\u2727\u2731\u2736\u2737\u2739";
+const MATRIX_RANDOM_CHARACTERS = `${ASCII_RANDOM_CHARACTERS}${TERMINAL_RANDOM_CHARACTERS}${BLOCK_RANDOM_CHARACTERS}${UNICODE_SYMBOL_RANDOM_CHARACTERS}`;
+const ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS = {
+  ascii: ASCII_RANDOM_CHARACTERS,
+  binary: "01",
+  blocks: BLOCK_RANDOM_CHARACTERS,
+  matrix: MATRIX_RANDOM_CHARACTERS,
+  symbols: UNICODE_SYMBOL_RANDOM_CHARACTERS,
+  terminal: TERMINAL_RANDOM_CHARACTERS
+};
+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 text.match(/\S+\s*/g) ?? [];
+}
+function getGlyphs(text) {
+  return Array.from(GLYPH_SEGMENTER.segment(text), ({ segment }) => segment);
+}
+function getRandomMatrixGlyph(randomCharacters) {
+  const glyphs = getGlyphs(randomCharacters);
+  return glyphs[Math.floor(Math.random() * glyphs.length)] ?? glyphs[0] ?? "0";
+}
+function getResolvedRandomCharacters(randomCharacters, randomCharactersPreset) {
+  if (randomCharacters && randomCharacters.length > 0) {
+    return randomCharacters;
+  }
+  return ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS[randomCharactersPreset] ?? DEFAULT_RANDOM_CHARACTERS;
+}
+function getCursorToneClass(variant) {
+  return variant === "matrix" || variant === "decipher" ? "text-primary" : "text-foreground";
+}
+function buildRevealFrames(segments, stagger) {
+  return segments.map((segment, index) => ({
+    content: segment,
+    isRevealed: true,
+    key: `${segment}-${index}`,
+    style: {
+      animationDelay: `${index * stagger}ms`
+    }
+  }));
+}
+function buildIndexOrder(direction, length) {
+  if (direction === "end") {
+    return Array.from({ length }, (_, index) => length - index - 1);
+  }
+  if (direction === "random") {
+    return Array.from({ length }, (_, index) => index).sort(
+      () => Math.random() - 0.5
+    );
+  }
+  if (direction === "center-out") {
+    const center = (length - 1) / 2;
+    return Array.from({ length }, (_, index) => index).sort((left, right) => {
+      const leftDistance = Math.abs(left - center);
+      const rightDistance = Math.abs(right - center);
+      if (leftDistance === rightDistance) {
+        return left - right;
+      }
+      return leftDistance - rightDistance;
+    });
+  }
+  return Array.from({ length }, (_, index) => index);
+}
+function buildRevealPlan(direction, length, randomness) {
+  const orderedIndices = buildIndexOrder(direction, length);
+  const revealPlan = Array.from({ length }, () => 0);
+  const jitterRange = Math.max(0, Math.round(randomness * 4));
+  orderedIndices.forEach((segmentIndex, revealIndex) => {
+    const jitter = jitterRange > 0 ? Math.floor(Math.random() * (jitterRange + 1)) : 0;
+    revealPlan[segmentIndex] = revealIndex + jitter;
+  });
+  return revealPlan;
+}
+function useRevealProgress(active, length, stagger) {
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    if (!active) {
+      setProgress(length);
+      return;
+    }
+    setProgress(0);
+    const revealInterval = window.setInterval(
+      () => {
+        setProgress((current) => {
+          if (current >= length + 4) {
+            window.clearInterval(revealInterval);
+            return current;
+          }
+          return current + 1;
+        });
+      },
+      Math.max(16, stagger)
+    );
+    return () => {
+      window.clearInterval(revealInterval);
+    };
+  }, [active, length, stagger]);
+  return progress;
+}
+function useMatrixFrame({
+  active,
+  progress,
+  randomCharacters,
+  revealPlan,
+  segments
+}) {
+  const [matrixFrame, setMatrixFrame] = React.useState(
+    () => segments.map(() => getRandomMatrixGlyph(randomCharacters))
+  );
+  React.useEffect(() => {
+    if (!active) {
+      return;
+    }
+    setMatrixFrame(segments.map(() => getRandomMatrixGlyph(randomCharacters)));
+    const scrambleInterval = window.setInterval(() => {
+      setMatrixFrame(
+        (current) => current.map((glyph, index) => {
+          const isWhitespace = /^\s+$/.test(segments[index] ?? "");
+          const isRevealed = progress >= (revealPlan[index] ?? 0);
+          if (isWhitespace || isRevealed) {
+            return glyph;
+          }
+          return getRandomMatrixGlyph(randomCharacters);
+        })
+      );
+    }, 48);
+    return () => {
+      window.clearInterval(scrambleInterval);
+    };
+  }, [active, progress, randomCharacters, revealPlan, segments]);
+  return matrixFrame;
+}
+function buildOldSchoolFrames({
+  matrixFrame,
+  progress,
+  randomCharacters,
+  revealPlan,
+  segments,
+  variant
+}) {
+  return segments.map((segment, index) => {
+    const isWhitespace = /^\s+$/.test(segment);
+    const revealStep = revealPlan[index] ?? 0;
+    const isRevealed = progress >= revealStep;
+    let content = "";
+    if (variant === "matrix" || variant === "decipher") {
+      content = isWhitespace ? segment : isRevealed ? segment : matrixFrame[index] ?? getRandomMatrixGlyph(randomCharacters);
+    } else if (isRevealed) {
+      content = segment;
+    }
+    return {
+      content,
+      isRevealed,
+      key: `${segment}-${index}`
+    };
+  });
+}
+function useAnimatedTextFrames({
+  direction,
+  randomCharacters,
+  randomness,
+  segments,
+  stagger,
+  variant
+}) {
+  const isOldSchool = variant !== "reveal";
+  const revealPlan = React.useMemo(
+    () => isOldSchool ? buildRevealPlan(direction, segments.length, randomness) : Array.from({ length: segments.length }, (_, index) => index),
+    [direction, isOldSchool, randomness, segments.length]
+  );
+  const progress = useRevealProgress(isOldSchool, segments.length, stagger);
+  const matrixFrame = useMatrixFrame({
+    active: variant === "matrix" || variant === "decipher",
+    progress,
+    randomCharacters,
+    revealPlan,
+    segments
+  });
+  return React.useMemo(() => {
+    if (!isOldSchool) {
+      return buildRevealFrames(segments, stagger);
+    }
+    return buildOldSchoolFrames({
+      matrixFrame,
+      progress,
+      randomCharacters,
+      revealPlan,
+      segments,
+      variant
+    });
+  }, [
+    isOldSchool,
+    matrixFrame,
+    progress,
+    randomCharacters,
+    revealPlan,
+    segments,
+    stagger,
+    variant
+  ]);
+}
+function getSegmentClasses(variant, isRevealed) {
+  if (variant === "reveal") {
+    return "inline-block whitespace-pre opacity-0 [animation-duration:var(--vllnt-animated-text-duration)] [animation-fill-mode:forwards] [animation-name:vllnt-animated-text-reveal] [animation-timing-function:cubic-bezier(0.16,1,0.3,1)]";
+  }
+  if (variant === "matrix" || variant === "decipher") {
+    return cn(
+      "inline-block whitespace-pre font-mono tracking-[0.08em] transition-colors duration-150",
+      isRevealed ? "text-foreground" : "text-primary/75"
+    );
+  }
+  return "inline-block whitespace-pre font-mono";
+}
+function getContainerClasses(variant) {
+  if (variant === "matrix" || variant === "decipher") {
+    return "flex flex-wrap font-mono leading-relaxed tracking-[0.08em]";
+  }
+  if (variant === "terminal" || variant === "typewriter") {
+    return "flex flex-wrap font-mono leading-relaxed";
+  }
+  return "flex flex-wrap leading-relaxed";
+}
+function AnimatedTextCursor({
+  cursorChar,
+  cursorToneClass
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "ml-0.5 inline-block whitespace-pre font-mono [animation:vllnt-terminal-cursor-blink_1s_steps(1,end)_infinite]",
+        cursorToneClass
+      ),
+      children: cursorChar
+    }
+  );
+}
+const AnimatedText = React.forwardRef(
+  ({
+    className,
+    cursor = true,
+    cursorChar = "\u2588",
+    direction = "start",
+    duration = 600,
+    randomCharacters,
+    randomCharactersPreset = "matrix",
+    randomness = 0,
+    splitBy = "word",
+    stagger = 70,
+    text,
+    variant = "terminal",
+    ...props
+  }, ref) => {
+    const resolvedRandomCharacters = getResolvedRandomCharacters(
+      randomCharacters,
+      randomCharactersPreset
+    );
+    const resolvedSplitBy = variant === "reveal" ? splitBy : "character";
+    const segments = React.useMemo(
+      () => getSegments(text, resolvedSplitBy),
+      [resolvedSplitBy, text]
+    );
+    const segmentFrames = useAnimatedTextFrames({
+      direction,
+      randomCharacters: resolvedRandomCharacters,
+      randomness,
+      segments,
+      stagger,
+      variant
+    });
+    const showCursor = cursor && variant !== "reveal" && segmentFrames.some((frame) => !frame.isRevealed);
+    const cursorToneClass = getCursorToneClass(variant);
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        "aria-label": text,
+        className: cn(getContainerClasses(variant), className),
+        ref,
+        style: {
+          ["--vllnt-animated-text-duration"]: `${duration}ms`
+        },
+        ...props,
+        children: [
+          segmentFrames.map((segmentFrame) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: getSegmentClasses(variant, segmentFrame.isRevealed),
+              style: segmentFrame.style,
+              children: segmentFrame.content
+            },
+            segmentFrame.key
+          )),
+          showCursor ? /* @__PURE__ */ jsx(
+            AnimatedTextCursor,
+            {
+              cursorChar,
+              cursorToneClass
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AnimatedText.displayName = "AnimatedText";
+export {
+  ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS,
+  AnimatedText
+};

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

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

package/dist/components/annotation/annotation.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "../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",
+  rose: "bg-rose-500/20 text-rose-950 dark:text-rose-100",
+  sky: "bg-sky-500/20 text-sky-950 dark:text-sky-100"
+};
+function Highlight({
+  children,
+  className,
+  tone = "amber"
+}) {
+  return /* @__PURE__ */ jsx("mark", { className: cn("rounded px-1 py-0.5", toneClasses[tone], className), children });
+}
+function Annotation({
+  annotation,
+  children,
+  className,
+  label = "Annotation",
+  tone = "amber"
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(Highlight, { tone, children }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold text-primary align-super", children: "+" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "max-w-xs space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground [&>p]:mb-2", children: annotation })
+    ] })
+  ] });
+}
+export {
+  Annotation,
+  Highlight
+};

package/dist/components/annotation/index.js

@@ -0,0 +1,8 @@
+import {
+  Annotation,
+  Highlight
+} from "./annotation";
+export {
+  Annotation,
+  Highlight
+};

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

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+const avatarGroupVariants = cva("flex items-center", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "-space-x-4",
+      md: "-space-x-3",
+      sm: "-space-x-2.5"
+    }
+  }
+});
+const avatarItemVariants = cva(
+  "ring-2 ring-background border border-border bg-muted text-muted-foreground",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "h-12 w-12 text-sm",
+        md: "h-10 w-10 text-xs",
+        sm: "h-8 w-8 text-[11px]"
+      }
+    }
+  }
+);
+const overflowBadgeVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-muted font-medium text-muted-foreground ring-2 ring-background",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "h-12 min-w-12 px-3 text-sm",
+        md: "h-10 min-w-10 px-2.5 text-xs",
+        sm: "h-8 min-w-8 px-2 text-[11px]"
+      }
+    }
+  }
+);
+const AvatarGroup = React.forwardRef(
+  ({ className, items, max, overflowLabel, size, ...props }, reference) => {
+    const visibleItems = max === void 0 ? items : items.slice(0, max);
+    const hiddenCount = max === void 0 ? 0 : Math.max(items.length - max, 0);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(avatarGroupVariants({ size }), className),
+        ref: reference,
+        ...props,
+        children: [
+          visibleItems.map((item, index) => /* @__PURE__ */ jsxs(
+            Avatar,
+            {
+              className: avatarItemVariants({ size }),
+              style: { zIndex: visibleItems.length - index },
+              children: [
+                item.src ? /* @__PURE__ */ jsx(AvatarImage, { alt: item.alt, src: item.src }) : null,
+                /* @__PURE__ */ jsx(AvatarFallback, { children: item.fallback })
+              ]
+            },
+            `${item.alt}-${index}`
+          )),
+          hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+};

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

@@ -0,0 +1,10 @@
+import {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+} from "./avatar-group";
+export {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+};

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

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const BorderBeam = React.forwardRef(
+  ({
+    borderWidth = 1,
+    className,
+    colorFrom = "hsl(var(--primary) / 0.85)",
+    colorTo = "hsl(var(--ring) / 0.25)",
+    delay = 0,
+    duration = 6,
+    reverse = false,
+    style,
+    ...props
+  }, ref) => {
+    const beamStyle = {
+      animationDelay: `${delay}s`,
+      animationDirection: reverse ? "reverse" : "normal",
+      animationDuration: `${duration}s`,
+      animationIterationCount: "infinite",
+      animationName: "vllnt-border-beam-angle",
+      animationTimingFunction: "linear",
+      background: `conic-gradient(from var(--vllnt-border-beam-angle, 90deg), transparent 0deg, transparent 220deg, ${colorFrom} 280deg, ${colorTo} 335deg, transparent 360deg)`,
+      borderRadius: "inherit",
+      boxSizing: "border-box",
+      mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      maskComposite: "exclude",
+      padding: `${borderWidth}px`,
+      WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      WebkitMaskComposite: "xor",
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute inset-0 rounded-[inherit]",
+          className
+        ),
+        ref,
+        style: beamStyle,
+        ...props
+      }
+    );
+  }
+);
+BorderBeam.displayName = "BorderBeam";
+export {
+  BorderBeam
+};

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

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