@vllnt/ui 0.1.6 → 0.1.7-canary.2c4792f

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,31 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { cn } from "../../lib/utils";
+const SEPARATOR_CHARS = {
+  arrow: "\u2192",
+  chevron: "\u203A",
+  slash: "/"
+};
+function SeparatorIcon({ type }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: SEPARATOR_CHARS[type] ?? "\u203A" });
+}
 function Breadcrumb({
   className,
   items,
   separator = "chevron",
   variant = "default"
 }) {
-  const getSeparator = () => {
-    switch (separator) {
-      case "chevron":
-        return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u203A" });
-      case "slash":
-        return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "/" });
-      case "arrow":
-        return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2192" });
-      default:
-        return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u203A" });
-    }
-  };
   return /* @__PURE__ */ jsx(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className: cn("flex items-center space-x-1 text-sm", className),
       children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: getSeparator() }),
+        index > 0 && /* @__PURE__ */ jsx("span", { className: "mx-2", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator }) }),
         item.href ? /* @__PURE__ */ jsxs(
           Link,
           {

package/dist/components/carousel/carousel.js

@@ -71,11 +71,15 @@ function useCarouselLogic({
     if (!api) {
       return;
     }
-    onSelect(api);
     api.on("reInit", onSelect);
     api.on("select", onSelect);
+    const rafId = requestAnimationFrame(() => {
+      onSelect(api);
+    });
     return () => {
       api?.off("select", onSelect);
+      api?.off("reInit", onSelect);
+      cancelAnimationFrame(rafId);
     };
   }, [api, onSelect]);
   return {

package/dist/components/code-block/code-block.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -25,6 +25,11 @@ function extractTextFromChildren(children) {
   }
   return String(children ?? "");
 }
+function findScrollableParent(element) {
+  if (!element) return void 0;
+  if (element.scrollHeight > element.clientHeight) return element;
+  return findScrollableParent(element.parentElement);
+}
 function CodeBlock({
   children,
   className,
@@ -32,15 +37,28 @@ function CodeBlock({
   showLanguage = false
 }) {
   const [copied, setCopied] = useState(false);
-  const [mounted, setMounted] = useState(false);
   const { systemTheme, theme } = useTheme();
-  useEffect(() => {
-    setMounted(true);
-  }, []);
   const resolvedTheme = theme === "system" ? systemTheme : theme;
-  const isDark = resolvedTheme === "dark";
+  const isDark = resolvedTheme !== "light";
   const codeStyle = isDark ? oneDark : oneLight;
   const code = extractTextFromChildren(children);
+  const scrollRef = useRef(null);
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const onWheel = (event) => {
+      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+      const scrollable = findScrollableParent(element);
+      if (scrollable) {
+        scrollable.scrollTop += event.deltaY;
+        event.preventDefault();
+      }
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      element.removeEventListener("wheel", onWheel);
+    };
+  }, []);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
@@ -48,33 +66,6 @@ function CodeBlock({
       setCopied(false);
     }, 2e3);
   };
-  if (!mounted) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "relative w-full overflow-hidden rounded-md border bg-background",
-          className
-        ),
-        children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-x-auto", children: [
-          /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm font-mono bg-background", children: /* @__PURE__ */ jsx("code", { children: code }) }),
-          /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
-            showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: "h-8 w-8",
-                onClick: handleCopy,
-                size: "icon",
-                variant: "ghost",
-                children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
-              }
-            )
-          ] })
-        ] })
-      }
-    );
-  }
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -82,39 +73,51 @@ function CodeBlock({
         "relative w-full overflow-hidden rounded-md border bg-background",
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-x-auto", children: [
-        /* @__PURE__ */ jsx(
-          SyntaxHighlighter,
-          {
-            codeTagProps: {
-              className: "font-mono text-sm"
-            },
-            customStyle: {
-              background: "hsl(var(--background))",
-              fontSize: "0.875rem",
-              margin: 0,
-              minWidth: "fit-content",
-              padding: "1rem"
-            },
-            language,
-            style: codeStyle,
-            children: code
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
-          showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: "h-8 w-8",
-              onClick: handleCopy,
-              size: "icon",
-              variant: "ghost",
-              children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
-            }
-          )
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative overflow-x-auto overflow-y-hidden touch-pan-y",
+          ref: scrollRef,
+          children: [
+            /* @__PURE__ */ jsx(
+              SyntaxHighlighter,
+              {
+                codeTagProps: {
+                  className: "font-mono text-sm",
+                  style: {
+                    background: "transparent",
+                    display: "block"
+                  }
+                },
+                customStyle: {
+                  background: "hsl(var(--background))",
+                  fontSize: "0.875rem",
+                  margin: 0,
+                  minWidth: "fit-content",
+                  overflowY: "hidden",
+                  padding: "1rem"
+                },
+                language,
+                style: codeStyle,
+                children: code
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
+              showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: "h-8 w-8",
+                  onClick: handleCopy,
+                  size: "icon",
+                  variant: "ghost",
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }

package/dist/components/comparison/comparison.js

@@ -22,7 +22,19 @@ const variantConfig = {
     iconClass: "text-muted-foreground"
   }
 };
-function Comparison({ after, before, title }) {
+function Comparison({
+  after,
+  before,
+  title,
+  ...rest
+}) {
+  if (!before || !after) {
+    const hint = "left" in rest || "right" in rest ? ' Did you mean "before" / "after" instead of "left" / "right"?' : "";
+    console.error(
+      `[Comparison] Missing required props "before" and "after".${hint}`
+    );
+    return null;
+  }
   const beforeConfig = variantConfig[before.variant || "bad"];
   const afterConfig = variantConfig[after.variant || "good"];
   const BeforeIcon = beforeConfig.icon;

package/dist/components/cookie-consent/cookie-consent.js

@@ -50,9 +50,13 @@ const CookieConsent = forwardRef(
         return () => {
           clearTimeout(timer);
         };
-      } else {
-        setIsVisible(false);
       }
+      const rafId = requestAnimationFrame(() => {
+        setIsVisible(false);
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
     }, [open]);
     const handleClose = useCallback(() => {
       setIsAnimatingOut(true);

package/dist/components/flow-diagram/use-flow-diagram.js

@@ -25,8 +25,13 @@ function useZoomControls(reactFlow) {
     void reactFlow.fitView({ duration: 200, padding: 0.2 });
   }, [reactFlow]);
   useEffect(() => {
-    const viewport = reactFlow.getViewport();
-    setZoom(viewport.zoom);
+    const rafId = requestAnimationFrame(() => {
+      const viewport = reactFlow.getViewport();
+      setZoom(viewport.zoom);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
   }, [reactFlow]);
   return { fitView, zoom, zoomIn, zoomOut };
 }

package/dist/components/horizontal-scroll-row/horizontal-scroll-row.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useHorizontalScroll } from "../../lib/use-horizontal-scroll";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const HorizontalScrollRow = memo(function HorizontalScrollRow2({
+  children,
+  className,
+  description,
+  title
+}) {
+  const { canScrollLeft, canScrollRight, containerRef, scroll } = useHorizontalScroll();
+  const showControls = canScrollLeft || canScrollRight;
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+      ] }),
+      showControls ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Scroll left",
+            className: "h-8 w-8",
+            disabled: !canScrollLeft,
+            onClick: () => {
+              scroll("left");
+            },
+            size: "icon",
+            variant: "outline",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Scroll right",
+            className: "h-8 w-8",
+            disabled: !canScrollRight,
+            onClick: () => {
+              scroll("right");
+            },
+            size: "icon",
+            variant: "outline",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        )
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex gap-4 overflow-x-auto snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        ref: containerRef,
+        children
+      }
+    )
+  ] });
+});
+HorizontalScrollRow.displayName = "HorizontalScrollRow";
+export {
+  HorizontalScrollRow
+};

package/dist/components/horizontal-scroll-row/index.js

@@ -0,0 +1,6 @@
+import {
+  HorizontalScrollRow
+} from "./horizontal-scroll-row";
+export {
+  HorizontalScrollRow
+};

package/dist/components/index.js

@@ -340,6 +340,12 @@ import {
   SocialFAB,
   useSocialFab
 } from "./social-fab";
+import {
+  HorizontalScrollRow
+} from "./horizontal-scroll-row";
+import {
+  ViewSwitcher
+} from "./view-switcher";
 import {
   FlowControls,
   FlowDiagram,
@@ -480,6 +486,7 @@ export {
   FlowErrorBoundary,
   FlowFullscreen,
   Glossary,
+  HorizontalScrollRow,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -618,6 +625,7 @@ export {
   TutorialIntroContent,
   TutorialMDX,
   VideoEmbed,
+  ViewSwitcher,
   alertVariants,
   badgeVariants,
   buttonVariants,

package/dist/components/mdx-content/mdx-content.js

@@ -21,7 +21,21 @@ const MDXComponents = {
       children
     }
   ),
-  code: ({ children, ...props }) => /* @__PURE__ */ jsx("code", { className: "bg-muted px-1 py-0.5 rounded text-sm font-mono", ...props, children }),
+  code: ({ children, className, ...props }) => {
+    if (typeof className === "string" && className.startsWith("language-")) {
+      const language = className.replace(/^language-/, "");
+      const text = typeof children === "string" ? children.replace(/\n$/, "") : String(children ?? "");
+      return /* @__PURE__ */ jsx(CodeBlock, { language, children: text });
+    }
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: "bg-muted px-1 py-0.5 rounded text-sm font-mono",
+        ...props,
+        children
+      }
+    );
+  },
   em: ({ children, ...props }) => /* @__PURE__ */ jsx("em", { className: "italic", ...props, children }),
   h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
   h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
@@ -51,14 +65,7 @@ const MDXComponents = {
       children
     }
   ),
-  pre: ({ children, ...props }) => /* @__PURE__ */ jsx(
-    "pre",
-    {
-      className: "bg-black text-white p-4 rounded-lg overflow-x-auto my-6 border shadow-lg font-mono text-sm dark:bg-zinc-900",
-      ...props,
-      children
-    }
-  ),
+  pre: ({ children }) => /* @__PURE__ */ jsx("div", { className: "contents", children }),
   strong: ({ children, ...props }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", ...props, children }),
   ul: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "ul",
@@ -122,16 +129,20 @@ async function MDXContent({
   const customComponents = buildCustomComponents(components);
   const allComponents = { ...MDXComponents, ...customComponents };
   if (enableMDX && hasJSX) {
+    let Component;
     try {
-      const { default: Component } = await evaluate(processedContent, {
+      const result = await evaluate(processedContent, {
         ...runtime,
         baseUrl: import.meta.url
       });
-      return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(Component, { components: allComponents }) });
+      Component = result.default;
     } catch (error) {
       console.error("Error rendering MDX:", error);
-      return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
     }
+    if (Component) {
+      return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(Component, { components: allComponents }) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
   }
   return /* @__PURE__ */ jsx("div", { className: proseClasses, children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, children: content }) });
 }

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
+import { useMounted } from "../../lib/use-mounted";
 import { Badge } from "../badge";
 import {
   Card,
@@ -29,11 +30,13 @@ function ContentCardImpl({
   title
 }) {
   const [progress, setProgress] = useState(null);
-  const [isHydrated, setIsHydrated] = useState(false);
+  const isHydrated = useMounted();
   useEffect(() => {
-    setIsHydrated(true);
     if (getProgress) {
-      setProgress(getProgress());
+      const result = getProgress();
+      requestAnimationFrame(() => {
+        setProgress(result);
+      });
     }
   }, [getProgress]);
   const showProgress = isHydrated && progress && progress.completedCount > 0;

package/dist/components/search-bar/search-bar.js

@@ -26,8 +26,10 @@ function SearchBar({
       return;
     }
     if (!isUserTyping.current && query !== searchParameter) {
-      setQuery(searchParameter);
-      lastDebouncedQueryReference.current = searchParameter;
+      requestAnimationFrame(() => {
+        setQuery(searchParameter);
+        lastDebouncedQueryReference.current = searchParameter;
+      });
     }
   }, [searchParameters, query]);
   useEffect(() => {

package/dist/components/sidebar/sidebar.js

@@ -122,7 +122,7 @@ function Sidebar({ sections }) {
       "aside",
       {
         className: cn(
-          "fixed lg:relative top-16 lg:top-0 left-0 z-40 h-full lg:h-full border-r bg-background transition-transform duration-300 ease-in-out",
+          "fixed lg:relative top-16 lg:top-0 bottom-0 lg:bottom-auto left-0 z-40 lg:h-full border-r bg-background transition-transform duration-300 ease-in-out",
           "flex flex-col",
           "overflow-hidden",
           "shrink-0",

package/dist/components/slideshow/slideshow.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
 import { CompletionDialog } from "../completion-dialog";
 const DEFAULT_LABELS = {
@@ -31,16 +32,13 @@ function SlideshowImpl({
   const [animationDirection, setAnimationDirection] = useState(null);
   const [isCompletionDialogOpen, setIsCompletionDialogOpen] = useState(false);
   const [isTocOpen, setIsTocOpen] = useState(false);
-  const [mounted, setMounted] = useState(false);
+  const mounted = useMounted();
   const currentSection = sections[currentIndex];
   const isCurrentCompleted = currentSection ? completedSections.has(currentSection.id) : false;
   const isLastSection = currentIndex === sections.length - 1;
   const canGoNext = currentIndex < sections.length - 1;
   const canGoPrevious = currentIndex > 0;
   const progress = (currentIndex + 1) / sections.length * 100;
-  useEffect(() => {
-    setMounted(true);
-  }, []);
   useEffect(() => {
     document.body.style.overflow = "hidden";
     return () => {

package/dist/components/theme-toggle/theme-toggle.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useTheme } from "next-themes";
+import { useMounted } from "../../lib/use-mounted";
 import { Button } from "../button/button";
 import {
   DropdownMenu,
@@ -51,7 +52,7 @@ function ThemeMenuItem({
 }
 function ThemeToggle({ dict }) {
   const { setTheme, theme } = useTheme();
-  const [mounted, setMounted] = useState(false);
+  const mounted = useMounted();
   const [open, setOpen] = useState(false);
   const closeTimerReference = useRef(null);
   const isHoveringOverMenuAreaReference = useRef(false);
@@ -73,9 +74,6 @@ function ThemeToggle({ dict }) {
     }
     setOpen(nextOpen);
   }, []);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
   const getThemeIcon = useCallback(() => {
     if (!mounted) return "\u2600";
     switch (theme) {

package/dist/components/thinking-block/thinking-block.js

@@ -11,7 +11,11 @@ function ThinkingBlock({
   const [isExpanded, setIsExpanded] = useState(isStreaming);
   const contentId = useId();
   useEffect(() => {
-    if (isStreaming) setIsExpanded(true);
+    if (isStreaming) {
+      requestAnimationFrame(() => {
+        setIsExpanded(true);
+      });
+    }
   }, [isStreaming]);
   const toggleExpanded = useCallback(() => {
     setIsExpanded((previous) => !previous);

package/dist/components/tldr-section/tldr-section.js

@@ -8,15 +8,24 @@ function TLDRSection({ children, label }) {
   const timerReference = useRef(null);
   useEffect(() => {
     if (isExpanded && !hasBeenOpened) {
-      setIsLoading(true);
-      setHasBeenOpened(true);
       if (timerReference.current) {
         clearTimeout(timerReference.current);
       }
+      const rafId = requestAnimationFrame(() => {
+        setIsLoading(true);
+        setHasBeenOpened(true);
+      });
       timerReference.current = setTimeout(() => {
         setIsLoading(false);
         timerReference.current = null;
       }, 800);
+      return () => {
+        cancelAnimationFrame(rafId);
+        if (timerReference.current) {
+          clearTimeout(timerReference.current);
+          timerReference.current = null;
+        }
+      };
     }
     return () => {
       if (timerReference.current) {

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useState } from "react";
+import { useMounted } from "../../lib/use-mounted";
 import { Badge } from "../badge";
 import {
   Card,
@@ -29,11 +30,13 @@ function TutorialCardImpl({
   tutorial
 }) {
   const [progress, setProgress] = useState(null);
-  const [isHydrated, setIsHydrated] = useState(false);
+  const isHydrated = useMounted();
   useEffect(() => {
-    setIsHydrated(true);
     if (getProgress) {
-      setProgress(getProgress(tutorial.id));
+      const result = getProgress(tutorial.id);
+      requestAnimationFrame(() => {
+        setProgress(result);
+      });
     }
   }, [getProgress, tutorial.id]);
   const difficultyVariant = DIFFICULTY_VARIANTS[tutorial.difficulty];

package/dist/components/view-switcher/index.js

@@ -0,0 +1,6 @@
+import {
+  ViewSwitcher
+} from "./view-switcher";
+export {
+  ViewSwitcher
+};

package/dist/components/view-switcher/view-switcher.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, Suspense } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { cn } from "../../lib/utils";
+function ViewSwitcherInner({
+  className,
+  defaultKey,
+  options,
+  paramName: parameterName = "view"
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParameters = useSearchParams();
+  const resolvedDefault = defaultKey ?? options[0]?.key ?? "";
+  const currentKey = searchParameters.get(parameterName) ?? resolvedDefault;
+  function handleSelect(key) {
+    const parameters = new URLSearchParams(searchParameters.toString());
+    if (key === resolvedDefault) {
+      parameters.delete(parameterName);
+    } else {
+      parameters.set(parameterName, key);
+    }
+    const query = parameters.toString();
+    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center rounded-lg border bg-muted p-1",
+        className
+      ),
+      role: "tablist",
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-selected": currentKey === option.key,
+          className: cn(
+            "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+            currentKey === option.key ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          onClick: () => {
+            handleSelect(option.key);
+          },
+          role: "tab",
+          type: "button",
+          children: option.label
+        },
+        option.key
+      ))
+    }
+  );
+}
+function ViewSwitcherFallback({
+  className,
+  defaultKey,
+  options
+}) {
+  const resolvedDefault = defaultKey ?? options[0]?.key ?? "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center rounded-lg border bg-muted p-1",
+        className
+      ),
+      role: "tablist",
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-selected": resolvedDefault === option.key,
+          className: cn(
+            "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+            resolvedDefault === option.key ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          role: "tab",
+          type: "button",
+          children: option.label
+        },
+        option.key
+      ))
+    }
+  );
+}
+const ViewSwitcher = memo(function ViewSwitcher2(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ViewSwitcherFallback, { ...props }), children: /* @__PURE__ */ jsx(ViewSwitcherInner, { ...props }) });
+});
+ViewSwitcher.displayName = "ViewSwitcher";
+export {
+  ViewSwitcher
+};

package/dist/index.d.ts

@@ -899,7 +899,7 @@ type ComparisonProps = {
     before: ComparisonSide;
     title?: string;
 };
-declare function Comparison({ after, before, title }: ComparisonProps): react_jsx_runtime.JSX.Element;
+declare function Comparison({ after, before, title, ...rest }: ComparisonProps & Record<string, unknown>): react_jsx_runtime.JSX.Element | null;
 type BeforeAfterProps = {
     after: ReactNode;
     before: ReactNode;
@@ -1519,6 +1519,26 @@ declare function useSocialFab(options?: UseSocialFabOptions): {
     };
 };
 
+type HorizontalScrollRowProps = {
+    children: ReactNode;
+    className?: string;
+    description?: string;
+    title: string;
+};
+declare const HorizontalScrollRow: react.NamedExoticComponent<HorizontalScrollRowProps>;
+
+type ViewOption = {
+    key: string;
+    label: string;
+};
+type ViewSwitcherProps = {
+    className?: string;
+    defaultKey?: string;
+    options: ViewOption[];
+    paramName?: string;
+};
+declare const ViewSwitcher: react.NamedExoticComponent<ViewSwitcherProps>;
+
 type FlowDiagramNode = {
     data: {
         description?: string;
@@ -1832,6 +1852,28 @@ type Content<TSection extends ContentSectionMinimal = ContentSection> = ContentM
  */
 declare function useDebounce<T>(value: T, delay?: number): T;
 
+type UseHorizontalScrollReturn = {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    containerRef: React.RefCallback<HTMLElement>;
+    scroll: (direction: "left" | "right") => void;
+};
+/**
+ * Hook for horizontal scroll containers with navigation state.
+ *
+ * @returns Scroll state, ref callback for the container, and scroll function.
+ *
+ * @example
+ * ```tsx
+ * const { canScrollLeft, canScrollRight, containerRef, scroll } = useHorizontalScroll();
+ *
+ * <div ref={containerRef} className="overflow-x-auto">
+ *   {children}
+ * </div>
+ * ```
+ */
+declare function useHorizontalScroll(): UseHorizontalScrollReturn;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BarChart, BeforeAfter, type BeforeAfterProps, BlogCard, Breadcrumb, type BreadcrumbItem, Button, type ButtonProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryFilter, Checkbox, Checklist, type ChecklistItem, type ChecklistProps, CodeBlock, CodePlayground, type CodePlaygroundProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommonMistake, type CommonMistakeProps, Comparison, type ComparisonProps, CompletionDialog, type CompletionDialogProps, Content, ContentCard, ContentIntro, type ContentIntroLabels, type ContentIntroProps, type ContentIntroSection, type ContentMeta, type ContentProgress, type ContentSection, type ContentSectionMinimal, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CookieConsent, type CookieConsentProps, type CopyStatus, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DifficultyLevel, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Exercise, type ExerciseProps, FAQ, FAQItem, type FAQItemProps, type FAQProps, FileTree, type FileTreeProps, FilterBar, type FilterBarLabels, type FilterBarProps, type FilterOption, type FilterUpdates, FloatingActionButton, type FloatingActionButtonProps, FlowControls, type FlowControlsProps, FlowDiagram, type FlowDiagramEdge, type FlowDiagramNode, type FlowDiagramProps, FlowErrorBoundary, FlowFullscreen, type FlowFullscreenProps, Glossary, type GlossaryProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, type InlineInputProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, KeyConcept, type KeyConceptProps, type KeyboardShortcut, KeyboardShortcutsHelp, type KeyboardShortcutsHelpProps, LANGUAGE_NAMES, Label, LangProvider, LearningObjectives, type LearningObjectivesProps, LineChart, MDXContent, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type ModelInfo, ModelSelector, type ModelSelectorProps, type NavItem, NavbarSaas, type NavbarSaasProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, type PaginationProps, type PlatformConfig, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Prerequisites, type PrerequisitesProps, ProTip, type ProTipProps, type ProTipVariant, ProfileSection, ProgressBar, type ProgressBarProps, Quiz, type QuizOption, type QuizProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchBar, SearchDialog, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShareDialog, type ShareDialogLabels, type SharePlatform as ShareDialogPlatform, type ShareDialogProps, type SharePlatform$1 as SharePlatform, type SharePlatformConfig, ShareSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, type SidebarItem, SidebarProvider, type SidebarSection, SidebarToggle, type SidebarToggleProps, SimpleTerminal, type SimpleTerminalProps, Skeleton, Slider, Slideshow, type SlideshowLabels, type SlideshowProps, type SlideshowSection, SocialFAB, type SocialFabActionConfig, type SocialFabLabels, type SocialFabProps, Spinner, type SpinnerProps, Step, StepByStep, type StepByStepProps, StepNavigation, type StepNavigationProps, type StepProps, Summary, type SummaryProps, Switch, TLDRSection, type TOCSection, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableOfContentsPanel, type TableOfContentsPanelProps, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Terminal, type TerminalLine, type TerminalProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, ThinkingBlock, type ThinkingBlockProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastProps, ToastTitle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruncatedText, type TruncatedTextProps, TutorialCard, type TutorialCardLabels, type TutorialCardMeta, type TutorialCardProgress, type TutorialCardProps, TutorialComplete, type TutorialCompleteLabels, type TutorialCompleteProps, type TutorialCompleteRelatedContent, type TutorialCompleteSection, TutorialFilters, type TutorialFiltersLabels, type TutorialFiltersProps, TutorialIntroContent, type TutorialIntroContentProps, TutorialMDX, type TutorialMDXProps, type SupportedLanguage as UISupportedLanguage, type UseFlowDiagramOptions, type UseFlowDiagramReturn, VideoEmbed, type VideoEmbedProps, alertVariants, badgeVariants, buttonVariants, cn, cookieConsentVariants, getOtherLanguage, mdxComponents, navigationMenuTriggerStyle, toggleVariants, useDebounce, useFlowDiagram, useMobile, useSidebar, useSocialFab };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BarChart, BeforeAfter, type BeforeAfterProps, BlogCard, Breadcrumb, type BreadcrumbItem, Button, type ButtonProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CategoryFilter, Checkbox, Checklist, type ChecklistItem, type ChecklistProps, CodeBlock, CodePlayground, type CodePlaygroundProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommonMistake, type CommonMistakeProps, Comparison, type ComparisonProps, CompletionDialog, type CompletionDialogProps, Content, ContentCard, ContentIntro, type ContentIntroLabels, type ContentIntroProps, type ContentIntroSection, type ContentMeta, type ContentProgress, type ContentSection, type ContentSectionMinimal, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CookieConsent, type CookieConsentProps, type CopyStatus, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DifficultyLevel, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Exercise, type ExerciseProps, FAQ, FAQItem, type FAQItemProps, type FAQProps, FileTree, type FileTreeProps, FilterBar, type FilterBarLabels, type FilterBarProps, type FilterOption, type FilterUpdates, FloatingActionButton, type FloatingActionButtonProps, FlowControls, type FlowControlsProps, FlowDiagram, type FlowDiagramEdge, type FlowDiagramNode, type FlowDiagramProps, FlowErrorBoundary, FlowFullscreen, type FlowFullscreenProps, Glossary, type GlossaryProps, HorizontalScrollRow, type HorizontalScrollRowProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, type InlineInputProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, KeyConcept, type KeyConceptProps, type KeyboardShortcut, KeyboardShortcutsHelp, type KeyboardShortcutsHelpProps, LANGUAGE_NAMES, Label, LangProvider, LearningObjectives, type LearningObjectivesProps, LineChart, MDXContent, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type ModelInfo, ModelSelector, type ModelSelectorProps, type NavItem, NavbarSaas, type NavbarSaasProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, type PaginationProps, type PlatformConfig, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Prerequisites, type PrerequisitesProps, ProTip, type ProTipProps, type ProTipVariant, ProfileSection, ProgressBar, type ProgressBarProps, Quiz, type QuizOption, type QuizProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchBar, SearchDialog, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShareDialog, type ShareDialogLabels, type SharePlatform as ShareDialogPlatform, type ShareDialogProps, type SharePlatform$1 as SharePlatform, type SharePlatformConfig, ShareSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, type SidebarItem, SidebarProvider, type SidebarSection, SidebarToggle, type SidebarToggleProps, SimpleTerminal, type SimpleTerminalProps, Skeleton, Slider, Slideshow, type SlideshowLabels, type SlideshowProps, type SlideshowSection, SocialFAB, type SocialFabActionConfig, type SocialFabLabels, type SocialFabProps, Spinner, type SpinnerProps, Step, StepByStep, type StepByStepProps, StepNavigation, type StepNavigationProps, type StepProps, Summary, type SummaryProps, Switch, TLDRSection, type TOCSection, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableOfContentsPanel, type TableOfContentsPanelProps, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Terminal, type TerminalLine, type TerminalProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, ThinkingBlock, type ThinkingBlockProps, Toast, ToastAction, ToastClose, ToastDescription, type ToastProps, ToastTitle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruncatedText, type TruncatedTextProps, TutorialCard, type TutorialCardLabels, type TutorialCardMeta, type TutorialCardProgress, type TutorialCardProps, TutorialComplete, type TutorialCompleteLabels, type TutorialCompleteProps, type TutorialCompleteRelatedContent, type TutorialCompleteSection, TutorialFilters, type TutorialFiltersLabels, type TutorialFiltersProps, TutorialIntroContent, type TutorialIntroContentProps, TutorialMDX, type TutorialMDXProps, type SupportedLanguage as UISupportedLanguage, type UseFlowDiagramOptions, type UseFlowDiagramReturn, VideoEmbed, type VideoEmbedProps, type ViewOption, ViewSwitcher, type ViewSwitcherProps, alertVariants, badgeVariants, buttonVariants, cn, cookieConsentVariants, getOtherLanguage, mdxComponents, navigationMenuTriggerStyle, toggleVariants, useDebounce, useFlowDiagram, useHorizontalScroll, useMobile, useSidebar, useSocialFab };

package/dist/index.js

@@ -4,10 +4,12 @@ import {
   LANGUAGE_NAMES
 } from "./lib/types";
 import { useDebounce } from "./lib/use-debounce";
+import { useHorizontalScroll } from "./lib/use-horizontal-scroll";
 import { cn } from "./lib/utils";
 export {
   LANGUAGE_NAMES,
   cn,
   getOtherLanguage,
-  useDebounce
+  useDebounce,
+  useHorizontalScroll
 };

package/dist/lib/use-horizontal-scroll.js

@@ -0,0 +1,60 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useHorizontalScroll() {
+  const scrollRef = useRef(void 0);
+  const observerRef = useRef(void 0);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollState = useCallback(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    setCanScrollLeft(element.scrollLeft > 0);
+    setCanScrollRight(
+      element.scrollLeft + element.clientWidth < element.scrollWidth - 1
+    );
+  }, []);
+  const containerRef = useCallback(
+    (node) => {
+      if (scrollRef.current) {
+        scrollRef.current.removeEventListener("scroll", updateScrollState);
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = void 0;
+      }
+      scrollRef.current = node ?? void 0;
+      if (node) {
+        node.addEventListener("scroll", updateScrollState, { passive: true });
+        if (typeof ResizeObserver !== "undefined") {
+          observerRef.current = new ResizeObserver(updateScrollState);
+          observerRef.current.observe(node);
+        }
+        updateScrollState();
+      }
+    },
+    [updateScrollState]
+  );
+  useEffect(() => {
+    return () => {
+      if (scrollRef.current) {
+        scrollRef.current.removeEventListener("scroll", updateScrollState);
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [updateScrollState]);
+  const scroll = useCallback((direction) => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const amount = element.clientWidth * 0.8;
+    element.scrollBy({
+      behavior: "smooth",
+      left: direction === "left" ? -amount : amount
+    });
+  }, []);
+  return { canScrollLeft, canScrollRight, containerRef, scroll };
+}
+export {
+  useHorizontalScroll
+};

package/dist/lib/use-mounted.js

@@ -0,0 +1,17 @@
+"use client";
+import { useSyncExternalStore } from "react";
+function noop() {
+}
+function subscribe() {
+  return noop;
+}
+function useMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+export {
+  useMounted
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vllnt/ui",
-  "version": "0.1.6",
+  "version": "0.1.7-canary.2c4792f",
   "description": "React component library — 93 components built on Radix UI, Tailwind CSS, and CVA",
   "license": "MIT",
   "author": "vllnt",
@@ -23,21 +23,40 @@
     "shadcn"
   ],
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
     },
     "./tailwind-preset": {
-      "types": "./dist/tailwind-preset.d.ts",
-      "import": "./dist/tailwind-preset.js"
+      "types": "./src/tailwind-preset.ts",
+      "import": "./src/tailwind-preset.ts"
     },
     "./styles.css": "./styles.css",
     "./themes/default.css": "./themes/default.css"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./tailwind-preset": {
+        "types": "./dist/tailwind-preset.d.ts",
+        "import": "./dist/tailwind-preset.js"
+      },
+      "./styles.css": "./styles.css",
+      "./themes/default.css": "./themes/default.css"
+    }
+  },
   "files": [
     "dist",
     "styles.css",
@@ -46,6 +65,20 @@
   "sideEffects": [
     "*.css"
   ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist node_modules coverage .snapshots playwright-report test-results",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "check:circular": "madge --circular --extensions ts,tsx src",
+    "test": "vitest",
+    "test:once": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:visual": "playwright test -c playwright-ct.config.ts",
+    "test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+    "test:all": "pnpm test:coverage && pnpm test:visual",
+    "test:generate": "tsx scripts/generate-tests.ts"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
@@ -125,19 +158,5 @@
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
-  },
-  "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist node_modules coverage .snapshots playwright-report test-results",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "check:circular": "madge --circular --extensions ts,tsx src",
-    "test": "vitest",
-    "test:once": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:visual": "playwright test -c playwright-ct.config.ts",
-    "test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
-    "test:all": "pnpm test:coverage && pnpm test:visual",
-    "test:generate": "tsx scripts/generate-tests.ts"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 vllnt
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.