@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/cookie-consent/cookie-consent.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -24,110 +24,78 @@ const cookieConsentVariants = cva(
     }
   }
 );
-const CookieConsent = forwardRef(
-  ({
-    acceptText = "Accept",
-    className,
-    declineText,
-    message = "This site uses cookies to improve your experience.",
-    onAccept,
-    onDecline,
-    onOpenChange,
-    open = true,
-    position,
-    settingsHref,
-    settingsText = "Learn more",
-    showCloseButton = false,
-    ...props
-  }, reference) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isAnimatingOut, setIsAnimatingOut] = useState(false);
-    useEffect(() => {
-      if (open) {
-        const timer = setTimeout(() => {
-          setIsVisible(true);
-        }, 50);
-        return () => {
-          clearTimeout(timer);
-        };
-      }
-      const rafId = requestAnimationFrame(() => {
-        setIsVisible(false);
-      });
+const CookieConsent = ({
+  acceptText = "Accept",
+  className,
+  declineText,
+  message = "This site uses cookies to improve your experience.",
+  onAccept,
+  onDecline,
+  onOpenChange,
+  open = true,
+  position,
+  ref: reference,
+  settingsHref,
+  settingsText = "Learn more",
+  showCloseButton = false,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+  useEffect(() => {
+    if (open) {
+      const timer = setTimeout(() => {
+        setIsVisible(true);
+      }, 50);
       return () => {
-        cancelAnimationFrame(rafId);
+        clearTimeout(timer);
       };
-    }, [open]);
-    const handleClose = useCallback(() => {
-      setIsAnimatingOut(true);
-      setTimeout(() => {
-        setIsAnimatingOut(false);
-        onOpenChange?.(false);
-      }, 200);
-    }, [onOpenChange]);
-    const handleAccept = useCallback(() => {
-      onAccept?.();
-      handleClose();
-    }, [onAccept, handleClose]);
-    const handleDecline = useCallback(() => {
-      onDecline?.();
-      handleClose();
-    }, [onDecline, handleClose]);
-    if (!open && !isAnimatingOut) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "aria-label": "Cookie consent",
-        "aria-live": "polite",
-        className: cn(
-          cookieConsentVariants({ position }),
-          // Animation states
-          isVisible && !isAnimatingOut ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0",
-          className
-        ),
-        ref: reference,
-        role: "dialog",
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:hidden", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              settingsHref ? /* @__PURE__ */ jsx(
-                "a",
-                {
-                  className: "text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground",
-                  href: settingsHref,
-                  children: settingsText
-                }
-              ) : null,
-              declineText ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: handleDecline,
-                  size: "sm",
-                  type: "button",
-                  variant: "ghost",
-                  children: declineText
-                }
-              ) : null,
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: handleAccept,
-                  size: "sm",
-                  type: "button",
-                  variant: "default",
-                  children: acceptText
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex sm:items-center sm:gap-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
+    }
+    const rafId = requestAnimationFrame(() => {
+      setIsVisible(false);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [open]);
+  const handleClose = useCallback(() => {
+    setIsAnimatingOut(true);
+    setTimeout(() => {
+      setIsAnimatingOut(false);
+      onOpenChange?.(false);
+    }, 200);
+  }, [onOpenChange]);
+  const handleAccept = useCallback(() => {
+    onAccept?.();
+    handleClose();
+  }, [onAccept, handleClose]);
+  const handleDecline = useCallback(() => {
+    onDecline?.();
+    handleClose();
+  }, [onDecline, handleClose]);
+  if (!open && !isAnimatingOut) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Cookie consent",
+      "aria-live": "polite",
+      className: cn(
+        cookieConsentVariants({ position }),
+        // Animation states
+        isVisible && !isAnimatingOut ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0",
+        className
+      ),
+      ref: reference,
+      role: "dialog",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:hidden", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             settingsHref ? /* @__PURE__ */ jsx(
               "a",
               {
-                className: "text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground whitespace-nowrap",
+                className: "text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground",
                 href: settingsHref,
                 children: settingsText
               }
@@ -135,8 +103,8 @@ const CookieConsent = forwardRef(
             declineText ? /* @__PURE__ */ jsx(
               Button,
               {
-                className: "h-7 px-3 text-xs",
                 onClick: handleDecline,
+                size: "sm",
                 type: "button",
                 variant: "ghost",
                 children: declineText
@@ -145,29 +113,60 @@ const CookieConsent = forwardRef(
             /* @__PURE__ */ jsx(
               Button,
               {
-                className: "h-7 px-3 text-xs",
                 onClick: handleAccept,
+                size: "sm",
                 type: "button",
                 variant: "default",
                 children: acceptText
               }
             )
-          ] }),
-          showCloseButton ? /* @__PURE__ */ jsx(
-            "button",
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex sm:items-center sm:gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
+          settingsHref ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground whitespace-nowrap",
+              href: settingsHref,
+              children: settingsText
+            }
+          ) : null,
+          declineText ? /* @__PURE__ */ jsx(
+            Button,
             {
-              "aria-label": "Close cookie consent",
-              className: "absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground",
-              onClick: handleClose,
+              className: "h-7 px-3 text-xs",
+              onClick: handleDecline,
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+              variant: "ghost",
+              children: declineText
             }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "h-7 px-3 text-xs",
+              onClick: handleAccept,
+              type: "button",
+              variant: "default",
+              children: acceptText
+            }
+          )
+        ] }),
+        showCloseButton ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Close cookie consent",
+            className: "absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground",
+            onClick: handleClose,
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+          }
+        ) : null
+      ]
+    }
+  );
+};
 CookieConsent.displayName = "CookieConsent";
 export {
   CookieConsent,

package/dist/components/copy-button/copy-button.js

@@ -1,7 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useEffect,
   useRef,
@@ -62,126 +61,124 @@ function CopyIcon({
   const sizeClass = size === "xs" ? "size-3" : "size-4";
   return /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn(sizeClass, className) });
 }
-const ButtonTrigger = forwardRef(
-  ({
-    accessibleLabel,
-    className,
-    copied,
-    copiedText,
-    iconClassName,
-    label = "Copy",
-    onClick: _onClick,
-    onClickHandler,
-    value: _value,
-    variant = "icon",
-    ...rest
-  }, ref) => {
-    if (variant === "button") {
-      return /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "aria-label": accessibleLabel,
-          className: cn(className),
-          onClick: onClickHandler,
-          ref,
-          size: "sm",
-          type: "button",
-          variant: "outline",
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "sm" }),
-            /* @__PURE__ */ jsx("span", { children: copied ? copiedText : label })
-          ]
-        }
-      );
-    }
-    if (variant === "inline") {
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          "aria-label": accessibleLabel,
-          className: cn(
-            "size-6 align-middle text-muted-foreground hover:text-foreground",
-            className
-          ),
-          onClick: onClickHandler,
-          ref,
-          size: "icon",
-          type: "button",
-          variant: "ghost",
-          ...rest,
-          children: /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "xs" })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
+const ButtonTrigger = ({
+  accessibleLabel,
+  className,
+  copied,
+  copiedText,
+  iconClassName,
+  label = "Copy",
+  onClick: _onClick,
+  onClickHandler,
+  ref,
+  value: _value,
+  variant = "icon",
+  ...rest
+}) => {
+  if (variant === "button") {
+    return /* @__PURE__ */ jsxs(
       Button,
       {
         "aria-label": accessibleLabel,
-        className: cn("size-8", className),
+        className: cn(className),
         onClick: onClickHandler,
         ref,
-        size: "icon",
+        size: "sm",
         type: "button",
-        variant: "ghost",
+        variant: "outline",
         ...rest,
-        children: /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "sm" })
+        children: [
+          /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "sm" }),
+          /* @__PURE__ */ jsx("span", { children: copied ? copiedText : label })
+        ]
       }
     );
   }
-);
-ButtonTrigger.displayName = "CopyButton.Trigger";
-const CopyButton = forwardRef(
-  ({
-    "aria-label": ariaLabelOverride,
-    copiedLabel = "Copied!",
-    label = "Copy",
-    onClick,
-    showTooltip = true,
-    timeout = FALLBACK_TIMEOUT_MS,
-    value,
-    ...rest
-  }, ref) => {
-    const { copied, copy } = useCopyToClipboard({ timeout });
-    const handleClick = useCallback(
-      (event) => {
-        onClick?.(event);
-        if (event.defaultPrevented) return;
-        void copy(value);
-      },
-      [copy, onClick, value]
-    );
-    const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
-    const tooltipText = copied ? copiedLabel : label;
-    const trigger = /* @__PURE__ */ jsx(
-      ButtonTrigger,
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx(
+      Button,
       {
-        ...rest,
-        accessibleLabel,
-        copied,
-        copiedText: copiedLabel,
-        label,
-        onClickHandler: handleClick,
+        "aria-label": accessibleLabel,
+        className: cn(
+          "size-6 align-middle text-muted-foreground hover:text-foreground",
+          className
+        ),
+        onClick: onClickHandler,
         ref,
-        value
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        ...rest,
+        children: /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "xs" })
       }
     );
-    const liveRegion = /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: copied ? copiedLabel : "" });
-    if (!showTooltip) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        trigger,
-        liveRegion
-      ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": accessibleLabel,
+      className: cn("size-8", className),
+      onClick: onClickHandler,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(CopyIcon, { className: iconClassName, copied, size: "sm" })
+    }
+  );
+};
+ButtonTrigger.displayName = "CopyButton.Trigger";
+const CopyButton = ({
+  "aria-label": ariaLabelOverride,
+  copiedLabel = "Copied!",
+  label = "Copy",
+  onClick,
+  ref,
+  showTooltip = true,
+  timeout = FALLBACK_TIMEOUT_MS,
+  value,
+  ...rest
+}) => {
+  const { copied, copy } = useCopyToClipboard({ timeout });
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      void copy(value);
+    },
+    [copy, onClick, value]
+  );
+  const accessibleLabel = ariaLabelOverride ?? (copied ? copiedLabel : label);
+  const tooltipText = copied ? copiedLabel : label;
+  const trigger = /* @__PURE__ */ jsx(
+    ButtonTrigger,
+    {
+      ...rest,
+      accessibleLabel,
+      copied,
+      copiedText: copiedLabel,
+      label,
+      onClickHandler: handleClick,
+      ref,
+      value
     }
-    return /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
-      /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: trigger }),
-        /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText })
-      ] }),
+  );
+  const liveRegion = /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: copied ? copiedLabel : "" });
+  if (!showTooltip) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger,
       liveRegion
     ] });
   }
-);
+  return /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText })
+    ] }),
+    liveRegion
+  ] });
+};
 CopyButton.displayName = "CopyButton";
 export {
   CopyButton,

package/dist/components/countdown-timer/countdown-timer.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { normalizeDate } from "../../lib/format";
+import { useLiveDate } from "../../lib/use-live-date";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
 import {
@@ -10,32 +12,6 @@ import {
   CardHeader,
   CardTitle
 } from "../card/card";
-function normalizeDate(input) {
-  if (input instanceof Date) {
-    return new Date(input.getTime());
-  }
-  return new Date(input);
-}
-function useLiveDate(now, tickMs) {
-  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());
-    }, tickMs);
-    return () => {
-      window.clearInterval(interval);
-    };
-  }, [fixedNow, tickMs]);
-  return liveNow;
-}
 function getRemainingMs(deadline, now) {
   return deadline.getTime() - now.getTime();
 }
@@ -130,55 +106,51 @@ function TimerProgress({
     ) })
   ] });
 }
-const CountdownTimer = React.forwardRef(
-  ({
-    className,
-    deadline,
-    description,
-    now,
-    startedAt,
-    tickMs = 1e3,
-    title = "Countdown timer",
-    warningThresholdMs = 15 * 60 * 1e3,
-    ...props
-  }, ref) => {
-    const deadlineDate = React.useMemo(
-      () => normalizeDate(deadline),
-      [deadline]
-    );
-    const startedAtDate = React.useMemo(
-      () => startedAt ? normalizeDate(startedAt) : void 0,
-      [startedAt]
-    );
-    const liveNow = useLiveDate(now, tickMs);
-    const remainingMs = getRemainingMs(deadlineDate, liveNow);
-    const status = getStatus(remainingMs, warningThresholdMs);
-    const segments = formatSegments(Math.abs(remainingMs));
-    const progress = getProgress(deadlineDate, liveNow, startedAtDate);
-    return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
-      /* @__PURE__ */ jsx(CardHeader, { className: "space-y-2 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
-          /* @__PURE__ */ jsx(CardDescription, { children: description ?? `Deadline ${formatDeadline(deadlineDate)}` })
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { variant: status.badgeVariant, children: status.label })
-      ] }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx(TimerSegments, { segments }),
-        /* @__PURE__ */ jsx(
-          TimerProgress,
-          {
-            progress,
-            remainingMs,
-            segments,
-            startedAt: startedAtDate,
-            toneClassName: status.toneClassName
-          }
-        )
-      ] })
-    ] });
-  }
-);
+const CountdownTimer = ({
+  className,
+  deadline,
+  description,
+  now,
+  ref,
+  startedAt,
+  tickMs = 1e3,
+  title = "Countdown timer",
+  warningThresholdMs = 15 * 60 * 1e3,
+  ...props
+}) => {
+  const deadlineDate = React.useMemo(() => normalizeDate(deadline), [deadline]);
+  const startedAtDate = React.useMemo(
+    () => startedAt ? normalizeDate(startedAt) : void 0,
+    [startedAt]
+  );
+  const liveNow = useLiveDate(now, tickMs);
+  const remainingMs = getRemainingMs(deadlineDate, liveNow);
+  const status = getStatus(remainingMs, warningThresholdMs);
+  const segments = formatSegments(Math.abs(remainingMs));
+  const progress = getProgress(deadlineDate, liveNow, startedAtDate);
+  return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "space-y-2 pb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
+        /* @__PURE__ */ jsx(CardDescription, { children: description ?? `Deadline ${formatDeadline(deadlineDate)}` })
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { variant: status.badgeVariant, children: status.label })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(TimerSegments, { segments }),
+      /* @__PURE__ */ jsx(
+        TimerProgress,
+        {
+          progress,
+          remainingMs,
+          segments,
+          startedAt: startedAtDate,
+          toneClassName: status.toneClassName
+        }
+      )
+    ] })
+  ] });
+};
 CountdownTimer.displayName = "CountdownTimer";
 export {
   CountdownTimer