@w5-ui/react 0.2.0 → 0.5.0

package/src/components/TopbarActions.tsx

@@ -0,0 +1,70 @@
+import { SearchIcon, UpdatesIcon, BellIcon, HelpIcon } from '../icons.js'
+import { Avatar } from './Avatar.js'
+import { IconButton } from './Button.js'
+import { NotifDot } from './NotifDot.js'
+
+export interface TopbarActionsProps {
+  /** Avatar initials shown in the trailing account chip. */
+  initials?: string
+  /** Unread count surfaced via the bell `aria-label` and the red `NotifDot`
+   * overlay. `0` hides the dot. */
+  notificationCount?: number
+}
+
+/**
+ * The canonical right-side action group inside `<Topbar>`: Search, Updates,
+ * Notifications (with `<NotifDot>` overlay when unread), Help, and the account
+ * `<Avatar>`. Renders the same five controls in the same order as the default
+ * block inside `<Topbar>` itself.
+ *
+ * Pass `<Topbar actions={...}>` replaces the default block in full — userland
+ * that wants to inject a theme toggle, status pill, or environment switch
+ * usually wants those _alongside_ the canonical controls, not instead of them.
+ * `<TopbarActions>` is that re-entry point: compose your custom controls plus
+ * `<TopbarActions />` and userland keeps the search / bell / avatar rhythm the
+ * reference dashboards ship without copying classes or icons.
+ *
+ * ```tsx
+ * <Topbar
+ *   siteName="HQ"
+ *   activeApp="system"
+ *   onAppChange={setApp}
+ *   actions={
+ *     <>
+ *       <ThemeToggle />
+ *       <TopbarActions notificationCount={3} initials="WS" />
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * The `<NotifDot>` ring colour, the `IconButton` 28 px square, and the
+ * `Avatar` `size="sm"` chip all come from `@w5-ui/tokens/dashboard.css` — drop
+ * the primitive in and the topbar reads identically to the Dashboard story.
+ */
+export function TopbarActions({ initials = 'MS', notificationCount = 1 }: TopbarActionsProps) {
+  return (
+    <>
+      <IconButton aria-label="Search" title="Search">
+        <SearchIcon />
+      </IconButton>
+      <IconButton aria-label="Updates" title="Updates">
+        <UpdatesIcon />
+      </IconButton>
+      <IconButton
+        aria-label={
+          notificationCount > 0 ? `Notifications, ${notificationCount} new` : 'Notifications'
+        }
+        title="Notifications"
+        style={{ position: 'relative' }}
+      >
+        <BellIcon />
+        {notificationCount > 0 && <NotifDot />}
+      </IconButton>
+      <IconButton aria-label="Help" title="Help">
+        <HelpIcon />
+      </IconButton>
+      <Avatar initials={initials} size="sm" alt={`Account, ${initials}`} />
+    </>
+  )
+}

package/src/components/Unit.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export interface UnitProps extends HTMLAttributes<HTMLSpanElement> {
+  children?: ReactNode
+}
+
+/**
+ * Small inline label that trails a hero number inside a `.stat` row or a
+ * `<Card>` title row (e.g. "Mbps · down", "Last 24 h", "ms · jitter band").
+ * Renders a `<span class="unit">` so the `.unit` rule in
+ * `@w5-ui/tokens/dashboard.css` sets the canonical muted colour, 12 px size,
+ * and inline-block rhythm. Stops userland reaching for inline `font-size` /
+ * `color` overrides next to bare numbers.
+ *
+ * Typed equivalent of `<span className="unit">`; pair with `<Stat>` (which
+ * already wires this internally) for hero tiles, or compose by hand inside a
+ * `<Card>` when the headline number sits above a chart.
+ */
+export function Unit({ className = '', children, ...rest }: UnitProps) {
+  return (
+    <span className={`unit ${className}`.trim()} {...rest}>
+      {children}
+    </span>
+  )
+}

package/src/index.ts

@@ -18,6 +18,38 @@ export * from './components/Signal.js'
 export * from './components/Donut.js'
 export * from './components/StatusIndicator.js'
 export * from './components/AppShell.js'
+export * from './components/AppLayout.js'
+export * from './components/Grid.js'
+export * from './components/FieldStack.js'
+export * from './components/FormRow.js'
+export * from './components/FormActions.js'
+export * from './components/TableShell.js'
+export * from './components/TablePager.js'
+export * from './components/Submeta.js'
+export * from './components/Delta.js'
+export * from './components/CardMore.js'
+export * from './components/Unit.js'
+export * from './components/StatNumber.js'
+export * from './components/Mac.js'
+export * from './components/NameCell.js'
+export * from './components/SrOnly.js'
+export * from './components/NotifDot.js'
+export * from './components/StatusRing.js'
+export * from './components/TopbarActions.js'
+export * from './components/Muted.js'
+export * from './components/Code.js'
+export * from './components/Eyebrow.js'
+export * from './components/Mono.js'
+export * from './components/Caption.js'
+export * from './components/BodyLg.js'
+export * from './components/Body.js'
+export * from './components/Label.js'
+export * from './components/Display1.js'
+export * from './components/Display2.js'
+export * from './components/H1.js'
+export * from './components/H2.js'
+export * from './components/H3.js'
+export * from './components/H4.js'
 export * from './components/Skeleton.js'
 export * from './components/Spinner.js'
 export * from './components/SkipLink.js'
@@ -157,4 +189,5 @@ export * from './components/SelectionToolbar.js'
 export * from './components/FilterBuilder.js'
 export * from './components/RankedList.js'
 export * from './components/GroupedList.js'
+export * from './components/PageHeader.js'
 export * from './icons.js'