@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

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

@@ -1,5 +1,4 @@
 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/avatar";
@@ -45,35 +44,41 @@ const overflowBadgeVariants = cva(
     }
   }
 );
-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.src ?? item.alt
-          )),
-          hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
-        ]
-      }
-    );
-  }
-);
+const AvatarGroup = ({
+  className,
+  items,
+  max,
+  overflowLabel,
+  ref: reference,
+  size,
+  ...props
+}) => {
+  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.src ?? item.alt
+        )),
+        hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: overflowBadgeVariants({ size }), children: overflowLabel ? overflowLabel(hiddenCount) : `+${hiddenCount}` }) : null
+      ]
+    }
+  );
+};
 AvatarGroup.displayName = "AvatarGroup";
 export {
   AvatarGroup,

package/dist/components/banner/banner.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useState,
   useSyncExternalStore
@@ -70,83 +69,87 @@ function usePersistedDismissed(storageKey) {
     getServerSnapshot
   );
 }
-const Banner = forwardRef(
-  ({
-    children,
-    className,
-    dismissible = false,
-    dismissLabel = "Dismiss",
-    icon,
-    id,
-    onDismiss,
-    persistDismissal = false,
-    role: roleOverride,
-    variant,
-    ...rest
-  }, ref) => {
-    const storageKey = persistDismissal && id ? `${STORAGE_PREFIX}${id}` : void 0;
-    const persistedDismissed = usePersistedDismissed(storageKey);
-    const [locallyDismissed, setLocallyDismissed] = useState(false);
-    const handleDismiss = useCallback(() => {
-      setLocallyDismissed(true);
-      if (storageKey) safeStorageSet(storageKey, "1");
-      onDismiss?.();
-    }, [onDismiss, storageKey]);
-    if (locallyDismissed || persistedDismissed) return null;
-    const resolvedVariant = variant ?? "info";
-    const role = roleOverride ?? (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(bannerVariants({ variant }), className),
-        id,
-        ref,
-        role,
-        ...rest,
-        children: [
-          icon ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
-              children: icon
-            }
-          ) : null,
-          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1", children }),
-          dismissible ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              "aria-label": dismissLabel,
-              className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              onClick: handleDismiss,
-              type: "button",
-              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
+const Banner = ({
+  children,
+  className,
+  dismissible = false,
+  dismissLabel = "Dismiss",
+  icon,
+  id,
+  onDismiss,
+  persistDismissal = false,
+  ref,
+  role: roleOverride,
+  variant,
+  ...rest
+}) => {
+  const storageKey = persistDismissal && id ? `${STORAGE_PREFIX}${id}` : void 0;
+  const persistedDismissed = usePersistedDismissed(storageKey);
+  const [locallyDismissed, setLocallyDismissed] = useState(false);
+  const handleDismiss = useCallback(() => {
+    setLocallyDismissed(true);
+    if (storageKey) safeStorageSet(storageKey, "1");
+    onDismiss?.();
+  }, [onDismiss, storageKey]);
+  if (locallyDismissed || persistedDismissed) return null;
+  const resolvedVariant = variant ?? "info";
+  const role = roleOverride ?? (URGENT_VARIANTS.has(resolvedVariant) ? "alert" : "status");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(bannerVariants({ variant }), className),
+      id,
+      ref,
+      role,
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1", children }),
+        dismissible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": dismissLabel,
+            className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded-md opacity-70 transition-colors hover:bg-foreground/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            onClick: handleDismiss,
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+          }
+        ) : null
+      ]
+    }
+  );
+};
 Banner.displayName = "Banner";
-const BannerAction = forwardRef(
-  ({ asChild = false, children, className, type, ...rest }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const buttonProps = asChild ? rest : { type: type ?? "button", ...rest };
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(
-          "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          className
-        ),
-        ref,
-        ...buttonProps,
-        children
-      }
-    );
-  }
-);
+const BannerAction = ({
+  asChild = false,
+  children,
+  className,
+  ref,
+  type,
+  ...rest
+}) => {
+  const Comp = asChild ? Slot : "button";
+  const buttonProps = asChild ? rest : { type: type ?? "button", ...rest };
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "inline-flex h-7 items-center justify-center rounded-md border border-foreground/20 bg-transparent px-3 text-xs font-medium underline-offset-4 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ref,
+      ...buttonProps,
+      children
+    }
+  );
+};
 BannerAction.displayName = "BannerAction";
 export {
   Banner,

package/dist/components/bento-grid/bento-grid.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const BentoGrid = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid w-full auto-rows-[14rem] grid-cols-3 gap-4",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+};
+BentoGrid.displayName = "BentoGrid";
+const BentoCard = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col justify-between overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm transition-shadow hover:shadow-md",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  );
+};
+BentoCard.displayName = "BentoCard";
+export {
+  BentoCard,
+  BentoGrid
+};

package/dist/components/bento-grid/index.js

@@ -0,0 +1,8 @@
+import {
+  BentoCard,
+  BentoGrid
+} from "./bento-grid";
+export {
+  BentoCard,
+  BentoGrid
+};

package/dist/components/blur-reveal/blur-reveal.js

@@ -0,0 +1,83 @@
+"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 useInView() {
+  const elementRef = React.useRef(null);
+  const [inView, setInView] = React.useState(false);
+  React.useEffect(() => {
+    const element = elementRef.current;
+    if (!element || typeof IntersectionObserver !== "function") {
+      setInView(true);
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry?.isIntersecting) {
+        setInView(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return [elementRef, inView];
+}
+const BlurReveal = ({
+  children,
+  className,
+  delay = 0,
+  ref,
+  style,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const [elementRef, inView] = useInView();
+  const revealed = reduced || inView;
+  const setReferences = (node) => {
+    elementRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "transition-all duration-700",
+        revealed ? "opacity-100 [filter:blur(0)]" : "opacity-0 [filter:blur(12px)]",
+        className
+      ),
+      ref: setReferences,
+      style: { transitionDelay: `${delay}ms`, ...style },
+      ...props,
+      children
+    }
+  );
+};
+BlurReveal.displayName = "BlurReveal";
+export {
+  BlurReveal
+};

package/dist/components/blur-reveal/index.js

@@ -0,0 +1,4 @@
+import { BlurReveal } from "./blur-reveal";
+export {
+  BlurReveal
+};

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

@@ -1,50 +1,48 @@
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { cn } from "../../lib/utils";
-const BorderBeam = React.forwardRef(
-  ({
-    borderWidth = 1,
-    className,
-    colorFrom = "oklch(var(--primary) / 0.85)",
-    colorTo = "oklch(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
-      }
-    );
-  }
-);
+const BorderBeam = ({
+  borderWidth = 1,
+  className,
+  colorFrom = "oklch(var(--primary) / 0.85)",
+  colorTo = "oklch(var(--ring) / 0.25)",
+  delay = 0,
+  duration = 6,
+  ref,
+  reverse = false,
+  style,
+  ...props
+}) => {
+  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/bottom-activity-strip/bottom-activity-strip.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const TONE_DOT = {
   danger: "bg-red-500",
@@ -59,7 +56,10 @@ const Chip = (props) => {
     }
   );
 };
-const BottomActivityStrip = forwardRef((props, ref) => {
+const BottomActivityStrip = ({
+  ref,
+  ...props
+}) => {
   const { className, events, labels, maxEvents, ...rest } = props;
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
   const visible = maxEvents === void 0 || maxEvents >= events.length ? events : events.slice(0, maxEvents);
@@ -84,7 +84,7 @@ const BottomActivityStrip = forwardRef((props, ref) => {
       ) : visible.map((event) => /* @__PURE__ */ jsx(Chip, { event }, event.id))
     }
   );
-});
+};
 BottomActivityStrip.displayName = "BottomActivityStrip";
 export {
   BottomActivityStrip

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

@@ -1,23 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const BottomBar = forwardRef(
-  ({ center, className, leading, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
-        className
-      ),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
-        center ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center gap-2", children: center }) : null,
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
-      ]
-    }
-  )
+const BottomBar = ({
+  center,
+  className,
+  leading,
+  ref,
+  trailing,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "flex min-h-14 items-center gap-3 px-4 py-3 text-sm",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: leading }),
+      center ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center gap-2", children: center }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+    ]
+  }
 );
 BottomBar.displayName = "BottomBar";
 export {

package/dist/components/button/button.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -28,19 +27,24 @@ const buttonVariants = cva(
     }
   }
 );
-const Button = forwardRef(
-  ({ asChild = false, className, size, variant, ...props }, reference) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ className, size, variant })),
-        ref: reference,
-        ...props
-      }
-    );
-  }
-);
+const Button = ({
+  asChild = false,
+  className,
+  ref: reference,
+  size,
+  variant,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(buttonVariants({ className, size, variant })),
+      ref: reference,
+      ...props
+    }
+  );
+};
 Button.displayName = "Button";
 export {
   Button,

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

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const buttonGroupVariants = cva(
+  "isolate inline-flex w-fit [&>*:focus-visible]:z-10 [&>*:focus-within]:z-10",
+  {
+    defaultVariants: {
+      orientation: "horizontal"
+    },
+    variants: {
+      orientation: {
+        horizontal: "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
+      }
+    }
+  }
+);
+const ButtonGroup = ({
+  className,
+  orientation,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(buttonGroupVariants({ orientation }), className),
+    "data-slot": "button-group",
+    ref,
+    role: "group",
+    ...props
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  ButtonGroup,
+  buttonGroupVariants
+};

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

@@ -0,0 +1,8 @@
+import {
+  ButtonGroup,
+  buttonGroupVariants
+} from "./button-group";
+export {
+  ButtonGroup,
+  buttonGroupVariants
+};