@fairgarden/design 0.1.0-alpha.0

package/Readme.md

@@ -0,0 +1,86 @@
+# FairGarden Design System
+
+<!-- fg:version -->
+
+Version **0.1.0-alpha.0**
+
+<!-- /fg:version -->
+
+<!-- fg:releasing -->
+
+## Releasing
+
+This module releases on its own. `0.1.0-alpha.0` is what main is working towards,
+not what is published — the version here is always the next one.
+
+1. **Publish it.** Run the *Publish* workflow from the Actions tab, picking the
+   dist tag. It refuses if that version is already on npm.
+2. **Move it on.** `pnpm release` — opens a pull request bumping this branch
+   to `0.1.0-alpha.1`, or `pnpm release --id rc` to change
+   identifier. A prerelease gets no maintenance branch; there is no released
+   line behind it yet.
+
+Every push to main publishes `@fairgarden-private/design@canary`. A canary is not a release and
+carries no promise; it is there so main can be tried without a checkout.
+
+<!-- /fg:releasing -->
+
+## Stack
+
+- **React 19** and **Base UI** (`@base-ui/react`, a peer dependency): unstyled, accessible primitives under every interactive component.
+- **CSS Modules plus CVA** (`class-variance-authority`): one module per component, one class per variant value, typed variant axes, all in cascade layers (`reset, tokens, theme, roles, base, variants, compounds, scales, states, print`).
+- **Open Props** for the non-color tokens, plus the system's own `--ds-*` extensions. Text sizes are in rem, spacing in px.
+- **Radix Colors**: the 31 standard scales as one unified `--{scale}{step}` set (no alpha scales). Light and dark swap the values, never the names: `data-theme="light|dark"` on `html` forces a mode, otherwise the OS `prefers-color-scheme` decides. Components read only scale steps and role variables (`--primary1…12`, `--secondary1…12`, `--role-*`) and never see the mode. Every component takes `primary` and `secondary` scale props; grounds (`Ground`: 8 page grounds, the `night` band, 7 fields) set them for a region.
+- **Material Symbols** (Rounded, FILL 0 by default) compiled to inline SVG paths by `scripts/build-icons.js`; no icon font.
+- **Recharts** for charts (SVG, role colors, opaque fills, pattern defs, no animation unless motion is allowed).
+- **MapLibre GL + Protomaps + OpenStreetMap** for maps: `maplibre-gl`, `pmtiles` and `@protomaps/basemaps` are optional peer dependencies, loaded dynamically by `Map`. Install them only if you use it.
+- **Fonts** (SIL OFL, self-hosted via Fontsource): Fraunces, Source Serif 4, Figtree and IBM Plex Mono.
+- **PostCSS** (`postcss-import`, `@csstools/postcss-global-data`, `postcss-custom-media`), TypeScript, ESLint and Prettier.
+
+## Usage
+
+```bash
+pnpm add @fairgarden-private/design @base-ui/react
+# only for Map:
+pnpm add maplibre-gl pmtiles @protomaps/basemaps
+```
+
+```tsx
+// app shell, once
+import '@fairgarden-private/design/utils/global.css'
+import '@fairgarden-private/design/utils/fonts'
+import { ClientProvider } from '@fairgarden-private/design/utils/ClientProvider'
+
+// anywhere
+import { Button } from '@fairgarden-private/design/components/Button'
+
+<ClientProvider locale="en-US">
+  <Button variant="solid">Sign Up</Button>
+</ClientProvider>
+```
+
+Each component is imported from its own path, `@fairgarden-private/design/components/<Name>`.
+
+## Components
+
+**Foundations:** Ground, Icon, Separator, Sticker, and the shared utilities: patterns (`utils/pattern.module.css`), type roles (`utils/type.module.css`), lines, ornaments and the navigation data type (`utils/navigation`).
+
+**Actions and navigation:** Button, Link, Toggle and Toggle Group, Tabs, Navigation Menu, Menu, Context Menu, Menubar, Breadcrumb, Pagination, Search, Toolbar.
+
+**Forms:** Form, Field, Fieldset, Input, Number Field, Select, Combobox, Autocomplete, Checkbox and Checkbox Group, Radio and Radio Group, Switch, Slider.
+
+**Status and overlays:** Alert, Badge, Tag, Chip, Avatar, Accordion, Collapsible, Dialog, Alert Dialog, Popover, Preview Card, Tooltip, Toast, Progress, Meter, Scroll Area.
+
+**Page frame:** Navigation Bar, Nav Drawer, Section Bar, Announcement Bar, Section Header, Section Divider, Hero, CTA Block, Newsletter, Marquee, Footer.
+
+**Content modules:** Card, Card Grid, Carousel, FAQ, Feature Grid, Spec Sheet, Quote, Pricing, Stat, Index Rows, Timeline, Profile, Empty State.
+
+**Data:** Table, Spec List, Spec Grid, Figure, Chart, Map.
+
+## Development
+
+- `pnpm --filter @fairgarden-private/design build`: generates the color and icon files, the CSS Module typings, then compiles with `tsc` and PostCSS into `components/`, `utils/` and `icons/`.
+- `pnpm --filter @fairgarden-private/design lint`
+- Documentation site in `docs/` (`@fairgarden-private/design-docs`, port 3032): `pnpm --filter @fairgarden-private/design-docs dev`. It compiles `src/` directly through tsconfig paths. After changing a component's props or adding a page, run `pnpm validate` in `docs/` to regenerate the `types.md` files and the page indexes.
+
+Install dependencies from the monorepo root only. The full specification lives outside this repository (`DESIGN-SYSTEM.md`).

package/components/Accordion/Accordion.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../Icon';
+export declare const accordion: (props?: ({
+    glyph?: "disclosure" | "plusminus" | null | undefined;
+    headed?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AccordionVariants = VariantProps<typeof accordion>;
+export type AccordionGlyph = NonNullable<AccordionVariants['glyph']>;
+/** Props for Accordion: Base UI Accordion Root props plus the glyph, headed and color axes. */
+export type AccordionProps<Value = unknown> = BaseAccordion.Root.Props<Value> & {
+    /**
+     * `disclosure` (default): the LTA expand/collapse glyph at the row's end
+     * [D109]. `plusminus`: the outline circle holding + or −, the documented
+     * alternate for product UI. Never mix the two on one page.
+     */
+    glyph?: AccordionVariants['glyph'];
+    /**
+     * Draws a `--border-size-2` `--primary12` rule above the first item. Use
+     * it when the accordion directly follows a heading. Default `false`.
+     */
+    headed?: AccordionVariants['headed'];
+    /**
+     * Primary Radix scale: rules, titles, glyph and panel text. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: AccordionVariants['primary'];
+    /** Secondary Radix scale, accepted for the shared contract; no part uses it. */
+    secondary?: AccordionVariants['secondary'];
+};
+/**
+ * A set of disclosure rows divided by `--role-rule` rules, including after
+ * the last item. Several items may be open at once (`multiple`, default
+ * `true`). Closed panels stay in the DOM (`hiddenUntilFound`, default
+ * `true`), so find-in-page reaches them and every panel prints expanded.
+ * Never convert an accordion into tabs.
+ */
+export declare function Accordion<Value = unknown>(props: AccordionProps<Value>): React.JSX.Element;
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+/** Props for AccordionItem: Base UI Accordion Item props (without `title`) plus the row content. */
+export type AccordionItemProps = Omit<BaseAccordion.Item.Props, 'title'> & {
+    /**
+     * The row's title, `type-subhead` in `--primary12`. Write it to stand
+     * alone: it becomes the printed heading.
+     */
+    title: React.ReactNode;
+    /**
+     * An optional leading subject symbol (§6.10), Material Symbols Rounded at
+     * the tag tier; the panel indents to the title column. Dropped below
+     * 360 px so the title keeps its width.
+     */
+    icon?: IconName;
+    /** The heading level wrapping the trigger. Default `3`. */
+    headingLevel?: HeadingLevel;
+    /** Props for the panel, such as `keepMounted`. */
+    panelProps?: Omit<BaseAccordion.Panel.Props, 'children'>;
+};
+/**
+ * One row: a heading wrapping the trigger (optional icon, title, glyph at
+ * the row's end, top-aligned to the title's first line) and the panel. The
+ * whole row is the target. There is no fill change when it opens.
+ */
+export declare function AccordionItem(props: AccordionItemProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AA+BvD,eAAO,MAAM,SAAS;;;;;8EAiBpB,CAAA;AAEF,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA;AACvD,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAA;AAIpE,+FAA+F;AAC/F,MAAM,MAAM,cAAc,CAAC,KAAK,GAAG,OAAO,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;IAC9E;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAA;IACtC,gFAAgF;IAChF,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,qBAyBtE;AAED,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAUrC,oGAAoG;AACpG,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG;IACzE;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,2DAA2D;IAC3D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,kDAAkD;IAClD,UAAU,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;CACzD,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA2CtD"}

package/components/Accordion/Accordion.js

@@ -0,0 +1,95 @@
+'use client';
+import * as React from 'react';
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import { cva } from 'class-variance-authority';
+import { DisclosureGlyph } from '../Collapsible';
+import { Icon, iconHost } from '../Icon';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './accordion.module.css';
+/*
+ * Accordion (§10.13): long reference content scanned by heading.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: accordion.module.css; CVA function `accordion`.
+ * - Axes: `glyph` → disclosure | plusminus (the LTA glyph at the row's end,
+ *   or the outline circle holding + / −, the documented alternate);
+ *   `headed` → `headed` (a --border-size-2 --primary12 rule above the first
+ *   item, when the accordion follows a heading); `primary`, `secondary` →
+ *   scales module classes (`secondary` unused).
+ * - Compound variants: none.
+ * - Defaults: glyph disclosure, headed false; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: trigger `data-panel-open` → the glyph flips direction and takes
+ *   --primary12 (never rotates); `:hover` (not disabled) → the bare-text
+ *   underline on the title (--role-accent at --border-size-2, offset
+ *   --size-px-1), the disclosure glyph unchanged, the plus/minus glyph at
+ *   the next tier's weight (§10.1 icon states) [D181]; `:focus-visible`
+ *   → ring around the row, inside the column; `data-disabled` → title and
+ *   glyph --role-muted. Item `data-open` → no fill change. Panel
+ *   `data-starting-style` / `data-ending-style` → the clip reveal, instant
+ *   under --motionNotOK [D91].
+ * - Parts: base, item, header, trigger, icon, title, glyph, panel (+ `content`).
+ * - Scope: none. Container: none; inherits its context.
+ */
+export const accordion = cva(styles.base, {
+    variants: {
+        glyph: {
+            disclosure: styles.disclosure,
+            plusminus: styles.plusminus,
+        },
+        headed: {
+            true: styles.headed,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        glyph: 'disclosure',
+        headed: false,
+    },
+});
+const AccordionGlyphContext = React.createContext('disclosure');
+/**
+ * A set of disclosure rows divided by `--role-rule` rules, including after
+ * the last item. Several items may be open at once (`multiple`, default
+ * `true`). Closed panels stay in the DOM (`hiddenUntilFound`, default
+ * `true`), so find-in-page reaches them and every panel prints expanded.
+ * Never convert an accordion into tabs.
+ */
+export function Accordion(props) {
+    const { glyph, headed, primary, secondary, className, multiple = true, hiddenUntilFound = true, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(AccordionGlyphContext.Provider, { value: glyph ?? 'disclosure' },
+        React.createElement(BaseAccordion.Root, { ...rest, ...scope, multiple: multiple, hiddenUntilFound: hiddenUntilFound, className: resolveClassName(className, (extra) => accordion({ glyph, headed, primary, secondary, className: extra })) })));
+}
+const headingTags = {
+    2: React.createElement("h2", null),
+    3: React.createElement("h3", null),
+    4: React.createElement("h4", null),
+    5: React.createElement("h5", null),
+    6: React.createElement("h6", null),
+};
+/**
+ * One row: a heading wrapping the trigger (optional icon, title, glyph at
+ * the row's end, top-aligned to the title's first line) and the panel. The
+ * whole row is the target. There is no fill change when it opens.
+ */
+export function AccordionItem(props) {
+    const { title, icon, headingLevel = 3, panelProps, className, children, ...rest } = props;
+    const glyph = React.useContext(AccordionGlyphContext);
+    const { className: panelClassName, ...panelRest } = panelProps ?? {};
+    return (React.createElement(BaseAccordion.Item, { ...rest, className: resolveClassName(className, (extra) => cx(styles.item, extra)) },
+        React.createElement(BaseAccordion.Header, { className: styles.header, render: headingTags[headingLevel] },
+            React.createElement(BaseAccordion.Trigger, { className: glyph === 'plusminus' ? `${styles.trigger} ${iconHost}` : styles.trigger },
+                icon ? React.createElement(Icon, { name: icon, size: "tag", className: styles.icon }) : null,
+                React.createElement("span", { className: styles.title }, title),
+                glyph === 'plusminus' ? (React.createElement("span", { className: `${styles.glyph} ${styles.circle}`, "aria-hidden": "true" },
+                    React.createElement(Icon, { name: "add", weight: "interactive", className: styles.plus }),
+                    React.createElement(Icon, { name: "remove", weight: "interactive", className: styles.minus }))) : (React.createElement(DisclosureGlyph, { size: "row", className: styles.glyph })))),
+        React.createElement(BaseAccordion.Panel, { ...panelRest, className: resolveClassName(panelClassName, (extra) => cx(styles.panel, extra)) },
+            React.createElement("div", { className: styles.content }, children))));
+}
+//# sourceMappingURL=Accordion.js.map

package/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAiB,MAAM,SAAS,CAAA;AACvD,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACxC,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,SAAS,EAAE,MAAM,CAAC,SAAS;SAC5B;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM,CAAC,MAAM;SACpB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,KAAK;KACd;CACF,CAAC,CAAA;AAKF,MAAM,qBAAqB,GAAG,KAAK,CAAC,aAAa,CAAiB,YAAY,CAAC,CAAA;AAwB/E;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAkB,KAA4B;IACrE,MAAM,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,gBAAgB,GAAG,IAAI,EACvB,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAClC,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,YAAY;QAC1D,oBAAC,aAAa,CAAC,IAAI,OACb,IAAI,KACJ,KAAK,EACT,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAC/C,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACnE,GACD,CAC6B,CAClC,CAAA;AACH,CAAC;AAID,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,+BAAM;IACT,CAAC,EAAE,+BAAM;IACT,CAAC,EAAE,+BAAM;IACT,CAAC,EAAE,+BAAM;IACT,CAAC,EAAE,+BAAM;CACkD,CAAA;AAqB7D;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,KAAK,EACL,IAAI,EACJ,YAAY,GAAG,CAAC,EAChB,UAAU,EACV,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAA;IACrD,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,EAAE,GAAG,UAAU,IAAI,EAAE,CAAA;IAEpE,OAAO,CACL,oBAAC,aAAa,CAAC,IAAI,OACb,IAAI,EACR,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAEzE,oBAAC,aAAa,CAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,CAAC,YAAY,CAAC;YAC/E,oBAAC,aAAa,CAAC,OAAO,IACpB,SAAS,EAAE,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;gBAElF,IAAI,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI;gBACtE,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,KAAK,CAAQ;gBAC5C,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,CAEvB,8BAAM,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,iBAAc,MAAM;oBACrE,oBAAC,IAAI,IAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;oBAChE,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,aAAa,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CAC/D,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,CACxD,CACqB,CACH;QACvB,oBAAC,aAAa,CAAC,KAAK,OACd,SAAS,EACb,SAAS,EAAE,gBAAgB,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAE/E,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5B,CACH,CACtB,CAAA;AACH,CAAC"}

package/components/Accordion/accordion.module.css

@@ -0,0 +1,248 @@
+/*
+ * Accordion (§10.13). Parts: `base` (the Base UI Root), `item` (its top rule;
+ * the last item also closes with one), `header` (the heading), `trigger`
+ * (the row), `icon` (optional leading subject symbol), `title`, `glyph`
+ * (the LTA disclosure glyph, whose direction and color the Collapsible
+ * module draws, or the plus/minus `circle`), `panel` and its padded inner
+ * `content`. Pure type and line: no fill in any state. Colors are role
+ * variables only; local custom properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. The trigger carries the title's
+ * type role so the glyph can align to the first line (1lh). */
+.trigger {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+.content {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.item {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* Row rules: --border-size-1 --role-rule above each item and after the last. */
+  .item {
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-rule);
+  }
+
+  .item:last-child {
+    border-block-end-width: var(--border-size-1);
+  }
+
+  .header {
+    margin: 0;
+  }
+
+  /* The row: ≥ --ds-size-control-xl tall, --size-px-3 vertical padding, text aligned to the column. */
+  .trigger {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--ds-size-control-xl);
+    margin: 0;
+    padding-block: var(--size-px-3);
+    padding-inline: 0;
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    text-align: start;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  /* Leading icon and glyph centre on the title's first line (1lh), so they stay top-aligned when it wraps. */
+  .icon {
+    margin-block: calc((1lh - var(--size-px-4)) / 2);
+    color: var(--primary12);
+  }
+
+  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+  .title {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* Both glyph forms sit at the row's end. */
+  .glyph {
+    flex: none;
+  }
+
+  /* The clip reveal (§1.5.15) [D91]: the panel's edge wipes open; never a fade. */
+  .panel {
+    block-size: var(--accordion-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  .content {
+    padding-block-end: var(--size-px-5);
+    color: var(--primary12);
+  }
+
+  /* A leading icon indents the panel to the title column (Sofar Sounds). */
+  .item:has(.icon) .content {
+    padding-inline-start: calc(var(--size-px-4) + var(--size-px-3));
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .panel {
+      transition-property: block-size;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    /* Hover transitions [D181]: --ds-duration-quick, --ease-out-3. */
+    .title,
+    .circle {
+      transition-property: text-decoration-color, border-width;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* Stack guard: leading icons drop so the title keeps its width [D73]. */
+  @media (max-width: 359.98px) {
+    .icon {
+      display: none;
+    }
+
+    .item:has(.icon) .content {
+      padding-inline-start: 0;
+    }
+  }
+}
+
+@layer variants {
+  /* Disclosure (default): the 20 px LTA glyph, centred on the title's first line [D109]. */
+  .disclosure .glyph {
+    margin-block: calc((1lh - var(--size-px-4)) / 2);
+  }
+
+  /* Strong top: a --border-size-2 --primary12 rule above the first item (turbopuffer). */
+  .headed .item:first-child {
+    border-block-start-width: var(--border-size-2);
+    border-block-start-color: var(--primary12);
+  }
+
+  /* Plus / minus: a --size-px-5 outline circle at --ds-stroke-1-5, outline in both states. */
+  .plusminus .circle {
+    --accordion-circle-edge: var(--ds-stroke-1-5);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: var(--size-px-5);
+    block-size: var(--size-px-5);
+    margin-block: calc((1lh - var(--size-px-5)) / 2);
+    border: var(--accordion-circle-edge) solid var(--primary12);
+    border-radius: var(--radius-round);
+    color: var(--primary12);
+  }
+
+  .plusminus .minus {
+    display: none;
+  }
+}
+
+@layer states {
+  /* Expanded: + becomes −; the disclosure glyph's own module flips its arrows. */
+  .trigger[data-panel-open] .plus {
+    display: none;
+  }
+
+  .trigger[data-panel-open] .minus {
+    display: inline-block;
+  }
+
+  /*
+   * Hover (not disabled): the title takes the bare-text underline,
+   * --role-accent at --border-size-2, offset --size-px-1; the disclosure
+   * glyph does not change [D109, D181].
+   */
+  .trigger:not([data-disabled]):hover .title {
+    text-decoration-line: underline;
+  }
+
+  /*
+   * Plus / minus hover and press: the glyph takes the next tier's weight
+   * (§10.1 icon states) [D181]. The sign swaps to its emphasis instance
+   * (Icon weight="interactive", hosted by the trigger); the circle, drawn
+   * at the sign's tier, steps with it to the next tier's stroke.
+   */
+  .trigger:not([data-disabled]):is(:hover, :active) .circle {
+    --accordion-circle-edge: var(--border-size-2);
+  }
+
+  /* Focus: the ring surrounds the row, drawn inside the column so it never clips. */
+  .trigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Disabled: title, icon and glyph --role-muted; the row rule is unchanged [D16, D85]. */
+  .trigger[data-disabled] {
+    color: var(--role-muted);
+    cursor: default;
+  }
+
+  .trigger[data-disabled] .icon {
+    color: var(--role-muted);
+  }
+
+  .trigger[data-disabled] .circle {
+    border-color: var(--role-muted);
+    color: var(--role-muted);
+  }
+
+  .panel[data-starting-style],
+  .panel[data-ending-style] {
+    block-size: 0;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Every panel prints expanded; the trigger prints as its heading and glyphs hide (§7.7). */
+    .glyph {
+      display: none;
+    }
+
+    .trigger {
+      min-block-size: 0;
+    }
+
+    .header {
+      break-after: avoid;
+    }
+
+    .panel,
+    .panel[data-starting-style],
+    .panel[data-ending-style] {
+      block-size: auto;
+      overflow: visible;
+    }
+
+    .panel[hidden] {
+      display: block;
+      content-visibility: visible;
+    }
+  }
+}

package/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/components/Accordion/index.js

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.js.map

package/components/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/components/Alert/Alert.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type Status } from '../../utils/StatusGlyph';
+declare const alert: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertStatus = Status;
+/** Props for Alert: `div` props (without `title`), `render`, the status, lead, action and color axes. */
+export type AlertProps = Omit<useRender.ComponentProps<'div'>, 'title'> & VariantProps<typeof alert> & {
+    /**
+     * Required by §10.20 (no default). Optional in the type only so a bare
+     * `<Alert />` compiles; without it nothing renders.
+     */
+    status?: AlertStatus;
+    /** The `type-runin` word lead, e.g. "Couldn't load." It runs into the message. */
+    title?: React.ReactNode;
+    /** An optional action, normally a Retry Button (`variant="outline"`, `size="md"`). */
+    action?: React.ReactNode;
+    /** The glyph's accessible name; defaults to the English status word. */
+    statusLabel?: string;
+};
+/**
+ * The inline status block: start bar, status glyph (custom §1.5.4 shape with
+ * its inner mark), word lead, message and optional action, on the page
+ * ground with no fill.
+ *
+ * `role` defaults to `status` (polite) and to `alert` for danger (§10.20);
+ * pass `role="status"` for a danger notice that does not block the task.
+ *
+ * Renders nothing when `status` is missing, or when there is neither a
+ * `title` nor children: a status block needs a status and words (§1.5.4,
+ * §10.20), and an empty live region must not be announced.
+ */
+export declare function Alert(props: AlertProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=Alert.d.ts.map

package/components/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAA2C,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAmB9F,QAAA,MAAM,KAAK;;;8EAMT,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAEhC,yGAAyG;AACzG,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GACrE,YAAY,CAAC,OAAO,KAAK,CAAC,GAAG;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAEH;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,iFAwDtC"}

package/components/Alert/Alert.js

@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusLabels, statusScales } from '../../utils/StatusGlyph';
+import styles from './alert.module.css';
+/*
+ * Alert: the inline status block (§10.20, owner per [D110]).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: alert.module.css; CVA function `alert`.
+ * - Axes: `status` → info | success | warning | danger (selects the glyph,
+ *   the default role and the computed secondary; it carries no class);
+ *   `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: none; color axes none.
+ * - Color fallback: secondary = the explicit prop, else the status scale
+ *   (info indigo, success green, warning amber, danger red) [D129].
+ * - States: none (loading → loaded → failed swaps what renders).
+ * - Parts: base (its inline-start border is the bar), glyph, lead, message,
+ *   action.
+ * - Scope: none. Container: none; inherits its context.
+ */
+const alert = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; the component computes secondary from status.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * The inline status block: start bar, status glyph (custom §1.5.4 shape with
+ * its inner mark), word lead, message and optional action, on the page
+ * ground with no fill.
+ *
+ * `role` defaults to `status` (polite) and to `alert` for danger (§10.20);
+ * pass `role="status"` for a danger notice that does not block the task.
+ *
+ * Renders nothing when `status` is missing, or when there is neither a
+ * `title` nor children: a status block needs a status and words (§1.5.4,
+ * §10.20), and an empty live region must not be announced.
+ */
+export function Alert(props) {
+    const { render, ref, className, status, title, action, statusLabel, primary, secondary, children, ...rest } = props;
+    const scopeAttributes = useScopeAttributes();
+    const hasTitle = hasContent(title);
+    const hasMessage = hasContent(children);
+    const enabled = status !== undefined && (hasTitle || hasMessage);
+    const content = status ? (React.createElement(React.Fragment, null,
+        React.createElement(StatusGlyph, { status: status, label: statusLabel ?? statusLabels[status], className: styles.glyph }),
+        React.createElement("div", { className: styles.message },
+            hasTitle ? React.createElement("strong", { className: styles.lead }, title) : null,
+            hasTitle && hasMessage ? ' ' : null,
+            children),
+        hasContent(action) ? React.createElement("div", { className: styles.action }, action) : null)) : null;
+    return useRender({
+        enabled,
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scopeAttributes,
+            role: status === 'danger' ? 'alert' : 'status',
+            className: alert({
+                primary,
+                secondary: secondary ?? (status ? statusScales[status] : undefined),
+                className,
+            }),
+            children: content,
+        }, rest),
+    });
+}
+/** True when a node would render something visible. */
+function hasContent(node) {
+    return React.Children.toArray(node).some((child) => child !== '');
+}
+//# sourceMappingURL=Alert.js.map

package/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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"}