@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const AnimatedTestimonials = ({
+  autoplay = false,
+  className,
+  ref,
+  testimonials,
+  ...props
+}) => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const count = testimonials.length;
+  const goTo = React.useCallback(
+    (step) => {
+      setActiveIndex((current) => (current + step + count) % count);
+    },
+    [count]
+  );
+  React.useEffect(() => {
+    if (!autoplay || count <= 1) {
+      return;
+    }
+    const timer = setInterval(() => {
+      goTo(1);
+    }, 5e3);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [autoplay, count, goTo]);
+  const active = testimonials[activeIndex];
+  if (active === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-xl border bg-card p-6 text-card-foreground shadow-sm",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TestimonialCard, { index: activeIndex, testimonial: active }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded-md border px-3 py-1 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+              onClick: () => {
+                goTo(-1);
+              },
+              type: "button",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "rounded-md border px-3 py-1 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+              onClick: () => {
+                goTo(1);
+              },
+              type: "button",
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+AnimatedTestimonials.displayName = "AnimatedTestimonials";
+function TestimonialCard({
+  index,
+  testimonial
+}) {
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: "animate-in fade-in-0 slide-in-from-right-4 motion-reduce:animate-none",
+      children: [
+        /* @__PURE__ */ jsx("blockquote", { className: "text-lg text-foreground", children: testimonial.quote }),
+        /* @__PURE__ */ jsxs("figcaption", { className: "mt-2 text-sm text-muted-foreground", children: [
+          testimonial.name,
+          " \u2014 ",
+          testimonial.title
+        ] })
+      ]
+    },
+    index
+  );
+}
+export {
+  AnimatedTestimonials
+};

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

@@ -0,0 +1,6 @@
+import {
+  AnimatedTestimonials
+} from "./animated-testimonials";
+export {
+  AnimatedTestimonials
+};

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

@@ -254,74 +254,73 @@ function AnimatedTextCursor({
     }
   );
 }
-const AnimatedText = React.forwardRef(
-  ({
-    className,
-    cursor = true,
-    cursorChar = "\u2588",
-    direction = "start",
-    duration = 600,
+const AnimatedText = ({
+  className,
+  cursor = true,
+  cursorChar = "\u2588",
+  direction = "start",
+  duration = 600,
+  randomCharacters,
+  randomCharactersPreset = "matrix",
+  randomness = 0,
+  ref,
+  splitBy = "word",
+  stagger = 70,
+  text,
+  variant = "terminal",
+  ...props
+}) => {
+  const resolvedRandomCharacters = getResolvedRandomCharacters(
     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
-        ]
-      }
-    );
-  }
-);
+    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,

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function Tooltip({
+  content,
+  side
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute left-1/2 z-50 -translate-x-1/2 animate-in fade-in-0 zoom-in-95 whitespace-nowrap rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+        side === "top" ? "bottom-full mb-2" : "top-full mt-2"
+      ),
+      role: "tooltip",
+      children: content
+    }
+  );
+}
+const AnimatedTooltip = ({
+  children,
+  className,
+  content,
+  ref,
+  side = "top",
+  ...props
+}) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative inline-flex", className),
+      onBlur: () => {
+        setOpen(false);
+      },
+      onFocus: () => {
+        setOpen(true);
+      },
+      onPointerEnter: () => {
+        setOpen(true);
+      },
+      onPointerLeave: () => {
+        setOpen(false);
+      },
+      ref,
+      ...props,
+      children: [
+        children,
+        open ? /* @__PURE__ */ jsx(Tooltip, { content, side }) : void 0
+      ]
+    }
+  );
+};
+AnimatedTooltip.displayName = "AnimatedTooltip";
+export {
+  AnimatedTooltip
+};

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

@@ -0,0 +1,6 @@
+import {
+  AnimatedTooltip
+} from "./animated-tooltip";
+export {
+  AnimatedTooltip
+};

package/dist/components/auto-reload/auto-reload.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useId,
   useMemo,
@@ -224,82 +223,86 @@ function useAutoReloadController(options) {
     threshold: controlledThreshold ?? uncontrolledThreshold
   };
 }
-const DisabledBanner = forwardRef(
-  ({ className, message, ...rest }, ref) => /* @__PURE__ */ jsx(
+const DisabledBanner = ({
+  className,
+  message,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-disabled": "true",
+    className: cn(
+      "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
+      className
+    ),
+    ref,
+    ...rest,
+    children: message
+  }
+);
+DisabledBanner.displayName = "AutoReload.DisabledBanner";
+const ActivePanel = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    controller,
+    currencyDisplay,
+    isSaving,
+    labels,
+    maxAmountCents,
+    minAmountCents,
+    onSave,
+    reloadAmountId,
+    stepCents,
+    thresholdId,
+    toggleId,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      "aria-disabled": "true",
       className: cn(
-        "flex items-start gap-3 rounded-2xl border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground",
+        "flex flex-col gap-4 rounded-2xl border bg-background p-4",
         className
       ),
       ref,
       ...rest,
-      children: message
-    }
-  )
-);
-DisabledBanner.displayName = "AutoReload.DisabledBanner";
-const ActivePanel = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      controller,
-      currencyDisplay,
-      isSaving,
-      labels,
-      maxAmountCents,
-      minAmountCents,
-      onSave,
-      reloadAmountId,
-      stepCents,
-      thresholdId,
-      toggleId,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
-          className
+      children: [
+        /* @__PURE__ */ jsx(
+          ToggleHeader,
+          {
+            enabled: controller.enabled,
+            heading: labels.heading,
+            helper: labels.helper,
+            id: toggleId,
+            onCheckedChange: controller.handleToggle
+          }
         ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            ToggleHeader,
-            {
-              enabled: controller.enabled,
-              heading: labels.heading,
-              helper: labels.helper,
-              id: toggleId,
-              onCheckedChange: controller.handleToggle
-            }
-          ),
-          controller.enabled ? /* @__PURE__ */ jsx(
-            ReloadFormFields,
-            {
-              currencyDisplay,
-              isSaving,
-              labels,
-              maxAmountCents,
-              minAmountCents,
-              onSave,
-              reloadAmount: controller.reloadAmount,
-              reloadAmountId,
-              setReloadAmount: controller.setReloadAmount,
-              setThreshold: controller.setThreshold,
-              stepCents,
-              threshold: controller.threshold,
-              thresholdId
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+        controller.enabled ? /* @__PURE__ */ jsx(
+          ReloadFormFields,
+          {
+            currencyDisplay,
+            isSaving,
+            labels,
+            maxAmountCents,
+            minAmountCents,
+            onSave,
+            reloadAmount: controller.reloadAmount,
+            reloadAmountId,
+            setReloadAmount: controller.setReloadAmount,
+            setThreshold: controller.setThreshold,
+            stepCents,
+            threshold: controller.threshold,
+            thresholdId
+          }
+        ) : null
+      ]
+    }
+  );
+};
 ActivePanel.displayName = "AutoReload.ActivePanel";
 function useAutoReloadInternals(props) {
   const {
@@ -353,48 +356,49 @@ function useAutoReloadInternals(props) {
     toggleId
   };
 }
-const AutoReload = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      disabled = false,
-      disabledMessage,
-      isSaving = false,
-      maxAmountCents,
-      minAmountCents = 100,
-      stepCents = DEFAULT_STEP_CENTS
-    } = props;
-    const internals = useAutoReloadInternals(props);
-    if (disabled) {
-      return /* @__PURE__ */ jsx(
-        DisabledBanner,
-        {
-          className,
-          message: disabledMessage ?? internals.resolvedLabels.disabledFallback,
-          ref
-        }
-      );
-    }
+const AutoReload = ({
+  ref,
+  ...props
+}) => {
+  const {
+    className,
+    disabled = false,
+    disabledMessage,
+    isSaving = false,
+    maxAmountCents,
+    minAmountCents = 100,
+    stepCents = DEFAULT_STEP_CENTS
+  } = props;
+  const internals = useAutoReloadInternals(props);
+  if (disabled) {
     return /* @__PURE__ */ jsx(
-      ActivePanel,
+      DisabledBanner,
       {
         className,
-        controller: internals.controller,
-        currencyDisplay: internals.currencyDisplay,
-        isSaving,
-        labels: internals.resolvedLabels,
-        maxAmountCents,
-        minAmountCents,
-        onSave: internals.handleSave,
-        ref,
-        reloadAmountId: internals.reloadAmountId,
-        stepCents,
-        thresholdId: internals.thresholdId,
-        toggleId: internals.toggleId
+        message: disabledMessage ?? internals.resolvedLabels.disabledFallback,
+        ref
       }
     );
   }
-);
+  return /* @__PURE__ */ jsx(
+    ActivePanel,
+    {
+      className,
+      controller: internals.controller,
+      currencyDisplay: internals.currencyDisplay,
+      isSaving,
+      labels: internals.resolvedLabels,
+      maxAmountCents,
+      minAmountCents,
+      onSave: internals.handleSave,
+      ref,
+      reloadAmountId: internals.reloadAmountId,
+      stepCents,
+      thresholdId: internals.thresholdId,
+      toggleId: internals.toggleId
+    }
+  );
+};
 AutoReload.displayName = "AutoReload";
 export {
   AutoReload

package/dist/components/avatar/avatar.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../../lib/utils";
-const Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Avatar = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     className: cn(
@@ -13,18 +16,26 @@ const Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     ref,
     ...props
   }
-));
+);
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const AvatarImage = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     className: cn("aspect-square h-full w-full", className),
     ref,
     ...props
   }
-));
+);
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const AvatarFallback = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     className: cn(
@@ -34,7 +45,7 @@ const AvatarFallback = forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     ...props
   }
-));
+);
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 export {
   Avatar,