# @leumas/ui

The ONE Leumas component + layout kit — data-agnostic, token-driven primitives shared by every product.


The ONE Leumas component + layout kit — **data-agnostic, token-driven primitives** every product
composes. No product ships its own header/footer/sidebar; they import these and pass their own data.

**Absorbs (DRY-consolidated from):** `z.Domains2/core/src/Globals/{Headers,Footers,Menus,Sidebars,Loaders,SpeedDials}`
+ `Shared/Components`; `leumas-tech/src/components/{Layout,HUDLayout,WorkspaceLayout,…}`;
`LeumasMedia/core/shared-ui`; `leumas-school/packages/ui`. The heavy product-specific logic (mega-menus,
wakeword, wallet, hard-coded routes) is deliberately **left in the product** — `@leumas/ui` stays presentational.

## Usage

```jsx
import '@leumas/theme/global.css';
import '@leumas/ui/ui.css';
import { AppShell, Header, Aside, Footer, NavMenu, ThemeToggle } from '@leumas/ui';
import { NavLink } from 'react-router-dom';

<AppShell
  header={<Header logo="/logo.svg" title="Leumas" nav={<NavMenu items={nav} orientation="horizontal" LinkComponent={NavLink} />} utils={<ThemeToggle />} />}
  {/* ONE contextual panel — the current section's pages, not a copy of the header nav. */}
  sidebar={<Aside title="This section" items={sectionNav} LinkComponent={NavLink} />}
 footer={<Footer left="(c) Leumas" right={socials} />}
>
  <Outlet />
</AppShell>
```

## Exports

- **Layout:** `AppShell`, `Header`, `Aside` (one contextual panel), `Footer`, `NavMenu` / `NavItem`, `AppsGrid`.
- **Primitives:** `Card` (+ `glow`), `Button` (`primary`/`ghost`), `PageContainer`, `Loader`.
- **Theme:** `ThemeToggle`, `useTheme` (re-exported from `@leumas/theme`).

Router-agnostic: pass `LinkComponent` (e.g. `NavLink`) or it falls back to `<a>`.


---
Source: shared/packages/ui/README.md
Canonical: https://docs.leumas.tech/p/packages/ui