@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/dock/index.js

@@ -0,0 +1,5 @@
+import { Dock, DockIcon } from "./dock";
+export {
+  Dock,
+  DockIcon
+};

package/dist/components/document-sibling-nav/document-sibling-nav.js

@@ -1,7 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const navVariants = cva("grid w-full gap-3 text-sm sm:grid-cols-2", {
@@ -64,7 +61,15 @@ function buildAriaLabel(caption, link, variant) {
   }
   return `${caption}: ${link.title}`;
 }
-const DocumentSiblingNav = forwardRef(({ className, labels, next, previous, variant, ...rest }, ref) => {
+const DocumentSiblingNav = ({
+  className,
+  labels,
+  next,
+  previous,
+  ref,
+  variant,
+  ...rest
+}) => {
   if (!previous && !next) return null;
   const resolvedVariant = variant ?? "with-title";
   const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
@@ -103,7 +108,7 @@ const DocumentSiblingNav = forwardRef(({ className, labels, next, previous, vari
       ]
     }
   );
-});
+};
 DocumentSiblingNav.displayName = "DocumentSiblingNav";
 export {
   DocumentSiblingNav,

package/dist/components/dot-pattern/dot-pattern.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const fadeMask = "radial-gradient(ellipse at center, black, transparent 75%)";
+const DotPattern = ({
+  className,
+  dotRadius = 1,
+  fade = true,
+  ref,
+  spacing = 16,
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "pointer-events-none absolute inset-0 text-muted-foreground/40",
+        className
+      ),
+      ref,
+      style: {
+        backgroundImage: `radial-gradient(currentColor ${dotRadius}px, transparent ${dotRadius}px)`,
+        backgroundSize: `${spacing}px ${spacing}px`,
+        maskImage: fade ? fadeMask : void 0,
+        WebkitMaskImage: fade ? fadeMask : void 0,
+        ...style
+      },
+      ...props
+    }
+  );
+};
+DotPattern.displayName = "DotPattern";
+export {
+  DotPattern
+};

package/dist/components/dot-pattern/index.js

@@ -0,0 +1,4 @@
+import { DotPattern } from "./dot-pattern";
+export {
+  DotPattern
+};

package/dist/components/drawer/drawer.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "../../lib/utils";
 const Drawer = ({
@@ -17,16 +16,25 @@ Drawer.displayName = "Drawer";
 const DrawerTrigger = DrawerPrimitive.Trigger;
 const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;
-const DrawerOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DrawerOverlay = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DrawerPrimitive.Overlay,
   {
     className: cn("fixed inset-0 z-50 bg-black/80", className),
     ref,
     ...props
   }
-));
+);
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-const DrawerContent = forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+const DrawerContent = ({
+  children,
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs(
     DrawerPrimitive.Content,
@@ -43,7 +51,7 @@ const DrawerContent = forwardRef(({ children, className, ...props }, ref) => /*
       ]
     }
   )
-] }));
+] });
 DrawerContent.displayName = "DrawerContent";
 const DrawerHeader = ({
   className,
@@ -67,7 +75,11 @@ const DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-const DrawerTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DrawerTitle = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DrawerPrimitive.Title,
   {
     className: cn(
@@ -77,16 +89,20 @@ const DrawerTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
     ref,
     ...props
   }
-));
+);
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-const DrawerDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DrawerDescription = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DrawerPrimitive.Description,
   {
     className: cn("text-sm text-muted-foreground", className),
     ref,
     ...props
   }
-));
+);
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 export {
   Drawer,

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "../../lib/utils";
 const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -9,7 +8,13 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ children, className, inset, ...props }, reference) => /* @__PURE__ */ jsxs(
+const DropdownMenuSubTrigger = ({
+  children,
+  className,
+  inset,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     className: cn(
@@ -24,9 +29,13 @@ const DropdownMenuSubTrigger = React.forwardRef(({ children, className, inset, .
       /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs", children: "\u203A" })
     ]
   }
-));
+);
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DropdownMenuSubContent = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     className: cn(
@@ -36,9 +45,14 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, refere
     ref: reference,
     ...props
   }
-));
+);
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, reference) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const DropdownMenuContent = ({
+  className,
+  ref: reference,
+  sideOffset = 4,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     className: cn(
@@ -49,9 +63,14 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
     sideOffset,
     ...props
   }
-) }));
+) });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx(
+const DropdownMenuItem = ({
+  className,
+  inset,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     className: cn(
@@ -62,9 +81,15 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, refer
     ref: reference,
     ...props
   }
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ checked, children, className, ...props }, reference) => /* @__PURE__ */ jsxs(
+const DropdownMenuCheckboxItem = ({
+  checked,
+  children,
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     checked,
@@ -79,9 +104,14 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ checked, children, classNam
       children
     ]
   }
-));
+);
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props }, reference) => /* @__PURE__ */ jsxs(
+const DropdownMenuRadioItem = ({
+  children,
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     className: cn(
@@ -95,9 +125,14 @@ const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props
       children
     ]
   }
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx(
+const DropdownMenuLabel = ({
+  className,
+  inset,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     className: cn(
@@ -108,16 +143,20 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, refe
     ref: reference,
     ...props
   }
-));
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+const DropdownMenuSeparator = ({
+  className,
+  ref: reference,
+  ...props
+}) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     className: cn("-m-1 h-px bg-muted", className),
     ref: reference,
     ...props
   }
-));
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = ({
   className,

package/dist/components/edge-label/edge-label.js

@@ -1,24 +1,26 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
 const emphasisClasses = {
   active: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300",
   subtle: "border-border/60 bg-background/90 text-muted-foreground"
 };
-const EdgeLabel = forwardRef(
-  ({ className, emphasis = "subtle", ...props }, ref) => /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
-        emphasisClasses[emphasis],
-        className
-      ),
-      "data-emphasis": emphasis,
-      ref,
-      ...props
-    }
-  )
+const EdgeLabel = ({
+  className,
+  emphasis = "subtle",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em] shadow-sm",
+      emphasisClasses[emphasis],
+      className
+    ),
+    "data-emphasis": emphasis,
+    ref,
+    ...props
+  }
 );
 EdgeLabel.displayName = "EdgeLabel";
 export {

package/dist/components/empty-state/empty-state.js

@@ -1,7 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const emptyStateVariants = cva(
@@ -58,34 +55,33 @@ const iconVariants = cva(
     }
   }
 );
-const EmptyState = forwardRef(
-  ({
-    children,
-    className,
-    description,
-    icon,
-    role: roleOverride,
-    size,
-    title,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(emptyStateVariants({ size }), className),
-        ref,
-        role: roleOverride ?? "status",
-        ...rest,
-        children: [
-          icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(iconVariants({ size })), children: icon }) : null,
-          title ? /* @__PURE__ */ jsx("h3", { className: cn(titleVariants({ size })), children: title }) : null,
-          description ? /* @__PURE__ */ jsx("p", { className: cn(descriptionVariants({ size })), children: description }) : null,
-          children ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children }) : null
-        ]
-      }
-    );
-  }
-);
+const EmptyState = ({
+  children,
+  className,
+  description,
+  icon,
+  ref,
+  role: roleOverride,
+  size,
+  title,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(emptyStateVariants({ size }), className),
+      ref,
+      role: roleOverride ?? "status",
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(iconVariants({ size })), children: icon }) : null,
+        title ? /* @__PURE__ */ jsx("h3", { className: cn(titleVariants({ size })), children: title }) : null,
+        description ? /* @__PURE__ */ jsx("p", { className: cn(descriptionVariants({ size })), children: description }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children }) : null
+      ]
+    }
+  );
+};
 EmptyState.displayName = "EmptyState";
 export {
   EmptyState,

package/dist/components/era-comparison/era-comparison.js

@@ -2,8 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
-  useContext,
+  use,
   useMemo
 } from "react";
 import { cn } from "../../lib/utils";
@@ -48,21 +47,24 @@ const EraColumnContext = createContext({
   color: "neutral"
 });
 function useEraColumnColor() {
-  return useContext(EraColumnContext).color;
+  return use(EraColumnContext).color;
 }
-const EraComparison = forwardRef(
-  ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
-    "section",
-    {
-      className: cn(
-        "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
-        className
-      ),
-      ref,
-      ...rest,
-      children
-    }
-  )
+const EraComparison = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "section",
+  {
+    className: cn(
+      "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
 );
 EraComparison.displayName = "EraComparison";
 function ColumnHeader({
@@ -96,81 +98,92 @@ function ColumnHeader({
     region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: region }) : null
   ] });
 }
-const EraColumn = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      color = "neutral",
-      name,
-      period,
-      region,
-      ...rest
-    } = props;
-    const contextValue = useMemo(
-      () => ({ color }),
-      [color]
-    );
-    return /* @__PURE__ */ jsx(EraColumnContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: cn(
-          "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
-          className
-        ),
-        "data-color": color,
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(
-            ColumnHeader,
-            {
-              color,
-              name,
-              period,
-              region
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children })
-        ]
-      }
-    ) });
-  }
-);
-EraColumn.displayName = "EraColumn";
-const EraDomain = forwardRef(
-  ({ children, className, name, ...rest }, ref) => /* @__PURE__ */ jsxs(
-    "section",
+const EraColumn = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    color = "neutral",
+    name,
+    period,
+    region,
+    ...rest
+  } = props;
+  const contextValue = useMemo(
+    () => ({ color }),
+    [color]
+  );
+  return /* @__PURE__ */ jsx(EraColumnContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "article",
     {
-      className: cn("flex flex-col gap-2", className),
-      "data-domain": typeof name === "string" ? name : void 0,
+      className: cn(
+        "flex flex-col gap-3 rounded-2xl border border-border bg-background p-4 shadow-sm",
+        className
+      ),
+      "data-color": color,
       ref,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: name }),
-        children
+        /* @__PURE__ */ jsx(
+          ColumnHeader,
+          {
+            color,
+            name,
+            period,
+            region
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children })
       ]
     }
-  )
-);
-EraDomain.displayName = "EraDomain";
-const EraHighlight = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const color = useEraColumnColor();
-    const palette = ERA_PALETTE[color];
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: cn("rounded-md px-2 py-1 text-sm", palette.chip, className),
-        ref,
-        ...rest,
-        children
-      }
-    );
+  ) });
+};
+EraColumn.displayName = "EraColumn";
+const EraDomain = ({
+  children,
+  className,
+  name,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    className: cn("flex flex-col gap-2", className),
+    "data-domain": typeof name === "string" ? name : void 0,
+    ref,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: name }),
+      children
+    ]
   }
 );
+EraDomain.displayName = "EraDomain";
+const EraHighlight = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
+  const color = useEraColumnColor();
+  const palette = ERA_PALETTE[color];
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("rounded-md px-2 py-1 text-sm", palette.chip, className),
+      ref,
+      ...rest,
+      children
+    }
+  );
+};
 EraHighlight.displayName = "EraHighlight";
-const EraFigure = forwardRef((props, ref) => {
+const EraFigure = ({
+  ref,
+  ...props
+}) => {
   const { anchorProps, className, href, name, ...rest } = props;
   const color = useEraColumnColor();
   const palette = ERA_PALETTE[color];
@@ -204,7 +217,7 @@ const EraFigure = forwardRef((props, ref) => {
       children: name
     }
   );
-});
+};
 EraFigure.displayName = "EraFigure";
 export {
   EraColumn,