@qeetrix/react 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,178 @@
 # @qeetrix/react
 
+## 0.0.2
+
+Every primitive, in six increments: the foundation, actions, form controls, overlays, selection and
+disclosure, and display and status.
+
+### Foundation
+
+All nine are server-safe and render in React Server Components.
+
+- **Layout:**
+  - `Box`: a token-only surface (padding, background, border, corners);
+  - `Stack` and `Inline`: vertical and horizontal flows with token gaps;
+  - `Grid`: responsive equal columns on the window size classes.
+- **Type:**
+  - `Text`: body roles, weights, tones, monospace, truncation;
+  - `Heading`: the level sets the element, the size sets the look; Geo letterforms for display.
+- **`Separator`:** 1px, horizontal or vertical, optionally decorative.
+- **Accessibility:**
+  - `VisuallyHidden`: screen-reader-only content;
+  - `SkipLink`: the first focusable element on a page, hidden until focused.
+- **Shared types:** `Space`, `Inset`, `TextAlign`, `RenderProp`.
+- **Imports:** every component also has its own entry point (`@qeetrix/react/stack`) and stylesheet
+  (`@qeetrix/react/css/stack.css`).
+
+### Actions
+
+- **`Button`** (on Base UI Button):
+  - the label comes first, with an optional sharp trailing icon;
+  - variants `solid` (Ember primary), `soft` (warm-graphite secondary) and `ghost`; tones `brand` and
+    `danger`; sizes that follow the density;
+  - `loading` sets `aria-busy` and shows a spinner in the icon's place;
+  - a disabled button stays focusable, so its reason can be read.
+- **`IconButton`:** square and icon-only; its `aria-label` is required by its type.
+- **`Link`:** default, subtle and inherit tones. `external` opens a new tab with
+  `rel="noopener noreferrer"`, an arrow mark and a screen-reader note.
+- **`Toggle` and `ToggleGroup`** (on Base UI):
+  - pressed state with `onPressedChange`, and `filledWhenPressed` swaps to the icon's filled drawing;
+  - groups are segmented or separate, single-choice or `multiple`, with arrow-key focus.
+- **`Spinner`:** four sizes. It is announced as a status unless `decorative`, and fades instead of
+  spinning under reduced motion.
+- **Shared types:** `ControlSize`, `QeetrixIcon`.
+- **Dependencies:**
+  - new peer `@base-ui/react` ^1.9.0;
+  - new dependency `@qeetrix/icons` ^1.0.12, for the external-link mark.
+
+### Form controls
+
+All are client components on Base UI's Field, Fieldset, Input, Checkbox, Radio Group and Switch, so
+labels, descriptions and errors link to their controls without ids. On every form control, `ref` and
+extra props go to the control, while `className` and `style` place the row.
+
+- **`Field`:**
+  - a label, help text and error around any control;
+  - `optional` adds "(optional)", and Qeetrix never marks required fields;
+  - `error` shows a message now (from the server, say) and marks the field invalid. Without it, the
+    browser's or `validate`'s message shows with a sharp alert icon;
+  - the error replaces the help text;
+  - `hideLabel` is for toolbar searches only.
+- **`Input`:** the filled box with a bottom line, a leading `icon`, and start and end adornments.
+  It takes its focus, invalid, read-only and disabled looks from the input.
+- **`Textarea`:** the same look. It grows with its content between `rows` and `maxRows` through CSS
+  `field-sizing`, with no script.
+- **`TextField`:** Field and Input in one, the default form row.
+- **`Fieldset`:** a section of fields under a `title.sm` legend, spaced by the density's form gap.
+  `disabled` disables everything inside.
+- **`Checkbox` and `CheckboxGroup`:**
+  - the 16px box with a sharp tick, and the mixed state with a dash;
+  - a `parent` checkbox selects the whole group;
+  - the label row is at least 24px tall.
+- **`Radio` and `RadioGroup`:** the 5px Ember ring. Arrow keys move and select, and RadioGroup is
+  generic over its value type.
+- **`Switch`:** a 32×18 track with a square thumb that moves to the end side, in either text
+  direction.
+- With no visible label, Checkbox, Radio and Switch require `aria-label` or `aria-labelledby` by
+  their type.
+- **Shared types:** `FieldMessageProps`, `ChoiceLabelProps`, `ChoiceOrientation`.
+
+### Overlays
+
+All are client components on Base UI. Each has a root, a trigger that renders your control, and a
+content part that assembles the portal, positioner and popup.
+
+- **`Popover`:** an anchored panel with an optional title and description. Focus moves in on open
+  and returns to the trigger on close.
+- **`Tooltip`:** one component around its trigger. It opens after 500ms of hover or at once on
+  focus. `TooltipProvider` groups neighbours, so the next one opens at once.
+- **`Menu`:**
+  - items with sharp icons, shortcuts and a `danger` tone;
+  - checkbox and radio items in a 16px mark column;
+  - group labels, separators and submenus;
+  - the 2px Ember start bar on the highlighted item, which follows the text direction.
+- **`Dialog`:**
+  - `intent` is `standard`, `danger` or `warning`, the last two as alert dialogs with a red or amber
+    intent line;
+  - `dismissible`, off by default for `danger`, so only its actions close it;
+  - sizes 400, 560 and 800px;
+  - the close button comes last in the focus order, so a dialog opens on its first field or its
+    least destructive action.
+- **`Drawer`:**
+  - a full-height side panel at the `end` or `start` edge;
+  - ruled header and footer, and a scrolling body;
+  - focus goes to the first field, except on touch;
+  - it can be swiped away.
+- **`ToastProvider` and `useToast`:**
+  - `add`, `close`, `update` and `promise`;
+  - tones `info`, `success`, `warning` and `danger`, each with a 3px status edge and a sharp icon;
+  - one action at most;
+  - `danger` toasts stay until dismissed and are announced at once.
+- **`IconButton`** now shows its `aria-label` as a tooltip. `tooltip={false}` turns it off, and
+  other text replaces it.
+- **Stacking:** anchored layers use `z.popover`, so a menu opened in a dialog sits above it.
+
+### Selection and disclosure
+
+- **`Select`:**
+  - a field-style trigger with a chevron, and a menu-style list below it;
+  - the chosen option carries an Ember check;
+  - `items` can be flat or grouped, and `multiple` lists the chosen labels;
+  - generic over the value. A Field labels it.
+- **`Tabs`, `TabsList`, `Tab`, `TabsPanel`:**
+  - the 3px Ember bar slides under the selected tab, and `TabsList` draws it;
+  - a selected tab has weight 600 and can fill its icon;
+  - padding is 12px at compact density and 16px otherwise;
+  - `activateOnFocus` is on by default;
+  - vertical tabs carry the line and bar on the start edge.
+- **`Slider`:**
+  - a 4px track, the Ember range, and a 16px square thumb ringed in the surface colour;
+  - `label` and `showValue` with `Intl` formatting;
+  - a range renders one thumb per value, named Minimum and Maximum.
+- **`Accordion`, `AccordionItem`:**
+  - ruled sections with a `title.sm` trigger inside a heading (`headingLevel`), and a turning
+    chevron;
+  - the panel's height animates;
+  - find in page opens a closed section that holds the match.
+- **`Collapsible`, `CollapsibleTrigger`, `CollapsiblePanel`:** one unruled section.
+- **`ScrollArea`:** 8px scrollbars that show on hover, while scrolling and on keyboard focus. The
+  region takes focus when it overflows.
+
+### Display and status
+
+- **`Card`:**
+  - a raised surface with a 1px line, 4px corners and no shadow;
+  - a ruled header with `title`, the required heading `level`, `description` and `actions`, and an
+    optional ruled `footer`;
+  - a titled card is a section labelled by its title, and a table in the body runs edge to edge.
+  - Server-safe.
+- **`Table`, `TableCaption`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`:**
+  - a neutral header band and row heights from the density;
+  - `numeric` cells use tabular figures, end-aligned;
+  - `selected` rows keep their Ember tint under the pointer.
+  - Server-safe.
+- **`Badge`:** pills in six tones with an optional sharp icon. The `brand` fill is
+  `bg.brand.subtle`, so its text meets AA. Server-safe.
+- **`Avatar`:** a circle with the photo, or initials while it loads or when it fails. The initials
+  use whole graphemes, so Indic names stay intact. It can be `decorative`.
+- **`Progress` and `Meter`:** Slider's header, a 4px track and an Ember indicator (Meter takes a
+  status tone). Indeterminate progress slides, and fades under reduced motion.
+- **`Skeleton`:** `text`, `block` or `circle`. It pulses, holds still under reduced motion, and is
+  always hidden from assistive technology. Server-safe.
+
+### Platform
+
+- 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.
+  The accessibility check also waits, since contrast measured mid-fade isn't real. It skips Base
+  UI's aria-hidden focus guards, which hand focus on the moment it lands.
+- A type-only import between families no longer pulls in the other family's stylesheet.
+- Screenshots freeze endless animations (spinner, skeleton, indeterminate progress), so they match
+  every run.
+- The nightly Firefox and WebKit run tests without V8 coverage, which works only in Chromium.
+  Every browser test passes in all three engines.
+
 ## 0.0.1
 
 The engineering platform, with no components yet:

package/README.md

@@ -3,16 +3,19 @@
 The React components of **Qeetrix**, the Qeet Group design system: accessible, token-driven
 primitives built on [Base UI](https://base-ui.com), styled by the Qeetrix design language.
 
-> **Status: 0.0.x, platform only.** This release sets up the build, the stylesheet and the quality
-> gates. The first primitives (layout, text, separator and accessibility utilities) arrive in the
-> next increment.
+> **Status: 0.0.x.** Every primitive is here: foundation, actions, form controls, overlays, selection
+> and disclosure, and display and status. Components and patterns follow as Qeet products ask for
+> them.
 
 ## Install
 
 ```bash
-bun add @qeetrix/react @qeetrix/tokens
+bun add @qeetrix/react @qeetrix/tokens @base-ui/react @qeetrix/icons
 ```
 
+`@base-ui/react` powers the interactive components. Icons come from `@qeetrix/icons`: a component's
+`icon` prop takes any of its icons, e.g. `icon={PlusIcon}`.
+
 ## Styles
 
 Load the tokens, then the component styles, once at the root of your app:
@@ -26,6 +29,140 @@ The stylesheet is precompiled. Your Tailwind setup doesn't need to scan this pac
 utility classes. Qeetrix styles sit in the `qx.base` and `qx.components` cascade layers, so your own
 layout utilities override them without `!important`.
 
+## Use
+
+```tsx
+import { PlusIcon } from "@qeetrix/icons/icons/plus";
+import { Box, Button, Grid, Heading, Inline, SkipLink, Stack, Text } from "@qeetrix/react";
+
+export function Invoices() {
+  return (
+    <>
+      <SkipLink />
+      <main id="main">
+        <Stack gap="xl">
+          <Inline justify="between">
+            <Heading level={1}>Invoices</Heading>
+            <Button icon={PlusIcon}>New invoice</Button>
+          </Inline>
+          <Grid columns={{ base: 1, medium: 2, large: 3 }} gap="md">
+            <Box padding="lg" background="raised" border="default" radius="surface">
+              <Text tone="subtle">Due this month</Text>
+            </Box>
+          </Grid>
+        </Stack>
+      </main>
+    </>
+  );
+}
+```
+
+- **Server-safe:** layout, type, `Link`, `Spinner`, `Card`, `Table`, `Badge` and `Skeleton` render in
+  React Server Components. Everything built on Base UI is a client component; its `"use client"`
+  directive ships in the build.
+- **`render` prop:** renders a different element with the same props, e.g. `render={<section />}`.
+- **Per-component entry points:** `@qeetrix/react/stack`, plus its own stylesheet at
+  `@qeetrix/react/css/stack.css` if you'd rather not load the full one. A family's stylesheet brings
+  the base styles and those of the components it renders (`css/text-field.css` brings Field and
+  Input).
+
+| Component | For |
+|---|---|
+| `Box` | A token-only surface: padding, background, border, corners |
+| `Stack`, `Inline` | Vertical and horizontal flows with token gaps (`none` … `4xl`) |
+| `Grid` | Equal columns per window size class (600 / 840 / 1200 / 1600px) |
+| `Text` | Body text: size, weight, tone, monospace, truncation |
+| `Heading` | `level` sets h1–h6; `size` sets the look (display, heading, title) |
+| `Separator` | A 1px line, horizontal or vertical |
+| `VisuallyHidden` | Content for screen readers only |
+| `SkipLink` | "Skip to main content", hidden until focused |
+| `Button` | Label first, an optional trailing icon; solid (primary), soft (secondary), ghost; brand or danger; `loading` |
+| `IconButton` | A square, icon-only button; `aria-label` is required by its type and shows as a tooltip |
+| `Link` | Inline navigation; `external` opens a new tab safely and says so to screen readers |
+| `Toggle`, `ToggleGroup` | Pressed or not; segmented or separate groups, single or `multiple` |
+| `Spinner` | An indeterminate wait, announced as a status unless `decorative` |
+| `TextField` | Label, input, help text and error in one: the default form row |
+| `Field` | The label, help text and error around any control; `optional` adds "(optional)" |
+| `Input`, `Textarea` | The filled text box with a bottom line; Textarea grows with its content |
+| `Fieldset` | A section of fields under a heading, spaced by the density's form gap |
+| `Checkbox`, `CheckboxGroup` | On/off or several of a set; mixed state; a `parent` checkbox selects all |
+| `Radio`, `RadioGroup` | One of a set; arrow keys move and select |
+| `Switch` | A setting that applies at once |
+| `Popover` | A panel anchored to a trigger: filters, details, a short form |
+| `Tooltip` | A short label for a control; `TooltipProvider` groups neighbours |
+| `Menu` | Actions and options from a trigger: icons, shortcuts, checkbox and radio items, submenus |
+| `Dialog` | A focused task or decision; `intent="danger"` makes a confirmation only its actions close |
+| `Drawer` | A side panel for details or an edit form, swipeable on touch |
+| `ToastProvider`, `useToast` | Brief notifications with a status edge; errors stay until dismissed |
+| `Select` | One option, or several, from up to about 15; looks like a field, opens like a menu |
+| `Tabs` | Views of one context, with the sliding Ember bar |
+| `Slider` | A number or a range on a scale, with a formatted value |
+| `Accordion`, `Collapsible` | Ruled sections, or one section, that show and hide |
+| `ScrollArea` | A scrolling region with Qeetrix scrollbars |
+| `Card` | A raised, ruled surface with a title, actions and footer; a table inside runs edge to edge |
+| `Table` | Semantic table parts with the header band, density row heights and selected rows |
+| `Badge` | A static status pill in six tones |
+| `Avatar` | A person's photo, or their initials |
+| `Progress`, `Meter` | A task advancing, or a measurement within a range |
+| `Skeleton` | A placeholder shaped like the content that's loading |
+
+**Layout:** `className` is for placement only (margin, width, grid placement). Visual changes go
+through props, so every Qeet product looks the same. On a form control, `className` and `style` place
+the whole row, while `ref` and every other prop go to the control itself.
+
+```tsx
+import { Checkbox, CheckboxGroup, Fieldset, Radio, RadioGroup, TextField } from "@qeetrix/react";
+
+<Fieldset legend="Company">
+  <TextField label="Trade name" name="tradeName" optional />
+  <TextField label="GSTIN" name="gstin" required description="15 characters." />
+  <RadioGroup label="Billing cycle" name="cycle" defaultValue="monthly">
+    <Radio value="monthly" label="Monthly" />
+    <Radio value="yearly" label="Yearly" description="Two months free." />
+  </RadioGroup>
+  <CheckboxGroup label="Notify me by" name="notify" orientation="horizontal">
+    <Checkbox value="email" label="Email" />
+    <Checkbox value="sms" label="SMS" />
+  </CheckboxGroup>
+</Fieldset>
+```
+
+## Overlays
+
+Overlays share one shape: a root that holds the state, a trigger that renders your control, and a
+content part that assembles everything else. Wrap the app once in `ToastProvider` (and, if you like,
+`TooltipProvider`).
+
+```tsx
+import {
+  Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogTrigger, useToast,
+} from "@qeetrix/react";
+
+function RevokeKey({ onRevoke }: { onRevoke: () => Promise<void> }) {
+  const toast = useToast();
+  return (
+    <Dialog intent="danger">
+      <DialogTrigger render={<Button tone="danger">Revoke key</Button>} />
+      <DialogContent title="Revoke this API key?" description="Apps using it stop working at once.">
+        <DialogFooter>
+          <DialogClose render={<Button variant="ghost">Cancel</Button>} />
+          <DialogClose
+            render={<Button tone="danger">Revoke key</Button>}
+            onClick={() =>
+              toast.promise(onRevoke(), {
+                loading: { title: "Revoking…" },
+                success: { title: "Key revoked" },
+                error: { title: "Couldn't revoke the key" },
+              })
+            }
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
 ## License
 
 [MIT](https://github.com/qeetgroup/qeetrix-react/blob/main/LICENSE) © Qeet Group

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,42 @@
+import { HeadingLevel } from "../heading/heading.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+export interface AccordionProps<Value = string> extends Omit<Accordion.Root.Props<Value>, "className" | "style"> {
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+}
+export interface AccordionItemProps extends Omit<Accordion.Item.Props, "className" | "style" | "title" | "children"> {
+  /** The section's title: the trigger's text. */
+  title: ReactNode;
+  /** The heading level that wraps the trigger. Default 3. */
+  headingLevel?: Exclude<HeadingLevel, 1>;
+  /** The section's content. */
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export type CollapsibleProps = Collapsible.Root.Props;
+export type CollapsibleTriggerProps = Collapsible.Trigger.Props;
+export interface CollapsiblePanelProps extends Omit<Collapsible.Panel.Props, "className" | "style"> {
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * Stacked sections that show and hide, ruled between (06-component-specs.md, increment 5):
+ * `value` / `defaultValue` / `onValueChange(value[], details)`, `multiple`, `disabled`.
+ */
+declare function Accordion$1<Value = string>({ className, ...props }: AccordionProps<Value>): ReactElement;
+/**
+ * One section: a full-width trigger with a chevron, inside a heading, then the panel. Find in page
+ * opens a closed section that holds the match.
+ */
+export declare function AccordionItem({ title, headingLevel, className, children, ...props }: AccordionItemProps): ReactElement;
+/** One section without the rules, for "Show more" or advanced options. */
+declare function Collapsible$1(props: CollapsibleProps): ReactElement;
+/** Shows and hides the panel. Render your own control: `render={<Button variant="ghost" />}`. */
+export declare function CollapsibleTrigger(props: CollapsibleTriggerProps): ReactElement;
+/** The content that shows and hides, with the accordion's height animation. */
+export declare function CollapsiblePanel({ className, ...props }: CollapsiblePanelProps): ReactElement;
+export { Accordion$1 as Accordion, Collapsible$1 as Collapsible };

package/dist/accordion/accordion.js

@@ -0,0 +1,72 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { Accordion } from "@base-ui/react/accordion";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ChevronDownIcon } from "@qeetrix/icons/icons/chevron-down";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/accordion/accordion.tsx
+/**
+* Stacked sections that show and hide, ruled between (06-component-specs.md, increment 5):
+* `value` / `defaultValue` / `onValueChange(value[], details)`, `multiple`, `disabled`.
+*/
+function Accordion$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		...props,
+		className: cx("qx-accordion", className),
+		"data-slot": "accordion"
+	});
+}
+/**
+* One section: a full-width trigger with a chevron, inside a heading, then the panel. Find in page
+* opens a closed section that holds the match.
+*/
+function AccordionItem({ title, headingLevel = 3, className, children, ...props }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs(Accordion.Item, {
+		...props,
+		className: cx("qx-accordion-item", className),
+		"data-slot": "accordion-item",
+		children: [/* @__PURE__ */ jsx(Accordion.Header, {
+			render: /* @__PURE__ */ jsx(Heading, {}),
+			className: "qx-accordion-header",
+			children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+				className: "qx-accordion-trigger",
+				"data-slot": "accordion-trigger",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "qx-accordion-title",
+					children: title
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+					shape: "sharp",
+					size: 16,
+					"aria-hidden": true,
+					className: "qx-accordion-icon"
+				})]
+			})
+		}), /* @__PURE__ */ jsx(Accordion.Panel, {
+			hiddenUntilFound: true,
+			className: "qx-accordion-panel",
+			"data-slot": "accordion-panel",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "qx-accordion-content",
+				children
+			})
+		})]
+	});
+}
+/** One section without the rules, for "Show more" or advanced options. */
+function Collapsible$1(props) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, { ...props });
+}
+/** Shows and hides the panel. Render your own control: `render={<Button variant="ghost" />}`. */
+function CollapsibleTrigger(props) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, { ...props });
+}
+/** The content that shows and hides, with the accordion's height animation. */
+function CollapsiblePanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		...props,
+		className: cx("qx-collapsible-panel", className),
+		"data-slot": "collapsible-panel"
+	});
+}
+export { Accordion$1 as Accordion, AccordionItem, Collapsible$1 as Collapsible, CollapsiblePanel, CollapsibleTrigger };

package/dist/accordion/index.d.ts

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionItemProps, AccordionProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./accordion.js";
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Collapsible, CollapsiblePanel, type CollapsiblePanelProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./accordion.js";

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,21 @@
+import { Avatar } from "@base-ui/react/avatar";
+import { CSSProperties, ReactElement } from "react";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export interface AvatarProps extends Omit<Avatar.Root.Props, "className" | "style" | "children"> {
+  /** The person's name: the image's text alternative, and the source of the initials. */
+  name: string;
+  /** The photo. The initials show while it loads, and if it fails. */
+  src?: string;
+  /** `sm` 24, `md` 32 (default), `lg` 40 or `xl` 48px. */
+  size?: AvatarSize;
+  /** The name is shown beside it: hide the avatar from assistive technology. */
+  decorative?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * A person: their photo, or their initials (06-component-specs.md, increment 6). A circle, since
+ * people are one of the two soft shapes. It's named by `name`, unless `decorative`.
+ */
+declare function Avatar$1({ name, src, size, decorative, className, ...props }: AvatarProps): ReactElement;
+export { Avatar$1 as Avatar };

package/dist/avatar/avatar.js

@@ -0,0 +1,43 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/avatar/avatar.tsx
+const graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : void 0;
+function firstGrapheme(word) {
+	if (!graphemes) return Array.from(word)[0] ?? "";
+	for (const { segment } of graphemes.segment(word)) return segment;
+	return "";
+}
+/** The first grapheme of the first and last words: "Priya Sharma" is "PS". */
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	const first = words[0] ?? "";
+	const last = words.length > 1 ? words.at(-1) ?? "" : "";
+	return (firstGrapheme(first) + firstGrapheme(last)).toLocaleUpperCase();
+}
+/**
+* A person: their photo, or their initials (06-component-specs.md, increment 6). A circle, since
+* people are one of the two soft shapes. It's named by `name`, unless `decorative`.
+*/
+function Avatar$1({ name, src, size = "md", decorative, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		...props,
+		role: decorative ? void 0 : "img",
+		"aria-label": decorative ? void 0 : name,
+		"aria-hidden": decorative || void 0,
+		className: cx("qx-avatar", className),
+		"data-slot": "avatar",
+		"data-size": size,
+		children: [src && /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: "",
+			className: "qx-avatar-image"
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: "qx-avatar-fallback",
+			"aria-hidden": true,
+			children: initials(name)
+		})]
+	});
+}
+export { Avatar$1 as Avatar };

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { Avatar, AvatarProps, AvatarSize } from "./avatar.js";
+export { Avatar, type AvatarProps, type AvatarSize };

package/dist/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar } from "./avatar.js";

package/dist/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { QeetrixIcon } from "../internal/control.js";
+import { ComponentProps, ReactElement } from "react";
+export type BadgeTone = "neutral" | "brand" | "info" | "success" | "warning" | "danger";
+export interface BadgeProps extends ComponentProps<"span"> {
+  /** Default `neutral`. The word carries the meaning; the tone only reinforces it. */
+  tone?: BadgeTone;
+  /** A leading icon from `@qeetrix/icons`: sharp, 12px, decorative. */
+  icon?: QeetrixIcon;
+}
+/**
+ * A short, static status or count: one or two words (06-component-specs.md §10). It truncates with
+ * an ellipsis; pass `title` with the full text where it may be cut. Server-safe.
+ */
+export declare function Badge({ tone, icon: Icon, className, children, ...props }: BadgeProps): ReactElement;

package/dist/badge/badge.js

@@ -0,0 +1,25 @@
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/badge/badge.tsx
+/**
+* A short, static status or count: one or two words (06-component-specs.md §10). It truncates with
+* an ellipsis; pass `title` with the full text where it may be cut. Server-safe.
+*/
+function Badge({ tone = "neutral", icon: Icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		className: cx("qx-badge", className),
+		"data-slot": "badge",
+		"data-tone": tone,
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			shape: "sharp",
+			size: 12,
+			"aria-hidden": true,
+			className: "qx-badge-icon"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "qx-badge-label",
+			children
+		})]
+	});
+}
+export { Badge };

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps, BadgeTone } from "./badge.js";
+export { Badge, type BadgeProps, type BadgeTone };

package/dist/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./badge.js";

package/dist/box/box.d.ts

@@ -0,0 +1,27 @@
+import { RenderProp } from "../internal/render.js";
+import { Inset } from "../internal/space.js";
+import { ComponentProps, ReactElement } from "react";
+export type BoxBackground = "canvas" | "default" | "raised" | "sunken" | "overlay" | "inverse" | "neutral" | "brand" | "selected";
+export type BoxBorder = "none" | "subtle" | "default" | "strong";
+export type BoxRadius = "none" | "sm" | "control" | "surface" | "overlay" | "modal" | "chip" | "full";
+export interface BoxProps extends ComponentProps<"div"> {
+  /** Padding on every side, from the inset tokens. */
+  padding?: Inset;
+  /** Padding at the start and end; overrides `padding` on those sides. */
+  paddingInline?: Inset;
+  /** Padding at the top and bottom; overrides `padding` on those sides. */
+  paddingBlock?: Inset;
+  /** A surface or tint from the tokens. `inverse` also sets inverse text colour. */
+  background?: BoxBackground;
+  /** A 1px border in a token colour. */
+  border?: BoxBorder;
+  /** Corners from the radius tokens. */
+  radius?: BoxRadius;
+  /** Render a different element, e.g. `<section />`. */
+  render?: RenderProp;
+}
+/**
+ * A token-only surface: the sanctioned way to give a region padding, a background, a border or
+ * corners. It has no margin: space between siblings belongs to the parent's `gap`.
+ */
+export declare function Box({ padding, paddingInline, paddingBlock, background, border, radius, render, className, ...props }: BoxProps): ReactElement;

package/dist/box/box.js

@@ -0,0 +1,21 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/box/box.tsx
+/**
+* A token-only surface: the sanctioned way to give a region padding, a background, a border or
+* corners. It has no margin: space between siblings belongs to the parent's `gap`.
+*/
+function Box({ padding, paddingInline, paddingBlock, background, border, radius, render, className, ...props }) {
+	return renderElement("div", render, {
+		...props,
+		className: cx("qx-box", className),
+		"data-slot": "box",
+		"data-padding": padding,
+		"data-padding-inline": paddingInline,
+		"data-padding-block": paddingBlock,
+		"data-background": background,
+		"data-border": border,
+		"data-radius": radius
+	});
+}
+export { Box };

package/dist/box/index.d.ts

@@ -0,0 +1,2 @@
+import { Box, BoxBackground, BoxBorder, BoxProps, BoxRadius } from "./box.js";
+export { Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius };

package/dist/box/index.js

@@ -0,0 +1 @@
+export { Box } from "./box.js";