@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/navbar-saas/navbar-saas.js

@@ -16,53 +16,61 @@ function NavbarSaas({
 }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
-  return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      showMobileMenu ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          "aria-expanded": open,
-          "aria-label": "Toggle sidebar",
-          "data-testid": "navbar-saas-mobile-trigger",
-          onClick: () => {
-            setOpen(!open);
-          },
-          size: "icon",
-          variant: "ghost",
-          children: open ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(Menu, { className: "size-4" })
-        }
-      ) : null,
-      brand ? typeof brand === "string" ? /* @__PURE__ */ jsx(Link, { className: "text-xl font-bold truncate", href: "/", children: brand }) : brand : null,
-      navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden lg:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
-        Link,
-        {
-          className: cn(
-            "text-sm font-medium transition-colors hover:text-foreground/80",
-            pathname === item.href ? "text-foreground" : "text-foreground/60"
-          ),
-          href: item.href,
-          children: item.title
-        },
-        item.href
-      )) }) : null
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      rightSlot,
-      /* @__PURE__ */ jsx(
-        ThemeToggle,
-        {
-          dict: {
-            theme: {
-              dark: "Dark",
-              light: "Light",
-              system: "System",
-              toggle_theme: "Toggle theme"
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0",
+      "data-slot": "navbar-saas",
+      style: { WebkitBackdropFilter: "blur(8px)" },
+      children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          showMobileMenu ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-expanded": open,
+              "aria-label": "Toggle sidebar",
+              "data-testid": "navbar-saas-mobile-trigger",
+              onClick: () => {
+                setOpen(!open);
+              },
+              size: "icon",
+              variant: "ghost",
+              children: open ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(Menu, { className: "size-4" })
             }
-          }
-        }
-      )
-    ] })
-  ] }) }) });
+          ) : null,
+          brand ? typeof brand === "string" ? /* @__PURE__ */ jsx(Link, { className: "text-xl font-bold truncate", href: "/", children: brand }) : brand : null,
+          navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden lg:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
+            Link,
+            {
+              className: cn(
+                "text-sm font-medium transition-colors hover:text-foreground/80",
+                pathname === item.href ? "text-foreground" : "text-foreground/60"
+              ),
+              href: item.href,
+              children: item.title
+            },
+            item.href
+          )) }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          rightSlot,
+          /* @__PURE__ */ jsx(
+            ThemeToggle,
+            {
+              dict: {
+                theme: {
+                  dark: "Dark",
+                  light: "Light",
+                  system: "System",
+                  toggle_theme: "Toggle theme"
+                }
+              }
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
 }
 export {
   NavbarSaas

package/dist/components/navigation-menu/navigation-menu.js

@@ -1,11 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-const NavigationMenu = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const NavigationMenu = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Root,
   {
     className: cn(
@@ -19,9 +23,13 @@ const NavigationMenu = forwardRef(({ children, className, ...props }, ref) => /*
       /* @__PURE__ */ jsx(NavigationMenuViewport, {})
     ]
   }
-));
+);
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-const NavigationMenuList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const NavigationMenuList = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.List,
   {
     className: cn(
@@ -31,13 +39,18 @@ const NavigationMenuList = forwardRef(({ className, ...props }, ref) => /* @__PU
     ref,
     ...props
   }
-));
+);
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 const navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 );
-const NavigationMenuTrigger = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+const NavigationMenuTrigger = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Trigger,
   {
     className: cn(navigationMenuTriggerStyle(), "group", className),
@@ -55,9 +68,13 @@ const NavigationMenuTrigger = forwardRef(({ children, className, ...props }, ref
       )
     ]
   }
-));
+);
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-const NavigationMenuContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const NavigationMenuContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Content,
   {
     className: cn(
@@ -67,10 +84,14 @@ const NavigationMenuContent = forwardRef(({ className, ...props }, ref) => /* @_
     ref,
     ...props
   }
-));
+);
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
-const NavigationMenuViewport = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+const NavigationMenuViewport = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
@@ -80,9 +101,13 @@ const NavigationMenuViewport = forwardRef(({ className, ...props }, ref) => /* @
     ref,
     ...props
   }
-) }));
+) });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-const NavigationMenuIndicator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const NavigationMenuIndicator = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Indicator,
   {
     className: cn(
@@ -93,7 +118,7 @@ const NavigationMenuIndicator = forwardRef(({ className, ...props }, ref) => /*
     ...props,
     children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
   }
-));
+);
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 export {
   NavigationMenu,

package/dist/components/newsletter-signup/newsletter-signup.js

@@ -1,7 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useId,
   useReducer,
@@ -158,7 +157,10 @@ function useNewsletterSignupController(options) {
     status
   };
 }
-const NewsletterSignup = forwardRef((props, ref) => {
+const NewsletterSignup = ({
+  ref,
+  ...props
+}) => {
   const {
     autoComplete = "email",
     className,
@@ -199,7 +201,7 @@ const NewsletterSignup = forwardRef((props, ref) => {
       status: controller.status
     }
   );
-});
+};
 NewsletterSignup.displayName = "NewsletterSignup";
 function FormBody({
   autoComplete,

package/dist/components/number-input/number-input.js

@@ -95,10 +95,11 @@ function NumberInputComponent({
   min,
   onValueChange,
   placeholder,
+  ref: reference,
   step = 1,
   value,
   ...props
-}, reference) {
+}) {
   const { commitValue, resolvedValue } = useNumberInputState(
     value,
     defaultValue,
@@ -160,8 +161,8 @@ function NumberInputComponent({
     }
   );
 }
-const NumberInput = React.forwardRef(NumberInputComponent);
-NumberInput.displayName = "NumberInput";
+NumberInputComponent.displayName = "NumberInput";
+const NumberInput = NumberInputComponent;
 export {
   NumberInput
 };

package/dist/components/number-ticker/number-ticker.js

@@ -12,58 +12,57 @@ function getNumberTickerFormatter(locale, formatOptions) {
   }
   return formatter;
 }
-const NumberTicker = React.forwardRef(
-  ({
-    className,
-    delay = 0,
-    duration = 1.2,
-    formatOptions,
-    from = 0,
-    locale,
-    value,
-    ...props
-  }, ref) => {
-    const [currentValue, setCurrentValue] = React.useState(from);
-    React.useEffect(() => {
-      const reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      if (reducedMotion || duration <= 0) {
-        setCurrentValue(value);
-        return;
-      }
-      let animationFrame = 0;
-      let timeoutId = 0;
-      const startDelay = Math.max(0, delay * 1e3);
-      const durationMs = duration * 1e3;
-      timeoutId = window.setTimeout(() => {
-        const startTime = performance.now();
-        const tick = (timestamp) => {
-          const elapsed = timestamp - startTime;
-          const progress = Math.min(elapsed / durationMs, 1);
-          const nextValue = from + (value - from) * progress;
-          setCurrentValue(nextValue);
-          if (progress < 1) {
-            animationFrame = window.requestAnimationFrame(tick);
-          }
-        };
-        animationFrame = window.requestAnimationFrame(tick);
-      }, startDelay);
-      return () => {
-        window.clearTimeout(timeoutId);
-        window.cancelAnimationFrame(animationFrame);
+const NumberTicker = ({
+  className,
+  delay = 0,
+  duration = 1.2,
+  formatOptions,
+  from = 0,
+  locale,
+  ref,
+  value,
+  ...props
+}) => {
+  const [currentValue, setCurrentValue] = React.useState(() => from);
+  React.useEffect(() => {
+    const reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reducedMotion || duration <= 0) {
+      setCurrentValue(value);
+      return;
+    }
+    let animationFrame = 0;
+    let timeoutId = 0;
+    const startDelay = Math.max(0, delay * 1e3);
+    const durationMs = duration * 1e3;
+    timeoutId = window.setTimeout(() => {
+      const startTime = performance.now();
+      const tick = (timestamp) => {
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / durationMs, 1);
+        const nextValue = from + (value - from) * progress;
+        setCurrentValue(nextValue);
+        if (progress < 1) {
+          animationFrame = window.requestAnimationFrame(tick);
+        }
       };
-    }, [delay, duration, from, value]);
-    const formatter = getNumberTickerFormatter(locale, formatOptions);
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("tabular-nums tracking-tight", className),
-        ref,
-        ...props,
-        children: formatter.format(currentValue)
-      }
-    );
-  }
-);
+      animationFrame = window.requestAnimationFrame(tick);
+    }, startDelay);
+    return () => {
+      window.clearTimeout(timeoutId);
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [delay, duration, from, value]);
+  const formatter = getNumberTickerFormatter(locale, formatOptions);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("tabular-nums tracking-tight", className),
+      ref,
+      ...props,
+      children: formatter.format(currentValue)
+    }
+  );
+};
 NumberTicker.displayName = "NumberTicker";
 export {
   NumberTicker

package/dist/components/object-card/object-card.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
 import { Button } from "../button/button";
@@ -77,48 +76,47 @@ function ObjectCardActions({ actions }) {
     );
   }) });
 }
-const ObjectCard = forwardRef(
-  ({
-    actions,
-    children,
-    className,
-    footer,
-    kind = "Object",
-    metrics = [],
-    ports,
-    state = "idle",
-    summary,
-    title,
-    ...props
-  }, ref) => /* @__PURE__ */ jsxs(
-    "article",
-    {
-      className: cn(
-        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_oklch(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
-        className
+const ObjectCard = ({
+  actions,
+  children,
+  className,
+  footer,
+  kind = "Object",
+  metrics = [],
+  ports,
+  ref,
+  state = "idle",
+  summary,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "article",
+  {
+    className: cn(
+      "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_oklch(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
+      className
+    ),
+    "data-state": state,
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,oklch(var(--foreground)/0.22),transparent)]" }),
+      /* @__PURE__ */ jsx(
+        ObjectCardHeader,
+        {
+          kind,
+          ports,
+          state,
+          summary,
+          title
+        }
       ),
-      "data-state": state,
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,oklch(var(--foreground)/0.22),transparent)]" }),
-        /* @__PURE__ */ jsx(
-          ObjectCardHeader,
-          {
-            kind,
-            ports,
-            state,
-            summary,
-            title
-          }
-        ),
-        /* @__PURE__ */ jsx(ObjectCardMetrics, { metrics }),
-        children ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children }) : null,
-        /* @__PURE__ */ jsx(ObjectCardActions, { actions }),
-        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 pt-3 text-sm text-muted-foreground", children: footer }) : null
-      ]
-    }
-  )
+      /* @__PURE__ */ jsx(ObjectCardMetrics, { metrics }),
+      children ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children }) : null,
+      /* @__PURE__ */ jsx(ObjectCardActions, { actions }),
+      footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 pt-3 text-sm text-muted-foreground", children: footer }) : null
+    ]
+  }
 );
 ObjectCard.displayName = "ObjectCard";
 export {

package/dist/components/object-handle/object-handle.js

@@ -1,36 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const ObjectHandle = forwardRef(
-  ({ className, hint, label = "Move", ...props }, ref) => /* @__PURE__ */ jsxs(
-    "button",
-    {
-      className: cn(
-        "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
-        className
+const ObjectHandle = ({
+  className,
+  hint,
+  label = "Move",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    className: cn(
+      "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
+      className
+    ),
+    ref,
+    type: "button",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "grid grid-cols-2 gap-0.5 text-[8px] leading-none",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx("span", { children: "\u2022" })
+          ]
+        }
       ),
-      ref,
-      type: "button",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "grid grid-cols-2 gap-0.5 text-[8px] leading-none",
-            children: [
-              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-              /* @__PURE__ */ jsx("span", { children: "\u2022" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { children: label }),
-        hint ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/80", children: hint }) : null
-      ]
-    }
-  )
+      /* @__PURE__ */ jsx("span", { children: label }),
+      hint ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/80", children: hint }) : null
+    ]
+  }
 );
 ObjectHandle.displayName = "ObjectHandle";
 export {

package/dist/components/object-inspector/object-inspector.js

@@ -1,8 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 const KIND_LABEL = {
   agent: "Agent",
@@ -76,60 +73,61 @@ const Header = (props) => /* @__PURE__ */ jsxs("header", { className: "flex flex
     props.subtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: props.subtitle }) : null
   ] })
 ] });
-const ObjectInspector = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      kind,
-      labels,
-      status = "idle",
-      subtitle,
-      title,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    if (!kind || !title) {
-      return /* @__PURE__ */ jsxs(
-        "section",
-        {
-          "aria-label": resolvedLabels.region,
-          className: cn(
-            "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
-            className
-          ),
-          "data-object-inspector": true,
-          "data-object-state": "empty",
-          ref,
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-lg", children: "\u25C7" }),
-            /* @__PURE__ */ jsx("span", { children: resolvedLabels.empty })
-          ]
-        }
-      );
-    }
+const ObjectInspector = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    kind,
+    labels,
+    status = "idle",
+    subtitle,
+    title,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  if (!kind || !title) {
     return /* @__PURE__ */ jsxs(
       "section",
       {
         "aria-label": resolvedLabels.region,
         className: cn(
-          "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+          "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
           className
         ),
         "data-object-inspector": true,
-        "data-object-kind": kind,
-        "data-object-status": status,
+        "data-object-state": "empty",
         ref,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(Header, { kind, status, subtitle, title }),
-          children ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children }) : null
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-lg", children: "\u25C7" }),
+          /* @__PURE__ */ jsx("span", { children: resolvedLabels.empty })
         ]
       }
     );
   }
-);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+        className
+      ),
+      "data-object-inspector": true,
+      "data-object-kind": kind,
+      "data-object-status": status,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Header, { kind, status, subtitle, title }),
+        children ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children }) : null
+      ]
+    }
+  );
+};
 ObjectInspector.displayName = "ObjectInspector";
 export {
   ObjectInspector