@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/index.js

@@ -12,8 +12,12 @@ import {
   THEME_PRESET_STORAGE_KEY,
   THEME_PRESETS
 } from "./lib/theme-presets";
+import { formatChange, normalizeDate } from "./lib/format";
+import { useBodyScrollLock } from "./lib/use-body-scroll-lock";
 import { useDebounce } from "./lib/use-debounce";
+import { useEscapeKey } from "./lib/use-escape-key";
 import { useHorizontalScroll } from "./lib/use-horizontal-scroll";
+import { useLiveDate } from "./lib/use-live-date";
 import { useMounted } from "./lib/use-mounted";
 import {
   setCustomTheme,
@@ -30,12 +34,17 @@ export {
   THEME_PRESETS,
   THEME_PRESET_STORAGE_KEY,
   cn,
+  formatChange,
   getOtherLanguage,
   isThemePresetName,
+  normalizeDate,
   setCustomTheme,
   setThemePreset,
+  useBodyScrollLock,
   useDebounce,
+  useEscapeKey,
   useHorizontalScroll,
+  useLiveDate,
   useMounted,
   useThemePreset
 };

package/dist/lib/format.js

@@ -0,0 +1,14 @@
+function formatChange(change) {
+  const sign = change > 0 ? "+" : "";
+  return `${sign}${change.toFixed(2)}%`;
+}
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+export {
+  formatChange,
+  normalizeDate
+};

package/dist/lib/use-body-scroll-lock.js

@@ -0,0 +1,30 @@
+"use client";
+import { useEffect } from "react";
+let lockCount = 0;
+let previousOverflow = "";
+function lockBodyScroll() {
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount += 1;
+}
+function unlockBodyScroll() {
+  if (lockCount === 0) return;
+  lockCount -= 1;
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow;
+  }
+}
+function useBodyScrollLock(active) {
+  useEffect(() => {
+    if (!active) return;
+    lockBodyScroll();
+    return () => {
+      unlockBodyScroll();
+    };
+  }, [active]);
+}
+export {
+  useBodyScrollLock
+};

package/dist/lib/use-escape-key.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect } from "react";
+function useEscapeKey(onEscape, {
+  enabled = true,
+  preventDefault = false,
+  target = "window"
+} = {}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const node = target === "document" ? document : window;
+    const handleKeyDown = (event) => {
+      if (!(event instanceof KeyboardEvent) || event.key !== "Escape") return;
+      if (preventDefault) event.preventDefault();
+      onEscape();
+    };
+    node.addEventListener("keydown", handleKeyDown);
+    return () => {
+      node.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enabled, onEscape, preventDefault, target]);
+}
+export {
+  useEscapeKey
+};

package/dist/lib/use-live-date.js

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+import { normalizeDate } from "./format";
+function useLiveDate(now, intervalMs) {
+  const fixedNow = React.useMemo(
+    () => now ? normalizeDate(now) : void 0,
+    [now]
+  );
+  const [liveNow, setLiveNow] = React.useState(fixedNow ?? /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    if (fixedNow) {
+      setLiveNow(fixedNow);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setLiveNow(/* @__PURE__ */ new Date());
+    }, intervalMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fixedNow, intervalMs]);
+  return liveNow;
+}
+export {
+  useLiveDate
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.3.0-canary.f3cafe8",
-  "description": "React component library — 225 components built on Radix UI, Tailwind CSS, and CVA",
+  "version": "0.3.0",
+  "description": "React component library — 309 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
   "homepage": "https://ui.vllnt.ai",
@@ -56,8 +56,8 @@
   "peerDependencies": {
     "next": ">=14.0.0",
     "next-themes": ">=0.4.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
     "tailwindcss": ">=3.0.0"
   },
   "peerDependenciesMeta": {
@@ -103,12 +103,13 @@
     "html-to-image": "^1.11.13",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.468.0",
+    "qrcode": "1.5.4",
     "react-day-picker": "^9.13.0",
     "react-hook-form": "^7.73.1",
     "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
     "react-resizable-panels": "^4.3.3",
     "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.5.5",
     "vaul": "^1.1.2",
@@ -128,6 +129,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22",
+    "@types/qrcode": "1.5.6",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@types/react-syntax-highlighter": "^15.5.13",

package/styles.css

@@ -115,6 +115,63 @@
     }
   }
 
+  @keyframes vllnt-text-shimmer {
+    from {
+      background-position: 200% center;
+    }
+    to {
+      background-position: 0% center;
+    }
+  }
+
+  @keyframes vllnt-sparkle {
+    0%,
+    100% {
+      opacity: 0;
+      transform: scale(0) rotate(0deg);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1) rotate(90deg);
+    }
+  }
+
+  @keyframes vllnt-meteor {
+    0% {
+      opacity: 1;
+      transform: rotate(var(--vllnt-meteor-angle, 215deg)) translateX(0);
+    }
+    70% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(var(--vllnt-meteor-angle, 215deg)) translateX(-500px);
+    }
+  }
+
+  @keyframes vllnt-particle-float {
+    0%,
+    100% {
+      opacity: 0.3;
+      transform: translateY(0);
+    }
+    50% {
+      opacity: 0.85;
+      transform: translateY(-24px);
+    }
+  }
+
+  @keyframes vllnt-liquid-shift {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
   .ml-safe {
     margin-left: env(safe-area-inset-left, 0);
   }
@@ -145,3 +202,30 @@
   }
 }
 
+/*
+ * Safari < 15.4 lacks oklch(): every `oklch(var(--token) / a)` color drops to
+ * its initial value, leaving the sticky navbar (and body) illegible. Give the
+ * core chrome a solid sRGB fallback, theme-aware. Gated so any browser with
+ * oklch() support ignores this block entirely.
+ */
+@supports not (color: oklch(0 0 0)) {
+  body {
+    background-color: #ffffff;
+    color: #1a1a1a;
+  }
+  .dark body {
+    background-color: #000000;
+    color: #fafafa;
+  }
+  header[data-slot="navbar-saas"] {
+    background-color: #ffffff;
+    color: #1a1a1a;
+    border-color: #ebebeb;
+  }
+  .dark header[data-slot="navbar-saas"] {
+    background-color: #000000;
+    color: #fafafa;
+    border-color: #2a2a2a;
+  }
+}
+