@epicbagel/saas-kit 1.32.0 → 1.34.0

package/dist/primitives/app-layout.js

@@ -0,0 +1,114 @@
+"use client";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger
+} from "../chunk-5GFMSK27.js";
+import "../chunk-HYTILYE5.js";
+import "../chunk-G76JANB4.js";
+import "../chunk-ZRLUUZHK.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+import "../chunk-PIU5SSUV.js";
+
+// src/primitives/app-layout.tsx
+import { jsx, jsxs } from "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__ */ jsxs(
+    SidebarProvider,
+    {
+      storageKey: sidebarStorageKey,
+      width: sidebarWidth,
+      surface: chromeSurface,
+      className: cn(fixedViewport && "h-svh min-h-0 overflow-hidden", className),
+      children: [
+        sidebar,
+        /* @__PURE__ */ jsxs(
+          SidebarInset,
+          {
+            className: cn(
+              "bg-muted/40",
+              fixedViewport && "h-svh min-h-0 overflow-hidden"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "header",
+                {
+                  "data-slot": "app-layout-header",
+                  "data-surface": chromeSurface,
+                  "data-frosted-surface": frostedHeader ? chromeSurface : void 0,
+                  className: cn(
+                    "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__ */ jsx(SidebarTrigger, { visibility: "mobile" }),
+                    (mobileBrand || breadcrumbs || headerActions) && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-slot": "app-layout-header-primary",
+                        className: "flex min-w-0 flex-1 items-center gap-6",
+                        children: [
+                          mobileBrand && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center md:hidden", children: mobileBrand }),
+                          breadcrumbs && /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 flex-1 items-center md:flex", children: breadcrumbs }),
+                          headerActions && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-slot": "app-layout-header-actions",
+                              className: "flex shrink-0 items-center gap-3",
+                              children: headerActions
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    headerContent && /* @__PURE__ */ jsx("div", { "data-slot": "app-layout-header-content", className: "ml-auto flex shrink-0 items-center", children: headerContent })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "app-layout-content",
+                  className: cn(
+                    "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
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AppLayout
+};

package/dist/primitives/app-sidebar.cjs

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"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');
+require('../chunk-KWLSBTB2.cjs');
+require('../chunk-R35FT53G.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Sidebar = _chunkUKYUWSF2cjs.Sidebar; exports.SidebarBrand = _chunkUKYUWSF2cjs.SidebarBrand; exports.SidebarContent = _chunkUKYUWSF2cjs.SidebarContent; exports.SidebarFooter = _chunkUKYUWSF2cjs.SidebarFooter; exports.SidebarFooterActions = _chunkUKYUWSF2cjs.SidebarFooterActions; exports.SidebarGroup = _chunkUKYUWSF2cjs.SidebarGroup; exports.SidebarGroupContent = _chunkUKYUWSF2cjs.SidebarGroupContent; exports.SidebarGroupLabel = _chunkUKYUWSF2cjs.SidebarGroupLabel; exports.SidebarHeader = _chunkUKYUWSF2cjs.SidebarHeader; exports.SidebarInset = _chunkUKYUWSF2cjs.SidebarInset; exports.SidebarMenu = _chunkUKYUWSF2cjs.SidebarMenu; exports.SidebarMenuBadge = _chunkUKYUWSF2cjs.SidebarMenuBadge; exports.SidebarMenuButton = _chunkUKYUWSF2cjs.SidebarMenuButton; exports.SidebarMenuItem = _chunkUKYUWSF2cjs.SidebarMenuItem; exports.SidebarProvider = _chunkUKYUWSF2cjs.SidebarProvider; exports.SidebarRail = _chunkUKYUWSF2cjs.SidebarRail; exports.SidebarSeparator = _chunkUKYUWSF2cjs.SidebarSeparator; exports.SidebarTrigger = _chunkUKYUWSF2cjs.SidebarTrigger; exports.useSidebar = _chunkUKYUWSF2cjs.useSidebar;

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

@@ -0,0 +1,105 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from './button.cjs';
+import { CountBadgeProps } from './count-badge.cjs';
+import { Separator } from './separator.cjs';
+import { SheetContent } from './sheet.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import './badge.cjs';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+
+declare const SIDEBAR_WIDTHS: {
+    readonly default: "16rem";
+    readonly wide: "20rem";
+};
+type SidebarSurface = "background" | "card";
+type SidebarContextValue = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    surface: SidebarSurface;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends React.ComponentPropsWithoutRef<"div"> {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Optional local-storage key used to remember the desktop collapsed state. */
+    storageKey?: string;
+    /** Desktop sidebar width. `wide` is intended for conversation history and other text-heavy navigation. */
+    width?: keyof typeof SIDEBAR_WIDTHS;
+    /** Semantic surface shared by the desktop rail and mobile navigation sheet. */
+    surface?: SidebarSurface;
+}
+declare const SidebarProvider: React.ForwardRefExoticComponent<SidebarProviderProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarProps extends React.ComponentPropsWithoutRef<"aside"> {
+    side?: "left" | "right";
+    collapsible?: "offcanvas" | "icon" | "none";
+    mobileLabel?: string;
+    /** Lets the host handle Escape in the mobile sheet before it closes. */
+    onEscapeKeyDown?: React.ComponentPropsWithoutRef<typeof SheetContent>["onEscapeKeyDown"];
+}
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+interface SidebarInsetProps extends React.ComponentPropsWithoutRef<"main"> {
+}
+declare const SidebarInset: React.ForwardRefExoticComponent<SidebarInsetProps & React.RefAttributes<HTMLElement>>;
+interface SidebarTriggerProps extends React.ComponentPropsWithoutRef<typeof Button> {
+    visibility?: "always" | "mobile" | "desktop";
+}
+declare const SidebarTrigger: React.ForwardRefExoticComponent<SidebarTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarRailProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare const SidebarRail: React.ForwardRefExoticComponent<SidebarRailProps & React.RefAttributes<HTMLButtonElement>>;
+type SidebarSectionProps = React.ComponentPropsWithoutRef<"div">;
+interface SidebarGroupProps extends SidebarSectionProps {
+    /** Adds the standard boundary used between distinct navigation groups. */
+    separated?: boolean;
+    /** Compact groups keep an explicit 12px inset in every theme. */
+    padding?: "default" | "compact";
+}
+interface SidebarHeaderProps extends SidebarSectionProps {
+    border?: "none" | "bottom";
+    minHeight?: "none" | "header";
+    padding?: "default" | "wide";
+    justify?: "start" | "center";
+}
+declare function SidebarHeader({ border, minHeight, padding, justify, className, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+interface SidebarBrandProps extends SidebarSectionProps {
+    expanded: React.ReactNode;
+    collapsed: React.ReactNode;
+}
+/** Switches between full and compact brand treatments as the desktop rail collapses. */
+declare function SidebarBrand({ expanded, collapsed, className, ...props }: SidebarBrandProps): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+/**
+ * Keeps persistent footer navigation and the desktop collapse control aligned
+ * on one row, then stacks them when the sidebar is reduced to its icon rail.
+ */
+declare function SidebarFooterActions({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarGroup({ separated, padding, className, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupLabel({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentPropsWithoutRef<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentPropsWithoutRef<"ul">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentPropsWithoutRef<"li">): react_jsx_runtime.JSX.Element;
+interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: React.ReactNode;
+}
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarMenuBadgeProps extends Omit<CountBadgeProps, "value"> {
+    children: CountBadgeProps["value"];
+    /** `inline` participates in the menu row layout; `overlay` preserves the trailing notification position. */
+    placement?: "inline" | "overlay";
+}
+declare function SidebarMenuBadge({ children, className, placement, ...props }: SidebarMenuBadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarFooter, SidebarFooterActions, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarInset, type SidebarInsetProps, SidebarMenu, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, type SidebarRailProps, SidebarSeparator, type SidebarSurface, SidebarTrigger, type SidebarTriggerProps, useSidebar };

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

@@ -0,0 +1,105 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from './button.js';
+import { CountBadgeProps } from './count-badge.js';
+import { Separator } from './separator.js';
+import { SheetContent } from './sheet.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import './badge.js';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+
+declare const SIDEBAR_WIDTHS: {
+    readonly default: "16rem";
+    readonly wide: "20rem";
+};
+type SidebarSurface = "background" | "card";
+type SidebarContextValue = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    surface: SidebarSurface;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends React.ComponentPropsWithoutRef<"div"> {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Optional local-storage key used to remember the desktop collapsed state. */
+    storageKey?: string;
+    /** Desktop sidebar width. `wide` is intended for conversation history and other text-heavy navigation. */
+    width?: keyof typeof SIDEBAR_WIDTHS;
+    /** Semantic surface shared by the desktop rail and mobile navigation sheet. */
+    surface?: SidebarSurface;
+}
+declare const SidebarProvider: React.ForwardRefExoticComponent<SidebarProviderProps & React.RefAttributes<HTMLDivElement>>;
+interface SidebarProps extends React.ComponentPropsWithoutRef<"aside"> {
+    side?: "left" | "right";
+    collapsible?: "offcanvas" | "icon" | "none";
+    mobileLabel?: string;
+    /** Lets the host handle Escape in the mobile sheet before it closes. */
+    onEscapeKeyDown?: React.ComponentPropsWithoutRef<typeof SheetContent>["onEscapeKeyDown"];
+}
+declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+interface SidebarInsetProps extends React.ComponentPropsWithoutRef<"main"> {
+}
+declare const SidebarInset: React.ForwardRefExoticComponent<SidebarInsetProps & React.RefAttributes<HTMLElement>>;
+interface SidebarTriggerProps extends React.ComponentPropsWithoutRef<typeof Button> {
+    visibility?: "always" | "mobile" | "desktop";
+}
+declare const SidebarTrigger: React.ForwardRefExoticComponent<SidebarTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarRailProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare const SidebarRail: React.ForwardRefExoticComponent<SidebarRailProps & React.RefAttributes<HTMLButtonElement>>;
+type SidebarSectionProps = React.ComponentPropsWithoutRef<"div">;
+interface SidebarGroupProps extends SidebarSectionProps {
+    /** Adds the standard boundary used between distinct navigation groups. */
+    separated?: boolean;
+    /** Compact groups keep an explicit 12px inset in every theme. */
+    padding?: "default" | "compact";
+}
+interface SidebarHeaderProps extends SidebarSectionProps {
+    border?: "none" | "bottom";
+    minHeight?: "none" | "header";
+    padding?: "default" | "wide";
+    justify?: "start" | "center";
+}
+declare function SidebarHeader({ border, minHeight, padding, justify, className, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+interface SidebarBrandProps extends SidebarSectionProps {
+    expanded: React.ReactNode;
+    collapsed: React.ReactNode;
+}
+/** Switches between full and compact brand treatments as the desktop rail collapses. */
+declare function SidebarBrand({ expanded, collapsed, className, ...props }: SidebarBrandProps): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+/**
+ * Keeps persistent footer navigation and the desktop collapse control aligned
+ * on one row, then stacks them when the sidebar is reduced to its icon rail.
+ */
+declare function SidebarFooterActions({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarGroup({ separated, padding, className, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupLabel({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentPropsWithoutRef<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentPropsWithoutRef<"ul">): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentPropsWithoutRef<"li">): react_jsx_runtime.JSX.Element;
+interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: React.ReactNode;
+}
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SidebarMenuBadgeProps extends Omit<CountBadgeProps, "value"> {
+    children: CountBadgeProps["value"];
+    /** `inline` participates in the menu row layout; `overlay` preserves the trailing notification position. */
+    placement?: "inline" | "overlay";
+}
+declare function SidebarMenuBadge({ children, className, placement, ...props }: SidebarMenuBadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Sidebar, SidebarBrand, type SidebarBrandProps, SidebarContent, SidebarFooter, SidebarFooterActions, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarInset, type SidebarInsetProps, SidebarMenu, SidebarMenuBadge, type SidebarMenuBadgeProps, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, type SidebarRailProps, SidebarSeparator, type SidebarSurface, SidebarTrigger, type SidebarTriggerProps, useSidebar };

package/dist/primitives/app-sidebar.js

@@ -0,0 +1,52 @@
+"use client";
+"use client";
+import {
+  Sidebar,
+  SidebarBrand,
+  SidebarContent,
+  SidebarFooter,
+  SidebarFooterActions,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar
+} from "../chunk-5GFMSK27.js";
+import "../chunk-HYTILYE5.js";
+import "../chunk-G76JANB4.js";
+import "../chunk-ZRLUUZHK.js";
+import "../chunk-H7TETFLB.js";
+import "../chunk-D4ZL2OEQ.js";
+import "../chunk-W326GKML.js";
+import "../chunk-G6SRSWXB.js";
+import "../chunk-PIU5SSUV.js";
+export {
+  Sidebar,
+  SidebarBrand,
+  SidebarContent,
+  SidebarFooter,
+  SidebarFooterActions,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar
+};

package/dist/primitives/back-bar.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/back-bar.tsx
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function BackBar({
+  label,
+  href,
+  renderLink,
+  visibility = "always",
+  className
+}) {
+  const linkClass = "inline-flex items-center gap-1.5 h-11 text-sm text-muted-foreground hover:text-foreground transition-colors";
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { className: "h-4 w-4" }),
+    label
+  ] });
+  const link = renderLink ? renderLink({ href, className: linkClass, children: content }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href, className: linkClass, children: content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "back-bar",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "-mt-6 md:-mt-8 -mx-4 md:-mx-6 lg:-mx-10 mb-5 px-4 md:px-6 lg:px-10 border-b border-border",
+        visibility === "mobile" && "md:hidden",
+        className
+      ),
+      children: link
+    }
+  );
+}
+
+
+exports.BackBar = BackBar;

package/dist/primitives/back-bar.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface BackBarProps {
+    /** The back link destination label, e.g. "Dashboard", "Network". */
+    label: ReactNode;
+    /** href for plain <a>, or pass children via renderLink for Next.js <Link>. */
+    href: string;
+    /**
+     * Render function for the link — use for Next.js <Link> so navigation
+     * stays client-side. Receives href, className, and children.
+     */
+    renderLink?: (props: {
+        href: string;
+        className: string;
+        children: ReactNode;
+    }) => ReactNode;
+    /** Controls whether the contextual back link is always visible or mobile-only. */
+    visibility?: "always" | "mobile";
+    className?: string;
+}
+/**
+ * Sub-navigation bar pinned under the global navbar. Bleeds to the
+ * edges of the parent PageShell (negative margin cancels the shell's
+ * padding) so it reads as a full-width bar, not an inline link.
+ *
+ * Use on any detail/sub-page that needs a back link to its parent list.
+ */
+declare function BackBar({ label, href, renderLink, visibility, className, }: BackBarProps): react_jsx_runtime.JSX.Element;
+
+export { BackBar, type BackBarProps };

package/dist/primitives/back-bar.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface BackBarProps {
+    /** The back link destination label, e.g. "Dashboard", "Network". */
+    label: ReactNode;
+    /** href for plain <a>, or pass children via renderLink for Next.js <Link>. */
+    href: string;
+    /**
+     * Render function for the link — use for Next.js <Link> so navigation
+     * stays client-side. Receives href, className, and children.
+     */
+    renderLink?: (props: {
+        href: string;
+        className: string;
+        children: ReactNode;
+    }) => ReactNode;
+    /** Controls whether the contextual back link is always visible or mobile-only. */
+    visibility?: "always" | "mobile";
+    className?: string;
+}
+/**
+ * Sub-navigation bar pinned under the global navbar. Bleeds to the
+ * edges of the parent PageShell (negative margin cancels the shell's
+ * padding) so it reads as a full-width bar, not an inline link.
+ *
+ * Use on any detail/sub-page that needs a back link to its parent list.
+ */
+declare function BackBar({ label, href, renderLink, visibility, className, }: BackBarProps): react_jsx_runtime.JSX.Element;
+
+export { BackBar, type BackBarProps };

package/dist/primitives/back-bar.js

@@ -0,0 +1,37 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/back-bar.tsx
+import { ChevronLeft } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BackBar({
+  label,
+  href,
+  renderLink,
+  visibility = "always",
+  className
+}) {
+  const linkClass = "inline-flex items-center gap-1.5 h-11 text-sm text-muted-foreground hover:text-foreground transition-colors";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+    label
+  ] });
+  const link = renderLink ? renderLink({ href, className: linkClass, children: content }) : /* @__PURE__ */ jsx("a", { href, className: linkClass, children: content });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "back-bar",
+      className: cn(
+        "-mt-6 md:-mt-8 -mx-4 md:-mx-6 lg:-mx-10 mb-5 px-4 md:px-6 lg:px-10 border-b border-border",
+        visibility === "mobile" && "md:hidden",
+        className
+      ),
+      children: link
+    }
+  );
+}
+export {
+  BackBar
+};