@epicbagel/saas-kit 1.32.0 → 1.34.0

package/dist/chunk-WTVL2FK7.js

@@ -0,0 +1,47 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/page-shell.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var widthStyles = {
+  narrow: "max-w-3xl",
+  wide: "max-w-5xl",
+  full: "max-w-none"
+};
+var paddingStyles = {
+  none: "",
+  base: "px-4 md:px-6",
+  relaxed: "px-6 md:px-10",
+  spacious: "px-6 md:px-10 xl:px-16"
+};
+var PageShell = forwardRef(
+  function PageShell2({ width = "full", padding = "base", spacing = "default", bottomInset = "default", minHeight = "none", align = "start", printMode = "default", mobileTreatment = "page", as = "main", className, ...props }, ref) {
+    const Tag = as;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full pt-6 md:pt-8 mb-28",
+          spacing === "default" ? "space-y-6" : "space-y-4",
+          widthStyles[width],
+          paddingStyles[padding],
+          bottomInset === "action" && "pb-32",
+          minHeight === "content" && "min-h-[70vh]",
+          align === "center" && "flex items-center",
+          printMode === "compact" && "print:my-0 print:pt-0",
+          mobileTreatment === "application" && "mb-0 flex min-h-[calc(100svh-4rem)] flex-1 flex-col space-y-0 px-0 pt-0 md:mb-28 md:block md:min-h-0 md:pt-8",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+export {
+  PageShell
+};

package/dist/chunk-XH2I3YJ6.js

@@ -0,0 +1,63 @@
+"use client";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger
+} from "./chunk-7CRDYV3C.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/page-tabs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageTabs({
+  value,
+  onValueChange,
+  items,
+  ariaLabel,
+  layout = "equal",
+  className
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      value,
+      onValueChange: (next) => onValueChange(next),
+      className,
+      children: /* @__PURE__ */ jsx(
+        TabsList,
+        {
+          "aria-label": ariaLabel,
+          scrollable: layout === "scroll",
+          width: "full",
+          className: cn(
+            "w-full",
+            layout === "equal" ? "grid h-auto p-1.5" : "justify-start"
+          ),
+          style: layout === "equal" ? { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` } : void 0,
+          children: items.map((item) => /* @__PURE__ */ jsxs(
+            TabsTrigger,
+            {
+              value: item.value,
+              className: cn(
+                layout === "equal" && "min-h-11 gap-2 text-sm sm:text-base",
+                layout === "scroll" && "shrink-0 gap-2"
+              ),
+              children: [
+                item.icon,
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }),
+                item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.badge })
+              ]
+            },
+            item.value
+          ))
+        }
+      )
+    }
+  );
+}
+
+export {
+  PageTabs
+};

package/dist/chunk-Y6X6XDHE.cjs

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/page-header.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function PageHeader({
+  eyebrow,
+  title,
+  description,
+  children,
+  size = "default",
+  actionsLayout = "inline",
+  spacing = "default",
+  responsiveVisibility = "always",
+  className
+}) {
+  const display = size === "display";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex items-start justify-between gap-4",
+        spacing === "default" && (display ? "mb-8 md:mb-10" : "mb-6"),
+        spacing === "compact" && "mb-4",
+        display && "flex-col gap-6 sm:flex-row sm:gap-4",
+        actionsLayout === "responsive" && "flex-wrap gap-y-3 [&>div:last-child]:w-full [&>div:last-child]:justify-end sm:[&>div:last-child]:w-auto",
+        responsiveVisibility === "desktop" && "hidden md:flex",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-w-0 flex-1", display ? "space-y-2" : "space-y-1.5"), children: [
+          eyebrow && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "font-mono text-xs uppercase tracking-widest text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "h1",
+            {
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                "font-semibold tracking-tight",
+                size === "display" ? "text-4xl leading-none md:text-6xl md:leading-none" : "text-2xl md:text-3xl"
+              ),
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "p",
+            {
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                "max-w-[72ch] text-muted-foreground",
+                size === "display" ? "text-base md:text-lg" : "text-sm"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "flex shrink-0 items-center gap-2",
+              size === "display" ? "w-full flex-wrap sm:mt-0.5 sm:w-auto sm:flex-nowrap md:mt-1" : "mt-1"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.PageHeader = PageHeader;

package/dist/primitives/accent-theme.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkI3GBXIFLcjs = require('../chunk-I3GBXIFL.cjs');
+
+
+exports.AccentTheme = _chunkI3GBXIFLcjs.AccentTheme;

package/dist/primitives/accent-theme.d.cts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface AccentThemeColours {
+    light?: string | null;
+    dark?: string | null;
+}
+interface AccentThemeProps {
+    colours?: AccentThemeColours | null;
+    /**
+     * `region` (default) accents only the wrapped content. Use `document` once
+     * at the application root so body portals inherit the same accent too.
+     */
+    scope?: "region" | "document";
+    /**
+     * Apply the accent only while the document is in this palette
+     * (`data-theme` on `<html>`), so a palette someone picks keeps its own
+     * accent. Leave it off to apply the accent in every palette.
+     */
+    palette?: string;
+    children: ReactNode;
+}
+/**
+ * Scopes the UI-kit accent tokens to a region or document without changing its neutral
+ * surfaces or typography. Light and dark values are selected entirely in CSS,
+ * so switching themes does not require app-owned listeners or render state,
+ * and with `palette` neither does switching palettes: the wrapper stays, and
+ * only the rules stop matching.
+ */
+declare function AccentTheme({ colours, palette, scope: target, children }: AccentThemeProps): react_jsx_runtime.JSX.Element;
+
+export { AccentTheme, type AccentThemeColours, type AccentThemeProps };

package/dist/primitives/accent-theme.d.ts

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface AccentThemeColours {
+    light?: string | null;
+    dark?: string | null;
+}
+interface AccentThemeProps {
+    colours?: AccentThemeColours | null;
+    /**
+     * `region` (default) accents only the wrapped content. Use `document` once
+     * at the application root so body portals inherit the same accent too.
+     */
+    scope?: "region" | "document";
+    /**
+     * Apply the accent only while the document is in this palette
+     * (`data-theme` on `<html>`), so a palette someone picks keeps its own
+     * accent. Leave it off to apply the accent in every palette.
+     */
+    palette?: string;
+    children: ReactNode;
+}
+/**
+ * Scopes the UI-kit accent tokens to a region or document without changing its neutral
+ * surfaces or typography. Light and dark values are selected entirely in CSS,
+ * so switching themes does not require app-owned listeners or render state,
+ * and with `palette` neither does switching palettes: the wrapper stays, and
+ * only the rules stop matching.
+ */
+declare function AccentTheme({ colours, palette, scope: target, children }: AccentThemeProps): react_jsx_runtime.JSX.Element;
+
+export { AccentTheme, type AccentThemeColours, type AccentThemeProps };

package/dist/primitives/accent-theme.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  AccentTheme
+} from "../chunk-BB7PO2BW.js";
+export {
+  AccentTheme
+};

package/dist/primitives/activity-feed.cjs

@@ -4,13 +4,13 @@
 var _chunkPPYHNJMVcjs = require('../chunk-PPYHNJMV.cjs');
 
 
-var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
-require('../chunk-VGTINL5Q.cjs');
 
 
+var _chunkWABCLRBRcjs = require('../chunk-WABCLRBR.cjs');
 
 
-var _chunkWABCLRBRcjs = require('../chunk-WABCLRBR.cjs');
+var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
+require('../chunk-VGTINL5Q.cjs');
 require('../chunk-I6GUOEBO.cjs');
 
 

package/dist/primitives/activity-feed.js

@@ -2,15 +2,15 @@
 import {
   ChipTabs
 } from "../chunk-MP64UGRF.js";
-import {
-  Input
-} from "../chunk-QMA3WVB7.js";
-import "../chunk-H7TETFLB.js";
 import {
   Avatar,
   AvatarFallback,
   AvatarImage
 } from "../chunk-3OWGL4Q2.js";
+import {
+  Input
+} from "../chunk-QMA3WVB7.js";
+import "../chunk-H7TETFLB.js";
 import "../chunk-D4ZL2OEQ.js";
 import {
   EmptyState

package/dist/primitives/anchor.cjs

@@ -1,35 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+var _chunk2BNEE3U6cjs = require('../chunk-2BNEE3U6.cjs');
+require('../chunk-KWLSBTB2.cjs');
 
-// src/primitives/anchor.tsx
-var _reactslot = require('@radix-ui/react-slot');
-var _react = require('react');
-var _jsxruntime = require('react/jsx-runtime');
-var Anchor = _react.forwardRef.call(void 0, function Anchor2({ variant = "unstyled", size = "inherit", display = "inline", underline = false, asChild = false, border = "none", weight = "normal", className, ...props }, ref) {
-  const Component = asChild ? _reactslot.Slot : "a";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Component,
-    {
-      ref,
-      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-        variant === "text" && "font-medium text-primary underline-offset-4 hover:underline",
-        variant === "muted" && "text-muted-foreground underline underline-offset-2 hover:text-foreground",
-        variant === "foreground" && "text-foreground underline-offset-2 hover:underline",
-        size === "xs" && "text-xs",
-        size === "sm" && "text-sm",
-        display === "inline-flex" && "inline-flex items-center gap-1",
-        display === "block" && "block",
-        border === "bottom" && "border-b last:border-b-0",
-        weight === "medium" && "font-medium",
-        underline && "underline",
-        className
-      ),
-      ...props
-    }
-  );
-});
 
-
-exports.Anchor = Anchor;
+exports.Anchor = _chunk2BNEE3U6cjs.Anchor;

package/dist/primitives/anchor.js

@@ -1,35 +1,8 @@
 "use client";
 import {
-  cn
-} from "../chunk-G6SRSWXB.js";
-
-// src/primitives/anchor.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-var Anchor = forwardRef(function Anchor2({ variant = "unstyled", size = "inherit", display = "inline", underline = false, asChild = false, border = "none", weight = "normal", className, ...props }, ref) {
-  const Component = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ref,
-      className: cn(
-        variant === "text" && "font-medium text-primary underline-offset-4 hover:underline",
-        variant === "muted" && "text-muted-foreground underline underline-offset-2 hover:text-foreground",
-        variant === "foreground" && "text-foreground underline-offset-2 hover:underline",
-        size === "xs" && "text-xs",
-        size === "sm" && "text-sm",
-        display === "inline-flex" && "inline-flex items-center gap-1",
-        display === "block" && "block",
-        border === "bottom" && "border-b last:border-b-0",
-        weight === "medium" && "font-medium",
-        underline && "underline",
-        className
-      ),
-      ...props
-    }
-  );
-});
+  Anchor
+} from "../chunk-EXHF3QUY.js";
+import "../chunk-G6SRSWXB.js";
 export {
   Anchor
 };

package/dist/primitives/app-layout.cjs

@@ -0,0 +1,114 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+var _chunkUKYUWSF2cjs = require('../chunk-UKYUWSF2.cjs');
+require('../chunk-NQK5ZWC7.cjs');
+require('../chunk-PPX2VPGI.cjs');
+require('../chunk-U2NES7VR.cjs');
+require('../chunk-VGTINL5Q.cjs');
+require('../chunk-I6GUOEBO.cjs');
+require('../chunk-JDEXZGIY.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+require('../chunk-R35FT53G.cjs');
+
+// src/primitives/app-layout.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function AppLayout({
+  sidebar,
+  breadcrumbs,
+  mobileBrand,
+  children,
+  headerActions,
+  headerContent,
+  className,
+  headerClassName,
+  frostedHeader = false,
+  contentClassName,
+  sidebarStorageKey,
+  sidebarWidth = "default",
+  chromeSurface = "background",
+  contentWidth = "contained",
+  viewport = "document"
+}) {
+  const fixedViewport = viewport === "fixed";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkUKYUWSF2cjs.SidebarProvider,
+    {
+      storageKey: sidebarStorageKey,
+      width: sidebarWidth,
+      surface: chromeSurface,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, fixedViewport && "h-svh min-h-0 overflow-hidden", className),
+      children: [
+        sidebar,
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _chunkUKYUWSF2cjs.SidebarInset,
+          {
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "bg-muted/40",
+              fixedViewport && "h-svh min-h-0 overflow-hidden"
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "header",
+                {
+                  "data-slot": "app-layout-header",
+                  "data-surface": chromeSurface,
+                  "data-frosted-surface": frostedHeader ? chromeSurface : void 0,
+                  className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                    "sticky top-0 z-30 flex min-h-16 shrink-0 items-center gap-2 border-b border-border px-3 md:px-4",
+                    !frostedHeader && "backdrop-blur-sm",
+                    !frostedHeader && (chromeSurface === "card" ? "bg-card supports-[backdrop-filter]:bg-card" : "bg-background/85 supports-[backdrop-filter]:bg-background/75"),
+                    headerClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUKYUWSF2cjs.SidebarTrigger, { visibility: "mobile" }),
+                    (mobileBrand || breadcrumbs || headerActions) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                      "div",
+                      {
+                        "data-slot": "app-layout-header-primary",
+                        className: "flex min-w-0 flex-1 items-center gap-6",
+                        children: [
+                          mobileBrand && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 flex-1 items-center md:hidden", children: mobileBrand }),
+                          breadcrumbs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden min-w-0 flex-1 items-center md:flex", children: breadcrumbs }),
+                          headerActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            "div",
+                            {
+                              "data-slot": "app-layout-header-actions",
+                              className: "flex shrink-0 items-center gap-3",
+                              children: headerActions
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    headerContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "app-layout-header-content", className: "ml-auto flex shrink-0 items-center", children: headerContent })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "div",
+                {
+                  "data-slot": "app-layout-content",
+                  className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                    "mx-auto flex w-full flex-1 flex-col bg-background",
+                    contentWidth === "contained" ? "max-w-6xl border-x border-border" : "max-w-none",
+                    fixedViewport && "min-h-0 overflow-hidden",
+                    contentClassName
+                  ),
+                  children
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+exports.AppLayout = AppLayout;

package/dist/primitives/app-layout.d.cts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SidebarProviderProps } from './app-sidebar.cjs';
+import './button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import './count-badge.cjs';
+import './badge.cjs';
+import './separator.cjs';
+import '@radix-ui/react-separator';
+import './sheet.cjs';
+import '@radix-ui/react-dialog';
+
+interface AppLayoutProps {
+    sidebar: ReactNode;
+    breadcrumbs?: ReactNode;
+    mobileBrand?: ReactNode;
+    children: ReactNode;
+    /** Primary page actions shown beside the current title. Spacing is owned by the shell. */
+    headerActions?: ReactNode;
+    headerContent?: ReactNode;
+    className?: string;
+    headerClassName?: string;
+    /** Translucent, blurred header with a solid fallback. Does not change the sidebar or scrolling. */
+    frostedHeader?: boolean;
+    contentClassName?: string;
+    sidebarStorageKey?: SidebarProviderProps["storageKey"];
+    sidebarWidth?: SidebarProviderProps["width"];
+    /** Surface shared by the application header and responsive navigation chrome. */
+    chromeSurface?: SidebarProviderProps["surface"];
+    /** `full` lets workspace-style products own the full inset rather than a bordered page column. */
+    contentWidth?: "contained" | "full";
+    /**
+     * `fixed` locks the shell to the viewport so a child workspace can own its
+     * scrolling region (for example, a chat transcript with a pinned composer).
+     * Normal pages keep document scrolling by default.
+     */
+    viewport?: "document" | "fixed";
+}
+/**
+ * Responsive application shell for products whose navigation has outgrown a
+ * horizontal header. Navigation is persistent/collapsible on desktop and is
+ * exposed as a sheet from the same trigger on mobile.
+ */
+declare function AppLayout({ sidebar, breadcrumbs, mobileBrand, children, headerActions, headerContent, className, headerClassName, frostedHeader, contentClassName, sidebarStorageKey, sidebarWidth, chromeSurface, contentWidth, viewport, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { AppLayout, type AppLayoutProps };

package/dist/primitives/app-layout.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SidebarProviderProps } from './app-sidebar.js';
+import './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import './count-badge.js';
+import './badge.js';
+import './separator.js';
+import '@radix-ui/react-separator';
+import './sheet.js';
+import '@radix-ui/react-dialog';
+
+interface AppLayoutProps {
+    sidebar: ReactNode;
+    breadcrumbs?: ReactNode;
+    mobileBrand?: ReactNode;
+    children: ReactNode;
+    /** Primary page actions shown beside the current title. Spacing is owned by the shell. */
+    headerActions?: ReactNode;
+    headerContent?: ReactNode;
+    className?: string;
+    headerClassName?: string;
+    /** Translucent, blurred header with a solid fallback. Does not change the sidebar or scrolling. */
+    frostedHeader?: boolean;
+    contentClassName?: string;
+    sidebarStorageKey?: SidebarProviderProps["storageKey"];
+    sidebarWidth?: SidebarProviderProps["width"];
+    /** Surface shared by the application header and responsive navigation chrome. */
+    chromeSurface?: SidebarProviderProps["surface"];
+    /** `full` lets workspace-style products own the full inset rather than a bordered page column. */
+    contentWidth?: "contained" | "full";
+    /**
+     * `fixed` locks the shell to the viewport so a child workspace can own its
+     * scrolling region (for example, a chat transcript with a pinned composer).
+     * Normal pages keep document scrolling by default.
+     */
+    viewport?: "document" | "fixed";
+}
+/**
+ * Responsive application shell for products whose navigation has outgrown a
+ * horizontal header. Navigation is persistent/collapsible on desktop and is
+ * exposed as a sheet from the same trigger on mobile.
+ */
+declare function AppLayout({ sidebar, breadcrumbs, mobileBrand, children, headerActions, headerContent, className, headerClassName, frostedHeader, contentClassName, sidebarStorageKey, sidebarWidth, chromeSurface, contentWidth, viewport, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { AppLayout, type AppLayoutProps };