@epicbagel/saas-kit 1.32.0 → 1.34.0

package/README.md

@@ -514,6 +514,73 @@ export function Appearance() {
   `paletteDescription`. Each palette's card is named by its `label` and
   described by its `description`.
 
+## Branded page (1.34.0)
+
+`primitives/branded-page` is the whole of a public page one company shows to
+another company's people: a shared profile, a list sent for review, an
+invitation, a client's portal. It puts the kit's page chrome together
+(`MarketingHeader`, `BrandMark`, `AccentTheme`, `PageShell`,
+`FixedActionBar` and `EmptyState`), so a host passes a brand and its content.
+
+```tsx
+import { BrandedPage } from "@epicbagel/saas-kit/primitives/branded-page";
+
+<BrandedPage
+  brand={{ name: "Example Agency", logoUrl: brand.logoUrl, href: brand.website }}
+  accent={{ light: "#0f766e", dark: "#5eead4" }}
+  headerTrailing={<ThemeSwitch />} // your own control
+  credit="Shared by Example Agency"
+  actionBar={{
+    title: "Three people ready",
+    description: "Book a call to meet them.",
+    actions: <Button size="lg">Book a call</Button>,
+  }}
+  loading={loading}
+  unavailable={gone ? { reason: "expired" } : false}
+>
+  <Profile />
+</BrandedPage>
+```
+
+- **Brand.** The logo (`logoUrl`), else the `name` as text, and a link when
+  it has an `href`; nothing for a brand with neither. Or pass an element of
+  your own: your wordmark, or your router's link around one. The name is
+  text, not a heading, so the page's headings start in its content. A logo's
+  text alternative is `logoAlt`, else the brand's `name`, else "Logo".
+- **Accent and palette.** `accent` is the brand's light and dark colours as
+  six-digit hex, which `AccentTheme` applies inside the page only. `palette`
+  pins the page to one palette (its `data-theme` value) and paints the
+  canvas in it, so the page looks the same to every visitor whatever palette
+  their own browser has stored. Left out, the page follows the document.
+- **Header.** `headerTrailing` holds your own controls, such as a theme
+  switch or Sign in. The header is the page's banner; with neither a brand
+  nor controls there is none.
+- **Content.** `children`, in the page's one `main`: `width` (`narrow` by
+  default, `wide` or `full`), `padding` (`base` by default, which lines up
+  with the header) and `surface` (`muted` by default, or `default`).
+- **Credit.** `credit` is a closing line under the content. It prints;
+  `creditPrintVisibility="hidden"` keeps it off paper.
+- **Action bar.** `actionBar` is a `FixedActionBar` as wide as the content:
+  `title`, `description`, `actions` and `actionsWidth`. The content keeps
+  clear of it.
+- **States.** `loading` and `unavailable` stand in for the content, the
+  credit and the action bar, under the same header and both starting at the
+  same height: pass `true`, or the state's props. `loading` wins while both
+  are set. `unavailable` takes a `reason` (`not-found` by default, worded
+  for a link whose fate you can't tell; `expired`, `archived` or `revoked`),
+  each with its own icon and words, and your `icon`, `title`, `description`
+  and `action` in their place. Its title is a heading, and it is announced
+  when it appears (`role="alert"`). Loading is a polite `role="status"`
+  under a `label` ("Loading…").
+- **Alone.** `BrandedPageUnavailable` and `BrandedPageLoading` are the same
+  two states as blocks, for a frame you draw yourself. With no brand to
+  show, `<BrandedPage unavailable />` is the whole page, without a header.
+- **Paper.** Printed, the canvas is plain and the spacing compact, and the
+  header's controls and the action bar are left off.
+- **Presentation only.** No router, fetch or storage: the host decides which
+  state shows, and every word can be replaced. The action bar's accessible
+  name ("Page action") is `FixedActionBar`'s own.
+
 ## License
 
 MIT. Some components and styles are adapted from shadcn/ui, and the file

package/THIRD_PARTY_NOTICES.md

@@ -15,11 +15,12 @@ output under `dist/` includes code derived from them. The more recent lifts
 name their registry item, style and sync date in a header comment.
 
 - `primitives/`: alert, alert-dialog, aspect-ratio, attachment, avatar, badge,
-  bubble, button, calendar, card, checkbox, collapsible, dialog, drawer,
-  dropdown-menu, field, input, input-group, item, label, marker, message,
-  message-scroller, popover, progress, radio-group, scroll-area, select,
-  separator, sheet, skeleton, spinner, switch, tabs, textarea, toggle,
-  toggle-group, tooltip, trace
+  bubble, button, calendar, card, checkbox, collapsible, command, dialog,
+  drawer, dropdown-menu, field, input, input-group, item, label, marker,
+  message, message-scroller, pagination, popover, progress, radio-group,
+  scroll-area, select, separator, sheet, skeleton, spinner, switch, tabs,
+  textarea, toggle, toggle-group, tooltip, trace
+- `primitives/app-sidebar`, adapted from the shadcn/ui "Sidebar" component
 - `primitives/suggestion`, adapted from the shadcn/ui AI Elements "Suggestion"
   pattern (https://ui.shadcn.com/docs/ai-elements)
 - `primitives/chat`, composed after the shadcn/ui AI Elements "Chat",

package/dist/chunk-2BNEE3U6.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = 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;

package/dist/chunk-2DCJ2SFU.js

@@ -0,0 +1,20 @@
+"use client";
+
+// src/primitives/settings-list.tsx
+import { Children, createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var SettingsListContext = createContext({ single: false });
+function SettingsList({ children, className }) {
+  const items = Children.toArray(children).filter(Boolean);
+  if (items.length === 0) return null;
+  const single = items.length === 1;
+  if (single) {
+    return /* @__PURE__ */ jsx(SettingsListContext.Provider, { value: { single: true }, children: /* @__PURE__ */ jsx("div", { className, children: items[0] }) });
+  }
+  return /* @__PURE__ */ jsx(SettingsListContext.Provider, { value: { single: false }, children: /* @__PURE__ */ jsx("div", { className, children: items.map((child, i) => /* @__PURE__ */ jsx("div", { className: "border-t border-border py-8", children: child }, i)) }) });
+}
+
+export {
+  SettingsListContext,
+  SettingsList
+};

package/dist/chunk-5GFMSK27.js

@@ -0,0 +1,489 @@
+"use client";
+import {
+  Separator
+} from "./chunk-HYTILYE5.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle
+} from "./chunk-G76JANB4.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
+import {
+  CountBadge
+} from "./chunk-H7TETFLB.js";
+import {
+  Button
+} from "./chunk-W326GKML.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+import {
+  useIsMobile
+} from "./chunk-PIU5SSUV.js";
+
+// src/primitives/app-sidebar.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { PanelLeft } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SIDEBAR_WIDTHS = {
+  default: "16rem",
+  wide: "20rem"
+};
+var SIDEBAR_WIDTH_ICON = "4.5rem";
+var SidebarContext = React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+var SidebarProvider = React.forwardRef(function SidebarProvider2({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  storageKey,
+  width = "default",
+  surface = "background",
+  className,
+  style,
+  children,
+  ...props
+}, ref) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = openProp ?? internalOpen;
+  React.useEffect(() => {
+    if (!storageKey || openProp !== void 0) return;
+    try {
+      const saved = window.localStorage.getItem(storageKey);
+      if (saved === "true" || saved === "false") {
+        setInternalOpen(saved === "true");
+      }
+    } catch {
+    }
+  }, [openProp, storageKey]);
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (openProp === void 0) setInternalOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+      if (storageKey) {
+        try {
+          window.localStorage.setItem(storageKey, String(nextOpen));
+        } catch {
+        }
+      }
+    },
+    [onOpenChange, openProp, storageKey]
+  );
+  const toggleSidebar = React.useCallback(() => {
+    if (isMobile) setOpenMobile((current) => !current);
+    else setOpen(!open);
+  }, [isMobile, open, setOpen]);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() === "b" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const value = React.useMemo(
+    () => ({
+      state: open ? "expanded" : "collapsed",
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      surface,
+      toggleSidebar
+    }),
+    [isMobile, open, openMobile, setOpen, surface, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTHS[width],
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn(
+        "group/sidebar-wrapper flex min-h-svh w-full bg-background",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+});
+var Sidebar = React.forwardRef(
+  function Sidebar2({
+    side = "left",
+    collapsible = "icon",
+    mobileLabel = "Navigation",
+    onEscapeKeyDown,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const { isMobile, open, openMobile, setOpenMobile, surface } = useSidebar();
+    if (isMobile) {
+      return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          side,
+          width: "full",
+          padding: "none",
+          onEscapeKeyDown,
+          className: cn(
+            "gap-0 text-sidebar-foreground",
+            surface === "card" ? "bg-card" : "bg-background"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: mobileLabel }),
+            /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Primary application navigation." }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "sidebar",
+                "data-mobile": "true",
+                "data-surface": surface,
+                className: cn(
+                  "flex h-full min-h-0 w-full flex-col",
+                  surface === "card" ? "bg-card" : "bg-background",
+                  className
+                ),
+                children
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    const visible = collapsible !== "offcanvas" || open;
+    const width = collapsible === "none" ? "var(--sidebar-width)" : open ? "var(--sidebar-width)" : collapsible === "icon" ? "var(--sidebar-width-icon)" : "0px";
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        "data-slot": "sidebar",
+        "data-state": open ? "expanded" : "collapsed",
+        "data-collapsible": open ? "" : collapsible,
+        "data-side": side,
+        "data-surface": surface,
+        "aria-hidden": !visible,
+        style: { width },
+        className: cn(
+          "group/sidebar sticky top-0 hidden h-svh shrink-0 flex-col border-sidebar-border text-sidebar-foreground transition-[width] duration-200 ease-linear md:flex",
+          surface === "card" ? "bg-card" : "bg-background",
+          side === "left" ? "border-r" : "border-l",
+          !visible && "overflow-hidden border-transparent",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 w-full flex-col overflow-hidden", children })
+      }
+    );
+  }
+);
+var SidebarInset = React.forwardRef(
+  function SidebarInset2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "main",
+      {
+        ref,
+        "data-slot": "sidebar-inset",
+        className: cn(
+          "relative flex min-h-svh min-w-0 flex-1 flex-col bg-background",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var SidebarTrigger = React.forwardRef(function SidebarTrigger2({ className, onClick, visibility = "always", ...props }, ref) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      className: cn(
+        "shrink-0",
+        visibility === "mobile" && "md:hidden",
+        visibility === "desktop" && "hidden md:inline-flex",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggleSidebar();
+      },
+      "aria-label": "Toggle navigation",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PanelLeft, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle navigation" })
+      ]
+    }
+  );
+});
+var SidebarRail = React.forwardRef(
+  function SidebarRail2({ className, ...props }, ref) {
+    const { toggleSidebar } = useSidebar();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Toggle navigation",
+        title: "Toggle navigation",
+        tabIndex: -1,
+        onClick: toggleSidebar,
+        className: cn(
+          "absolute inset-y-0 right-0 z-20 hidden w-3 translate-x-1/2 transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-px hover:after:bg-sidebar-border md:block",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+function SidebarHeader({
+  border = "none",
+  minHeight = "none",
+  padding = "default",
+  justify = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      className: cn(
+        "flex shrink-0 flex-col gap-2",
+        padding === "default" ? minHeight === "header" ? "px-3 py-2" : "p-3" : minHeight === "header" ? "px-4 py-2" : "px-4 py-3",
+        border === "bottom" && "border-b border-sidebar-border",
+        minHeight === "header" && "h-16 min-h-16",
+        justify === "center" && "justify-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarBrand({
+  expanded,
+  collapsed,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sidebar-brand",
+      className: cn("min-w-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "group-data-[state=collapsed]/sidebar:hidden", children: expanded }),
+        /* @__PURE__ */ jsx("div", { className: "hidden justify-center group-data-[state=collapsed]/sidebar:flex", children: collapsed })
+      ]
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      className: cn("flex shrink-0 flex-col gap-2 p-3", className),
+      ...props
+    }
+  );
+}
+function SidebarFooterActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-footer-actions",
+      className: cn(
+        "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1 group-data-[state=collapsed]/sidebar:grid-cols-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({
+  separated = false,
+  padding = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-separated": separated ? "true" : void 0,
+      "data-padding": padding,
+      className: cn(
+        "relative flex w-full min-w-0 flex-col",
+        padding === "compact" ? "p-[12px]" : "p-3",
+        separated && "border-t border-sidebar-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-label",
+      className: cn(
+        "mb-1 flex h-8 items-center px-2 text-xs font-medium text-sidebar-foreground/60 transition-[height,margin,opacity] group-data-[state=collapsed]/sidebar:mb-0 group-data-[state=collapsed]/sidebar:h-0 group-data-[state=collapsed]/sidebar:overflow-hidden group-data-[state=collapsed]/sidebar:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "sidebar-separator",
+      className: cn("mx-3 w-auto bg-sidebar-border", className),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var SidebarMenuButton = React.forwardRef(function SidebarMenuButton2({ asChild = false, isActive = false, tooltip, className, onClick, ...props }, ref) {
+  const { isMobile, open, setOpenMobile } = useSidebar();
+  const Comp = asChild ? Slot : "button";
+  const control = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "sidebar-menu-button",
+      "data-active": isActive,
+      className: cn(
+        "peer/menu-button flex min-h-11 w-full min-w-0 items-center gap-3 overflow-hidden rounded-md px-3 py-2 text-left text-sm font-medium outline-hidden transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground [&>svg]:size-5 [&>svg]:shrink-0 group-data-[state=collapsed]/sidebar:justify-center group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:[&>span]:hidden",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented && isMobile) setOpenMobile(false);
+      },
+      ...props
+    }
+  );
+  if (!tooltip || open || isMobile) return control;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: control }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", children: tooltip })
+  ] });
+});
+function SidebarMenuBadge({
+  children,
+  className,
+  placement = "overlay",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CountBadge,
+    {
+      "data-slot": "sidebar-menu-badge",
+      value: children,
+      className: cn(
+        "pointer-events-none group-data-[state=collapsed]/sidebar:hidden",
+        placement === "overlay" && "absolute right-2 top-1/2 -translate-y-1/2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export {
+  useSidebar,
+  SidebarProvider,
+  Sidebar,
+  SidebarInset,
+  SidebarTrigger,
+  SidebarRail,
+  SidebarHeader,
+  SidebarBrand,
+  SidebarFooter,
+  SidebarFooterActions,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarSeparator,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuBadge
+};

package/dist/chunk-5PHOKJCT.cjs

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/marketing-header.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function MarketingHeader({
+  brand,
+  links = [],
+  trailing,
+  renderLink,
+  variant = "default",
+  className
+}) {
+  const link = (l) => {
+    const cls = variant === "mono" ? "font-mono text-xs uppercase tracking-[0.18em] text-muted-foreground transition-colors hover:text-foreground" : "text-sm text-muted-foreground transition-colors hover:text-foreground";
+    if (renderLink)
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: renderLink({ href: l.href, children: l.label, className: cls }) }, l.href);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: l.href, className: cls, children: l.label }, l.href);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "header",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-sm supports-[backdrop-filter]:bg-background/70",
+        className
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto flex w-full max-w-5xl items-center justify-between px-4 py-4 md:px-6", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center", children: brand }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { className: "flex items-center gap-3 md:gap-5", children: [
+          links.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden items-center gap-5 sm:flex", children: links.map(link) }),
+          trailing && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-2 md:gap-3", children: trailing })
+        ] })
+      ] })
+    }
+  );
+}
+
+
+
+exports.MarketingHeader = MarketingHeader;