@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/dock/dock.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const DockPointerContext = React.createContext(null);
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref !== null) {
+    ref.current = node;
+  }
+}
+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 magnify(distance) {
+  const range = 100;
+  const clamped = Math.min(Math.abs(distance), range);
+  return 1 + 0.5 * (1 - clamped / range);
+}
+const Dock = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const [pointerX, setPointerX] = React.useState(null);
+    return /* @__PURE__ */ jsx(DockPointerContext.Provider, { value: pointerX, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-end gap-2 rounded-2xl border bg-card/60 p-2 backdrop-blur",
+          className
+        ),
+        onPointerLeave: () => {
+          setPointerX(null);
+        },
+        onPointerMove: (event) => {
+          setPointerX(event.clientX);
+        },
+        ref,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Dock.displayName = "Dock";
+function useDockScale(reference, pointerX, reduced) {
+  if (reduced || pointerX === null || reference.current === null) {
+    return 1;
+  }
+  const bounds = reference.current.getBoundingClientRect();
+  const center = bounds.left + bounds.width / 2;
+  return magnify(pointerX - center);
+}
+const DockIcon = React.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    const pointerX = React.useContext(DockPointerContext);
+    const reduced = usePrefersReducedMotion();
+    const reference = React.useRef(null);
+    const scale = useDockScale(reference, pointerX, reduced);
+    const setReferences = React.useCallback(
+      (node) => {
+        reference.current = node;
+        assignRef(ref, node);
+      },
+      [ref]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex aspect-square w-12 items-center justify-center rounded-xl bg-accent text-accent-foreground transition-transform",
+          className
+        ),
+        ref: setReferences,
+        style: { transform: `scale(${scale})`, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+DockIcon.displayName = "DockIcon";
+export {
+  Dock,
+  DockIcon
+};

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

@@ -0,0 +1,111 @@
+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", {
+  defaultVariants: {
+    variant: "with-title"
+  },
+  variants: {
+    variant: {
+      compact: "",
+      "with-meta": "",
+      "with-title": ""
+    }
+  }
+});
+const itemVariants = cva(
+  "group flex flex-col gap-1 rounded-lg border border-border bg-background p-4 text-foreground transition-colors hover:border-foreground/30 hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  {
+    defaultVariants: {
+      side: "previous"
+    },
+    variants: {
+      side: {
+        next: "items-end text-right sm:col-start-2",
+        previous: "items-start text-left"
+      }
+    }
+  }
+);
+const DEFAULT_LABELS = {
+  navigation: "Document navigation",
+  next: "Newer",
+  previous: "Older"
+};
+function SiblingItem({
+  ariaLabel,
+  caption,
+  link,
+  side,
+  variant
+}) {
+  const { anchorProps, href, meta, title } = link;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      "aria-label": ariaLabel,
+      className: cn(itemVariants({ side })),
+      href,
+      ...anchorProps,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: caption }),
+        variant === "compact" ? null : /* @__PURE__ */ jsx("span", { className: "line-clamp-2 text-sm font-semibold text-foreground group-hover:underline", children: title }),
+        variant === "with-meta" && meta ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: meta }) : null
+      ]
+    }
+  );
+}
+function buildAriaLabel(caption, link, variant) {
+  if (variant === "compact" || typeof link.title !== "string") {
+    return caption;
+  }
+  return `${caption}: ${link.title}`;
+}
+const DocumentSiblingNav = forwardRef(({ className, labels, next, previous, variant, ...rest }, ref) => {
+  if (!previous && !next) return null;
+  const resolvedVariant = variant ?? "with-title";
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": resolvedLabels.navigation,
+      className: cn(navVariants({ variant: resolvedVariant }), className),
+      ref,
+      ...rest,
+      children: [
+        previous ? /* @__PURE__ */ jsx(
+          SiblingItem,
+          {
+            ariaLabel: buildAriaLabel(
+              resolvedLabels.previous,
+              previous,
+              resolvedVariant
+            ),
+            caption: resolvedLabels.previous,
+            link: previous,
+            side: "previous",
+            variant: resolvedVariant
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        next ? /* @__PURE__ */ jsx(
+          SiblingItem,
+          {
+            ariaLabel: buildAriaLabel(resolvedLabels.next, next, resolvedVariant),
+            caption: resolvedLabels.next,
+            link: next,
+            side: "next",
+            variant: resolvedVariant
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+DocumentSiblingNav.displayName = "DocumentSiblingNav";
+export {
+  DocumentSiblingNav,
+  navVariants as documentSiblingNavVariants
+};

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

@@ -0,0 +1,8 @@
+import {
+  DocumentSiblingNav,
+  documentSiblingNavVariants
+} from "./document-sibling-nav";
+export {
+  DocumentSiblingNav,
+  documentSiblingNavVariants
+};

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const fadeMask = "radial-gradient(ellipse at center, black, transparent 75%)";
+const DotPattern = React.forwardRef(
+  ({ className, dotRadius = 1, fade = true, spacing = 16, style, ...props }, ref) => {
+    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/dropdown-menu/dropdown-menu.js

@@ -75,7 +75,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ checked, children, classNam
     ref: reference,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" }) }) }),
       children
     ]
   }
@@ -91,7 +91,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ children, className, ...props
     ref: reference,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u25CB" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u25CB" }) }) }),
       children
     ]
   }
@@ -113,7 +113,7 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-m-1 h-px bg-muted", className),
     ref: reference,
     ...props
   }

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

@@ -0,0 +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
+    }
+  )
+);
+EdgeLabel.displayName = "EdgeLabel";
+export {
+  EdgeLabel
+};

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

@@ -0,0 +1,4 @@
+import { EdgeLabel } from "./edge-label";
+export {
+  EdgeLabel
+};

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

@@ -0,0 +1,93 @@
+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(
+  "flex flex-col items-center justify-center gap-3 text-center text-foreground",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "px-6 py-16",
+        md: "px-4 py-10",
+        sm: "px-3 py-6"
+      }
+    }
+  }
+);
+const titleVariants = cva("font-semibold tracking-tight", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "text-xl",
+      md: "text-lg",
+      sm: "text-base"
+    }
+  }
+});
+const descriptionVariants = cva("max-w-prose text-muted-foreground", {
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      lg: "text-base",
+      md: "text-sm",
+      sm: "text-xs"
+    }
+  }
+});
+const iconVariants = cva(
+  "mb-1 flex items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:h-1/2 [&_svg]:w-1/2",
+  {
+    defaultVariants: {
+      size: "md"
+    },
+    variants: {
+      size: {
+        lg: "size-16",
+        md: "size-12",
+        sm: "size-8"
+      }
+    }
+  }
+);
+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
+        ]
+      }
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+export {
+  EmptyState,
+  emptyStateVariants
+};

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

@@ -0,0 +1,8 @@
+import {
+  EmptyState,
+  emptyStateVariants
+} from "./empty-state";
+export {
+  EmptyState,
+  emptyStateVariants
+};

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

@@ -0,0 +1,216 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+const ERA_PALETTE = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300"
+  }
+};
+const EraColumnContext = createContext({
+  color: "neutral"
+});
+function useEraColumnColor() {
+  return useContext(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
+    }
+  )
+);
+EraComparison.displayName = "EraComparison";
+function ColumnHeader({
+  color,
+  name,
+  period,
+  region
+}) {
+  const palette = ERA_PALETTE[color];
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("h-1 w-12 rounded-full", palette.accent)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight text-foreground", children: name }),
+      period ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full px-2 py-0.5 text-xs font-mono",
+            palette.chip
+          ),
+          children: period
+        }
+      ) : null
+    ] }),
+    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",
+    {
+      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 = 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
+      }
+    );
+  }
+);
+EraHighlight.displayName = "EraHighlight";
+const EraFigure = forwardRef((props, ref) => {
+  const { anchorProps, className, href, name, ...rest } = props;
+  const color = useEraColumnColor();
+  const palette = ERA_PALETTE[color];
+  const baseClass = cn(
+    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+    palette.chip,
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: cn(baseClass, "underline-offset-4 hover:underline"),
+        href,
+        ref: (node) => {
+          assignRef(ref, node);
+        },
+        ...anchorProps,
+        children: name
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: baseClass,
+      ref: (node) => {
+        assignRef(ref, node);
+      },
+      ...rest,
+      children: name
+    }
+  );
+});
+EraFigure.displayName = "EraFigure";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};

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

@@ -0,0 +1,16 @@
+import {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+} from "./era-comparison";
+export {
+  EraColumn,
+  EraComparison,
+  EraDomain,
+  EraFigure,
+  EraHighlight,
+  useEraColumnColor
+};