@w5-ui/react 0.2.1 → 0.5.1

package/src/components/TablePager.tsx

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export interface TablePagerProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode
+}
+
+/**
+ * Sibling row that sits directly under a `<TableShell>` (or
+ * `<div className="table-shell">`) and carries the rows-per-page control on
+ * the left and the `<Pagination>` nav on the right. Renders the canonical
+ * `<div class="table-pager">` markup so the flex / space-between / 12 px top
+ * margin from `@w5-ui/tokens/dashboard.css` applies and userland drops the
+ * inline `style={{ display: 'flex', justifyContent: 'space-between', … }}`
+ * wrapper that every reference page used to ship.
+ *
+ * Typed equivalent of the manual `<div className="table-pager">` pattern
+ * documented in **Foundations / Tables**. Render it as a sibling of
+ * `<TableShell>` — never inside it — so the focus rings on the pager buttons
+ * are not clipped by `overflow: hidden`.
+ */
+export function TablePager({ className = '', children, ...rest }: TablePagerProps) {
+  return (
+    <div className={`table-pager ${className}`.trim()} {...rest}>
+      {children}
+    </div>
+  )
+}

package/src/components/TableShell.tsx

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export interface TableShellProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode
+}
+
+/**
+ * Rounded, bordered wrapper for any full-width `<table>` on a page. Carries the
+ * 8 px radius, `--neutral-09` background, single 1 px border and `overflow:
+ * hidden` clip so userland tables read like the reference Devices / Clients
+ * pages without inline `border` / `borderRadius` styles.
+ *
+ * Typed equivalent of `<div className="table-shell">` from
+ * `@w5-ui/tokens/dashboard.css`. Render the `<Pagination>` row as a sibling
+ * below, not inside, so its focus rings aren't clipped.
+ */
+export function TableShell({ className = '', children, ...rest }: TableShellProps) {
+  return (
+    <div className={`table-shell ${className}`.trim()} {...rest}>
+      {children}
+    </div>
+  )
+}

package/src/components/TagInput.tsx

@@ -61,7 +61,13 @@ export function TagInput({
   }
 
   return (
-    <div className={`tag-input-wrapper${className ? ` ${className}` : ''}`}>
+    // Click-to-focus lives on the presentational wrapper rather than the
+    // role="group" element, so a non-interactive ARIA role never carries a
+    // mouse handler.
+    <div
+      className={`tag-input-wrapper${className ? ` ${className}` : ''}`}
+      onClick={() => inputRef.current?.focus()}
+    >
       {label && (
         <label htmlFor={inputId} className="tag-input__label">
           {label}
@@ -72,7 +78,6 @@ export function TagInput({
         role="group"
         aria-label={label ?? 'Tags'}
         className={`tag-input${disabled ? ' tag-input--disabled' : ''}`}
-        onClick={() => inputRef.current?.focus()}
       >
         {tags.map((t, i) => (
           <Tag key={t} label={t} onRemove={disabled ? undefined : () => removeTag(i)} />

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'