@fragment-build/ui 3.3.0 → 4.0.1

package/fragments/form/form-section.css

@@ -1,41 +1,53 @@
 @layer components {
   .fragment-form-section__main {
-    @apply flex flex-col;
+    @apply flex flex-col gap-4;
   }
 
   .fragment-form-section__info {
-    @apply flex-1 pb-4;
+    @apply min-w-0;
   }
 
-  .fragment-form-section__content {
-    @apply flex flex-col gap-4 flex-1 min-w-0;
+  .fragment-form-section__title-row {
+    @apply flex items-center gap-2;
+  }
+
+  .fragment-form-section__title {
+    @apply text-sm font-semibold;
   }
 
   .fragment-form-section__description {
-    @apply text-sm text-muted;
+    @apply mt-1 text-sm text-muted;
+  }
+
+  .fragment-form-section__content {
+    @apply flex flex-col gap-5 flex-1 min-w-0;
   }
 
+  /*
+   * Label column and control column. The label column is narrow and fixed so that, down a long
+   * settings page, every control starts on the same vertical line.
+   */
   .fragment-form-section--horizontal {
     .fragment-form-section__main {
-      @apply sm:flex-row;
+      @apply md:flex-row md:gap-10;
     }
     .fragment-form-section__info {
-      @apply sm:max-w-sm sm:pr-4 sm:pb-0;
+      @apply md:w-72 md:shrink-0;
     }
     .fragment-form-section__content {
-      @apply sm:items-end sm:justify-center sm:max-w-sm;
+      @apply md:max-w-xl;
     }
   }
 
   .fragment-form-section--vertical {
     .fragment-form-section__content {
-      @apply sm:max-w-3xl;
+      @apply md:max-w-3xl;
     }
   }
 
   .fragment-form-section--full-width {
     .fragment-form-section__content {
-      @apply sm:max-w-full;
+      @apply md:max-w-full;
     }
   }
 }

package/fragments/form/form.css

@@ -1,5 +1,5 @@
 @layer components {
   .fragment-form__separator {
-    @apply my-6;
+    @apply my-7;
   }
 }

package/fragments/page/PageHeader.d.ts

@@ -1,10 +1,15 @@
 /**
- * Primary UI component for Form Sections
+ * Primary UI component for Page Headers
  */
 import React from 'react';
 export interface PageHeaderProps {
+    /** Actions, aligned to the end of the title row. */
     children?: React.ReactNode;
-    title: string;
+    title: React.ReactNode;
     description?: React.ReactNode;
+    /** A small line above the title: a breadcrumb, a back link or a section name. */
+    eyebrow?: React.ReactNode;
+    /** Content below the title row that still belongs to the header, such as tabs or filters. */
+    footer?: React.ReactNode;
 }
 export declare const PageHeader: React.FC<PageHeaderProps>;

package/fragments/page/PageHeader.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { pageHeader } from './PageHeader.styles';
-export const PageHeader = ({ children, title, description, ...props }) => {
-    const v = pageHeader(props);
-    return (_jsxs("header", { className: v.base(), children: [_jsxs("div", { children: [_jsx("h1", { children: title }), description && _jsx("p", { className: v.description(), children: description })] }), _jsx("div", { className: v.actions(), children: children })] }));
+export const PageHeader = ({ children, title, description, eyebrow, footer }) => {
+    const v = pageHeader({ hasFooter: !!footer });
+    return (_jsxs("header", { className: v.base(), children: [_jsxs("div", { className: v.row(), children: [_jsxs("div", { className: v.heading(), children: [eyebrow && _jsx("div", { className: v.eyebrow(), children: eyebrow }), _jsx("h1", { className: v.title(), children: title }), description && _jsx("p", { className: v.description(), children: description })] }), children && _jsx("div", { className: v.actions(), children: children })] }), footer && _jsx("div", { className: v.footer(), children: footer })] }));
 };
 //# sourceMappingURL=PageHeader.js.map

package/fragments/page/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/fragments/page/PageHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AASjD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClG,MAAM,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO,CACL,kBAAQ,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACzB,0BACE,uBAAK,KAAK,GAAM,EACf,WAAW,IAAI,YAAG,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAK,IAC5D,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YAAG,QAAQ,GAAO,IACtC,CACV,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/fragments/page/PageHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAOb,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;IACzG,MAAM,CAAC,GAAG,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;IAE9C,OAAO,CACL,kBAAQ,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,aACzB,eAAK,SAAS,EAAE,CAAC,CAAC,GAAG,EAAE,aACrB,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,aACxB,OAAO,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YAAG,OAAO,GAAO,EACxD,aAAI,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,YAAG,KAAK,GAAM,EACrC,WAAW,IAAI,YAAG,SAAS,EAAE,CAAC,CAAC,WAAW,EAAE,YAAG,WAAW,GAAK,IAC5D,EACL,QAAQ,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YAAG,QAAQ,GAAO,IACtD,EACL,MAAM,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,YAAG,MAAM,GAAO,IAC9C,CACV,CAAC;AACJ,CAAC,CAAC"}

package/fragments/page/PageHeader.styles.d.ts

@@ -1,37 +1,46 @@
 export declare const pageHeader: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+    hasFooter: {
+        true: {
+            base: string;
         };
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
+}, {
     base: string;
+    row: string;
+    heading: string;
+    eyebrow: string;
+    title: string;
     description: string;
     actions: string;
+    footer: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
-            actions?: import("tailwind-variants").ClassValue;
+    hasFooter: {
+        true: {
+            base: string;
         };
     };
-} | {}, {
+}, {
     base: string;
+    row: string;
+    heading: string;
+    eyebrow: string;
+    title: string;
     description: string;
     actions: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    hasFooter: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
+    row: string;
+    heading: string;
+    eyebrow: string;
+    title: string;
     description: string;
     actions: string;
+    footer: string;
 }>>;

package/fragments/page/PageHeader.styles.js

@@ -2,8 +2,18 @@ import { tv } from 'tailwind-variants';
 export const pageHeader = tv({
     slots: {
         base: 'fragment-page-header',
+        row: 'fragment-page-header__row',
+        heading: 'fragment-page-header__heading',
+        eyebrow: 'fragment-page-header__eyebrow',
+        title: 'fragment-page-header__title',
         description: 'fragment-page-header__description',
         actions: 'fragment-page-header__actions',
+        footer: 'fragment-page-header__footer',
+    },
+    variants: {
+        hasFooter: {
+            true: { base: 'fragment-page-header--with-footer' },
+        },
     },
 });
 //# sourceMappingURL=PageHeader.styles.js.map

package/fragments/page/PageHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.styles.js","sourceRoot":"","sources":["../../src/fragments/page/PageHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;IAC3B,KAAK,EAAE;QACL,IAAI,EAAE,sBAAsB;QAC5B,WAAW,EAAE,mCAAmC;QAChD,OAAO,EAAE,+BAA+B;KACzC;CACF,CAAC,CAAC"}
+{"version":3,"file":"PageHeader.styles.js","sourceRoot":"","sources":["../../src/fragments/page/PageHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;IAC3B,KAAK,EAAE;QACL,IAAI,EAAE,sBAAsB;QAC5B,GAAG,EAAE,2BAA2B;QAChC,OAAO,EAAE,+BAA+B;QACxC,OAAO,EAAE,+BAA+B;QACxC,KAAK,EAAE,6BAA6B;QACpC,WAAW,EAAE,mCAAmC;QAChD,OAAO,EAAE,+BAA+B;QACxC,MAAM,EAAE,8BAA8B;KACvC;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,mCAAmC,EAAE;SACpD;KACF;CACF,CAAC,CAAC"}

package/fragments/page/page-header.css

@@ -1,13 +1,33 @@
 @layer components {
   .fragment-page-header {
-    @apply flex gap-4 justify-between sm:items-end mb-8 flex-col sm:flex-row;
+    @apply flex flex-col gap-5 mb-8;
+  }
+
+  .fragment-page-header--with-footer {
+    @apply mb-6;
+  }
+
+  .fragment-page-header__row {
+    @apply flex gap-4 justify-between flex-col sm:flex-row sm:items-end;
+  }
+
+  .fragment-page-header__heading {
+    @apply min-w-0;
+  }
+
+  .fragment-page-header__eyebrow {
+    @apply mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted;
   }
 
   .fragment-page-header__description {
-    @apply mt-2 text-muted;
+    @apply mt-1 max-w-2xl text-sm text-muted;
   }
 
   .fragment-page-header__actions {
-    @apply flex gap-4;
+    @apply flex flex-wrap gap-2 items-center shrink-0;
+  }
+
+  .fragment-page-header__footer {
+    @apply min-w-0;
   }
 }

package/fragments/save-bar/SaveBar.d.ts

@@ -0,0 +1,12 @@
+export interface SaveBarProps {
+    isVisible: boolean;
+    isPending?: boolean;
+    message: React.ReactNode;
+    saveLabel: React.ReactNode;
+    discardLabel?: React.ReactNode;
+    onDiscard?: () => void;
+    /** Omit when the bar sits inside a `<form>`: the save button then submits it. */
+    onSave?: () => void;
+    isSaveDisabled?: boolean;
+}
+export declare const SaveBar: React.FC<SaveBarProps>;

package/fragments/save-bar/SaveBar.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The bar a settings form saves from. It appears once something has changed and stays pinned to
+ * the bottom of the viewport while the form scrolls, so the save action is never a scroll away and
+ * an unsaved edit is never silent.
+ */
+import { Button } from '@heroui/react';
+import { IconAlertCircle } from '@tabler/icons-react';
+import { saveBar } from './SaveBar.styles';
+export const SaveBar = ({ isVisible, isPending, message, saveLabel, discardLabel, onDiscard, onSave, isSaveDisabled, }) => {
+    const v = saveBar({ isVisible });
+    return (_jsx("div", { "aria-hidden": !isVisible, className: v.base(), inert: !isVisible, children: _jsxs("div", { className: v.bar(), children: [_jsx("span", { "aria-live": "polite", className: v.message(), children: isVisible && (_jsxs(_Fragment, { children: [_jsx(IconAlertCircle, { size: 16, stroke: 1.75 }), message] })) }), _jsxs("div", { className: v.actions(), children: [onDiscard && discardLabel && (_jsx(Button, { isDisabled: isPending, onPress: onDiscard, size: "sm", type: "button", variant: "ghost", children: discardLabel })), _jsx(Button, { isDisabled: isSaveDisabled, isPending: isPending, onPress: onSave, size: "sm", type: onSave ? 'button' : 'submit', children: saveLabel })] })] }) }));
+};
+//# sourceMappingURL=SaveBar.js.map

package/fragments/save-bar/SaveBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveBar.js","sourceRoot":"","sources":["../../src/fragments/save-bar/SaveBar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAc3C,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,GAC1F,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;IAEjC,OAAO,CACL,6BAAkB,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,YAClE,eAAK,SAAS,EAAE,CAAC,CAAC,GAAG,EAAE,aAErB,4BAAgB,QAAQ,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,YAC5C,SAAS,IAAI,CACZ,8BACE,KAAC,eAAe,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,GAAI,EAC1C,OAAO,IACP,CACJ,GACI,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,aACxB,SAAS,IAAI,YAAY,IAAI,CAC5B,KAAC,MAAM,IAAC,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,YACvF,YAAY,GACN,CACV,EACD,KAAC,MAAM,IACL,UAAU,EAAE,cAAc,EAC1B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,YAEjC,SAAS,GACH,IACL,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/fragments/save-bar/SaveBar.styles.d.ts

@@ -0,0 +1,37 @@
+export declare const saveBar: import("tailwind-variants").TVReturnType<{
+    isVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    bar: string;
+    message: string;
+    actions: string;
+}, undefined, {
+    isVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    bar: string;
+    message: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    isVisible: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    bar: string;
+    message: string;
+    actions: string;
+}>>;

package/fragments/save-bar/SaveBar.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const saveBar = tv({
+    slots: {
+        base: 'fragment-save-bar',
+        bar: 'fragment-save-bar__bar',
+        message: 'fragment-save-bar__message',
+        actions: 'fragment-save-bar__actions',
+    },
+    variants: {
+        isVisible: {
+            true: { base: 'fragment-save-bar--visible' },
+            false: {},
+        },
+    },
+});
+//# sourceMappingURL=SaveBar.styles.js.map

package/fragments/save-bar/SaveBar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveBar.styles.js","sourceRoot":"","sources":["../../src/fragments/save-bar/SaveBar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;IACxB,KAAK,EAAE;QACL,IAAI,EAAE,mBAAmB;QACzB,GAAG,EAAE,wBAAwB;QAC7B,OAAO,EAAE,4BAA4B;QACrC,OAAO,EAAE,4BAA4B;KACtC;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,4BAA4B,EAAE;YAC5C,KAAK,EAAE,EAAE;SACV;KACF;CACF,CAAC,CAAC"}

package/fragments/save-bar/save-bar.css

@@ -0,0 +1,28 @@
+@layer components {
+  /* Sticky inside the form rather than fixed to the viewport, so it never needs to know how wide the rail is. */
+  /* Takes no room while hidden, so a clean form ends where its last field does. */
+  .fragment-save-bar {
+    @apply pointer-events-none sticky bottom-20 z-30 flex h-0 justify-center overflow-visible md:bottom-6;
+    @apply translate-y-4 opacity-0 transition-[opacity,translate] duration-200 motion-reduce:transition-none;
+  }
+
+  .fragment-save-bar--visible {
+    @apply pointer-events-auto mt-6 h-auto translate-y-0 opacity-100;
+  }
+
+  .fragment-save-bar__bar {
+    @apply flex w-full max-w-2xl items-center justify-between gap-4 rounded-2xl border border-border bg-overlay py-2 pr-2 pl-4
+           text-sm shadow-lg;
+  }
+
+  .fragment-save-bar__message {
+    @apply flex items-center gap-2 font-medium text-foreground;
+    & svg {
+      @apply shrink-0 text-warning;
+    }
+  }
+
+  .fragment-save-bar__actions {
+    @apply flex shrink-0 items-center gap-1;
+  }
+}

package/fragments/shell/shell.css

@@ -7,16 +7,20 @@
     @apply flex-col;
   }
 
+  /*
+   * The content column is capped at a width a table or a two-column dashboard still reads well at.
+   * Past ~1600px the eye travels too far between a label and its value, and a wide monitor is
+   * better spent on margin than on stretching every card.
+   */
   .fragment-shell__main {
-    @apply flex-1 min-w-0 mx-auto;
+    @apply flex-1 min-w-0 mx-auto w-full;
 
     .fragment-shell--horizontal & {
-      @apply px-8 lg:px-12 xl:px-20 py-14 max-w-[2100px];
+      @apply px-4 sm:px-6 lg:px-10 pt-6 pb-24 md:pt-8 md:pb-12 max-w-[1600px];
     }
 
     .fragment-shell--vertical & {
-      @apply px-8 py-6 max-w-[2100px] w-full;
+      @apply px-4 sm:px-6 lg:px-10 py-6 max-w-[1600px];
     }
-
   }
 }

package/fragments/sidebar/Sidebar.js

@@ -73,7 +73,10 @@ export const Sidebar = ({ items, currentPath, layout: defaultLayout = 'auto' })
                                 }) }), _jsx("div", { className: v.expandedFooter(), children: items.map((item) => {
                                     const children = item.align === 'bottom' ? renderItems(item, { layout: 'expanded', activeLink }) : null;
                                     return children ? (_jsx("div", { className: getAlignmentClass(item.align), children: children }, item.key)) : null;
-                                }) })] }), _jsx("div", { className: v.placeholder() }), _jsx("div", { className: v.layoutButtonWrapper(), children: _jsx(Button, { size: "sm", isIconOnly: true, variant: "tertiary", className: v.layoutButton(), onPress: toggleLayout, children: _jsx(IconChevronLeft, {}) }) })] }), _jsxs("nav", { className: v.bottomNav(), onClick: () => setMobileMenuOpen(false), children: [items.find((item) => item.type === 'navigation')?.navigation?.map((navItem) => (_jsxs(Tooltip, { children: [_jsx(Tooltip.Trigger, { children: _jsx(Button, { render: (props) => _jsx(ButtonLink, { ...props, href: navItem.link }), isIconOnly: true, variant: activeLink === navItem.link ? 'tertiary' : 'ghost', onPress: () => setMobileMenuOpen(false), children: _jsxs(Badge.Anchor, { children: [navItem.icon, typeof navItem.badgeContent === 'string' && navItem.badgeContent ? (_jsx(Badge, { variant: "primary", color: "accent", size: "sm", className: "fragment-sidebar__bottom-nav-badge", children: navItem.badgeContent })) : null] }) }) }), _jsx(Tooltip.Content, { placement: "top", offset: 10, children: navItem.label })] }, navItem.label))), _jsx(Button, { variant: mobileMenuOpen ? 'tertiary' : 'ghost', isIconOnly: true, onPress: () => setMobileMenuOpen(!mobileMenuOpen), children: _jsx(IconDots, {}) })] }), _jsx(Modal, { isOpen: mobileMenuOpen, onOpenChange: setMobileMenuOpen, children: _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.Header, {}), _jsx(Modal.Body, { className: v.bottomNavModalBody(), children: items.map((item) => {
+                                }) })] }), _jsx("div", { className: v.placeholder() }), _jsx("div", { className: v.layoutButtonWrapper(), children: _jsx(Button, { size: "sm", isIconOnly: true, variant: "tertiary", className: v.layoutButton(), onPress: toggleLayout, children: _jsx(IconChevronLeft, {}) }) })] }), _jsxs("nav", { className: v.bottomNav(), onClick: () => setMobileMenuOpen(false), children: [items
+                        .filter((item) => item.type === 'navigation')
+                        .flatMap((item) => item.navigation)
+                        .map((navItem) => (_jsxs(Tooltip, { children: [_jsx(Tooltip.Trigger, { children: _jsx(Button, { render: (props) => _jsx(ButtonLink, { ...props, href: navItem.link }), isIconOnly: true, variant: activeLink === navItem.link ? 'tertiary' : 'ghost', onPress: () => setMobileMenuOpen(false), children: _jsxs(Badge.Anchor, { children: [navItem.icon, typeof navItem.badgeContent === 'string' && navItem.badgeContent ? (_jsx(Badge, { variant: "primary", color: "accent", size: "sm", className: "fragment-sidebar__bottom-nav-badge", children: navItem.badgeContent })) : null] }) }) }), _jsx(Tooltip.Content, { placement: "top", offset: 10, children: navItem.label })] }, navItem.label))), _jsx(Button, { variant: mobileMenuOpen ? 'tertiary' : 'ghost', isIconOnly: true, onPress: () => setMobileMenuOpen(!mobileMenuOpen), children: _jsx(IconDots, {}) })] }), _jsx(Modal, { isOpen: mobileMenuOpen, onOpenChange: setMobileMenuOpen, children: _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.Header, {}), _jsx(Modal.Body, { className: v.bottomNavModalBody(), children: items.map((item) => {
                                         const children = item.align !== 'bottom' ? renderItems(item, { layout: 'expanded', activeLink }) : null;
                                         return children ? (_jsx("div", { className: getAlignmentClass(item.align), children: children }, item.key)) : null;
                                     }) }), _jsx(Modal.Footer, { className: v.bottomNavModalFooter(), children: items.map((item) => {

package/fragments/sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/fragments/sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../src/fragments/sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}

package/fragments/sidebar/sidebar.css

@@ -5,28 +5,29 @@
 
   .fragment-sidebar__collapsed {
     @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
-           flex flex-col h-screen gap-8 transition-all;
+           flex flex-col h-screen gap-4 transition-all z-40;
   }
 
   .fragment-sidebar__collapsed-body {
-    @apply w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+    @apply w-16 items-center flex flex-col gap-6 px-2 pt-5 overflow-y-auto flex-1;
   }
 
   .fragment-sidebar__collapsed-footer {
-    @apply w-20 items-center flex flex-col gap-8 px-3 pb-8;
+    @apply w-16 items-center flex flex-col gap-3 px-2 pb-4;
   }
 
   .fragment-sidebar__expanded {
     @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
-           flex flex-col h-screen gap-8 overflow-hidden transition-all;
+           flex flex-col h-screen gap-4 overflow-hidden transition-all z-40;
   }
 
   .fragment-sidebar__expanded-body {
-    @apply w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+    @apply w-64 flex flex-col gap-6 px-3 pt-5 overflow-y-auto flex-1;
   }
 
+  /* The footer is chrome (account, workspace), so it is tucked behind a hairline. */
   .fragment-sidebar__expanded-footer {
-    @apply w-72 flex flex-col gap-8 px-3 pb-8;
+    @apply w-64 flex flex-col gap-2 px-3 pt-3 pb-4 border-t border-border;
   }
 
   .fragment-sidebar__placeholder {
@@ -34,11 +35,14 @@
   }
 
   .fragment-sidebar__layout-button-wrapper {
-    @apply fixed top-6 transition-all;
+    @apply fixed top-6 transition-all z-50;
   }
 
   .fragment-sidebar__layout-button {
-    @apply h-6! w-6!;
+    @apply h-6! w-6! min-w-6! bg-surface! border border-border shadow-sm text-muted;
+    & svg {
+      @apply size-3.5;
+    }
   }
 
   .fragment-sidebar__bottom-nav {
@@ -68,8 +72,15 @@
 
   .fragment-sidebar__collapsed-nav {
     @apply flex flex-col gap-1;
+
+    /* The active item looks selected the same way at either rail width: the soft fill. */
+    .button--primary {
+      @apply bg-accent-soft;
+      color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground));
+    }
+
     & svg {
-      @apply size-5! shrink-0 self-center;
+      @apply size-[18px]! shrink-0 self-center;
     }
   }
 
@@ -106,23 +117,36 @@
   }
 
   .fragment-sidebar__custom-item {
-    @apply px-2;
+    @apply px-1;
   }
 
   .fragment-sidebar__nav {
-    @apply text-sm;
+    @apply text-sm flex flex-col gap-0.5;
+
+    /* Group label: quiet, so it organises the list without competing with it. */
+    & > .header {
+      @apply px-3 pb-1 text-xs font-medium text-muted;
+    }
+
+    .list-box {
+      @apply gap-0.5;
+    }
 
     .list-box-item {
-      @apply px-3! pr-1! py-1! h-10!;
+      @apply px-3! pr-1! py-1! h-9! gap-3! rounded-lg! font-normal text-sidebar-foreground/80;
+      &:hover, &[data-hovered="true"] {
+        background-color: var(--sidebar-default, var(--default)) !important;
+        @apply text-sidebar-foreground;
+      }
     }
 
     & svg {
-      @apply size-5 shrink-0 self-center;
+      @apply size-[18px] shrink-0 self-center;
     }
   }
 
   .fragment-sidebar__accordion-trigger {
-    @apply w-full flex items-center gap-3 h-10 px-3 pr-1 py-1 rounded-2xl text-sm font-normal cursor-pointer
+    @apply w-full flex items-center gap-3 h-9 px-3 pr-1 py-1 rounded-lg text-sm font-normal cursor-pointer
            text-sidebar-foreground transition-colors;
     &:hover, &[data-hovered="true"] {
       /* `--default` is a page-level palette colour; opt out per-rail with `--sidebar-default`. */
@@ -161,7 +185,7 @@
 
   .fragment-sidebar__nav-item--active {
     /* `--accent-soft` is translucent, so it composites over the rail, not the page. */
-    @apply bg-accent-soft!;
+    @apply bg-accent-soft! font-medium!;
     color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground)) !important;
   }
 
@@ -180,13 +204,13 @@
   /* Layout modifier variants */
   .fragment-sidebar--auto {
     .fragment-sidebar__expanded {
-      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+      @apply w-16 opacity-0 pointer-events-none xl:w-64 xl:opacity-100 xl:pointer-events-auto;
     }
     .fragment-sidebar__placeholder {
-      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+      @apply w-16 opacity-0 pointer-events-none xl:w-64 xl:opacity-100 xl:pointer-events-auto;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-20 translate-x-1/2 rotate-180 xl:left-72 xl:-translate-x-1/2 xl:rotate-0;
+      @apply left-16 translate-x-1/2 rotate-180 xl:left-64 xl:-translate-x-1/2 xl:rotate-0;
     }
     .fragment-sidebar__collapsed {
       @apply xl:opacity-0;
@@ -195,13 +219,13 @@
 
   .fragment-sidebar--collapsed {
     .fragment-sidebar__expanded {
-      @apply w-20 opacity-0 pointer-events-none;
+      @apply w-16 opacity-0 pointer-events-none;
     }
     .fragment-sidebar__placeholder {
-      @apply w-20 opacity-0 pointer-events-none;
+      @apply w-16 opacity-0 pointer-events-none;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-20 translate-x-1/2 rotate-180;
+      @apply left-16 translate-x-1/2 rotate-180;
     }
   }
 
@@ -210,13 +234,13 @@
       @apply opacity-0;
     }
     .fragment-sidebar__expanded {
-      @apply w-72;
+      @apply w-64;
     }
     .fragment-sidebar__placeholder {
-      @apply w-72;
+      @apply w-64;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-72 -translate-x-1/2;
+      @apply left-64 -translate-x-1/2;
     }
   }
 }

package/fragments/stat/StatCard.d.ts

@@ -0,0 +1,29 @@
+export interface StatCardDelta {
+    /** Already formatted and signed, e.g. "+12%". */
+    value: React.ReactNode;
+    direction: 'up' | 'down' | 'flat';
+    /**
+     * Whether this direction is good news. Defaults to "up is good"; pass it explicitly for a
+     * number where down is the win (a bounce rate, a cost).
+     */
+    sentiment?: 'positive' | 'negative' | 'neutral';
+    /** The period the change is measured against, e.g. "vs. previous 30 days". */
+    label?: React.ReactNode;
+}
+export interface StatCardProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    icon?: React.ReactNode;
+    delta?: StatCardDelta;
+    /** One quiet line under the value. */
+    hint?: React.ReactNode;
+    /** Shown behind an info icon beside the label. */
+    help?: React.ReactNode;
+    /** Accessible name of the info icon. */
+    helpLabel?: string;
+    isLoading?: boolean;
+    /** Marks the card as the one the view is about: a lifted surface and a larger value. */
+    emphasis?: boolean;
+    className?: string;
+}
+export declare const StatCard: React.FC<StatCardProps>;