@abuzareal/contour-ui 0.6.2 → 0.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -2
- package/COMBOBOX.md +1 -1
- package/COMPONENT-GUIDES.md +3534 -0
- package/COMPOSITION.md +1 -1
- package/CONTRACTS.md +1 -1
- package/CONTRIBUTING.md +4 -0
- package/DOCS.md +61 -61
- package/FORMS.md +1 -1
- package/GETTING-STARTED.md +4 -4
- package/HELPERS.md +1 -1
- package/HOOKS.md +2 -2
- package/MANUAL-QA.md +1 -1
- package/MIGRATION.md +1 -1
- package/MODELS.md +1 -1
- package/NEXTJS.md +2 -2
- package/OVERLAYS.md +1 -1
- package/PROP-REFERENCE.md +4 -4
- package/PUBLIC-API.md +166 -166
- package/README.md +6 -4
- package/RECIPES.md +1 -1
- package/REFERENCE.md +55 -55
- package/SIZE.md +2 -2
- package/STYLING.md +1 -1
- package/SUPPORT.md +1 -1
- package/THREE.md +1 -1
- package/dist/components/ui/Avatar.js +6 -2
- package/dist/components/ui/SegmentedControl.js +2 -1
- package/dist/components/ui/ToastProvider.js +14 -2
- package/docs/component-guides.json +2217 -0
- package/docs/prop-metadata.json +5734 -751
- package/examples/catalogue/buttons.tsx +27 -0
- package/examples/catalogue/choices.tsx +51 -0
- package/examples/catalogue/combobox.tsx +119 -0
- package/examples/catalogue/content.tsx +108 -0
- package/examples/catalogue/data-table.tsx +18 -0
- package/examples/catalogue/dialogs.tsx +20 -0
- package/examples/catalogue/feedback.tsx +24 -0
- package/examples/catalogue/field.tsx +18 -0
- package/examples/catalogue/floating.tsx +41 -0
- package/examples/catalogue/identity.tsx +35 -0
- package/examples/catalogue/metadata.tsx +17 -0
- package/examples/catalogue/motion.tsx +47 -0
- package/examples/catalogue/navigation.tsx +43 -0
- package/examples/catalogue/scene-boundary.tsx +37 -0
- package/examples/catalogue/text-inputs.tsx +60 -0
- package/examples/catalogue/theme-copy.tsx +32 -0
- package/examples/catalogue/toasts.tsx +21 -0
- package/examples/reproduction/package.json +2 -2
- package/examples/starters/next/README.md +1 -1
- package/examples/starters/next/package.json +2 -2
- package/examples/starters/vite/README.md +1 -1
- package/examples/starters/vite/package.json +2 -2
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -6,7 +6,9 @@ Use it when you want this visual style with typed controls, feedback, navigation
|
|
|
6
6
|
|
|
7
7
|
[Live catalogue](https://contour.abuzr.in/) · [npm package](https://www.npmjs.com/package/@abuzareal/contour-ui) · [Maintainer](https://github.com/abuzareal)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
[Complete core component guides](COMPONENT-GUIDES.md) are maintained in a public authored dataset with runnable [family examples](examples/catalogue); they cover actual behavior as well as emitted props.
|
|
10
|
+
|
|
11
|
+
This source checkout targets **0.6.4**. Package publication and application upgrades are separate; check the npm registry for release availability and each application's manifest for its installed version. Catalogue examples include application patterns as well as package components. Check the exports below before treating an example as an importable component.
|
|
10
12
|
|
|
11
13
|
[Public API and maturity register](PUBLIC-API.md) · [Architecture, scope and compatibility](CONTRACTS.md)
|
|
12
14
|
|
|
@@ -23,7 +25,7 @@ Version 0.6 adds a single-select [Combobox](COMBOBOX.md) backed by pinned Base U
|
|
|
23
25
|
Use an existing React application with a bundler that resolves package CSS imports. Contour ships ESM and TypeScript declarations. The package declares Node.js 22 or newer; repository tooling uses Vite 8, which needs Node.js 22.12+ or 24+.
|
|
24
26
|
|
|
25
27
|
```sh
|
|
26
|
-
npm install @abuzareal/contour-ui@0.6.
|
|
28
|
+
npm install @abuzareal/contour-ui@0.6.4 --save-exact
|
|
27
29
|
```
|
|
28
30
|
|
|
29
31
|
Your app must provide matching `react` and `react-dom` versions: **18.3.1 or React 19**. The compatibility script covers 18.3.1, 19.0.0, and 19.3.0; it doesn't establish support for every framework or React Server Component setup. Put interactive components inside a client boundary when your framework requires one.
|
|
@@ -180,7 +182,7 @@ Give scenes a sized container and a usable static fallback. `SceneBoundary` hide
|
|
|
180
182
|
**0.2.0** adds native field refs, controlled tabs and popover/menu open state, menu keyboard improvements, native reset synchronization, Three.js lifecycle fixes and a tested Next.js App Router integration. Existing uncontrolled defaults and React 18/19 support remain. `fonts-latin.css`, introduced in 0.1.2, now uses packaged relative font URLs for webpack resolution. `CHANGELOG.md` is included in the package archive and [npm's Code view](https://www.npmjs.com/package/@abuzareal/contour-ui?activeTab=code); it contains the upgrade details for each version.
|
|
181
183
|
|
|
182
184
|
```sh
|
|
183
|
-
npm install @abuzareal/contour-ui@0.6.
|
|
185
|
+
npm install @abuzareal/contour-ui@0.6.4 --save-exact
|
|
184
186
|
```
|
|
185
187
|
|
|
186
188
|
Commit your manifest and lockfile, run your application's checks, and review both themes, dialogs, forms, and motion before deploying. Version 0.1.1 includes a document scroll lock for dialogs and drawers. Review any app-level lock before removing it, including nested dialogs and short screens. Package publication doesn't update deployed consumers automatically.
|
|
@@ -248,7 +250,7 @@ export function AccountControls() {
|
|
|
248
250
|
}
|
|
249
251
|
```
|
|
250
252
|
|
|
251
|
-
Interactive module boundaries retain `use client` in the built package. The pinned Next.js App Router consumer checks the packed candidate archive. Follow [Next.js setup](NEXTJS.md) for the pinned Next.js 16.4.
|
|
253
|
+
Interactive module boundaries retain `use client` in the built package. The pinned Next.js App Router consumer checks the packed candidate archive. Follow [Next.js setup](NEXTJS.md) for the pinned Next.js 16.4.3 / React 19.3.0 pair. Pure URL/theme-bootstrap helpers remain usable from the server. A separate fixture mode checks lazy optional Three.js loading and navigation cleanup. Lenis integration, other Next versions and alternate bundlers remain separate compatibility questions.
|
|
252
254
|
|
|
253
255
|
Custom `useThreeStage` setup can register disposal through `context.onDispose?.(cleanup)` immediately after acquiring each resource, including resources allocated before setup returns. Registered resources are released on failed initialization and unmount; avoid also disposing the same resource in `StageScene.dispose`. A stage may implement `resize()` to reflow after aspect changes while motion is paused.
|
|
254
256
|
|
package/RECIPES.md
CHANGED
|
@@ -40,4 +40,4 @@ The optional **password visibility recipe** keeps the same input mounted, name a
|
|
|
40
40
|
|
|
41
41
|
Use native p/span and h1–h6 with [typography tokens](STYLING.md). Heading level follows the document outline; size/weight are CSS choices. No Text/Heading wrappers are added without an independent semantic/variant contract. These explicit scope decisions do not complete deferred NumberField, full grid, calendar or other optional features.
|
|
42
42
|
|
|
43
|
-
[Report Table/recipes 0.6.
|
|
43
|
+
[Report Table/recipes 0.6.4](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&title=Table%20recipes%200.6.4%3A%20&component=Table%20recipes&version=0.6.4); [standalone reproduction](examples/reproduction). See [public API](PUBLIC-API.md) for exact types, [styling](STYLING.md) and [onboarding](GETTING-STARTED.md). Release source links become available with the published tag.
|
package/REFERENCE.md
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
1
|
# Export reference register
|
|
2
2
|
|
|
3
|
-
Generated for 0.6.
|
|
3
|
+
Generated for 0.6.4 from actual source/runtime declarations and the manifest. This register maps all symbols and CSS/data entry points; it does not promote every component page. Human behavior guidance lives in the linked references. Source and exact types remain in [PUBLIC-API.md](PUBLIC-API.md). Run npm run check:reference; newly added hook/helper sources need an authored mapping before this register can update.
|
|
4
4
|
|
|
5
5
|
| Entry | Symbol | Kind | Reference |
|
|
6
6
|
| --- | --- | --- | --- |
|
|
7
|
-
| . | Alert | runtime | [
|
|
8
|
-
| . | Avatar | runtime | [
|
|
9
|
-
| . | Badge | runtime | [
|
|
10
|
-
| . | BrandMark | runtime | [
|
|
11
|
-
| . | Breadcrumbs | runtime | [
|
|
12
|
-
| . | Button | runtime | [
|
|
13
|
-
| . | Card | runtime | [
|
|
14
|
-
| . | Checkbox | runtime | [
|
|
15
|
-
| . | CountUp | runtime | [
|
|
16
|
-
| . | DataTable | runtime | [
|
|
17
|
-
| . | DepthButton | runtime | [
|
|
18
|
-
| . | Dialog | runtime | [
|
|
19
|
-
| . | Disclosure | runtime | [
|
|
20
|
-
| . | Divider | runtime | [
|
|
21
|
-
| . | DropdownMenu | runtime | [
|
|
22
|
-
| . | EmptyState | runtime | [
|
|
23
|
-
| . | ExternalLink | runtime | [
|
|
24
|
-
| . | Field | runtime | [
|
|
25
|
-
| . | FlipCard | runtime | [
|
|
26
|
-
| . | IconButton | runtime | [
|
|
27
|
-
| . | Kbd | runtime | [
|
|
28
|
-
| . | Magnetic | runtime | [
|
|
29
|
-
| . | Marquee | runtime | [
|
|
30
|
-
| . | Pagination | runtime | [
|
|
31
|
-
| . | Popover | runtime | [
|
|
32
|
-
| . | ProgressBar | runtime | [
|
|
33
|
-
| . | RadioGroup | runtime | [
|
|
34
|
-
| . | Reveal | runtime | [
|
|
35
|
-
| . | RevealHeading | runtime | [
|
|
36
|
-
| . | ScrollProgress | runtime | [
|
|
37
|
-
| . | SectionLabel | runtime | [
|
|
38
|
-
| . | SegmentedControl | runtime | [
|
|
39
|
-
| . | SelectField | runtime | [
|
|
40
|
-
| . | Skeleton | runtime | [
|
|
41
|
-
| . | Slider | runtime | [
|
|
42
|
-
| . | GitHubIcon | runtime | [
|
|
43
|
-
| . | LinkedInIcon | runtime | [
|
|
44
|
-
| . | Spinner | runtime | [
|
|
45
|
-
| . | Stat | runtime | [
|
|
46
|
-
| . | Stepper | runtime | [
|
|
47
|
-
| . | Switch | runtime | [
|
|
48
|
-
| . | Tabs | runtime | [
|
|
49
|
-
| . | Tag | runtime | [
|
|
50
|
-
| . | TextArea | runtime | [
|
|
51
|
-
| . | TextField | runtime | [
|
|
52
|
-
| . | ThemeToggle | runtime | [
|
|
53
|
-
| . | TiltCard | runtime | [
|
|
54
|
-
| . | Timeline | runtime | [
|
|
55
|
-
| . | ToastProvider | runtime | [
|
|
56
|
-
| . | Tooltip | runtime | [
|
|
7
|
+
| . | Alert | runtime | [COMPONENT-GUIDES.md#alert](COMPONENT-GUIDES.md#alert) |
|
|
8
|
+
| . | Avatar | runtime | [COMPONENT-GUIDES.md#avatar](COMPONENT-GUIDES.md#avatar) |
|
|
9
|
+
| . | Badge | runtime | [COMPONENT-GUIDES.md#badge](COMPONENT-GUIDES.md#badge) |
|
|
10
|
+
| . | BrandMark | runtime | [COMPONENT-GUIDES.md#brandmark](COMPONENT-GUIDES.md#brandmark) |
|
|
11
|
+
| . | Breadcrumbs | runtime | [COMPONENT-GUIDES.md#breadcrumbs](COMPONENT-GUIDES.md#breadcrumbs) |
|
|
12
|
+
| . | Button | runtime | [COMPONENT-GUIDES.md#button](COMPONENT-GUIDES.md#button) |
|
|
13
|
+
| . | Card | runtime | [COMPONENT-GUIDES.md#card](COMPONENT-GUIDES.md#card) |
|
|
14
|
+
| . | Checkbox | runtime | [COMPONENT-GUIDES.md#checkbox](COMPONENT-GUIDES.md#checkbox) |
|
|
15
|
+
| . | CountUp | runtime | [COMPONENT-GUIDES.md#countup](COMPONENT-GUIDES.md#countup) |
|
|
16
|
+
| . | DataTable | runtime | [COMPONENT-GUIDES.md#datatable](COMPONENT-GUIDES.md#datatable) |
|
|
17
|
+
| . | DepthButton | runtime | [COMPONENT-GUIDES.md#depthbutton](COMPONENT-GUIDES.md#depthbutton) |
|
|
18
|
+
| . | Dialog | runtime | [COMPONENT-GUIDES.md#dialog](COMPONENT-GUIDES.md#dialog) |
|
|
19
|
+
| . | Disclosure | runtime | [COMPONENT-GUIDES.md#disclosure](COMPONENT-GUIDES.md#disclosure) |
|
|
20
|
+
| . | Divider | runtime | [COMPONENT-GUIDES.md#divider](COMPONENT-GUIDES.md#divider) |
|
|
21
|
+
| . | DropdownMenu | runtime | [COMPONENT-GUIDES.md#dropdownmenu](COMPONENT-GUIDES.md#dropdownmenu) |
|
|
22
|
+
| . | EmptyState | runtime | [COMPONENT-GUIDES.md#emptystate](COMPONENT-GUIDES.md#emptystate) |
|
|
23
|
+
| . | ExternalLink | runtime | [COMPONENT-GUIDES.md#externallink](COMPONENT-GUIDES.md#externallink) |
|
|
24
|
+
| . | Field | runtime | [COMPONENT-GUIDES.md#field](COMPONENT-GUIDES.md#field) |
|
|
25
|
+
| . | FlipCard | runtime | [COMPONENT-GUIDES.md#flipcard](COMPONENT-GUIDES.md#flipcard) |
|
|
26
|
+
| . | IconButton | runtime | [COMPONENT-GUIDES.md#iconbutton](COMPONENT-GUIDES.md#iconbutton) |
|
|
27
|
+
| . | Kbd | runtime | [COMPONENT-GUIDES.md#kbd](COMPONENT-GUIDES.md#kbd) |
|
|
28
|
+
| . | Magnetic | runtime | [COMPONENT-GUIDES.md#magnetic](COMPONENT-GUIDES.md#magnetic) |
|
|
29
|
+
| . | Marquee | runtime | [COMPONENT-GUIDES.md#marquee](COMPONENT-GUIDES.md#marquee) |
|
|
30
|
+
| . | Pagination | runtime | [COMPONENT-GUIDES.md#pagination](COMPONENT-GUIDES.md#pagination) |
|
|
31
|
+
| . | Popover | runtime | [COMPONENT-GUIDES.md#popover](COMPONENT-GUIDES.md#popover) |
|
|
32
|
+
| . | ProgressBar | runtime | [COMPONENT-GUIDES.md#progressbar](COMPONENT-GUIDES.md#progressbar) |
|
|
33
|
+
| . | RadioGroup | runtime | [COMPONENT-GUIDES.md#radiogroup](COMPONENT-GUIDES.md#radiogroup) |
|
|
34
|
+
| . | Reveal | runtime | [COMPONENT-GUIDES.md#reveal](COMPONENT-GUIDES.md#reveal) |
|
|
35
|
+
| . | RevealHeading | runtime | [COMPONENT-GUIDES.md#revealheading](COMPONENT-GUIDES.md#revealheading) |
|
|
36
|
+
| . | ScrollProgress | runtime | [COMPONENT-GUIDES.md#scrollprogress](COMPONENT-GUIDES.md#scrollprogress) |
|
|
37
|
+
| . | SectionLabel | runtime | [COMPONENT-GUIDES.md#sectionlabel](COMPONENT-GUIDES.md#sectionlabel) |
|
|
38
|
+
| . | SegmentedControl | runtime | [COMPONENT-GUIDES.md#segmentedcontrol](COMPONENT-GUIDES.md#segmentedcontrol) |
|
|
39
|
+
| . | SelectField | runtime | [COMPONENT-GUIDES.md#selectfield](COMPONENT-GUIDES.md#selectfield) |
|
|
40
|
+
| . | Skeleton | runtime | [COMPONENT-GUIDES.md#skeleton](COMPONENT-GUIDES.md#skeleton) |
|
|
41
|
+
| . | Slider | runtime | [COMPONENT-GUIDES.md#slider](COMPONENT-GUIDES.md#slider) |
|
|
42
|
+
| . | GitHubIcon | runtime | [COMPONENT-GUIDES.md#githubicon](COMPONENT-GUIDES.md#githubicon) |
|
|
43
|
+
| . | LinkedInIcon | runtime | [COMPONENT-GUIDES.md#linkedinicon](COMPONENT-GUIDES.md#linkedinicon) |
|
|
44
|
+
| . | Spinner | runtime | [COMPONENT-GUIDES.md#spinner](COMPONENT-GUIDES.md#spinner) |
|
|
45
|
+
| . | Stat | runtime | [COMPONENT-GUIDES.md#stat](COMPONENT-GUIDES.md#stat) |
|
|
46
|
+
| . | Stepper | runtime | [COMPONENT-GUIDES.md#stepper](COMPONENT-GUIDES.md#stepper) |
|
|
47
|
+
| . | Switch | runtime | [COMPONENT-GUIDES.md#switch](COMPONENT-GUIDES.md#switch) |
|
|
48
|
+
| . | Tabs | runtime | [COMPONENT-GUIDES.md#tabs](COMPONENT-GUIDES.md#tabs) |
|
|
49
|
+
| . | Tag | runtime | [COMPONENT-GUIDES.md#tag](COMPONENT-GUIDES.md#tag) |
|
|
50
|
+
| . | TextArea | runtime | [COMPONENT-GUIDES.md#textarea](COMPONENT-GUIDES.md#textarea) |
|
|
51
|
+
| . | TextField | runtime | [COMPONENT-GUIDES.md#textfield](COMPONENT-GUIDES.md#textfield) |
|
|
52
|
+
| . | ThemeToggle | runtime | [COMPONENT-GUIDES.md#themetoggle](COMPONENT-GUIDES.md#themetoggle) |
|
|
53
|
+
| . | TiltCard | runtime | [COMPONENT-GUIDES.md#tiltcard](COMPONENT-GUIDES.md#tiltcard) |
|
|
54
|
+
| . | Timeline | runtime | [COMPONENT-GUIDES.md#timeline](COMPONENT-GUIDES.md#timeline) |
|
|
55
|
+
| . | ToastProvider | runtime | [COMPONENT-GUIDES.md#toastprovider](COMPONENT-GUIDES.md#toastprovider) |
|
|
56
|
+
| . | Tooltip | runtime | [COMPONENT-GUIDES.md#tooltip](COMPONENT-GUIDES.md#tooltip) |
|
|
57
57
|
| . | useClipboardCopy | runtime | [HOOKS.md#clipboard](HOOKS.md#clipboard) |
|
|
58
58
|
| . | useDismiss | runtime | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
|
|
59
59
|
| . | useHeaderScroll | runtime | [HOOKS.md#scroll-and-navigation](HOOKS.md#scroll-and-navigation) |
|
|
@@ -66,15 +66,15 @@ Generated for 0.6.2 from actual source/runtime declarations and the manifest. Th
|
|
|
66
66
|
| . | useTheme | runtime | [HOOKS.md#theme](HOOKS.md#theme) |
|
|
67
67
|
| . | useToast | runtime | [HOOKS.md#toast](HOOKS.md#toast) |
|
|
68
68
|
| . | Section | type | [HELPERS.md#public-types](HELPERS.md#public-types) |
|
|
69
|
-
| . | SceneBoundary | runtime | [
|
|
69
|
+
| . | SceneBoundary | runtime | [COMPONENT-GUIDES.md#sceneboundary](COMPONENT-GUIDES.md#sceneboundary) |
|
|
70
70
|
| . | safeHref | runtime | [HELPERS.md](HELPERS.md) |
|
|
71
|
-
| . | ThemeScope | runtime | [
|
|
71
|
+
| . | ThemeScope | runtime | [COMPONENT-GUIDES.md#themescope](COMPONENT-GUIDES.md#themescope) |
|
|
72
72
|
| . | FloatingOptions | type | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
|
|
73
73
|
| . | PanelFocusOptions | type | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
|
|
74
74
|
| . | DismissReason | type | [HELPERS.md#public-types](HELPERS.md#public-types) |
|
|
75
|
-
| . | Table | runtime | [
|
|
75
|
+
| . | Table | runtime | [COMPONENT-GUIDES.md#table](COMPONENT-GUIDES.md#table) |
|
|
76
76
|
| . | TableProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
|
|
77
|
-
| . | Combobox | runtime | [
|
|
77
|
+
| . | Combobox | runtime | [COMPONENT-GUIDES.md#combobox](COMPONENT-GUIDES.md#combobox) |
|
|
78
78
|
| . | ComboboxProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
|
|
79
79
|
| . | ComboboxOption | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
|
|
80
80
|
| . | AlertTone | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
|
package/SIZE.md
CHANGED
|
@@ -8,7 +8,7 @@ CONTOUR_SIZE_OUTPUT=/absolute/path/sizes.json npm run measure:size
|
|
|
8
8
|
CONTOUR_SIZE_OUTPUT=/absolute/path/check.json npm run check:size
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Set `CONTOUR_ARCHIVE` to the already packed candidate to reuse it. Fixtures install React/React DOM 19.3.0; Next uses 16.4.
|
|
11
|
+
Set `CONTOUR_ARCHIVE` to the already packed candidate to reuse it. Fixtures install React/React DOM 19.3.0; Next uses 16.4.3, and Vite/Chromium/Node versions are recorded from the running tools. The report names package/source commit/dirty state, archive checksum/files/compressed/unpacked bytes, the fresh dependency lock hash, resolved dependency versions, fixtures, exclusions, raw/gzip file sizes and actual Resource Timing transfers. These are reproducible fixtures, not latency or production-site benchmarks. No React/framework externals are removed from the application totals. Next shared JS is the intersection of actually fetched URLs across the measured fresh routes; route-specific JS is listed separately. Server build output is excluded from client bytes.
|
|
12
12
|
|
|
13
13
|
Raw minified JS/CSS is reported per actual fetched file and by fixture. Gzip level 9 is reported **per file**, never summed and advertised as an application gzip total. Network transfer, encoded body and decoded body measurements are kept separately, including document/RSC resources. CSS/font requests, archive size and library dependency-closure installed file bytes are separate categories. Install counts exclude Next/Vite/development tooling and record React peers separately. Optional Three.js, Lenis and RHF are absent from core fixtures.
|
|
14
14
|
|
|
@@ -46,6 +46,6 @@ Three.js/Lenis stay optional peers behind their entries. Core imports do not ins
|
|
|
46
46
|
|
|
47
47
|
## 0.6 Combobox measurement
|
|
48
48
|
|
|
49
|
-
On 14 October 2026, an initial 0.6.0 candidate used the same production fixtures to measure the new Combobox journey with React 19.3.0, Vite 8.3.2, Next 16.4.
|
|
49
|
+
On 14 October 2026, an initial 0.6.0 candidate used the same production fixtures to measure the new Combobox journey with React 19.3.0, Vite 8.3.2, Next 16.4.3/webpack, Node 26.10.0 and Chromium 153. A fresh Vite page fetched 365,549 raw JS bytes; selective forms/actions CSS fetched 24,729 bytes (aggregate 47,625). The Next Combobox route fetched 593,605 raw client JS bytes and 46,807 CSS bytes, including framework/shared assets. These are dated candidate measurements, not immutable final-archive byte counts. The release gate remeasures its exact archive. These whole-application fixtures are not an isolated component size or an upstream bundle-size badge. Per-file gzip and actual Resource Timing are retained in the report; independent gzip files are not advertised as an additive component total.
|
|
50
50
|
|
|
51
51
|
Every previous journey stays within its existing budget. Initial Combobox budgets are added separately under the same 10% plus 1,024-byte policy; old budgets are not reset to the new measurements. The root Button fixture remains 227,291 raw Vite JS bytes with zero font requests; importing one component does not require downloading the Combobox route's full client code. All runtime dependencies still install with the package. Base UI adds installed files and an unstyled interaction dependency; see FOUNDATION.md for the identical-host comparison and its limitations. Its optional date/time peers are absent from core consumers. TanStack Table/Store and RHF are recipe dependencies only.
|
package/STYLING.md
CHANGED
|
@@ -69,4 +69,4 @@ Forced-color rules preserve focus, selected control outlines, radio marks, inval
|
|
|
69
69
|
|
|
70
70
|
## Version and reproduction
|
|
71
71
|
|
|
72
|
-
Reference version **0.6.
|
|
72
|
+
Reference version **0.6.4**. A source version does not establish publication; check the npm registry for availability. [Versioned source](https://github.com/abuzareal/contour-ui/tree/v0.6.4/src) and [emitted type inventory](PUBLIC-API.md) describe this contract; tag links resolve after release. [Report Styles 0.6.4](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&component=Styles&version=0.6.4), using the [public minimal reproduction](examples/reproduction) and synthetic data.
|
package/SUPPORT.md
CHANGED
|
@@ -33,4 +33,4 @@ Every result should name package/commit/archive, date, OS/browser/tool versions,
|
|
|
33
33
|
|
|
34
34
|
## Version and reproduction
|
|
35
35
|
|
|
36
|
-
Reference version **0.6.
|
|
36
|
+
Reference version **0.6.4**. A source version does not establish publication; check the npm registry for availability. [Versioned source](https://github.com/abuzareal/contour-ui/tree/v0.6.4/src) and [emitted type inventory](PUBLIC-API.md) describe this contract; tag links resolve after release. [Report Support matrix 0.6.4](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&component=Support%20matrix&version=0.6.4), using the [public minimal reproduction](examples/reproduction) and synthetic data.
|
package/THREE.md
CHANGED
|
@@ -37,4 +37,4 @@ Use one stage owner per host, stable setup and deliberate size. Product controls
|
|
|
37
37
|
|
|
38
38
|
## Version and reproduction
|
|
39
39
|
|
|
40
|
-
Reference version **0.6.
|
|
40
|
+
Reference version **0.6.4**. A source version does not establish publication; check the npm registry for availability. [Versioned source](https://github.com/abuzareal/contour-ui/tree/v0.6.4/src) and [emitted type inventory](PUBLIC-API.md) describe this contract; tag links resolve after release. [Report Three 0.6.4](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&component=Three&version=0.6.4), using the [public minimal reproduction](examples/reproduction) and synthetic data.
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
/** Round avatar showing a photo or Space Grotesk initials, with an optional presence dot. */
|
|
4
|
+
import { useState } from "react";
|
|
3
5
|
import { ccx } from "../../lib/classNames.js";
|
|
4
6
|
const initialsOf = (name) => name
|
|
5
|
-
.
|
|
7
|
+
.trim()
|
|
8
|
+
.split(/\s+/)
|
|
6
9
|
.map((part) => part[0])
|
|
7
10
|
.slice(0, 2)
|
|
8
11
|
.join("")
|
|
9
12
|
.toUpperCase();
|
|
10
13
|
export default function Avatar({ name, initials, src, size = "md", status, statusLabel, }) {
|
|
11
|
-
|
|
14
|
+
const [failedSource, setFailedSource] = useState();
|
|
15
|
+
return (_jsxs("span", { className: ccx("avatar", `avatar-${size}`), children: [src && src !== failedSource ? (_jsx("img", { src: src, alt: name, loading: "lazy", decoding: "async", onError: () => setFailedSource(src) }, src)) : (_jsx("span", { role: "img", "aria-label": name, className: ccx("avatar-initials"), children: initials ?? initialsOf(name) })), status && (_jsx("span", { className: ccx("avatar-status", `avatar-status-${status}`), role: "img", "aria-label": statusLabel ?? (status === "online" ? "Online" : "Away") }))] }));
|
|
12
16
|
}
|
|
@@ -6,11 +6,12 @@ import { useRef } from "react";
|
|
|
6
6
|
import { nextIndexForKey } from "../../lib/keyboard.js";
|
|
7
7
|
export default function SegmentedControl({ label, options, value, onChange, }) {
|
|
8
8
|
const buttons = useRef([]);
|
|
9
|
+
const focusIndex = Math.max(0, options.findIndex((option) => option.value === value));
|
|
9
10
|
return (_jsx("div", { className: ccx("segmented"), role: "radiogroup", "aria-label": label, children: options.map((option, index) => {
|
|
10
11
|
const selected = option.value === value;
|
|
11
12
|
return (_jsx("button", { ref: (element) => {
|
|
12
13
|
buttons.current[index] = element;
|
|
13
|
-
}, type: "button", role: "radio", "aria-checked": selected, tabIndex:
|
|
14
|
+
}, type: "button", role: "radio", "aria-checked": selected, tabIndex: index === focusIndex ? 0 : -1, className: ccx("segmented-option"), onClick: () => onChange(option.value), onKeyDown: (event) => {
|
|
14
15
|
const next = nextIndexForKey(event.key, index, options.length, "horizontal", event.currentTarget.ownerDocument.defaultView?.getComputedStyle(event.currentTarget).direction === "rtl"
|
|
15
16
|
? "rtl"
|
|
16
17
|
: "ltr");
|
|
@@ -7,14 +7,26 @@ import { ToastContext, } from "../../hooks/useToast.js";
|
|
|
7
7
|
import { ccx } from "../../lib/classNames.js";
|
|
8
8
|
const autoDismissAfter = 5000;
|
|
9
9
|
function Toast({ toast, onDismiss, dismissLabel, }) {
|
|
10
|
-
const [
|
|
10
|
+
const [hovered, setHovered] = useState(false);
|
|
11
|
+
const [focused, setFocused] = useState(false);
|
|
12
|
+
const [hidden, setHidden] = useState(false);
|
|
13
|
+
const paused = hovered || focused || hidden;
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const update = () => setHidden(document.visibilityState === "hidden");
|
|
16
|
+
update();
|
|
17
|
+
document.addEventListener("visibilitychange", update);
|
|
18
|
+
return () => document.removeEventListener("visibilitychange", update);
|
|
19
|
+
}, []);
|
|
11
20
|
useEffect(() => {
|
|
12
21
|
if (paused)
|
|
13
22
|
return;
|
|
14
23
|
const timer = window.setTimeout(() => onDismiss(toast.id), autoDismissAfter);
|
|
15
24
|
return () => window.clearTimeout(timer);
|
|
16
25
|
}, [paused, toast.id, onDismiss]);
|
|
17
|
-
return (_jsxs("li", { className: ccx("toast", `toast-${toast.tone ?? "neutral"}`), onPointerEnter: () =>
|
|
26
|
+
return (_jsxs("li", { className: ccx("toast", `toast-${toast.tone ?? "neutral"}`), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (event) => {
|
|
27
|
+
if (!event.currentTarget.contains(event.relatedTarget))
|
|
28
|
+
setFocused(false);
|
|
29
|
+
}, children: [_jsx("span", { className: ccx("toast-bar"), "aria-hidden": "true" }), _jsxs("div", { className: ccx("toast-content"), children: [_jsx("strong", { children: toast.title }), toast.message && _jsx("p", { children: toast.message })] }), _jsx("button", { type: "button", className: ccx("toast-close"), "aria-label": dismissLabel, onClick: () => onDismiss(toast.id), children: _jsx(X, { size: 15 }) })] }));
|
|
18
30
|
}
|
|
19
31
|
export default function ToastProvider({ children, label = "Notifications", dismissLabel = "Dismiss notification", }) {
|
|
20
32
|
const [toasts, setToasts] = useState([]);
|