@attrus-ds/core 0.1.0 → 0.2.0

package/dist/css/tokens.css

@@ -1,19 +1,14 @@
+/* @attrus/cabiros — design tokens + type classes (concatenated).
+   Generated by scripts/build.mjs from src/tokens/ and src/typography/. */
+
 /* ============================================================
-   CABIROS — ATTRUS Design System
-   colors_and_type.css
-   ----
-   Sober, serious, professional. Dashboards for financial
-   operations across LATAM. Cool bluish grays. Deep navy.
-   Primary brand blue. Liquid-glass-friendly translucency.
+   ATTRUS / Cabiros — BASE PALETTE (raw color tokens)
+   The primitive layer. Theme-agnostic. Referenced only by the
+   semantic layer (color-semantic.css) and effect layers — never
+   consumed directly by components.
    ============================================================ */
 
-/* ---------- Webfont: Lato ---------- */
-
 :root {
-  /* ============================================================
-     1.  BASE PALETTE  —  raw color tokens
-     ============================================================ */
-
   /* --- Brand (from manual: Lato + 4 HEX stops) --- */
   --brand-attrus-ink:        #0F0F1A;   /* almost-black, blue-tinted */
   --brand-attrus-navy:       #002142;   /* deep navy */
@@ -146,13 +141,17 @@
   --color-info-700: #144B8C;
   --color-info-800: #0D3A6E;
   --color-info-900: #072951;
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — SEMANTIC COLOR TOKENS
+   Reference the base palette (palette.css). This is the layer
+   components consume.
+   Roles: default | secondary | muted | accent | placeholder
+   Contexts: fg (text/icon), bg (surface), br (border)
+   ============================================================ */
 
-  /* ============================================================
-     2.  SEMANTIC TOKENS — reference the base palette
-     Roles: default | secondary | muted | accent | placeholder
-     Contexts: fg (text/icon), bg (surface), br (border)
-     ============================================================ */
-
+:root {
   /* Default (light) theme — the 60% whites/light grays */
   --color-background-canvas:      var(--color-neutral-25);          /* app background */
   --color-background-surface:     var(--color-neutral-0);           /* card / container */
@@ -274,10 +273,13 @@
   --color-feedback-danger-foreground-on-inverse-muted:  color-mix(in srgb, var(--color-danger-100)  70%, var(--color-foreground-inverse-muted));
   --color-feedback-info-foreground-on-inverse:          var(--color-info-100);
   --color-feedback-info-foreground-on-inverse-muted:    color-mix(in srgb, var(--color-info-100)    70%, var(--color-foreground-inverse-muted));
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — GRADIENTS (primary brand + layers)
+   ============================================================ */
 
-  /* ============================================================
-     3.  GRADIENTS  —  primary brand + layers
-     ============================================================ */
+:root {
   --grad-brand:       linear-gradient(135deg, #001A4D 0%, #003399 50%, #3399FF 100%);
   --grad-brand-soft:  linear-gradient(135deg, #002A80 0%, #003399 100%);
   --grad-ink:         linear-gradient(160deg, #0B1230 0%, #001A4D 55%, #002A80 100%);
@@ -302,16 +304,19 @@
   --grad-data-brand:  linear-gradient(180deg,
                         color-mix(in srgb, var(--color-brand-accent-500) 30%, transparent) 0%,
                         color-mix(in srgb, var(--color-brand-accent-500)  0%, transparent) 100%);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — DATA VISUALIZATION (chart palettes & structure)
+   Categorical = qualitative series (distinct, on-brand, cool).
+   Sequential  = single-hue magnitude ramp (Sky).
+   Diverging   = danger ← neutral → success (variance/heatmap).
+   Structure   = grid / axis / track / reference (semantic → theme).
+   Categorical gets dark-theme overrides (lift the dark hues, in
+   theme-dark.css); ramps + structure follow semantic tokens.
+   ============================================================ */
 
-  /* ============================================================
-     3b.  DATA VISUALIZATION  —  chart palettes & structure
-     Categorical = qualitative series (distinct, on-brand, cool).
-     Sequential  = single-hue magnitude ramp (Sky).
-     Diverging   = danger ← neutral → success (variance/heatmap).
-     Structure   = grid / axis / track / reference (semantic → theme).
-     Categorical gets dark-theme overrides (lift the dark hues);
-     ramps + structure follow semantic tokens automatically.
-     ============================================================ */
+:root {
   /* Categorical — order chosen for max adjacent contrast */
   --dataviz-cat-1: #003399;  /* Royal — brand-anchored series 1 */
   --dataviz-cat-2: #3399FF;  /* Sky */
@@ -350,11 +355,14 @@
   --dataviz-axis-label:  var(--color-foreground-muted);  /* tick labels */
   --dataviz-track:       var(--color-background-subtle);  /* empty bar / gauge track */
   --dataviz-reference:   var(--color-foreground-muted);   /* dashed target/avg line */
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — LIQUID GLASS (transparent / frosted layers)
+   Use with backdrop-filter: blur().
+   ============================================================ */
 
-  /* ============================================================
-     4.  LIQUID GLASS  —  transparent / frosted layers
-     Use with backdrop-filter: blur().
-     ============================================================ */
+:root {
   --glass-white:     color-mix(in srgb, var(--color-pure-white) 58%, transparent);
   --glass-white-hi:  color-mix(in srgb, var(--color-pure-white) 78%, transparent);
   --glass-white-lo:  color-mix(in srgb, var(--color-pure-white) 38%, transparent);
@@ -367,10 +375,14 @@
   --glass-blur-lg:   saturate(160%) blur(28px);
   --glass-border:      1px solid color-mix(in srgb, var(--color-pure-white) 45%, transparent);
   --glass-border-dark: 1px solid color-mix(in srgb, var(--color-pure-white) 10%, transparent);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — RADII
+   Mostly softly rounded; buttons fully rounded.
+   ============================================================ */
 
-  /* ============================================================
-     5.  RADII  —  mostly softly rounded; buttons fully rounded
-     ============================================================ */
+:root {
   --radius-2xs: 2px;   /* never-square minimum — tiny chips, ticks, dividers */
   --radius-xs: 4px;
   --radius-sm: 6px;
@@ -382,10 +394,13 @@
   --radius-xl: 20px;   /* hero / large panels */
   --radius-2xl: 28px;
   --radius-pill: 999px; /* BUTTONS — fully rounded */
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — SHADOWS (soft, blue-tinted, multi-layer)
+   ============================================================ */
 
-  /* ============================================================
-     6.  SHADOWS  —  soft, blue-tinted, multi-layer
-     ============================================================ */
+:root {
   --shadow-xs:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 5%, transparent);
   --shadow-sm:  0 1px 2px color-mix(in srgb, var(--color-shadow-tint) 6%, transparent),
                 0 2px 6px color-mix(in srgb, var(--color-shadow-tint) 4%, transparent);
@@ -427,10 +442,14 @@
                   0 10px 30px color-mix(in srgb, var(--color-shadow-tint) 12%, transparent);
   --shadow-glass-dark: 0 1px 0 color-mix(in srgb, var(--color-pure-white)  8%, transparent) inset,
                        0 10px 40px color-mix(in srgb, var(--color-pure-black) 35%, transparent);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — SPACING
+   4px base; dense, data-heavy layouts.
+   ============================================================ */
 
-  /* ============================================================
-     7.  SPACING  —  4px base; dense, data-heavy layouts
-     ============================================================ */
+:root {
   --space-0:   0;
   --space-1:   2px;
   --space-2:   4px;
@@ -448,10 +467,13 @@
   --space-12:  64px;
   --space-14:  80px;
   --space-16:  96px;
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — ICONOGRAPHY (Lucide; sized to pair with type scale)
+   ============================================================ */
 
-  /* ============================================================
-     7b. ICONOGRAPHY  —  Lucide; sized to pair with type scale
-     ============================================================ */
+:root {
   --icon-xs: 12px;  /* helper text, micro caption          (paired w/ 11–12px text) */
   --icon-sm: 14px;  /* input affix, dense inline           (paired w/ 13px text) */
   --icon-md: 16px;  /* default — buttons, nav, body        (paired w/ 14px text) */
@@ -462,10 +484,13 @@
   --icon-stroke:      1.75;  /* default — slightly bolder than 1.5, calmer than 2 */
   --icon-stroke-bold: 2;     /* close buttons, X marks, indicators where weight matters */
   --icon-stroke-thin: 1.5;   /* decorative / large hero icons where 1.75 looks heavy */
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — MOTION (durations + easings for transitions/animations)
+   ============================================================ */
 
-  /* ============================================================
-     7c. MOTION  —  durations + easings for transitions/animations
-     ============================================================ */
+:root {
   /* Easing — single curve across the system; "out-expo-ish" for snappy UI */
   --ease-standard: cubic-bezier(.2, .8, .2, 1);
   --ease-emphasis: cubic-bezier(.2, .9, .15, 1);   /* slightly more overshoot — for entries */
@@ -483,10 +508,15 @@
   --transition-fast:  140ms var(--ease-standard);   /* default for buttons/inputs */
   --transition-base:  200ms var(--ease-standard);
   --transition-slow:  320ms var(--ease-standard);
+}
+
+/* ============================================================
+   ATTRUS / Cabiros — TYPOGRAPHY TOKENS (Lato family per brand manual)
+   Font families, weights, type scale, line heights, letter spacing.
+   Ready-to-use type CLASSES live in ../typography/index.css.
+   ============================================================ */
 
-  /* ============================================================
-     8.  TYPOGRAPHY  —  Lato family per brand manual
-     ============================================================ */
+:root {
   --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
   --font-display: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -529,18 +559,20 @@
   --ls-body:    0em;      /* <16px body */
   --ls-label:   0.02em;   /* small caps / labels */
   --ls-caps:    0.08em;
-}
-
+}
+
 /* ============================================================
-   DARK THEME  —  [data-theme="dark"] remaps the AMBIENT semantic
-   tokens to a dark ink ramp. Components consume semantic tokens,
-   so they flip automatically — no per-component dark CSS needed.
+   ATTRUS / Cabiros — DARK THEME
+   [data-theme="dark"] remaps the AMBIENT semantic tokens to a dark
+   ink ramp. Components consume semantic tokens, so they flip
+   automatically — no per-component dark CSS needed.
    Philosophy: the INVERSE layer stays a deliberate, brand-tinted
-   dark even here (see note in :root), distinct from the ambient
-   surface. Raw palette + brand/accent scales are theme-agnostic.
-   Toggle via JS (theme-toggle.js): sets data-theme on <html>,
-   persists to localStorage, seeds from prefers-color-scheme.
+   dark even here (see note in color-semantic.css), distinct from the
+   ambient surface. Raw palette + brand/accent scales are theme-agnostic.
+   Toggle via JS: set data-theme on <html>, persist to localStorage,
+   seed from prefers-color-scheme.
    ============================================================ */
+
 [data-theme="dark"] {
   color-scheme: dark;
 
@@ -603,10 +635,12 @@
   --dataviz-cat-6: #E87BA1;  /* Rose, lightened */
   --dataviz-cat-7: #3FC4DC;  /* Cyan, lightened */
   --dataviz-cat-8: #A6B0C4;  /* Slate, lightened */
-}
-
+}
+
 /* ============================================================
-   9.  SEMANTIC TYPE CLASSES  —  ready-to-use
+   ATTRUS / Cabiros — SEMANTIC TYPE CLASSES (ready-to-use)
+   Base document styles + the display/heading/body/utility classes.
+   Consumes typography + color tokens (see ../tokens).
    ============================================================ */
 
 html, body {
@@ -657,35 +691,5 @@ h6, .h6 { font-weight: var(--w-semibold); font-size: var(--fs-lg);  line-height:
 }
 .inverse .fg-secondary { color: var(--color-foreground-inverse-secondary); }
 .inverse .color-foreground-muted     { color: var(--color-foreground-inverse-muted); }
-.inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }
-
-
-/* ---- doc-back link (fixed top-left on every preview page) ---- */
-.doc-back {
-  position: fixed;
-  top: var(--space-5);
-  left: var(--space-5);
-  z-index: 1000;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-family: var(--font-sans);
-  font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--color-foreground-secondary);
-  text-decoration: none;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-pill);
-  background: var(--color-background-surface);
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-fast);
-}
-.doc-back:hover {
-  color: var(--color-foreground-default);
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-md);
-}
-.doc-back svg, .doc-back i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.inverse .fg-accent    { color: var(--color-foreground-inverse-accent); }
+

package/dist/react/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+export interface SidebarChildItem {
+  key: string;
+  label: React.ReactNode;
+  count?: number | string;
+}
+
+export interface SidebarItem {
+  key: string;
+  label: React.ReactNode;
+  /** 15px icon slot (.ic). */
+  icon?: React.ReactNode;
+  /** Status badge text (e.g. "NEW") — mutually exclusive with count. */
+  badge?: string;
+  badgeTone?: 'alert' | 'warning';
+  /** Numeric trailing count. */
+  count?: number | string;
+  disabled?: boolean;
+  /** Sub-items — renders a collapsible .sb-group. */
+  children?: SidebarChildItem[];
+}
+
+export interface SidebarSection {
+  /** Uppercase section label; omit for the first unlabelled block. */
+  label?: React.ReactNode;
+  items: SidebarItem[];
+}
+
+export interface AppSidebarProps {
+  sections: SidebarSection[];
+  /** Key of the active item/sub-item. */
+  active?: string;
+  onNav?: (key: string) => void;
+  /** Full-height app rail (.sb-app) instead of card framing. */
+  app?: boolean;
+  /** 60px icon rail. */
+  collapsed?: boolean;
+  /** Renders the header collapse toggle. */
+  onToggleCollapse?: () => void;
+  /** Header brand slot (logo img). */
+  logo?: React.ReactNode;
+  /** Footer slot (.sb-foot markup is the caller's). */
+  foot?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export declare const AppSidebar: React.FC<AppSidebarProps>;
+export default AppSidebar;

package/dist/react/AppSidebar/AppSidebar.tsx

@@ -0,0 +1,197 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS AppSidebar — typed wrapper over the canonical `.sb` system
+ * (preview/components/sidebar.css). Single visual source shared with
+ * the live app shell and the doc page. Sections, items with badge OR
+ * count, collapsible groups, disabled rows, collapsed 60px icon rail.
+ * (Named AppSidebar — "Shell"/"Sidebar" collide with legacy app files.)
+ */
+
+export interface SidebarChildItem {
+  key: string;
+  label: React.ReactNode;
+  count?: number | string;
+}
+
+export interface SidebarItem {
+  key: string;
+  label: React.ReactNode;
+  /** 15px icon slot (.ic). */
+  icon?: React.ReactNode;
+  /** Status badge text (e.g. "NEW") — mutually exclusive with count. */
+  badge?: string;
+  badgeTone?: 'alert' | 'warning';
+  /** Numeric trailing count. */
+  count?: number | string;
+  disabled?: boolean;
+  /** Sub-items — renders a collapsible .sb-group. */
+  children?: SidebarChildItem[];
+}
+
+export interface SidebarSection {
+  /** Uppercase section label; omit for the first unlabelled block. */
+  label?: React.ReactNode;
+  items: SidebarItem[];
+}
+
+export interface AppSidebarProps {
+  sections: SidebarSection[];
+  /** Key of the active item/sub-item. */
+  active?: string;
+  onNav?: (key: string) => void;
+  /** Full-height app rail (.sb-app) instead of card framing. */
+  app?: boolean;
+  /** 60px icon rail. */
+  collapsed?: boolean;
+  /** Renders the header collapse toggle. */
+  onToggleCollapse?: () => void;
+  /** Header brand slot (logo img). */
+  logo?: React.ReactNode;
+  /** Footer slot (.sb-foot markup is the caller's). */
+  foot?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const PanelGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <line x1="9" y1="3" x2="9" y2="21" />
+  </svg>
+);
+const ChevGlyph: React.FC = () => (
+  <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
+export const AppSidebar: React.FC<AppSidebarProps> = ({
+  sections,
+  active,
+  onNav,
+  app = false,
+  collapsed = false,
+  onToggleCollapse,
+  logo,
+  foot,
+  className,
+  style,
+}) => {
+  const [openGroups, setOpenGroups] = React.useState<Record<string, boolean>>({});
+
+  const toggleGroup = (key: string) =>
+    setOpenGroups((g) => ({ ...g, [key]: !g[key] }));
+
+  const renderItem = (item: SidebarItem) => {
+    const isGroup = !!(item.children && item.children.length);
+    const childActive = isGroup && item.children!.some((c) => c.key === active);
+    const expanded = isGroup ? (openGroups[item.key] ?? childActive) : false;
+    const itemCls = [
+      'sb-item',
+      item.key === active ? 'active' : '',
+      item.disabled ? 'disabled' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const row = (
+      <div
+        className={itemCls}
+        role="button"
+        tabIndex={item.disabled ? undefined : 0}
+        aria-disabled={item.disabled || undefined}
+        aria-current={item.key === active ? 'page' : undefined}
+        onClick={() => {
+          if (item.disabled) return;
+          if (isGroup) toggleGroup(item.key);
+          else if (onNav) onNav(item.key);
+        }}
+      >
+        {item.icon != null ? <span className="ic">{item.icon}</span> : null}
+        <span className="label">{item.label}</span>
+        {item.badge ? (
+          <span className={['sb-badge', item.badgeTone || ''].filter(Boolean).join(' ')}>{item.badge}</span>
+        ) : item.count != null ? (
+          <span className="sb-count">{item.count}</span>
+        ) : null}
+        {isGroup ? <ChevGlyph /> : null}
+      </div>
+    );
+
+    if (!isGroup) return <React.Fragment key={item.key}>{row}</React.Fragment>;
+
+    return (
+      <div key={item.key} className="sb-group" aria-expanded={expanded}>
+        {row}
+        <div className="sb-children">
+          <div className="sb-children-inner">
+            {item.children!.map((c) => (
+              <div
+                key={c.key}
+                className={['sb-subitem', c.key === active ? 'active' : ''].filter(Boolean).join(' ')}
+                role="button"
+                tabIndex={0}
+                aria-current={c.key === active ? 'page' : undefined}
+                onClick={() => onNav && onNav(c.key)}
+              >
+                <span className="label">{c.label}</span>
+                {c.count != null ? <span className="sb-count">{c.count}</span> : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <aside
+      className={['sb', app ? 'sb-app' : '', collapsed ? 'collapsed' : '', className || ''].filter(Boolean).join(' ')}
+      style={style}
+      onKeyDown={(e) => {
+        // Rail keyboard nav (doc a11y contract): ↑/↓ move between items
+        // (wrapping), Home/End jump; Enter/Space activate via role=button.
+        const nav = e.currentTarget;
+        const target = e.target as HTMLElement;
+        if (e.key === 'Enter' || e.key === ' ') {
+          if (target.matches('.sb-item, .sb-subitem')) { e.preventDefault(); target.click(); }
+          return;
+        }
+        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;
+        const rows = Array.from(nav.querySelectorAll<HTMLElement>('.sb-item:not(.disabled), .sb-subitem'))
+          .filter((el) => el.offsetParent !== null); // skip collapsed-group children
+        if (!rows.length) return;
+        e.preventDefault();
+        const idx = rows.indexOf(target);
+        let next = 0;
+        if (e.key === 'ArrowDown') next = idx === -1 ? 0 : (idx + 1) % rows.length;
+        else if (e.key === 'ArrowUp') next = idx === -1 ? rows.length - 1 : (idx - 1 + rows.length) % rows.length;
+        else if (e.key === 'End') next = rows.length - 1;
+        rows[next].focus();
+      }}
+    >
+      {(logo != null || onToggleCollapse) && (
+        <div className="sb-head">
+          {logo}
+          {onToggleCollapse ? (
+            <button type="button" className="toggle" aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} onClick={onToggleCollapse}>
+              <PanelGlyph />
+            </button>
+          ) : null}
+        </div>
+      )}
+      <div className="sb-body">
+        {sections.map((s, i) => (
+          <React.Fragment key={i}>
+            {s.label != null ? <div className="sb-section">{s.label}</div> : null}
+            {s.items.map(renderItem)}
+          </React.Fragment>
+        ))}
+      </div>
+      {foot}
+    </aside>
+  );
+};
+
+export default AppSidebar;

package/dist/react/AppTopbar/AppTopbar.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+export interface AppTopbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left CTA slot — the canonical Button (primary). */
+  primary?: React.ReactNode;
+  /** Search slot — the canonical SearchPill (grows to fill). */
+  search?: React.ReactNode;
+  /** Right-aligned cluster (.tb-spacer): TopbarControl/Live/Bell/Account. */
+  children?: React.ReactNode;
+}
+
+export interface TopbarControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Leading slot (icon, flag…). */
+  icon?: React.ReactNode;
+  /** Square icon-only control (.tb-control.icon). */
+  iconOnly?: boolean;
+  /** Trailing disclosure chevron. */
+  chev?: boolean;
+}
+
+export interface TopbarLiveProps {
+  label?: React.ReactNode;
+  /** Elapsed mono clock (e.g. "0:19"). */
+  clock?: React.ReactNode;
+}
+
+export interface TopbarBellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Unread red dot. */
+  badge?: boolean;
+}
+
+export interface TopbarAccountItem {
+  key: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  danger?: boolean;
+  /** Renders a separator before this item. */
+  sep?: boolean;
+}
+
+export interface TopbarAccountProps {
+  initials: string;
+  name: React.ReactNode;
+  company: React.ReactNode;
+  /** Second line in the dropdown head (e.g. "Acme Corp · Admin"). */
+  detail?: React.ReactNode;
+  items?: TopbarAccountItem[];
+  onSelect?: (key: string) => void;
+  /** Hide name/company in the trigger (mobile). */
+  compact?: boolean;
+}
+
+export declare const AppTopbar: React.FC<AppTopbarProps>;
+export declare const TopbarControl: React.FC<TopbarControlProps>;
+export declare const TopbarLive: React.FC<TopbarLiveProps>;
+export declare const TopbarBell: React.FC<TopbarBellProps>;
+export declare const TopbarAccount: React.FC<TopbarAccountProps>;
+export default AppTopbar;