@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/navigation/pagination/pagination.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = ""
+}) {
+  const getPageNumbers = () => {
+    const pages = [];
+    const leftSibling = Math.max(currentPage - siblingCount, 1);
+    const rightSibling = Math.min(currentPage + siblingCount, totalPages);
+    if (leftSibling > 2) {
+      pages.push(1, "...");
+    } else {
+      for (let i = 1; i < leftSibling; i++) {
+        pages.push(i);
+      }
+    }
+    for (let i = leftSibling; i <= rightSibling; i++) {
+      pages.push(i);
+    }
+    if (rightSibling < totalPages - 1) {
+      pages.push("...", totalPages);
+    } else {
+      for (let i = rightSibling + 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    }
+    return pages;
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", className, children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center space-x-1", children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
+        "aria-label": "Previous page",
+        children: "←"
+      }
+    ) }),
+    getPageNumbers().map((page, index) => {
+      const key = typeof page === "number" ? `page-${page}` : `ellipsis-${index}`;
+      return /* @__PURE__ */ jsx("li", { children: typeof page === "number" ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onPageChange(page),
+          className: `px-3 py-2 rounded-lg border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring ${page === currentPage ? "bg-primary text-primary-foreground border-primary shadow-sm" : "border-border hover:bg-accent hover:text-accent-foreground hover:border-accent"}`,
+          "aria-label": `Page ${page}`,
+          "aria-current": page === currentPage ? "page" : void 0,
+          children: page
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "px-3 py-2 text-muted-foreground", children: "..." }) }, key);
+    }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        className: "px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring",
+        "aria-label": "Next page",
+        children: "→"
+      }
+    ) })
+  ] }) });
+}
+Pagination.displayName = "Pagination";
+export {
+  Pagination as default
+};
+//# sourceMappingURL=pagination.js.map

package/dist/components/navigation/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../../../src/components/navigation/pagination/pagination.tsx"],"sourcesContent":["export type PaginationProps = {\n  /** The currently active page number */\n  currentPage: number;\n  /** Total number of pages available */\n  totalPages: number;\n  /** Callback fired when a page is selected */\n  onPageChange: (page: number) => void;\n  /** Number of page buttons to show on each side of current page (defaults to 1) */\n  siblingCount?: number;\n  /** Additional CSS classes for the pagination container */\n  className?: string;\n};\n\n/**\n * Pagination - Page controls with active state\n */\nfunction Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  siblingCount = 1,\n  className = ''\n}: Readonly<PaginationProps>) {\n  const getPageNumbers = () => {\n    const pages: (number | string)[] = [];\n    const leftSibling = Math.max(currentPage - siblingCount, 1);\n    const rightSibling = Math.min(currentPage + siblingCount, totalPages);\n\n    if (leftSibling > 2) {\n      pages.push(1, '...');\n    } else {\n      for (let i = 1; i < leftSibling; i++) {\n        pages.push(i);\n      }\n    }\n\n    for (let i = leftSibling; i <= rightSibling; i++) {\n      pages.push(i);\n    }\n\n    if (rightSibling < totalPages - 1) {\n      pages.push('...', totalPages);\n    } else {\n      for (let i = rightSibling + 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    }\n\n    return pages;\n  };\n\n  return (\n    <nav aria-label=\"Pagination\" className={className}>\n      <ul className=\"flex items-center space-x-1\">\n        <li>\n          <button\n            onClick={() => onPageChange(currentPage - 1)}\n            disabled={currentPage === 1}\n            className=\"px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring\"\n            aria-label=\"Previous page\"\n          >\n            ←\n          </button>\n        </li>\n        {getPageNumbers().map((page, index) => {\n          const key = typeof page === 'number' ? `page-${page}` : `ellipsis-${index}`;\n          return (\n            <li key={key}>\n              {typeof page === 'number' ? (\n                <button\n                  onClick={() => onPageChange(page)}\n                  className={`px-3 py-2 rounded-lg border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring ${\n                    page === currentPage\n                      ? 'bg-primary text-primary-foreground border-primary shadow-sm'\n                      : 'border-border hover:bg-accent hover:text-accent-foreground hover:border-accent'\n                  }`}\n                  aria-label={`Page ${page}`}\n                  aria-current={page === currentPage ? 'page' : undefined}\n                >\n                  {page}\n                </button>\n              ) : (\n                <span className=\"px-3 py-2 text-muted-foreground\">...</span>\n              )}\n            </li>\n          );\n        })}\n        <li>\n          <button\n            onClick={() => onPageChange(currentPage + 1)}\n            disabled={currentPage === totalPages}\n            className=\"px-3 py-2 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-ring\"\n            aria-label=\"Next page\"\n          >\n            →\n          </button>\n        </li>\n      </ul>\n    </nav>\n  );\n}\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"names":[],"mappings":";AAgBA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,YAAY;AACd,GAA8B;AAC5B,QAAM,iBAAiB,MAAM;AAC3B,UAAM,QAA6B,CAAA;AACnC,UAAM,cAAc,KAAK,IAAI,cAAc,cAAc,CAAC;AAC1D,UAAM,eAAe,KAAK,IAAI,cAAc,cAAc,UAAU;AAEpE,QAAI,cAAc,GAAG;AACnB,YAAM,KAAK,GAAG,KAAK;AAAA,IACrB,OAAO;AACL,eAAS,IAAI,GAAG,IAAI,aAAa,KAAK;AACpC,cAAM,KAAK,CAAC;AAAA,MACd;AAAA,IACF;AAEA,aAAS,IAAI,aAAa,KAAK,cAAc,KAAK;AAChD,YAAM,KAAK,CAAC;AAAA,IACd;AAEA,QAAI,eAAe,aAAa,GAAG;AACjC,YAAM,KAAK,OAAO,UAAU;AAAA,IAC9B,OAAO;AACL,eAAS,IAAI,eAAe,GAAG,KAAK,YAAY,KAAK;AACnD,cAAM,KAAK,CAAC;AAAA,MACd;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,cAAW,cAAa,WAC3B,UAAA,qBAAC,MAAA,EAAG,WAAU,+BACZ,UAAA;AAAA,IAAA,oBAAC,MAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,aAAa,cAAc,CAAC;AAAA,QAC3C,UAAU,gBAAgB;AAAA,QAC1B,WAAU;AAAA,QACV,cAAW;AAAA,QACZ,UAAA;AAAA,MAAA;AAAA,IAAA,GAGH;AAAA,IACC,iBAAiB,IAAI,CAAC,MAAM,UAAU;AACrC,YAAM,MAAM,OAAO,SAAS,WAAW,QAAQ,IAAI,KAAK,YAAY,KAAK;AACzE,aACE,oBAAC,MAAA,EACE,UAAA,OAAO,SAAS,WACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,aAAa,IAAI;AAAA,UAChC,WAAW,0HACT,SAAS,cACL,gEACA,gFACN;AAAA,UACA,cAAY,QAAQ,IAAI;AAAA,UACxB,gBAAc,SAAS,cAAc,SAAS;AAAA,UAE7C,UAAA;AAAA,QAAA;AAAA,MAAA,IAGH,oBAAC,QAAA,EAAK,WAAU,mCAAkC,UAAA,MAAA,CAAG,KAfhD,GAiBT;AAAA,IAEJ,CAAC;AAAA,wBACA,MAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,aAAa,cAAc,CAAC;AAAA,QAC3C,UAAU,gBAAgB;AAAA,QAC1B,WAAU;AAAA,QACV,cAAW;AAAA,QACZ,UAAA;AAAA,MAAA;AAAA,IAAA,EAED,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,WAAW,cAAc;"}

package/dist/components/navigation/scroll-nav/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ScrollNav } from './scroll-nav';
+export type { ScrollNavProps, ScrollNavItem } from './scroll-nav';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/scroll-nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/scroll-nav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/navigation/scroll-nav/scroll-nav.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+export type ScrollNavItem = {
+    id: string;
+    label: string;
+};
+export type ScrollNavProps = {
+    /** Array of navigation items with id and label */
+    items: ScrollNavItem[];
+    /** Whether the nav should stick to the top when scrolling */
+    sticky?: boolean;
+    /** Custom CSS class name for the container */
+    className?: string;
+    /** Custom CSS class name for the scroll container */
+    scrollContainerClassName?: string;
+    /** Show border on the bottom */
+    showBorder?: boolean;
+    /** Background blur effect */
+    blur?: boolean;
+    /** Spacing between nav items */
+    spacing?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Custom render function for nav items */
+    renderItem?: (item: ScrollNavItem, isActive: boolean, onClick: () => void) => ReactNode;
+    /** Callback when active item changes */
+    onActiveChange?: (activeId: string) => void;
+    /** Root margin for IntersectionObserver (controls when sections are considered "active") */
+    observerRootMargin?: string;
+    /** Threshold for IntersectionObserver */
+    observerThreshold?: number;
+};
+/**
+ * ScrollNav - Scrollable navigation with scroll-spy highlighting
+ *
+ * A horizontal navigation component that automatically highlights the active section
+ * based on scroll position. Includes visual indicators when content overflows.
+ *
+ * @example
+ * ```tsx
+ * <ScrollNav
+ *   items={[
+ *     { id: 'overview', label: 'Overview' },
+ *     { id: 'features', label: 'Features' },
+ *     { id: 'pricing', label: 'Pricing' },
+ *   ]}
+ *   sticky
+ * />
+ * ```
+ */
+declare function ScrollNav({ items, sticky, className, scrollContainerClassName, showBorder, blur, spacing, renderItem, onActiveChange, observerRootMargin, observerThreshold }: Readonly<ScrollNavProps>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ScrollNav {
+    var displayName: string;
+}
+export default ScrollNav;
+//# sourceMappingURL=scroll-nav.d.ts.map

package/dist/components/navigation/scroll-nav/scroll-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-nav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/scroll-nav/scroll-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,kDAAkD;IAClD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IACxF,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,MAAa,EACb,SAAc,EACd,wBAA6B,EAC7B,UAAiB,EACjB,IAAW,EACX,OAAc,EACd,UAAU,EACV,cAAc,EACd,kBAA0C,EAC1C,iBAAqB,EACtB,EAAE,QAAQ,CAAC,cAAc,CAAC,kDAwN1B;kBApOQ,SAAS;;;AAwOlB,eAAe,SAAS,CAAC"}

package/dist/components/navigation/scroll-nav/scroll-nav.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { gapSizes } from "../../../theme/size-tokens.js";
+function ScrollNav({
+  items,
+  sticky = true,
+  className = "",
+  scrollContainerClassName = "",
+  showBorder = true,
+  blur = true,
+  spacing = "sm",
+  renderItem,
+  onActiveChange,
+  observerRootMargin = "-100px 0px -50% 0px",
+  observerThreshold = 0
+}) {
+  const [activeId, setActiveId] = useState(items[0]?.id || "");
+  const [showLeftShadow, setShowLeftShadow] = useState(false);
+  const [showRightShadow, setShowRightShadow] = useState(false);
+  const scrollContainerRef = useRef(null);
+  const handleClick = useCallback((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
+  const scrollLeft = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    container.scrollBy({ left: -container.clientWidth * 0.75, behavior: "smooth" });
+  }, []);
+  const scrollRight = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    container.scrollBy({ left: container.clientWidth * 0.75, behavior: "smooth" });
+  }, []);
+  const updateScrollShadows = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const { scrollLeft: scrollLeft2, scrollWidth, clientWidth } = container;
+    const isScrollable = scrollWidth > clientWidth;
+    setShowLeftShadow(isScrollable && scrollLeft2 > 0);
+    setShowRightShadow(isScrollable && scrollLeft2 < scrollWidth - clientWidth - 20);
+  }, []);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver(updateScrollShadows);
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [updateScrollShadows]);
+  useEffect(() => {
+    const timer = setTimeout(updateScrollShadows, 0);
+    return () => clearTimeout(timer);
+  }, [updateScrollShadows]);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    container.addEventListener("scroll", updateScrollShadows);
+    return () => container.removeEventListener("scroll", updateScrollShadows);
+  }, [updateScrollShadows]);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visibleEntries = entries.filter((entry) => entry.isIntersecting);
+        if (visibleEntries.length > 0) {
+          const sortedVisible = visibleEntries.sort((a, b) => {
+            const aIndex = items.findIndex((item) => item.id === a.target.id);
+            const bIndex = items.findIndex((item) => item.id === b.target.id);
+            return aIndex - bIndex;
+          });
+          const newActiveId = sortedVisible[0].target.id;
+          setActiveId(newActiveId);
+          onActiveChange?.(newActiveId);
+        }
+      },
+      {
+        rootMargin: observerRootMargin,
+        threshold: observerThreshold
+      }
+    );
+    items.forEach(({ id }) => {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    return () => observer.disconnect();
+  }, [items, observerRootMargin, observerThreshold, onActiveChange]);
+  if (items.length === 0) return null;
+  const baseClasses = [
+    "relative",
+    sticky && "sticky top-0 z-99",
+    blur && "bg-background/95 backdrop-blur-sm",
+    !blur && "bg-background",
+    showBorder && "border-b border-border",
+    className
+  ].filter(Boolean).join(" ");
+  const scrollClasses = [
+    "flex flex-row flex-nowrap items-stretch",
+    gapSizes[spacing],
+    "overflow-x-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
+    scrollContainerClassName
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: baseClasses, children: [
+    showLeftShadow && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: scrollLeft,
+        className: `absolute left-0 top-0 bottom-0 w-8 flex items-center justify-center cursor-pointer ${blur ? "bg-background/95" : "bg-background"} hover:bg-muted transition-colors z-10 border-r border-border`,
+        "aria-label": "Scroll left",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-foreground/70",
+            children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+          }
+        )
+      }
+    ),
+    showLeftShadow && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute left-8 top-0 bottom-0 w-8 ${blur ? "bg-linear-to-r from-background/95" : "bg-linear-to-r from-background"} to-transparent pointer-events-none z-10`
+      }
+    ),
+    showRightShadow && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute right-8 top-0 bottom-0 w-8 ${blur ? "bg-linear-to-l from-background/95" : "bg-linear-to-l from-background"} to-transparent pointer-events-none z-10`
+      }
+    ),
+    showRightShadow && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: scrollRight,
+        className: `absolute right-0 top-0 bottom-0 w-8 flex items-center justify-center cursor-pointer ${blur ? "bg-background/95" : "bg-background"} hover:bg-muted transition-colors z-10 border-l border-border`,
+        "aria-label": "Scroll right",
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-foreground/70",
+            children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: scrollClasses, children: items.map((item) => {
+      const isActive = activeId === item.id;
+      const onClick = () => handleClick(item.id);
+      if (renderItem) {
+        return /* @__PURE__ */ jsx("div", { children: renderItem(item, isActive, onClick) }, item.id);
+      }
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick,
+          className: `px-3 py-2 text-sm font-medium whitespace-nowrap rounded-md transition-colors ${isActive ? "bg-primary text-primary-fg" : "text-foreground/70 hover:text-foreground hover:bg-muted"}`,
+          children: item.label
+        },
+        item.id
+      );
+    }) })
+  ] });
+}
+ScrollNav.displayName = "ScrollNav";
+export {
+  ScrollNav as default
+};
+//# sourceMappingURL=scroll-nav.js.map

package/dist/components/navigation/scroll-nav/scroll-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-nav.js","sources":["../../../../src/components/navigation/scroll-nav/scroll-nav.tsx"],"sourcesContent":["import { useEffect, useState, useCallback, useRef, ReactNode } from 'react';\nimport { gapSizes } from '../../../theme/size-tokens';\n\nexport type ScrollNavItem = {\n  id: string;\n  label: string;\n};\n\nexport type ScrollNavProps = {\n  /** Array of navigation items with id and label */\n  items: ScrollNavItem[];\n  /** Whether the nav should stick to the top when scrolling */\n  sticky?: boolean;\n  /** Custom CSS class name for the container */\n  className?: string;\n  /** Custom CSS class name for the scroll container */\n  scrollContainerClassName?: string;\n  /** Show border on the bottom */\n  showBorder?: boolean;\n  /** Background blur effect */\n  blur?: boolean;\n  /** Spacing between nav items */\n  spacing?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Custom render function for nav items */\n  renderItem?: (item: ScrollNavItem, isActive: boolean, onClick: () => void) => ReactNode;\n  /** Callback when active item changes */\n  onActiveChange?: (activeId: string) => void;\n  /** Root margin for IntersectionObserver (controls when sections are considered \"active\") */\n  observerRootMargin?: string;\n  /** Threshold for IntersectionObserver */\n  observerThreshold?: number;\n};\n\n/**\n * ScrollNav - Scrollable navigation with scroll-spy highlighting\n *\n * A horizontal navigation component that automatically highlights the active section\n * based on scroll position. Includes visual indicators when content overflows.\n *\n * @example\n * ```tsx\n * <ScrollNav\n *   items={[\n *     { id: 'overview', label: 'Overview' },\n *     { id: 'features', label: 'Features' },\n *     { id: 'pricing', label: 'Pricing' },\n *   ]}\n *   sticky\n * />\n * ```\n */\nfunction ScrollNav({\n  items,\n  sticky = true,\n  className = '',\n  scrollContainerClassName = '',\n  showBorder = true,\n  blur = true,\n  spacing = 'sm',\n  renderItem,\n  onActiveChange,\n  observerRootMargin = '-100px 0px -50% 0px',\n  observerThreshold = 0\n}: Readonly<ScrollNavProps>) {\n  const [activeId, setActiveId] = useState<string>(items[0]?.id || '');\n  const [showLeftShadow, setShowLeftShadow] = useState(false);\n  const [showRightShadow, setShowRightShadow] = useState(false);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const handleClick = useCallback((id: string) => {\n    const element = document.getElementById(id);\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  }, []);\n\n  const scrollLeft = useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    container.scrollBy({ left: -container.clientWidth * 0.75, behavior: 'smooth' });\n  }, []);\n\n  const scrollRight = useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n    container.scrollBy({ left: container.clientWidth * 0.75, behavior: 'smooth' });\n  }, []);\n\n  const updateScrollShadows = useCallback(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const { scrollLeft, scrollWidth, clientWidth } = container;\n    const isScrollable = scrollWidth > clientWidth;\n\n    setShowLeftShadow(isScrollable && scrollLeft > 0);\n    setShowRightShadow(isScrollable && scrollLeft < scrollWidth - clientWidth - 20);\n  }, []);\n\n  // Initial check and on resize\n  useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    const resizeObserver = new ResizeObserver(updateScrollShadows);\n    resizeObserver.observe(container);\n\n    return () => resizeObserver.disconnect();\n  }, [updateScrollShadows]);\n\n  // Run initial check after mount\n  useEffect(() => {\n    // Use setTimeout to defer until after paint\n    const timer = setTimeout(updateScrollShadows, 0);\n    return () => clearTimeout(timer);\n  }, [updateScrollShadows]);\n\n  // Listen to scroll events\n  useEffect(() => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    container.addEventListener('scroll', updateScrollShadows);\n    return () => container.removeEventListener('scroll', updateScrollShadows);\n  }, [updateScrollShadows]);\n\n  // Scroll spy: update active item based on visible sections\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        // Find the first visible section\n        const visibleEntries = entries.filter((entry) => entry.isIntersecting);\n        if (visibleEntries.length > 0) {\n          // Sort by their position in the items array to get the topmost visible one\n          const sortedVisible = visibleEntries.sort((a, b) => {\n            const aIndex = items.findIndex((item) => item.id === a.target.id);\n            const bIndex = items.findIndex((item) => item.id === b.target.id);\n            return aIndex - bIndex;\n          });\n          const newActiveId = sortedVisible[0].target.id;\n          setActiveId(newActiveId);\n          onActiveChange?.(newActiveId);\n        }\n      },\n      {\n        rootMargin: observerRootMargin,\n        threshold: observerThreshold\n      }\n    );\n\n    // Observe all sections\n    items.forEach(({ id }) => {\n      const element = document.getElementById(id);\n      if (element) {\n        observer.observe(element);\n      }\n    });\n\n    return () => observer.disconnect();\n  }, [items, observerRootMargin, observerThreshold, onActiveChange]);\n\n  if (items.length === 0) return null;\n\n  const baseClasses = [\n    'relative',\n    sticky && 'sticky top-0 z-99',\n    blur && 'bg-background/95 backdrop-blur-sm',\n    !blur && 'bg-background',\n    showBorder && 'border-b border-border',\n    className\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const scrollClasses = [\n    'flex flex-row flex-nowrap items-stretch',\n    gapSizes[spacing],\n    'overflow-x-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent',\n    scrollContainerClassName\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={baseClasses}>\n      {showLeftShadow && (\n        <button\n          onClick={scrollLeft}\n          className={`absolute left-0 top-0 bottom-0 w-8 flex items-center justify-center cursor-pointer ${\n            blur ? 'bg-background/95' : 'bg-background'\n          } hover:bg-muted transition-colors z-10 border-r border-border`}\n          aria-label=\"Scroll left\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"text-foreground/70\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </button>\n      )}\n\n      {/* Left shadow indicator */}\n      {showLeftShadow && (\n        <div\n          className={`absolute left-8 top-0 bottom-0 w-8 ${\n            blur ? 'bg-linear-to-r from-background/95' : 'bg-linear-to-r from-background'\n          } to-transparent pointer-events-none z-10`}\n        />\n      )}\n\n      {/* Right shadow indicator */}\n      {showRightShadow && (\n        <div\n          className={`absolute right-8 top-0 bottom-0 w-8 ${\n            blur ? 'bg-linear-to-l from-background/95' : 'bg-linear-to-l from-background'\n          } to-transparent pointer-events-none z-10`}\n        />\n      )}\n\n      {/* Right scroll button */}\n      {showRightShadow && (\n        <button\n          onClick={scrollRight}\n          className={`absolute right-0 top-0 bottom-0 w-8 flex items-center justify-center cursor-pointer ${\n            blur ? 'bg-background/95' : 'bg-background'\n          } hover:bg-muted transition-colors z-10 border-l border-border`}\n          aria-label=\"Scroll right\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"text-foreground/70\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </button>\n      )}\n\n      <div ref={scrollContainerRef} className={scrollClasses}>\n        {items.map((item) => {\n          const isActive = activeId === item.id;\n          const onClick = () => handleClick(item.id);\n\n          if (renderItem) {\n            return <div key={item.id}>{renderItem(item, isActive, onClick)}</div>;\n          }\n\n          // Default rendering\n          return (\n            <button\n              key={item.id}\n              onClick={onClick}\n              className={`px-3 py-2 text-sm font-medium whitespace-nowrap rounded-md transition-colors ${\n                isActive ? 'bg-primary text-primary-fg' : 'text-foreground/70 hover:text-foreground hover:bg-muted'\n              }`}\n            >\n              {item.label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nScrollNav.displayName = 'ScrollNav';\n\nexport default ScrollNav;\n"],"names":["scrollLeft"],"mappings":"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"}

package/dist/components/navigation/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './sidebar';
+export type { SidebarProps } from './sidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/navigation/sidebar/sidebar.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type SidebarProps = {
+    /** Navigation items to render (typically NavbarLink or anchor elements) */
+    children: ReactNode;
+    /** Additional CSS classes for the sidebar container */
+    className?: string;
+    /** Width of the sidebar (e.g., '16rem', '4rem') */
+    width?: string;
+};
+/**
+ * Sidebar - Vertical navigation with sections
+ */
+declare function Sidebar({ children, className, width }: Readonly<SidebarProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Sidebar {
+    var displayName: string;
+}
+export default Sidebar;
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/components/navigation/sidebar/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAe,EAAE,EAAE,QAAQ,CAAC,YAAY,CAAC,2CA+CrF;kBA/CQ,OAAO;;;AAmDhB,eAAe,OAAO,CAAC"}

package/dist/components/navigation/sidebar/sidebar.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+function Sidebar({ children, className = "", width = "16rem" }) {
+  const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+    const childProps = child.props || {};
+    if ("href" in childProps) {
+      const existing = typeof childProps.className === "string" ? childProps.className : "";
+      const sidebarItemClasses = "flex items-center w-full justify-start gap-2 px-2 py-1.5 rounded hover:bg-muted";
+      const childInner = child.props.children;
+      const wrappedChildren = /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: childInner });
+      const newProps = {
+        ...child.props,
+        className: `${existing} ${sidebarItemClasses}`.trim()
+      };
+      return React.cloneElement(child, newProps, wrappedChildren);
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: `
+        ${widthClass || ""}
+        bg-card border-r border-border
+        flex flex-col
+        overflow-hidden
+        ${className}
+      `.replace(/\s+/g, " "),
+      style: !widthClass ? { width } : void 0,
+      "aria-label": "Sidebar navigation",
+      children: /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 py-3 flex flex-col gap-2", children: enhancedChildren })
+    }
+  );
+}
+Sidebar.displayName = "Sidebar";
+export {
+  Sidebar as default
+};
+//# sourceMappingURL=sidebar.js.map

package/dist/components/navigation/sidebar/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { ReactNode, ReactElement } from 'react';\n\nexport type SidebarProps = {\n  /** Navigation items to render (typically NavbarLink or anchor elements) */\n  children: ReactNode;\n  /** Additional CSS classes for the sidebar container */\n  className?: string;\n  /** Width of the sidebar (e.g., '16rem', '4rem') */\n  width?: string;\n};\n\n/**\n * Sidebar - Vertical navigation with sections\n */\nfunction Sidebar({ children, className = '', width = '16rem' }: Readonly<SidebarProps>) {\n  const widthClass = width === '16rem' ? 'w-64' : width === '4rem' ? 'w-16' : '';\n  // Enhance children that look like navigation links (have `href`) by\n  // cloning them and adding sidebar-specific item classes so showcase\n  // pages don't need to set `className` manually.\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child)) return child;\n\n    // If the child has an `href` prop (NavbarLink or anchor), append sidebar item classes\n    const childProps = (child.props || {}) as Record<string, unknown>;\n    if ('href' in childProps) {\n      const existing = typeof childProps.className === 'string' ? (childProps.className as string) : '';\n      // Ensure sidebar links are full-width and laid out as flex rows with icon+label\n      const sidebarItemClasses = 'flex items-center w-full justify-start gap-2 px-2 py-1.5 rounded hover:bg-muted';\n      // Wrap the child's content in a flex container so icon + text line up,\n      // and set item-level classes (without forcing display:flex on the root link,\n      // because NavbarLink includes a 'block' class). This avoids conflicting\n      // display utilities while ensuring the visual layout.\n      const childInner = (child.props as Record<string, unknown>).children as React.ReactNode;\n      // Always wrap the child's content to ensure icon + text are inline\n      const wrappedChildren = <span className=\"flex items-center gap-2\">{childInner}</span>;\n\n      const newProps = {\n        ...(child.props as Record<string, unknown>),\n        className: `${existing} ${sidebarItemClasses}`.trim()\n      };\n      return React.cloneElement(child as ReactElement, newProps as unknown as Record<string, unknown>, wrappedChildren);\n    }\n\n    return child;\n  });\n\n  return (\n    <nav\n      className={`\n        ${widthClass || ''}\n        bg-card border-r border-border\n        flex flex-col\n        overflow-hidden\n        ${className}\n      `.replace(/\\s+/g, ' ')}\n      style={!widthClass ? ({ width } as React.CSSProperties) : undefined}\n      aria-label=\"Sidebar navigation\"\n    >\n      <div className=\"flex-1 px-4 py-3 flex flex-col gap-2\">{enhancedChildren}</div>\n    </nav>\n  );\n}\n\nSidebar.displayName = 'Sidebar';\n\nexport default Sidebar;\n"],"names":[],"mappings":";;AAcA,SAAS,QAAQ,EAAE,UAAU,YAAY,IAAI,QAAQ,WAAmC;AACtF,QAAM,aAAa,UAAU,UAAU,SAAS,UAAU,SAAS,SAAS;AAI5E,QAAM,mBAAmB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC/D,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG,QAAO;AAGzC,UAAM,aAAc,MAAM,SAAS,CAAA;AACnC,QAAI,UAAU,YAAY;AACxB,YAAM,WAAW,OAAO,WAAW,cAAc,WAAY,WAAW,YAAuB;AAE/F,YAAM,qBAAqB;AAK3B,YAAM,aAAc,MAAM,MAAkC;AAE5D,YAAM,kBAAkB,oBAAC,QAAA,EAAK,WAAU,2BAA2B,UAAA,YAAW;AAE9E,YAAM,WAAW;AAAA,QACf,GAAI,MAAM;AAAA,QACV,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG,KAAA;AAAA,MAAK;AAEtD,aAAO,MAAM,aAAa,OAAuB,UAAgD,eAAe;AAAA,IAClH;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,UACP,cAAc,EAAE;AAAA;AAAA;AAAA;AAAA,UAIhB,SAAS;AAAA,QACX,QAAQ,QAAQ,GAAG;AAAA,MACrB,OAAO,CAAC,aAAc,EAAE,UAAkC;AAAA,MAC1D,cAAW;AAAA,MAEX,UAAA,oBAAC,OAAA,EAAI,WAAU,wCAAwC,UAAA,iBAAA,CAAiB;AAAA,IAAA;AAAA,EAAA;AAG9E;AAEA,QAAQ,cAAc;"}

package/dist/components/navigation/stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Stepper } from './stepper';
+export type { StepperProps, StepProps } from './stepper';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/navigation/stepper/stepper.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+export type StepProps = {
+    /** Primary text label for the step */
+    title: string;
+    /** Optional secondary description text */
+    description?: string;
+    /** Custom icon to display instead of step number */
+    icon?: ReactNode;
+    /** Current status of the step (auto-determined from currentStep if not set) */
+    status?: 'pending' | 'current' | 'completed' | 'error';
+    /** Whether this step can be skipped */
+    optional?: boolean;
+};
+export type StepperProps = {
+    /** Array of step configurations */
+    steps: StepProps[];
+    /** Zero-based index of the currently active step */
+    currentStep: number;
+    /** Additional CSS classes for the stepper container */
+    className?: string;
+    /** Layout direction for the stepper */
+    orientation?: 'horizontal' | 'vertical';
+    /** Callback fired when a step is clicked (only when clickable is true) */
+    onStepClick?: (step: number) => void;
+    /** Enable clicking on steps for navigation */
+    clickable?: boolean;
+};
+/**
+ * Stepper - Multi-step progress indicator
+ *
+ * Features:
+ * - Horizontal and vertical orientations
+ * - Current, completed, and pending states
+ * - Optional steps
+ * - Custom icons
+ * - Clickable steps (for navigation)
+ * - Error states
+ *
+ * Common uses:
+ * - Multi-step forms
+ * - Checkout processes
+ * - Onboarding flows
+ * - Wizards
+ */
+declare function Stepper({ steps, currentStep, className, orientation, onStepClick, clickable }: Readonly<StepperProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Stepper {
+    var displayName: string;
+}
+export default Stepper;
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/navigation/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,MAAM,SAAS,GAAG;IACtB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACvD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,mCAAmC;IACnC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,oDAAoD;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,WAAW,EACX,SAAc,EACd,WAA0B,EAC1B,WAAW,EACX,SAAiB,EAClB,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAwLxB;kBA/LQ,OAAO;;;AAmMhB,eAAe,OAAO,CAAC"}