@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

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",
       {

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

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
 function TableOfContentsPanelImpl({
+  as: Heading = "h2",
   className,
   closeIcon,
   completedSections,
@@ -55,6 +56,7 @@ function TableOfContentsPanelImpl({
           {
             "aria-hidden": "true",
             className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            "data-testid": "toc-backdrop",
             onClick: onClose
           }
         ),
@@ -68,19 +70,19 @@ function TableOfContentsPanelImpl({
             ref: panelRef,
             children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", id: "toc-title", children: title }),
+                /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold", id: "toc-title", children: title }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     "aria-label": "Close table of contents",
-                    className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted",
+                    className: "flex size-8 items-center justify-center rounded-md hover:bg-muted",
                     onClick: onClose,
                     ref: closeButtonRef,
                     type: "button",
                     children: closeIcon ?? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-5 w-5",
+                        className: "size-5",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -143,13 +145,13 @@ function TableOfContentsPanelImpl({
                             "span",
                             {
                               className: cn(
-                                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border",
+                                "flex size-5 shrink-0 items-center justify-center rounded-full border",
                                 isCompleted ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground"
                               ),
                               children: isCompleted ? /* @__PURE__ */ jsx(
                                 "svg",
                                 {
-                                  className: "h-3 w-3",
+                                  className: "size-3",
                                   fill: "none",
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
@@ -175,7 +177,7 @@ function TableOfContentsPanelImpl({
                           )
                         ]
                       }
-                    ) }, `${section.id}-${index}`);
+                    ) }, section.id);
                   }) })
                 }
               ),

package/dist/components/tabs/tabs.js

@@ -13,18 +13,23 @@ function useTabsContext() {
 function Tabs({
   children,
   className,
-  defaultValue,
-  onValueChange
+  defaultValue = "",
+  onValueChange,
+  value
 }) {
-  const [activeTab, setActiveTab] = useState(defaultValue);
-  const handleSetActiveTab = (value) => {
-    setActiveTab(value);
-    onValueChange?.(value);
+  const [internalTab, setInternalTab] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const activeTab = isControlled ? value : internalTab;
+  const handleSetActiveTab = (next) => {
+    if (!isControlled) {
+      setInternalTab(next);
+    }
+    onValueChange?.(next);
   };
   const contextValue = useMemo(
     () => ({ activeTab, setActiveTab: handleSetActiveTab }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [activeTab]
+    [activeTab, isControlled]
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("my-6", className), children }) });
 }
@@ -39,8 +44,10 @@ function TabsList({ children, className }) {
   );
 }
 function TabsTrigger({
+  "aria-hidden": ariaHidden,
   children,
   className,
+  tabIndex,
   value
 }) {
   const { activeTab, setActiveTab } = useTabsContext();
@@ -48,6 +55,7 @@ function TabsTrigger({
   return /* @__PURE__ */ jsx(
     "button",
     {
+      "aria-hidden": ariaHidden,
       "aria-selected": isActive,
       className: cn(
         "px-4 py-2 text-sm font-medium whitespace-nowrap transition-colors",
@@ -59,19 +67,29 @@ function TabsTrigger({
         setActiveTab(value);
       },
       role: "tab",
+      tabIndex,
       type: "button",
       children
     }
   );
 }
 function TabsContent({
+  "aria-hidden": ariaHidden,
   children,
   className,
   value
 }) {
   const { activeTab } = useTabsContext();
   if (activeTab !== value) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("pt-4", className), role: "tabpanel", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": ariaHidden,
+      className: cn("pt-4", className),
+      role: "tabpanel",
+      children
+    }
+  );
 }
 Tabs.List = TabsList;
 Tabs.Trigger = TabsTrigger;

package/dist/components/tags-input/index.js

@@ -0,0 +1,4 @@
+import { TagsInput } from "./tags-input";
+export {
+  TagsInput
+};