@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/page-header-actions.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface PageHeaderAction {
+    /** Stable identity used when rendering the action in both layouts. */
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    /** Optional nested actions. Desktop renders a menu button; mobile nests it inside Actions. */
+    items?: PageHeaderAction[];
+    /** Optional supporting copy shown when the action appears in a menu. */
+    description?: ReactNode;
+    disabled?: boolean;
+    /** Button treatment used in the expanded desktop layout. */
+    variant?: ButtonProps["variant"];
+    /**
+     * Visual hierarchy in the expanded desktop layout. Primary actions are
+     * always placed at the far right. When omitted, hierarchy is inferred from
+     * the button variant.
+     */
+    priority?: "primary" | "secondary" | "tertiary";
+    /** Semantic treatment used in the collapsed mobile menu. */
+    tone?: "default" | "muted" | "destructive";
+    /** Visually separates destructive or lower-priority actions in the menu. */
+    separatorBefore?: boolean;
+    title?: string;
+}
+interface PageHeaderActionsProps {
+    actions: PageHeaderAction[];
+    /** Visible label for the collapsed mobile trigger. */
+    mobileLabel?: ReactNode;
+    /** Accessible label when `mobileLabel` is not plain text. */
+    mobileAriaLabel?: string;
+    className?: string;
+}
+/**
+ * Responsive action cluster designed for `PageHeader`.
+ *
+ * Desktop keeps every action visible for fast scanning. Mobile collapses the
+ * same action definitions into one menu so page titles retain useful space.
+ * Status and other non-interactive metadata should remain beside the title.
+ */
+declare function PageHeaderActions({ actions, mobileLabel, mobileAriaLabel, className, }: PageHeaderActionsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type PageHeaderAction, PageHeaderActions, type PageHeaderActionsProps };

package/dist/primitives/page-header-actions.js

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import {
+  PageHeaderActions
+} from "../chunk-QNZYQLNP.js";
+import "../chunk-V4LE2HWP.js";
+import "../chunk-HQRWRRZJ.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  PageHeaderActions
+};

package/dist/primitives/page-header.cjs

@@ -0,0 +1,72 @@
+"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/page-header.d.cts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PageHeaderProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /**
+     * Action area on the right — typically a primary CTA ("New event")
+     * or a small cluster of secondary controls.
+     */
+    children?: ReactNode;
+    /**
+     * Visual scale. `display` gives index and overview pages an editorial
+     * anchor without changing the compact default used by existing apps.
+     */
+    size?: "default" | "display";
+    className?: string;
+    actionsLayout?: "inline" | "responsive";
+    spacing?: "default" | "compact" | "none";
+    /** Hide the page-level header when `AppLayout` already supplies mobile context. */
+    responsiveVisibility?: "always" | "desktop";
+}
+/**
+ * Page-level heading used at the top of every dashboard route.
+ *
+ * Typography (page-level, deliberately a step heavier than section
+ * headings):
+ *   - title: text-2xl on mobile, text-3xl on desktop, semibold
+ *   - eyebrow: small mono uppercase, used for breadcrumb-style context
+ *     ("client · session 2", "overview")
+ *   - description: text-sm muted, capped at 72ch for readability
+ *
+ * Layout: the compact default remains a single row. The opt-in display
+ * scale stacks actions on narrow screens so the larger heading keeps its
+ * intended measure, then returns them to the right on larger viewports.
+ */
+declare function PageHeader({ eyebrow, title, description, children, size, actionsLayout, spacing, responsiveVisibility, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { PageHeader };

package/dist/primitives/page-header.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PageHeaderProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /**
+     * Action area on the right — typically a primary CTA ("New event")
+     * or a small cluster of secondary controls.
+     */
+    children?: ReactNode;
+    /**
+     * Visual scale. `display` gives index and overview pages an editorial
+     * anchor without changing the compact default used by existing apps.
+     */
+    size?: "default" | "display";
+    className?: string;
+    actionsLayout?: "inline" | "responsive";
+    spacing?: "default" | "compact" | "none";
+    /** Hide the page-level header when `AppLayout` already supplies mobile context. */
+    responsiveVisibility?: "always" | "desktop";
+}
+/**
+ * Page-level heading used at the top of every dashboard route.
+ *
+ * Typography (page-level, deliberately a step heavier than section
+ * headings):
+ *   - title: text-2xl on mobile, text-3xl on desktop, semibold
+ *   - eyebrow: small mono uppercase, used for breadcrumb-style context
+ *     ("client · session 2", "overview")
+ *   - description: text-sm muted, capped at 72ch for readability
+ *
+ * Layout: the compact default remains a single row. The opt-in display
+ * scale stacks actions on narrow screens so the larger heading keeps its
+ * intended measure, then returns them to the right on larger viewports.
+ */
+declare function PageHeader({ eyebrow, title, description, children, size, actionsLayout, spacing, responsiveVisibility, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { PageHeader };

package/dist/primitives/page-header.js

@@ -0,0 +1,72 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/page-header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageHeader({
+  eyebrow,
+  title,
+  description,
+  children,
+  size = "default",
+  actionsLayout = "inline",
+  spacing = "default",
+  responsiveVisibility = "always",
+  className
+}) {
+  const display = size === "display";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "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__ */ jsxs("div", { className: cn("min-w-0 flex-1", display ? "space-y-2" : "space-y-1.5"), children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "font-mono text-xs uppercase tracking-widest text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "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__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-[72ch] text-muted-foreground",
+                size === "display" ? "text-base md:text-lg" : "text-sm"
+              ),
+              children: description
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "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
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PageHeader
+};

package/dist/primitives/page-shell.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/page-shell.tsx
+var _react = require('react');
+var _jsxruntime = require('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 = _react.forwardRef.call(void 0, 
+  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__ */ _jsxruntime.jsx.call(void 0, 
+      Tag,
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "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
+      }
+    );
+  }
+);
+
+
+exports.PageShell = PageShell;

package/dist/primitives/page-shell.d.cts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * PageShell — outer wrapper for every dashboard route.
+ *
+ * Controls two independent concerns:
+ *   - **width**: how wide the content column stretches.
+ *     `"full"` (default) fills whatever parent constrains it —
+ *     when nested inside `DashboardShell` that means the shell's
+ *     column width, so you don't double-constrain.
+ *   - **padding**: horizontal inset. Set once per app for consistency
+ *     across all pages — every page in an app should use the same
+ *     level. `"base"` (default) is compact (px-4 → px-6 at md).
+ *     `"relaxed"` adds more breathing room (px-6 → px-10 at md).
+ *
+ * Vertical rhythm (`py-6 md:py-8`) and section gap (`space-y-6`)
+ * are always included.
+ */
+type PageShellWidth = "narrow" | "wide" | "full";
+type PageShellPadding = "none" | "base" | "relaxed" | "spacious";
+interface PageShellProps extends HTMLAttributes<HTMLElement> {
+    width?: PageShellWidth;
+    /**
+     * Horizontal padding level. Set per-app for consistency — every
+     * page should use the same value. Defaults to `"base"`.
+     */
+    padding?: PageShellPadding;
+    /** Override the rendered tag (default <main>). */
+    as?: "main" | "div" | "section" | "article";
+    spacing?: "default" | "compact";
+    bottomInset?: "default" | "action";
+    minHeight?: "none" | "content";
+    align?: "start" | "center";
+    printMode?: "default" | "compact";
+    /**
+     * Let a mobile-first workspace own the viewport below `AppLayout`'s
+     * header. Desktop keeps the normal page rhythm and configured padding.
+     */
+    mobileTreatment?: "page" | "application";
+}
+declare const PageShell: React.ForwardRefExoticComponent<PageShellProps & React.RefAttributes<HTMLElement>>;
+
+export { PageShell };

package/dist/primitives/page-shell.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * PageShell — outer wrapper for every dashboard route.
+ *
+ * Controls two independent concerns:
+ *   - **width**: how wide the content column stretches.
+ *     `"full"` (default) fills whatever parent constrains it —
+ *     when nested inside `DashboardShell` that means the shell's
+ *     column width, so you don't double-constrain.
+ *   - **padding**: horizontal inset. Set once per app for consistency
+ *     across all pages — every page in an app should use the same
+ *     level. `"base"` (default) is compact (px-4 → px-6 at md).
+ *     `"relaxed"` adds more breathing room (px-6 → px-10 at md).
+ *
+ * Vertical rhythm (`py-6 md:py-8`) and section gap (`space-y-6`)
+ * are always included.
+ */
+type PageShellWidth = "narrow" | "wide" | "full";
+type PageShellPadding = "none" | "base" | "relaxed" | "spacious";
+interface PageShellProps extends HTMLAttributes<HTMLElement> {
+    width?: PageShellWidth;
+    /**
+     * Horizontal padding level. Set per-app for consistency — every
+     * page should use the same value. Defaults to `"base"`.
+     */
+    padding?: PageShellPadding;
+    /** Override the rendered tag (default <main>). */
+    as?: "main" | "div" | "section" | "article";
+    spacing?: "default" | "compact";
+    bottomInset?: "default" | "action";
+    minHeight?: "none" | "content";
+    align?: "start" | "center";
+    printMode?: "default" | "compact";
+    /**
+     * Let a mobile-first workspace own the viewport below `AppLayout`'s
+     * header. Desktop keeps the normal page rhythm and configured padding.
+     */
+    mobileTreatment?: "page" | "application";
+}
+declare const PageShell: React.ForwardRefExoticComponent<PageShellProps & React.RefAttributes<HTMLElement>>;
+
+export { PageShell };

package/dist/primitives/page-shell.js

@@ -0,0 +1,46 @@
+"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/primitives/page-tabs.cjs

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+
+
+var _chunkDFB4ILN6cjs = require('../chunk-DFB4ILN6.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/page-tabs.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function PageTabs({
+  value,
+  onValueChange,
+  items,
+  ariaLabel,
+  layout = "equal",
+  className
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkDFB4ILN6cjs.Tabs,
+    {
+      value,
+      onValueChange: (next) => onValueChange(next),
+      className,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkDFB4ILN6cjs.TabsList,
+        {
+          "aria-label": ariaLabel,
+          scrollable: layout === "scroll",
+          width: "full",
+          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+            "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__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunkDFB4ILN6cjs.TabsTrigger,
+            {
+              value: item.value,
+              className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                layout === "equal" && "min-h-11 gap-2 text-sm sm:text-base",
+                layout === "scroll" && "shrink-0 gap-2"
+              ),
+              children: [
+                item.icon,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: item.label }),
+                item.badge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0", children: item.badge })
+              ]
+            },
+            item.value
+          ))
+        }
+      )
+    }
+  );
+}
+
+
+exports.PageTabs = PageTabs;

package/dist/primitives/page-tabs.d.cts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PageTabItem<TValue extends string = string> {
+    value: TValue;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+}
+interface PageTabsProps<TValue extends string = string> {
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    items: PageTabItem<TValue>[];
+    ariaLabel: string;
+    /** Equal-width sibling views by default; `scroll` keeps larger sets readable. */
+    layout?: "equal" | "scroll";
+    className?: string;
+}
+/**
+ * Full-width secondary navigation for switching sibling page views.
+ *
+ * Unlike compact `Tabs`, this deliberately owns the whole content width and
+ * gives each destination an equal, touch-friendly target. Route handling is
+ * consumer-owned through `onValueChange`, keeping the primitive router-agnostic.
+ */
+declare function PageTabs<TValue extends string = string>({ value, onValueChange, items, ariaLabel, layout, className, }: PageTabsProps<TValue>): react_jsx_runtime.JSX.Element | null;
+
+export { type PageTabItem, PageTabs, type PageTabsProps };

package/dist/primitives/page-tabs.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PageTabItem<TValue extends string = string> {
+    value: TValue;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+}
+interface PageTabsProps<TValue extends string = string> {
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    items: PageTabItem<TValue>[];
+    ariaLabel: string;
+    /** Equal-width sibling views by default; `scroll` keeps larger sets readable. */
+    layout?: "equal" | "scroll";
+    className?: string;
+}
+/**
+ * Full-width secondary navigation for switching sibling page views.
+ *
+ * Unlike compact `Tabs`, this deliberately owns the whole content width and
+ * gives each destination an equal, touch-friendly target. Route handling is
+ * consumer-owned through `onValueChange`, keeping the primitive router-agnostic.
+ */
+declare function PageTabs<TValue extends string = string>({ value, onValueChange, items, ariaLabel, layout, className, }: PageTabsProps<TValue>): react_jsx_runtime.JSX.Element | null;
+
+export { type PageTabItem, PageTabs, type PageTabsProps };

package/dist/primitives/page-tabs.js

@@ -0,0 +1,63 @@
+"use client";
+"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
+};