@epicbagel/saas-kit 1.15.0 → 1.16.0

package/README.md

@@ -448,6 +448,11 @@ with stable `id`, accessible `label`, optional `imageSrc`/`fallback`, and
 visible. The item at the top of the scroll viewport is highlighted; the index
 scrolls independently for long lists. With insufficient left gutter, it uses
 a compact horizontal row above the content. Single-item lists have no index.
+Set `columns` for a responsive card grid (one column on mobile). The first card
+in the row at the reading edge is highlighted; changing columns preserves each
+card's local state.
+The available gutter stays within the outer main content landmark, so the
+index never counts an application's sidebar as free space.
 
 It detects the nearest scrolling ancestor, supports an explicit `scrollRoot`
 and `topOffset` for sticky headers, and offers `onNavigate` for custom scroll

package/dist/{chunk-34AS3OCC.cjs → chunk-6AMSRIQ4.cjs}

@@ -1,6 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
+var _chunkZ2H4LJVGcjs = require('./chunk-Z2H4LJVG.cjs');
+
+
 
 
 var _chunkWABCLRBRcjs = require('./chunk-WABCLRBR.cjs');
@@ -22,7 +25,7 @@ function findScrollRoot(element) {
   }
   return null;
 }
-function viewportBounds(root) {
+function viewportBounds(root, element) {
   const viewport = window.visualViewport;
   const top = _nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _ => _.offsetTop]), () => ( 0));
   const left = _nullishCoalesce(_optionalChain([viewport, 'optionalAccess', _2 => _2.offsetLeft]), () => ( 0));
@@ -36,11 +39,21 @@ function viewportBounds(root) {
     bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
     bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
   }
+  let landmark = _optionalChain([element, 'optionalAccess', _5 => _5.closest, 'call', _6 => _6("main, [role='main']")]);
+  for (let parent = _optionalChain([landmark, 'optionalAccess', _7 => _7.parentElement, 'optionalAccess', _8 => _8.closest, 'call', _9 => _9("main, [role='main']")]); parent; parent = _optionalChain([parent, 'access', _10 => _10.parentElement, 'optionalAccess', _11 => _11.closest, 'call', _12 => _12("main, [role='main']")])) {
+    landmark = parent;
+  }
+  if (landmark) {
+    const rect = landmark.getBoundingClientRect();
+    bounds.left = Math.max(bounds.left, rect.left);
+    bounds.right = Math.min(bounds.right, rect.right);
+  }
   return bounds;
 }
 var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
   items,
   label = "Browse items",
+  columns = 1,
   topOffset = 0,
   scrollRoot,
   onNavigate,
@@ -70,14 +83,14 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       }
       const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
       scroller.current = scrollElement;
-      const view = viewportBounds(scrollElement);
+      const view = viewportBounds(scrollElement, element);
       const box = element.getBoundingClientRect();
       const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
       const top = Math.max(view.top + topOffset + GAP, box.top);
       const bottom = Math.min(view.bottom, box.bottom) - GAP;
       const visible = box.width > 0 && box.right > view.left && box.left < view.right && bottom - top >= ROW_HEIGHT;
       const readingEdge = view.top + topOffset + GAP + (mode === "row" ? ROW_HEIGHT : 0);
-      const active = visible ? Math.max(0, items.findIndex((item) => (_nullishCoalesce(_optionalChain([targets, 'access', _5 => _5.current, 'access', _6 => _6.get, 'call', _7 => _7(item.id), 'optionalAccess', _8 => _8.getBoundingClientRect, 'call', _9 => _9(), 'access', _10 => _10.bottom]), () => ( 0))) > readingEdge + 1)) : 0;
+      const active = visible ? Math.max(0, items.findIndex((item) => (_nullishCoalesce(_optionalChain([targets, 'access', _13 => _13.current, 'access', _14 => _14.get, 'call', _15 => _15(item.id), 'optionalAccess', _16 => _16.getBoundingClientRect, 'call', _17 => _17(), 'access', _18 => _18.bottom]), () => ( 0))) > readingEdge + 1)) : 0;
       const next = {
         mode,
         top,
@@ -93,33 +106,33 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       if (!frame) frame = requestAnimationFrame(measure);
     };
     const visibility = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
-      intersects = _nullishCoalesce(_optionalChain([entries, 'access', _11 => _11[entries.length - 1], 'optionalAccess', _12 => _12.isIntersecting]), () => ( intersects));
+      intersects = _nullishCoalesce(_optionalChain([entries, 'access', _19 => _19[entries.length - 1], 'optionalAccess', _20 => _20.isIntersecting]), () => ( intersects));
       schedule();
     });
-    _optionalChain([visibility, 'optionalAccess', _13 => _13.observe, 'call', _14 => _14(element)]);
+    _optionalChain([visibility, 'optionalAccess', _21 => _21.observe, 'call', _22 => _22(element)]);
     const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
     for (let parent = element; parent; parent = parent.parentElement) {
-      _optionalChain([resize, 'optionalAccess', _15 => _15.observe, 'call', _16 => _16(parent)]);
+      _optionalChain([resize, 'optionalAccess', _23 => _23.observe, 'call', _24 => _24(parent)]);
     }
-    targets.current.forEach((target) => _optionalChain([resize, 'optionalAccess', _17 => _17.observe, 'call', _18 => _18(target)]));
+    targets.current.forEach((target) => _optionalChain([resize, 'optionalAccess', _25 => _25.observe, 'call', _26 => _26(target)]));
     document.addEventListener("scroll", schedule, { passive: true, capture: true });
     window.addEventListener("resize", schedule);
-    _optionalChain([window, 'access', _19 => _19.visualViewport, 'optionalAccess', _20 => _20.addEventListener, 'call', _21 => _21("resize", schedule)]);
-    _optionalChain([window, 'access', _22 => _22.visualViewport, 'optionalAccess', _23 => _23.addEventListener, 'call', _24 => _24("scroll", schedule)]);
+    _optionalChain([window, 'access', _27 => _27.visualViewport, 'optionalAccess', _28 => _28.addEventListener, 'call', _29 => _29("resize", schedule)]);
+    _optionalChain([window, 'access', _30 => _30.visualViewport, 'optionalAccess', _31 => _31.addEventListener, 'call', _32 => _32("scroll", schedule)]);
     measure();
     return () => {
       cancelAnimationFrame(frame);
-      _optionalChain([resize, 'optionalAccess', _25 => _25.disconnect, 'call', _26 => _26()]);
-      _optionalChain([visibility, 'optionalAccess', _27 => _27.disconnect, 'call', _28 => _28()]);
+      _optionalChain([resize, 'optionalAccess', _33 => _33.disconnect, 'call', _34 => _34()]);
+      _optionalChain([visibility, 'optionalAccess', _35 => _35.disconnect, 'call', _36 => _36()]);
       document.removeEventListener("scroll", schedule, true);
       window.removeEventListener("resize", schedule);
-      _optionalChain([window, 'access', _29 => _29.visualViewport, 'optionalAccess', _30 => _30.removeEventListener, 'call', _31 => _31("resize", schedule)]);
-      _optionalChain([window, 'access', _32 => _32.visualViewport, 'optionalAccess', _33 => _33.removeEventListener, 'call', _34 => _34("scroll", schedule)]);
+      _optionalChain([window, 'access', _37 => _37.visualViewport, 'optionalAccess', _38 => _38.removeEventListener, 'call', _39 => _39("resize", schedule)]);
+      _optionalChain([window, 'access', _40 => _40.visualViewport, 'optionalAccess', _41 => _41.removeEventListener, 'call', _42 => _42("scroll", schedule)]);
     };
-  }, [keys, navigable, topOffset, scrollRoot]);
+  }, [keys, navigable, columns, topOffset, scrollRoot]);
   _react.useEffect.call(void 0, () => {
     const index = indexRef.current;
-    const button = controls.current.get(_nullishCoalesce(_nullishCoalesce(focusId, () => ( _optionalChain([items, 'access', _35 => _35[placement.active], 'optionalAccess', _36 => _36.id]))), () => ( "")));
+    const button = controls.current.get(_nullishCoalesce(_nullishCoalesce(focusId, () => ( _optionalChain([items, 'access', _43 => _43[placement.active], 'optionalAccess', _44 => _44.id]))), () => ( "")));
     if (!index || !button || !placement.visible) return;
     const horizontal = placement.mode === "row";
     const start = horizontal ? button.offsetLeft : button.offsetTop;
@@ -137,14 +150,14 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       offset: topOffset + GAP + (placement.mode === "row" ? ROW_HEIGHT : 0),
       behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
     };
-    if (_optionalChain([onNavigate, 'optionalCall', _37 => _37(item.id, target, options)]) === true) return;
+    if (_optionalChain([onNavigate, 'optionalCall', _45 => _45(item.id, target, options)]) === true) return;
     const scrollElement = scroller.current;
-    const view = viewportBounds(scrollElement);
-    const top = (_nullishCoalesce(_optionalChain([scrollElement, 'optionalAccess', _38 => _38.scrollTop]), () => ( window.scrollY))) + target.getBoundingClientRect().top - view.top - options.offset;
+    const view = viewportBounds(scrollElement, rootRef.current);
+    const top = (_nullishCoalesce(_optionalChain([scrollElement, 'optionalAccess', _46 => _46.scrollTop]), () => ( window.scrollY))) + target.getBoundingClientRect().top - view.top - options.offset;
     if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
     else window.scrollTo({ top, behavior: options.behavior });
   }
-  const activeId = _optionalChain([items, 'access', _39 => _39[placement.active], 'optionalAccess', _40 => _40.id]);
+  const activeId = _optionalChain([items, 'access', _47 => _47[placement.active], 'optionalAccess', _48 => _48.id]);
   const tabId = focusId && items.some((item) => item.id === focusId) ? focusId : activeId;
   const row = placement.mode === "row";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -160,7 +173,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
       },
       className: _chunkKWLSBTB2cjs.cn.call(void 0, "relative min-w-0", navigable && row && "pt-16", className),
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ2H4LJVGcjs.Grid, { columns, gap: "md", responsive: true, className: "min-w-0", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
             id: `${id}-${index}`,
@@ -204,7 +217,7 @@ var ScrollNavigator = _react.forwardRef.call(void 0, function ScrollNavigator2({
                       else return;
                       event.preventDefault();
                       const button = controls.current.get(items[next].id);
-                      _optionalChain([button, 'optionalAccess', _41 => _41.focus, 'call', _42 => _42({ preventScroll: true })]);
+                      _optionalChain([button, 'optionalAccess', _49 => _49.focus, 'call', _50 => _50({ preventScroll: true })]);
                       const index = indexRef.current;
                       if (index && button) {
                         if (row) index.scrollLeft = button.offsetLeft - (index.clientWidth - button.offsetWidth) / 2;

package/dist/{chunk-UBTLWSKK.js → chunk-EXXJXOUO.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   ScrollNavigator
-} from "./chunk-VT2WDFSU.js";
+} from "./chunk-V3XA7SDK.js";
 import {
   Button
 } from "./chunk-W326GKML.js";

package/dist/chunk-GA5SX7FE.js

@@ -0,0 +1,48 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/grid.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var fixedColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var responsiveColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
+var Grid = forwardRef(function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
+        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
+        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
+        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
+        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
+        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
+        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        gaps[gap],
+        maxWidth === "xl" && "max-w-2xl",
+        centered && "mx-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Grid
+};

package/dist/{chunk-PD5UQEKY.cjs → chunk-HSSSNAVX.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunk34AS3OCCcjs = require('./chunk-34AS3OCC.cjs');
+var _chunk6AMSRIQ4cjs = require('./chunk-6AMSRIQ4.cjs');
 
 
 var _chunkJDEXZGIYcjs = require('./chunk-JDEXZGIY.cjs');
@@ -23,7 +23,7 @@ function MessageScrollerProvider(props) {
 }
 function MessageScrollerNavigator(props) {
   const { scrollToMessage } = _messagescroller.useMessageScroller.call(void 0, );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk34AS3OCCcjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6AMSRIQ4cjs.ScrollNavigator, { ...props, onNavigate: (id, target, options) => {
     if (_optionalChain([props, 'access', _ => _.onNavigate, 'optionalCall', _2 => _2(id, target, options)]) === true) return true;
     const message = target.closest("[data-message-id]");
     const messageId = _optionalChain([message, 'optionalAccess', _3 => _3.dataset, 'access', _4 => _4.messageId]);

package/dist/{chunk-VT2WDFSU.js → chunk-V3XA7SDK.js}

@@ -1,4 +1,7 @@
 "use client";
+import {
+  Grid
+} from "./chunk-GA5SX7FE.js";
 import {
   Avatar,
   AvatarFallback,
@@ -22,7 +25,7 @@ function findScrollRoot(element) {
   }
   return null;
 }
-function viewportBounds(root) {
+function viewportBounds(root, element) {
   const viewport = window.visualViewport;
   const top = viewport?.offsetTop ?? 0;
   const left = viewport?.offsetLeft ?? 0;
@@ -36,11 +39,21 @@ function viewportBounds(root) {
     bounds.right = Math.min(bounds.right, rect.left + parent.clientLeft + parent.clientWidth);
     bounds.bottom = Math.min(bounds.bottom, rect.top + parent.clientTop + parent.clientHeight);
   }
+  let landmark = element?.closest("main, [role='main']");
+  for (let parent = landmark?.parentElement?.closest("main, [role='main']"); parent; parent = parent.parentElement?.closest("main, [role='main']")) {
+    landmark = parent;
+  }
+  if (landmark) {
+    const rect = landmark.getBoundingClientRect();
+    bounds.left = Math.max(bounds.left, rect.left);
+    bounds.right = Math.min(bounds.right, rect.right);
+  }
   return bounds;
 }
 var ScrollNavigator = forwardRef(function ScrollNavigator2({
   items,
   label = "Browse items",
+  columns = 1,
   topOffset = 0,
   scrollRoot,
   onNavigate,
@@ -70,7 +83,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
       }
       const scrollElement = scrollRoot === void 0 ? findScrollRoot(element) : scrollRoot;
       scroller.current = scrollElement;
-      const view = viewportBounds(scrollElement);
+      const view = viewportBounds(scrollElement, element);
       const box = element.getBoundingClientRect();
       const mode = box.left - view.left >= RAIL_WIDTH + GAP ? "rail" : "row";
       const top = Math.max(view.top + topOffset + GAP, box.top);
@@ -116,7 +129,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
       window.visualViewport?.removeEventListener("resize", schedule);
       window.visualViewport?.removeEventListener("scroll", schedule);
     };
-  }, [keys, navigable, topOffset, scrollRoot]);
+  }, [keys, navigable, columns, topOffset, scrollRoot]);
   useEffect(() => {
     const index = indexRef.current;
     const button = controls.current.get(focusId ?? items[placement.active]?.id ?? "");
@@ -139,7 +152,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
     };
     if (onNavigate?.(item.id, target, options) === true) return;
     const scrollElement = scroller.current;
-    const view = viewportBounds(scrollElement);
+    const view = viewportBounds(scrollElement, rootRef.current);
     const top = (scrollElement?.scrollTop ?? window.scrollY) + target.getBoundingClientRect().top - view.top - options.offset;
     if (scrollElement) scrollElement.scrollTo({ top, behavior: options.behavior });
     else window.scrollTo({ top, behavior: options.behavior });
@@ -160,7 +173,7 @@ var ScrollNavigator = forwardRef(function ScrollNavigator2({
       },
       className: cn("relative min-w-0", navigable && row && "pt-16", className),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-4", children: items.map((item, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Grid, { columns, gap: "md", responsive: true, className: "min-w-0", children: items.map((item, index) => /* @__PURE__ */ jsx(
           "div",
           {
             id: `${id}-${index}`,

package/dist/chunk-Z2H4LJVG.cjs

@@ -0,0 +1,48 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/grid.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var fixedColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+var responsiveColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
+var Grid = _react.forwardRef.call(void 0, function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
+  const Component = _nullishCoalesce(as, () => ( "div"));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Component,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
+        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
+        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
+        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
+        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
+        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
+        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        gaps[gap],
+        maxWidth === "xl" && "max-w-2xl",
+        centered && "mx-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+
+
+exports.Grid = Grid;

package/dist/primitives/alert.d.cts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "success" | "default" | "destructive" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AlertProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     marginBottom?: "none" | "md";

package/dist/primitives/alert.d.ts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "success" | "default" | "destructive" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AlertProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     marginBottom?: "none" | "md";

package/dist/primitives/badge.d.cts

@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ElementType } from 'react';
 
 declare const badgeVariants: (props?: ({
-    variant?: "neutral" | "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     weight?: "normal" | "semibold" | "bold";

package/dist/primitives/badge.d.ts

@@ -4,7 +4,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ElementType } from 'react';
 
 declare const badgeVariants: (props?: ({
-    variant?: "neutral" | "error" | "success" | "default" | "secondary" | "destructive" | "outline" | "warning" | "info" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
     weight?: "normal" | "semibold" | "bold";

package/dist/primitives/bubble.d.cts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "muted" | "ghost" | "secondary" | "destructive" | "outline" | "tinted" | null | undefined;
+    variant?: "default" | "muted" | "secondary" | "destructive" | "outline" | "ghost" | "tinted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/primitives/bubble.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "muted" | "ghost" | "secondary" | "destructive" | "outline" | "tinted" | null | undefined;
+    variant?: "default" | "muted" | "secondary" | "destructive" | "outline" | "ghost" | "tinted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/primitives/button.d.cts

@@ -4,8 +4,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "ghost" | "secondary" | "destructive" | "outline" | "outline-muted" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
-    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "tone" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "outline-muted" | "ghost" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
+    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | "tone" | null | undefined;
     width?: "auto" | "full" | "responsive" | null | undefined;
     align?: "center" | "start" | null | undefined;
     shrink?: boolean | null | undefined;

package/dist/primitives/button.d.ts

@@ -4,8 +4,8 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "ghost" | "secondary" | "destructive" | "outline" | "outline-muted" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
-    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "tone" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "outline-muted" | "ghost" | "quiet" | "ghost-destructive" | "link-muted" | "inverted" | "status-error" | "status-warning" | "status-muted" | null | undefined;
+    size?: "filter" | "status" | "toolbar" | "sm" | "lg" | "default" | "micro" | "compact" | "hero" | "icon" | "icon-lg" | "icon-sm" | "icon-md" | "icon-xs" | "icon-compact" | "icon-micro" | "bare" | "voice-sm" | "voice" | "suggestion" | "tone" | null | undefined;
     width?: "auto" | "full" | "responsive" | null | undefined;
     align?: "center" | "start" | null | undefined;
     shrink?: boolean | null | undefined;

package/dist/primitives/chat.cjs

@@ -26,14 +26,15 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
-require('../chunk-34AS3OCC.cjs');
+var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
+require('../chunk-6AMSRIQ4.cjs');
 
 
 
 
 
 var _chunkNWDPH2Z7cjs = require('../chunk-NWDPH2Z7.cjs');
+require('../chunk-Z2H4LJVG.cjs');
 
 
 
@@ -178,15 +179,15 @@ var ChatThread = _react.forwardRef.call(void 0,
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
     const anchorId = useArrivingUserTurnId(messages);
     const workspace = appearance === "workspace";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkPD5UQEKYcjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkHSSSNAVXcjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkPD5UQEKYcjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkHSSSNAVXcjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
@@ -195,7 +196,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
                   if (m.status === "running") {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -208,7 +209,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                   const marker = markers[index];
                   const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                    _chunkPD5UQEKYcjs.MessageScrollerItem,
+                    _chunkHSSSNAVXcjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
@@ -264,15 +265,15 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkPD5UQEKYcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkHSSSNAVXcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { className: "h-4 w-4" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: scrollButtonLabel })
           ] })

package/dist/primitives/chat.js

@@ -26,14 +26,15 @@ import {
   MessageScrollerItem,
   MessageScrollerProvider,
   MessageScrollerViewport
-} from "../chunk-UBTLWSKK.js";
-import "../chunk-VT2WDFSU.js";
+} from "../chunk-EXXJXOUO.js";
+import "../chunk-V3XA7SDK.js";
 import {
   Message,
   MessageAction,
   MessageActions,
   MessageContent
 } from "../chunk-H4XH2PPU.js";
+import "../chunk-GA5SX7FE.js";
 import {
   InputGroup,
   InputGroupAddon,

package/dist/primitives/grid.cjs

@@ -1,47 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+var _chunkZ2H4LJVGcjs = require('../chunk-Z2H4LJVG.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/grid.tsx
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var fixedColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4"
-};
-var responsiveColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-};
-var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
-var Grid = _react.forwardRef.call(void 0, function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
-  const Component = _nullishCoalesce(as, () => ( "div"));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Component,
-    {
-      ref,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
-        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
-        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
-        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
-        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
-        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
-        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-        gaps[gap],
-        maxWidth === "xl" && "max-w-2xl",
-        centered && "mx-auto",
-        className
-      ),
-      ...props
-    }
-  );
-});
 
-
-exports.Grid = Grid;
+exports.Grid = _chunkZ2H4LJVGcjs.Grid;

package/dist/primitives/grid.js

@@ -1,47 +1,8 @@
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/grid.tsx
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var fixedColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4"
-};
-var responsiveColumns = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-};
-var gaps = { sm: "gap-2", compact: "gap-3", md: "gap-4", lg: "gap-6" };
-var Grid = forwardRef(function Grid2({ columns = 2, gap = "md", responsive = true, layout = "grid", maxWidth = "none", centered = false, template = "equal", as, className, ...props }, ref) {
-  const Component = as ?? "div";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className: cn(
-        layout === "grid" ? "grid" : "grid sm:flex sm:justify-end",
-        layout === "grid" && template === "equal" && columns !== null && (responsive ? responsiveColumns[columns] : fixedColumns[columns]),
-        layout === "responsive-actions" && columns !== null && fixedColumns[columns],
-        template === "compact-leading-three" && "grid-cols-[5rem_1fr_1fr]",
-        template === "responsive-form-row-six" && "grid-cols-1 items-center sm:grid-cols-[1fr_1.4fr_1fr_1fr_1fr_auto]",
-        template === "master-detail" && "grid-cols-1 lg:grid-cols-[360px_1fr]",
-        template === "gallery" && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-        gaps[gap],
-        maxWidth === "xl" && "max-w-2xl",
-        centered && "mx-auto",
-        className
-      ),
-      ...props
-    }
-  );
-});
+  Grid
+} from "../chunk-GA5SX7FE.js";
+import "../chunk-G6SRSWXB.js";
 export {
   Grid
 };

package/dist/primitives/message-scroller.cjs

@@ -11,8 +11,9 @@
 
 
 
-var _chunkPD5UQEKYcjs = require('../chunk-PD5UQEKY.cjs');
-require('../chunk-34AS3OCC.cjs');
+var _chunkHSSSNAVXcjs = require('../chunk-HSSSNAVX.cjs');
+require('../chunk-6AMSRIQ4.cjs');
+require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-JDEXZGIY.cjs');
 require('../chunk-KWLSBTB2.cjs');
@@ -27,4 +28,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.MessageScroller = _chunkPD5UQEKYcjs.MessageScroller; exports.MessageScrollerButton = _chunkPD5UQEKYcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkPD5UQEKYcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkPD5UQEKYcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkPD5UQEKYcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkPD5UQEKYcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkPD5UQEKYcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkPD5UQEKYcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkPD5UQEKYcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkPD5UQEKYcjs.useMessageScrollerVisibility;
+exports.MessageScroller = _chunkHSSSNAVXcjs.MessageScroller; exports.MessageScrollerButton = _chunkHSSSNAVXcjs.MessageScrollerButton; exports.MessageScrollerContent = _chunkHSSSNAVXcjs.MessageScrollerContent; exports.MessageScrollerItem = _chunkHSSSNAVXcjs.MessageScrollerItem; exports.MessageScrollerNavigator = _chunkHSSSNAVXcjs.MessageScrollerNavigator; exports.MessageScrollerProvider = _chunkHSSSNAVXcjs.MessageScrollerProvider; exports.MessageScrollerViewport = _chunkHSSSNAVXcjs.MessageScrollerViewport; exports.useMessageScroller = _chunkHSSSNAVXcjs.useMessageScroller; exports.useMessageScrollerScrollable = _chunkHSSSNAVXcjs.useMessageScrollerScrollable; exports.useMessageScrollerVisibility = _chunkHSSSNAVXcjs.useMessageScrollerVisibility;

package/dist/primitives/message-scroller.js

@@ -11,8 +11,9 @@ import {
   useMessageScroller,
   useMessageScrollerScrollable,
   useMessageScrollerVisibility
-} from "../chunk-UBTLWSKK.js";
-import "../chunk-VT2WDFSU.js";
+} from "../chunk-EXXJXOUO.js";
+import "../chunk-V3XA7SDK.js";
+import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-W326GKML.js";
 import "../chunk-G6SRSWXB.js";

package/dist/primitives/scroll-navigator.cjs

@@ -2,9 +2,10 @@
 "use client";
 
 
-var _chunk34AS3OCCcjs = require('../chunk-34AS3OCC.cjs');
+var _chunk6AMSRIQ4cjs = require('../chunk-6AMSRIQ4.cjs');
+require('../chunk-Z2H4LJVG.cjs');
 require('../chunk-WABCLRBR.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
-exports.ScrollNavigator = _chunk34AS3OCCcjs.ScrollNavigator;
+exports.ScrollNavigator = _chunk6AMSRIQ4cjs.ScrollNavigator;

package/dist/primitives/scroll-navigator.d.cts

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Card columns above the small breakpoint; always one column on mobile. */
+    columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */
     topOffset?: number;
     /** The nearest vertically scrolling ancestor is detected by default. */

package/dist/primitives/scroll-navigator.d.ts

@@ -18,6 +18,8 @@ interface ScrollNavigatorScrollOptions {
 interface ScrollNavigatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     items: readonly ScrollNavigatorItem[];
     label?: string;
+    /** Card columns above the small breakpoint; always one column on mobile. */
+    columns?: 1 | 2 | 3 | 4;
     /** Space below a sticky header inside the scroll viewport, in pixels. */
     topOffset?: number;
     /** The nearest vertically scrolling ancestor is detected by default. */

package/dist/primitives/scroll-navigator.js

@@ -2,7 +2,8 @@
 "use client";
 import {
   ScrollNavigator
-} from "../chunk-VT2WDFSU.js";
+} from "../chunk-V3XA7SDK.js";
+import "../chunk-GA5SX7FE.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-G6SRSWXB.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [