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

package/dist/components/step-by-step/step-by-step.js

@@ -10,7 +10,7 @@ function Step({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
+      /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold", children: number }),
       /* @__PURE__ */ jsx("div", { className: "w-px flex-1 bg-border mt-2" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 pb-8 last:pb-0", children: [
@@ -33,7 +33,7 @@ function InteractiveStep({
         "button",
         {
           className: cn(
-            "flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
+            "flex size-8 items-center justify-center rounded-full text-sm font-bold transition-colors",
             isCompleted ? "bg-green-500 text-white" : "bg-primary text-primary-foreground"
           ),
           onClick: onToggle,
@@ -41,7 +41,7 @@ function InteractiveStep({
           children: isCompleted ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4",
+              className: "size-4",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -93,6 +93,7 @@ function InteractiveStep({
   ] });
 }
 function StepByStep({
+  as: Heading = "h3",
   children,
   className,
   interactive = false,
@@ -112,7 +113,7 @@ function StepByStep({
         /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-primary",
+            className: "size-5 text-primary",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -127,10 +128,11 @@ function StepByStep({
             )
           }
         ),
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg", children: title })
+        /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-lg", children: title })
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "space-y-0", children: steps.map((step, index) => {
         const stepElement = step;
+        const stepKey = `${stepElement.props.title}-${index + 1}`;
         return /* @__PURE__ */ jsx(
           Step,
           {
@@ -138,7 +140,7 @@ function StepByStep({
             title: stepElement.props.title,
             children: stepElement.props.children
           },
-          index
+          stepKey
         );
       }) })
     ] });
@@ -148,7 +150,7 @@ function StepByStep({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary",
+          className: "size-5 text-primary",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -183,7 +185,7 @@ function StepByStep({
         title: step.props.title,
         children: step.props.children
       },
-      index
+      `${step.props.title}-${index + 1}`
     )) })
   ] });
 }

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

@@ -45,7 +45,7 @@ function StepNavigationImpl({
                 "svg",
                 {
                   "aria-hidden": "true",
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -90,7 +90,7 @@ function StepNavigationImpl({
                 "svg",
                 {
                   "aria-hidden": "true",
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",

package/dist/components/stepper/stepper.js

@@ -13,10 +13,10 @@ function StepIcon({
   stepNumber
 }) {
   if (state === "complete") {
-    return /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" });
+    return /* @__PURE__ */ jsx(Check, { className: "size-4" });
   }
   if (!showNumbers) {
-    return /* @__PURE__ */ jsx(Circle, { className: "h-3.5 w-3.5 fill-current stroke-none" });
+    return /* @__PURE__ */ jsx(Circle, { className: "size-3.5 fill-current stroke-none" });
   }
   return /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: stepNumber });
 }
@@ -52,7 +52,7 @@ function StepperItem({
             {
               "aria-current": stepState === "current" ? "step" : void 0,
               className: cn(
-                "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors",
+                "relative z-10 flex size-8 items-center justify-center rounded-full border text-sm transition-colors",
                 stepState === "complete" && "border-primary bg-primary text-primary-foreground",
                 stepState === "current" && "border-primary bg-primary/10 text-primary shadow-sm",
                 stepState === "upcoming" && "border-border bg-background text-muted-foreground"

package/dist/components/sticky-metric/index.js

@@ -0,0 +1,6 @@
+import {
+  StickyMetric
+} from "./sticky-metric";
+export {
+  StickyMetric
+};

package/dist/components/sticky-metric/sticky-metric.js

@@ -0,0 +1,83 @@
+"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",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const ANCHOR_OFFSET = {
+  "bottom-left": { transform: "translate(-100%, 100%)" },
+  "bottom-right": { transform: "translate(0%, 100%)" },
+  "top-left": { transform: "translate(-100%, -100%)" },
+  "top-right": { transform: "translate(0%, -100%)" }
+};
+const DEFAULT_LABELS = {
+  region: "Sticky metric"
+};
+const StickyMetric = forwardRef(
+  (props, ref) => {
+    const {
+      anchor = "top-right",
+      className,
+      detail,
+      label,
+      labels,
+      tone = "neutral",
+      value,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur",
+          className
+        ),
+        "data-sticky-anchor": anchor,
+        "data-sticky-metric": true,
+        "data-sticky-tone": tone,
+        ref,
+        role: "status",
+        style: {
+          left: x,
+          top: y,
+          transform: ANCHOR_OFFSET[anchor].transform
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("size-1.5 rounded-full", TONE_DOT[tone]),
+              "data-sticky-metric-dot": true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: value }),
+          detail ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[10px] text-muted-foreground",
+              "data-sticky-metric-detail": true,
+              children: detail
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+StickyMetric.displayName = "StickyMetric";
+export {
+  StickyMetric
+};

package/dist/components/story-map/index.js

@@ -0,0 +1,8 @@
+import {
+  StoryMap,
+  StoryMapChapter
+} from "./story-map";
+export {
+  StoryMap,
+  StoryMapChapter
+};

package/dist/components/story-map/story-map.js

@@ -0,0 +1,414 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const PALETTE = {
+  amber: "fill-amber-500",
+  blue: "fill-blue-500",
+  emerald: "fill-emerald-500",
+  purple: "fill-purple-500",
+  red: "fill-red-500",
+  rose: "fill-rose-500"
+};
+const DEFAULT_LABELS = {
+  narrative: "Narrative",
+  progress: "Story progress",
+  region: "Story map"
+};
+const StoryMapContext = createContext(null);
+function useStoryMapContext() {
+  const ctx = useContext(StoryMapContext);
+  if (!ctx) {
+    throw new Error("StoryMap subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function projectEquirectangular(position) {
+  const [lng, lat] = position;
+  return {
+    x: (lng + 180) / 360 * VIEWBOX_WIDTH,
+    y: (90 - lat) / 180 * VIEWBOX_HEIGHT
+  };
+}
+function ChapterMedia({ media }) {
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: media.alt,
+        className: "aspect-video w-full object-cover",
+        loading: "lazy",
+        src: media.src
+      }
+    ),
+    media.caption ? /* @__PURE__ */ jsx("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: media.caption }) : null
+  ] });
+}
+function ChapterHeader({ subtitle, title }) {
+  return /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-tight text-foreground", children: title }),
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
+  ] });
+}
+const StoryMapChapter = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      center,
+      children,
+      className,
+      color = "red",
+      id,
+      media,
+      subtitle,
+      title,
+      zoom = 2,
+      ...rest
+    } = props;
+    const generatedId = useId();
+    const chapterId = id ?? generatedId;
+    const localRef = useRef(null);
+    const { registerChapter, registerMarker, unregisterMarker } = useStoryMapContext();
+    useEffect(() => {
+      registerMarker({ center, color, id: chapterId, zoom });
+      return () => {
+        unregisterMarker(chapterId);
+      };
+    }, [center, chapterId, color, registerMarker, unregisterMarker, zoom]);
+    const refCallback = useCallback(
+      (node) => {
+        localRef.current = node;
+        registerChapter(chapterId, node);
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [chapterId, forwardedRef, registerChapter]
+    );
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: cn(
+          "flex min-h-screen flex-col justify-center gap-3 py-12",
+          className
+        ),
+        "data-chapter-id": chapterId,
+        id: chapterId,
+        ref: refCallback,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ChapterHeader, { subtitle, title }),
+          media ? /* @__PURE__ */ jsx(ChapterMedia, { media }) : null,
+          children ? /* @__PURE__ */ jsx("div", { className: "space-y-2 text-sm leading-relaxed text-foreground [&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-3 [&_blockquote]:italic [&_blockquote]:text-muted-foreground", children }) : null
+        ]
+      }
+    );
+  }
+);
+StoryMapChapter.displayName = "StoryMapChapter";
+function Stage({
+  activeId,
+  backdrop,
+  backdropAlt,
+  markers
+}) {
+  const active = markers.find((marker) => marker.id === activeId);
+  const zoom = active?.zoom ?? 1;
+  const innerWidth = VIEWBOX_WIDTH / zoom;
+  const innerHeight = VIEWBOX_HEIGHT / zoom;
+  const center = active ? projectEquirectangular(active.center) : { x: VIEWBOX_WIDTH / 2, y: VIEWBOX_HEIGHT / 2 };
+  const viewX = center.x - innerWidth / 2;
+  const viewY = center.y - innerHeight / 2;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block h-full w-full transition-[viewBox] duration-500",
+      "data-active-chapter-id": activeId ?? "",
+      "data-active-zoom": zoom,
+      preserveAspectRatio: "xMidYMid slice",
+      viewBox: `${viewX.toString()} ${viewY.toString()} ${innerWidth.toString()} ${innerHeight.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "fill-muted",
+            height: VIEWBOX_HEIGHT,
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height: VIEWBOX_HEIGHT,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        markers.map((marker) => {
+          const point = projectEquirectangular(marker.center);
+          const isActive = marker.id === activeId;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-marker-active": isActive ? "true" : void 0,
+              "data-marker-id": marker.id,
+              transform: `translate(${point.x.toString()}, ${point.y.toString()})`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: cn("stroke-background", PALETTE[marker.color]),
+                    r: isActive ? 12 : 6,
+                    strokeWidth: 2
+                  }
+                ),
+                isActive ? /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: cn("opacity-30", PALETTE[marker.color]),
+                    r: 24
+                  }
+                ) : null
+              ]
+            },
+            marker.id
+          );
+        })
+      ]
+    }
+  );
+}
+function chapterIdsFromChildren(children) {
+  const ids = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const element = child;
+    if (typeof element.props.id === "string") ids.push(element.props.id);
+  });
+  return ids;
+}
+function ProgressStrip({
+  activeId,
+  ids,
+  label
+}) {
+  if (ids.length === 0) return null;
+  const activeIndex = activeId ? ids.indexOf(activeId) : -1;
+  const ratio = activeIndex < 0 ? 0 : (activeIndex + 1) / ids.length;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": label,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(ratio * 100),
+      className: "sticky top-0 z-20 h-1 w-full bg-border",
+      role: "progressbar",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "block h-full bg-primary transition-[width] duration-200",
+          style: { width: `${(ratio * 100).toString()}%` }
+        }
+      )
+    }
+  );
+}
+function useChapterRegistry() {
+  const chapterMapRef = useRef(/* @__PURE__ */ new Map());
+  const markersRef = useRef(/* @__PURE__ */ new Map());
+  const [chapterIds, setChapterIds] = useState([]);
+  const [markerEntries, setMarkerEntries] = useState([]);
+  const [activeId, setActiveId] = useState();
+  const registerChapter = useCallback(
+    (id, node) => {
+      const map = chapterMapRef.current;
+      if (node) map.set(id, node);
+      else map.delete(id);
+      setChapterIds([...map.keys()]);
+    },
+    []
+  );
+  const registerMarker = useCallback((entry) => {
+    markersRef.current.set(entry.id, entry);
+    setMarkerEntries([...markersRef.current.values()]);
+  }, []);
+  const unregisterMarker = useCallback((id) => {
+    markersRef.current.delete(id);
+    setMarkerEntries([...markersRef.current.values()]);
+  }, []);
+  useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        const first = visible[0];
+        if (first?.target instanceof HTMLElement) {
+          const id = first.target.dataset.chapterId;
+          if (id) setActiveId(id);
+        }
+      },
+      { rootMargin: "-30% 0px -50% 0px", threshold: 0.1 }
+    );
+    [...chapterMapRef.current.values()].forEach((node) => {
+      observer.observe(node);
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [chapterIds]);
+  return {
+    activeId,
+    markerEntries,
+    registerChapter,
+    registerMarker,
+    setActiveId,
+    unregisterMarker
+  };
+}
+const Shell = forwardRef(function Shell2(props, ref) {
+  const {
+    activeId,
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    labels,
+    markers,
+    orderedIds,
+    titleId
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "relative flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground md:flex-row",
+        className
+      ),
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: labels.region }),
+        /* @__PURE__ */ jsx(
+          ProgressStrip,
+          {
+            activeId,
+            ids: orderedIds,
+            label: labels.progress
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sticky top-0 hidden h-[80vh] flex-1 self-start md:block",
+            "data-story-map-stage": true,
+            children: /* @__PURE__ */ jsx(
+              Stage,
+              {
+                activeId,
+                backdrop,
+                backdropAlt,
+                markers
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-label": labels.narrative,
+            className: "flex-1 px-6 md:max-w-xl",
+            role: "region",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "block aspect-[2/1] w-full border-t border-border md:hidden",
+            "data-story-map-stage-mobile": true,
+            children: /* @__PURE__ */ jsx(
+              Stage,
+              {
+                activeId,
+                backdrop,
+                backdropAlt,
+                markers
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+const StoryMap = forwardRef((props, ref) => {
+  const { backdrop, backdropAlt, children, className, labels, ...rest } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const {
+    activeId,
+    markerEntries,
+    registerChapter,
+    registerMarker,
+    setActiveId,
+    unregisterMarker
+  } = useChapterRegistry();
+  const ctx = useMemo(
+    () => ({
+      activeId,
+      registerChapter,
+      registerMarker,
+      setActiveId,
+      unregisterMarker
+    }),
+    [activeId, registerChapter, registerMarker, setActiveId, unregisterMarker]
+  );
+  const orderedIds = useMemo(
+    () => chapterIdsFromChildren(children),
+    [children]
+  );
+  return /* @__PURE__ */ jsx(StoryMapContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Shell,
+    {
+      activeId,
+      backdrop,
+      backdropAlt,
+      className,
+      labels: resolvedLabels,
+      markers: markerEntries,
+      orderedIds,
+      ref,
+      titleId,
+      ...rest,
+      children
+    }
+  ) });
+});
+StoryMap.displayName = "StoryMap";
+export {
+  StoryMap,
+  StoryMapChapter
+};

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

@@ -64,7 +64,7 @@ function SubscriptionDetails({
       /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Monthly total" }),
       /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: priceLabel })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 p-4", children: [
       /* @__PURE__ */ jsx(DetailRow, { label: "Renewal", value: renewalLabel }),
       seatsLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Seats", value: seatsLabel }) : null,
       usageLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Usage", value: usageLabel }) : null

package/dist/components/switch/switch.js

@@ -16,7 +16,7 @@ const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
       SwitchPrimitives.Thumb,
       {
         className: cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
         )
       }
     )

package/dist/components/table-of-contents/table-of-contents.js

@@ -41,13 +41,16 @@ function useActiveSection(sections) {
   }, [sections]);
   return activeSection;
 }
-function TableOfContents({ sections }) {
+function TableOfContents({
+  as: Heading = "h3",
+  sections
+}) {
   const activeSection = useActiveSection(sections);
   if (sections.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx("aside", { className: "hidden xl:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-8", children: /* @__PURE__ */ jsxs("div", { className: "border-l-2 border-border pl-4", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mb-4 text-muted-foreground uppercase tracking-wider", children: "On This Page" }),
+    /* @__PURE__ */ jsx(Heading, { className: "text-sm font-semibold mb-4 text-muted-foreground uppercase tracking-wider", children: "On This Page" }),
     /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => /* @__PURE__ */ jsx(
       "button",
       {