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

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

@@ -0,0 +1,77 @@
+"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 scramble(text, revealed, pool) {
+  const characters = text.match(/[\s\S]/gu) ?? [];
+  return characters.map((character, index) => {
+    if (index < revealed || character === " ") {
+      return character;
+    }
+    return pool.charAt(Math.floor(Math.random() * pool.length));
+  }).join("");
+}
+const defaultPool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+const ScrambleText = React.forwardRef(
+  ({
+    className,
+    duration = 1200,
+    scrambleCharacters = defaultPool,
+    text,
+    ...props
+  }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const [display, setDisplay] = React.useState(text);
+    React.useEffect(() => {
+      if (reduced) {
+        setDisplay(text);
+        return;
+      }
+      const steps = Math.max(text.length, 1);
+      const tick = duration / steps;
+      let revealed = 0;
+      const timer = setInterval(() => {
+        revealed += 1;
+        setDisplay(scramble(text, revealed, scrambleCharacters));
+        if (revealed >= text.length) {
+          clearInterval(timer);
+        }
+      }, tick);
+      return () => {
+        clearInterval(timer);
+      };
+    }, [duration, reduced, scrambleCharacters, text]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-label": text,
+        className: cn("font-mono", className),
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: display })
+      }
+    );
+  }
+);
+ScrambleText.displayName = "ScrambleText";
+export {
+  ScrambleText
+};

package/dist/components/scroll-progress/index.js

@@ -0,0 +1,4 @@
+import { ScrollProgress } from "./scroll-progress";
+export {
+  ScrollProgress
+};

package/dist/components/scroll-progress/scroll-progress.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function computeProgress() {
+  const element = document.documentElement;
+  const scrollable = element.scrollHeight - element.clientHeight;
+  if (scrollable <= 0) {
+    return 0;
+  }
+  return element.scrollTop / scrollable * 100;
+}
+const ScrollProgress = React.forwardRef(({ className, style, ...props }, ref) => {
+  const [progress, setProgress] = React.useState(0);
+  React.useEffect(() => {
+    const onScroll = () => {
+      setProgress(computeProgress());
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(progress),
+      className: cn(
+        "fixed inset-x-0 top-0 z-50 h-1 origin-left bg-primary",
+        className
+      ),
+      ref,
+      role: "progressbar",
+      style: { width: `${progress}%`, ...style },
+      ...props
+    }
+  );
+});
+ScrollProgress.displayName = "ScrollProgress";
+export {
+  ScrollProgress
+};

package/dist/components/search-bar/search-bar.js

@@ -1,11 +1,33 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useDebounce } from "../../lib/use-debounce";
 import { Button } from "../button/button";
 import { Input } from "../input/input";
-function SearchBar({
+function SearchBar(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SearchBarFallback, { ...props }), children: /* @__PURE__ */ jsx(SearchBarInner, { ...props }) });
+}
+function SearchBarFallback({
+  className,
+  placeholder = "Search posts..."
+}) {
+  return /* @__PURE__ */ jsxs("form", { className: `flex gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": placeholder,
+        className: "flex-1",
+        disabled: true,
+        placeholder,
+        type: "text",
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { disabled: true, type: "submit", variant: "outline", children: "Search" })
+  ] });
+}
+function SearchBarInner({
   className,
   onSearch,
   placeholder = "Search posts..."