@qeetrix/react 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,9 +1,89 @@
 # @qeetrix/react
 
+## 0.0.3
+
+The first two Phase 5 increments, from `@qeetrix/react/experimental`: C1, the console frame, and
+C2, secure entry. Experimental parts may change in a patch release; each moves to the root export
+once it has shipped in its product (07-components.md).
+
+### C1 · Console frame
+
+- **`AppShell`** (design B · Ruled, chosen from three researched concepts; 07-components.md):
+  - the frame of every Qeet console: a skip link, the sticky TopBar across the full width, the
+    navigation column on the canvas tone, the page, and an end-edge panel; every seam a 1px rule;
+  - from 840px the navigation collapses to a 48px rail (`sidebarCollapsed` /
+    `defaultSidebarCollapsed` / `onSidebarCollapsedChange`) that expands over the page while hovered
+    or focused; below 840px it opens as a drawer from the start edge;
+  - `drawers` (help, assistant, activity), opened from the TopBar's tools: one at a time, pushing
+    the page from 1200px; `notifications` above the page; `density`, compact by default;
+  - `useAppShell()` tells content inside the frame when the sidebar is a rail.
+- **`TopBar`, `TopBarSwitcher`, `TopBarSearch`:**
+  - black in light and dark (the dark scheme on itself), topped by a 2px Ember line;
+  - product to global, left to right: launcher cell, product, the scope path with drawn slashes,
+    centred search, panel triggers and utilities, account;
+  - `TopBarSwitcher` is a step of the path (organisation mark, environment status dot, always a
+    word) and works as a Menu trigger; `TopBarSearch` is a field-shaped button with its shortcut.
+- **`PageHeader`, `PageContent`:** breadcrumb, `title.lg` title with count and status, actions, a
+  `summary` strip bled to the page edges, and tabs at the foot; a 32px page gutter.
+- **`Stat`, `StatGroup`:** key numbers in ruled cells; numeric values formatted for the locale; an
+  optional decorative trend line whose last point is the Ember mark. Server-safe.
+- **`Sidebar`, `SidebarGroup`, `SidebarItem`:**
+  - links only, one level of nesting, every item in the Tab order;
+  - square rows edge to edge with round icons; the current page gets `aria-current`, the 3px Ember
+    bar, weight 600 and an Ember (optionally filled) icon;
+  - groups between hairlines under tracked small capitals (`typography.label.caps`; untracked for
+    Indic text, which has no case); an optional `title`, `filter` and `footer`;
+  - in the rail, icons stay where they are and labels become tooltips.
+- **`Breadcrumb`, `BreadcrumbItem`:** server-safe; mirrored chevrons; long labels truncate and keep a
+  title.
+- **`EmptyState`:** a 24px icon, a title (a heading when given a `level`), a description and actions,
+  in `page` or `section` size and `neutral` or `danger` tone. Server-safe.
+- **`DataState`:** loading, then error, then empty, then the content. The error state never shows the
+  raw error, and `onRetry` adds "Try again".
+- **Colour scheme:**
+  - `QeetrixProvider` takes `colorScheme`, `defaultColorScheme` and `onColorSchemeChange`, writes
+    `data-qx-color-scheme` on `<html>`, and follows the operating system while `system`;
+  - `useColorScheme()` returns the scheme and a setter. The product persists the choice.
+- **`Button` and `IconButton`:**
+  - a `neutral` tone for ghost utility actions in toolbars and headers, whose icons stay neutral
+    (design rules §16);
+  - a Button's icon sits in its own zone (the new `button-zone` slot), behind a 1px rule as tall as
+    the icon, in the label's colour (design rules §7).
+- **Strings:** new `appShell`, `sidebar`, `breadcrumb` and `dataState` groups, in English and Hindi.
+- **Peer dependency:** `@qeetrix/tokens` `^0.0.7`, for `typography.label.caps`. Since tokens 0.0.6
+  the stylesheet also loads Qeet Sans and Fira Code, so the tests now render in the real typefaces.
+- **Source check:** every `var(--qx-*)` must name a token in the installed `@qeetrix/tokens` or a
+  property the package declares itself, so a token from a newer tokens release can't ship
+  unresolved.
+- **Platform:**
+  - the CSS build, the dist check and the screenshot coverage test understand
+    `src/experimental/<family>/`;
+  - the test helper treats cancelled animations as settled.
+
+### C2 · Secure entry
+
+- **`CopyButton`:** copies a value (or what a function returns, even asynchronously); the icon
+  turns into a check, "Copied" is announced politely, focus stays, and it resets after 2 seconds.
+  It fails visibly where there's no clipboard. An IconButton named by `label`, or a Button with a
+  visible label.
+- **`Alert`:** `info`, `success`, `warning` or `danger` on the status tint with the 3px status edge;
+  a title (led by a hidden tone word), a description, actions and an optional Dismiss. `announce`
+  makes it `role="status"` or `role="alert"` only when it appears after something happens. It never
+  takes focus or disappears by itself.
+- **`PasswordInput`:** an Input with a pressed-state Show password toggle, announced; hidden by
+  default and hidden again when its form submits; `current-password` / `new-password` / `off`;
+  spelling and capitalisation tools off; a Caps Lock warning; `endAdornment` for a CopyButton.
+- **`OTPInput`:** one-time codes in slots on Base UI's OTP Field: typing moves on, paste fills
+  every slot, SMS autofill lands at once; numeric by default; `groups`, `md` and `lg` sizes; the
+  first slot takes the field's label, the rest are "Character 2 of 6".
+- **Strings:** new `copyButton`, `alert`, `passwordInput` and `otpInput` groups, in English and
+  Hindi.
+
 ## 0.0.2
 
 Every primitive, in six increments: the foundation, actions, form controls, overlays, selection and
-disclosure, and display and status.
+disclosure, and display and status. Then the Phase 4 close-out: localisation, forced colours,
+right-to-left, reduced motion and the sign-in exit screen.
 
 ### Foundation
 
@@ -160,8 +240,43 @@ content part that assembles the portal, positioner and popup.
 - **`Skeleton`:** `text`, `block` or `circle`. It pulses, holds still under reduced motion, and is
   always hidden from assistive technology. Server-safe.
 
+### Phase 4 close-out
+
+- **`QeetrixProvider`:**
+  - `locale` (default `en-IN`) for formatting;
+  - `direction`, which wraps Base UI's DirectionProvider;
+  - `messages`, merged over the English defaults group by group.
+  - Nested providers inherit what they don't set. `useLocale()` reads the locale.
+- **Strings:**
+  - every library string comes from one typed catalogue (`QeetrixMessages`);
+  - Field, TextField, DialogContent, DrawerContent, ToastProvider, Slider and Link take a `messages`
+    prop that wins over the provider;
+  - Link stays server-safe, so it takes its string per instance.
+- **Locale packs:** Hindi (`@qeetrix/react/locales/hi`) is the first. It's a separate entry point,
+  typed as the complete catalogue, and uses Qeet ID's own Hindi words.
+- **Formatting:** `formatNumber`, `formatCurrency` (lakh and crore grouping by default) and
+  `formatRelativeTime`. They're pure, server-safe and cache their formatters. Slider, Progress and
+  Meter format in the provider's locale.
+- **Forced colours (Windows High Contrast):**
+  - surfaces that showed only a fill or a shadow get a system-colour edge;
+  - on states use `Highlight`: pressed Toggle, Switch, checked Checkbox, the Slider and Progress
+    fills, the Tabs bar, and highlighted Menu and Select items;
+  - separators and the tab list's base line stay visible.
+- **Right-to-left:** tests cover arrow keys in Tabs, ToggleGroup, RadioGroup, Slider and the Menu
+  submenu, plus the Drawer edge, the Menu bar side and the Input adornment order.
+- **Reduced motion:** a test checks that durations collapse and that Spinner and indeterminate
+  Progress fade instead.
+- **Slider:** a slider named by `aria-label` (no visible label) now passes the name on to its
+  thumbs, which are what carry the slider role. A range adds Minimum and Maximum.
+- **Sign-in exit screen:** built from primitives alone. Its keyboard order, axe, and its light,
+  dark, right-to-left and forced-colours screenshots are all tested.
+
 ### Platform
 
+- **Source check:**
+  - it bans physical CSS properties and system colours outside forced-colours blocks;
+  - it ignores comments when looking for client-only code.
+
 - Each family's stylesheet (`css/<family>.css`) now imports the base layer and the stylesheets of
   the families it renders, so it works on its own.
 - Screenshots wait for transitions to finish, and overlays are captured across the whole viewport.

package/README.md

@@ -127,6 +127,105 @@ import { Checkbox, CheckboxGroup, Fieldset, Radio, RadioGroup, TextField } from
 </Fieldset>
 ```
 
+## Locale, direction and strings
+
+Wrap the app in `QeetrixProvider` to set the locale (used for formatting), the reading direction and
+the library's own strings ("Close", "(optional)", "Loading"…). Locale packs are separate imports, so
+a language you don't use never ships:
+
+```tsx
+import { QeetrixProvider } from "@qeetrix/react";
+import { hi } from "@qeetrix/react/locales/hi";
+
+<QeetrixProvider locale="hi-IN" messages={hi}>{app}</QeetrixProvider>
+```
+
+- **Override one string:** pass a `messages` prop to the component, e.g.
+  `<Field messages={{ optional: "(if any)" }}>`.
+- **Right-to-left:** use `direction="rtl"`, and set `dir="rtl"` on `<html>` too.
+- **Server-safe components** (Link, Spinner, SkipLink) can't read the provider. Pass their strings
+  per instance.
+
+Formatting helpers are plain functions and work on the server too:
+
+```ts
+import { formatCurrency, formatNumber, formatRelativeTime } from "@qeetrix/react";
+
+formatCurrency(124500, "INR");        // "₹1,24,500.00"
+formatNumber(1234567);                // "12,34,567"
+formatRelativeTime(updatedAt, "en-IN", now); // "2 minutes ago"
+```
+
+Every primitive also works in Windows High Contrast (forced colours) and under reduced motion. Tests
+emulate both.
+
+## Experimental: the console frame
+
+Components and patterns in their first product ship from `@qeetrix/react/experimental`. They may
+change in a patch release until they're Ready.
+
+```tsx
+import {
+  AppShell, PageContent, PageHeader, Sidebar, SidebarGroup, SidebarItem, Stat, StatGroup,
+  TopBar, TopBarSearch, TopBarSwitcher,
+} from "@qeetrix/react/experimental";
+import { Menu, MenuContent, MenuItem, MenuTrigger } from "@qeetrix/react";
+
+<AppShell
+  topBar={
+    <TopBar
+      logo={<QeetLogo variant="dark" height={20} />}
+      product="Qeet ID"
+      context={
+        <>
+          <Menu>
+            <MenuTrigger render={<TopBarSwitcher mark="AC" label="Acme Pvt Ltd" />} />
+            <MenuContent>{organisations}</MenuContent>
+          </Menu>
+          <TopBarSwitcher status="success" label="Production" />
+        </>
+      }
+      search={<TopBarSearch placeholder="Search or jump to…" shortcut={["⌘", "K"]} onClick={openPalette} />}
+      account={accountMenu}
+    />
+  }
+  sidebar={
+    <Sidebar label="Qeet ID">
+      <SidebarGroup label="Directory">
+        <SidebarItem label="Users" icon={UsersIcon} current render={<Link to="/users" />} />
+      </SidebarGroup>
+    </Sidebar>
+  }
+  drawers={[{ id: "help", label: "Help", icon: CircleQuestionMarkIcon, content: help }]}
+>
+  <PageHeader
+    title="Users"
+    actions={<Button icon={PlusIcon}>Invite users</Button>}
+    summary={
+      <StatGroup>
+        <Stat label="Total users" value={1284} note="+38 this week" tone="positive" trend={weekly} />
+      </StatGroup>
+    }
+  />
+  <PageContent>{table}</PageContent>
+</AppShell>
+```
+
+The bar is black in light and dark, topped by a 2px Ember line; the navigation collapses to a 48px
+rail that expands while hovered. Also there: `Breadcrumb`, `EmptyState` and `DataState` (loading,
+error, empty, content), and the secure-entry parts:
+
+```tsx
+<Alert tone="warning" title="Copy this client secret now">It can't be shown again.</Alert>
+<Field label="Client secret">
+  <PasswordInput readOnly autoComplete="off" defaultValue={secret}
+    endAdornment={<CopyButton value={secret} label="Copy client secret" size="sm" />} />
+</Field>
+<Field label="Verification code"><OTPInput size="lg" onValueComplete={verify} /></Field>
+```
+ Colour-scheme switching lives in `QeetrixProvider`
+(`defaultColorScheme="system"`, `useColorScheme()`).
+
 ## Overlays
 
 Overlays share one shape: a root that holds the state, a trigger that renders your control, and a

package/dist/button/button.d.ts

@@ -2,11 +2,15 @@ import { ControlSize, QeetrixIcon } from "../internal/control.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 import { Button } from "@base-ui/react/button";
 export type ButtonVariant = "solid" | "soft" | "ghost";
-export type ButtonTone = "brand" | "danger";
+export type ButtonTone = "brand" | "danger" | "neutral";
 interface ButtonBaseProps extends Omit<ComponentProps<"button">, "children"> {
   /** Emphasis: `solid` (primary, Ember), `soft` (secondary, graphite), `ghost` (tertiary). */
   variant?: ButtonVariant;
-  /** `danger` for the confirming action of a destructive flow. */
+  /**
+   * `danger` for the confirming action of a destructive flow. `neutral` for ghost utility actions
+   * in toolbars and headers, whose icons stay neutral (design rules §16); a solid or soft neutral
+   * button looks like the soft one.
+   */
   tone?: ButtonTone;
   /** Height from the density tokens. Default `md`. */
   size?: ControlSize;

package/dist/button/button.js

@@ -43,7 +43,11 @@ function Button$1({ variant = "solid", tone = "brand", size = "md", icon, loadin
 			className: "qx-button-label",
 			"data-slot": "button-label",
 			children
-		}), content(icon, size, loading)]
+		}), (icon || loading) && /* @__PURE__ */ jsx("span", {
+			className: "qx-button-zone",
+			"data-slot": "button-zone",
+			children: content(icon, size, loading)
+		})]
 	});
 }
 /**

package/dist/css/avatar.css

@@ -41,4 +41,10 @@
     block-size: 100%;
     inline-size: 100%;
   }
+  
+  @media (forced-colors: active) {
+    .qx-avatar {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
 }

package/dist/css/badge.css

@@ -50,4 +50,10 @@
     min-inline-size: 0;
     overflow: hidden;
   }
+  
+  @media (forced-colors: active) {
+    .qx-badge {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
 }

package/dist/css/button.css

@@ -18,8 +18,8 @@
     border: 0;
     justify-content: space-between;
     align-items: center;
-    gap: 24px;
-    padding-inline: 14px 12px;
+    gap: 12px;
+    padding-inline: 14px 0;
     text-decoration: none;
     display: inline-flex;
     position: relative;
@@ -33,8 +33,8 @@
     block-size: var(--qx-size-control-sm);
     font-size: var(--qx-typography-label-sm-font-size);
     line-height: var(--qx-typography-label-sm-line-height);
-    gap: 16px;
-    padding-inline: 10px 8px;
+    gap: 8px;
+    padding-inline: 10px 0;
   }
   
   .qx-button[data-size="sm"]:not([data-icon]):not([data-loading]) {
@@ -43,8 +43,8 @@
   
   .qx-button[data-size="lg"] {
     block-size: var(--qx-size-control-lg);
-    gap: 32px;
-    padding-inline: 16px 14px;
+    gap: 14px;
+    padding-inline: 16px 0;
   }
   
   .qx-button[data-size="lg"]:not([data-icon]):not([data-loading]) {
@@ -115,6 +115,24 @@
     background: var(--qx-color-bg-danger-subtle);
   }
   
+  .qx-button[data-tone="neutral"][data-variant="ghost"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-subtle);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+  }
+  
+  .qx-button[data-tone="neutral"]:not([data-variant="ghost"]) {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
   .qx-button[data-disabled]:not([data-loading]) {
     background: var(--qx-color-bg-disabled);
     color: var(--qx-color-text-disabled);
@@ -146,6 +164,43 @@
     flex: none;
   }
   
+  .qx-button-zone {
+    flex: none;
+    align-self: stretch;
+    place-items: center;
+    padding-inline: 10px;
+    display: grid;
+    position: relative;
+  }
+  
+  .qx-button-zone:before {
+    content: "";
+    inline-size: var(--qx-border-width-default);
+    block-size: var(--qx-size-icon-sm);
+    opacity: .55;
+    background: currentColor;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    translate: 0 -50%;
+  }
+  
+  .qx-button[data-size="sm"] > .qx-button-zone {
+    padding-inline: 8px;
+  }
+  
+  .qx-button[data-size="sm"] > .qx-button-zone:before {
+    block-size: var(--qx-size-icon-xs);
+  }
+  
+  .qx-button[data-size="lg"] > .qx-button-zone {
+    padding-inline: 12px;
+  }
+  
+  .qx-button[data-size="lg"] > .qx-button-zone:before {
+    block-size: var(--qx-size-icon-md);
+  }
+  
   .qx-icon-button {
     inline-size: var(--qx-size-control-md);
     justify-content: center;
@@ -165,4 +220,24 @@
   .qx-icon-button:not([data-icon]):not([data-loading]) {
     padding-inline: 0;
   }
+  
+  @media (forced-colors: active) {
+    .qx-button {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-button[data-disabled]:not([data-loading]) {
+      color: graytext;
+      border-color: graytext;
+    }
+  
+    .qx-button-zone:before {
+      opacity: 1;
+      background: buttontext;
+    }
+  
+    .qx-button[data-disabled]:not([data-loading]) .qx-button-zone:before {
+      background: graytext;
+    }
+  }
 }

package/dist/css/checkbox.css

@@ -55,4 +55,13 @@
   .qx-checkbox-mark {
     display: flex;
   }
+  
+  @media (forced-colors: active) {
+    .qx-checkbox:is([data-checked], [data-indeterminate]):not([data-disabled]) {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+  }
 }

package/dist/css/dialog.css

@@ -118,4 +118,11 @@
     inset-block-start: 12px;
     inset-inline-end: 12px;
   }
+  
+  @media (forced-colors: active) {
+    .qx-dialog {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-block-start-width: var(--qx-border-width-accent);
+    }
+  }
 }

package/dist/css/drawer.css

@@ -120,4 +120,10 @@
     inset-block-start: 20px;
     inset-inline-end: 16px;
   }
+  
+  @media (forced-colors: active) {
+    .qx-drawer {
+      border-inline: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
 }

package/dist/css/experimental/alert.css

@@ -0,0 +1,89 @@
+@import "../base.css";
+@import "../button.css";
+@import "../visually-hidden.css";
+
+@layer qx.components {
+  .qx-alert {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-sm) var(--qx-space-inset-md)
+      var(--qx-space-inset-md);
+    border-inline-start: var(--qx-border-width-accent) solid var(--qx-color-icon-info);
+    background: var(--qx-color-bg-info-subtle);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    display: flex;
+  }
+  
+  .qx-alert[data-tone="success"] {
+    border-inline-start-color: var(--qx-color-icon-success);
+    background: var(--qx-color-bg-success-subtle);
+  }
+  
+  .qx-alert[data-tone="warning"] {
+    border-inline-start-color: var(--qx-color-icon-warning);
+    background: var(--qx-color-bg-warning-subtle);
+  }
+  
+  .qx-alert[data-tone="danger"] {
+    border-inline-start-color: var(--qx-color-icon-danger);
+    background: var(--qx-color-bg-danger-subtle);
+  }
+  
+  .qx-alert-icon {
+    color: var(--qx-color-icon-info);
+    flex: none;
+    margin-block-start: 2px;
+  }
+  
+  [data-tone="success"] > .qx-alert-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  [data-tone="warning"] > .qx-alert-icon {
+    color: var(--qx-color-icon-warning);
+  }
+  
+  [data-tone="danger"] > .qx-alert-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-alert-body {
+    min-inline-size: 0;
+    flex-direction: column;
+    flex: 1;
+    gap: 2px;
+    padding-inline-end: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-alert-title {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-alert-description {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-alert-actions {
+    gap: var(--qx-space-gap-sm);
+    flex-wrap: wrap;
+    margin-block-start: var(--qx-space-gap-sm);
+    display: flex;
+  }
+  
+  .qx-alert-dismiss {
+    flex: none;
+    margin-block: -2px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-alert {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-inline-start: var(--qx-border-width-accent) solid CanvasText;
+    }
+  }
+}