trc-ui 0.1.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 0.5.0
+
+Covers releases 0.2 to 0.5 of the roadmap: 33 new components, each with its documentation page in English and French at [ui.theringconcept.com](https://ui.theringconcept.com).
+
+### Overlays and feedback
+
+- `Dialog`: modal window with title, description and actions; focus kept inside, Escape and overlay to close, focus returned.
+- `Drawer`: side panel from the left or right, on the same modal layer; the `SiteHeader` mobile menu now uses it.
+- `DropdownMenu`: menu of actions with full keyboard support (arrows, Home, End, typeahead), disabled and destructive items, links.
+- `Popover`: non-modal floating panel, focus moved inside, Escape and outside click to close; controlled or not.
+- `Tooltip`: on hover and keyboard focus, tied with `aria-describedby`, hoverable and dismissable with Escape.
+- `toast()` and `Toaster`: global queue, polite announcements and immediate ones for errors, pause on hover and focus, one action.
+- `Alert`: inline message with a thin colored edge.
+- Floating elements are portaled and placed against their trigger, flipping when there is no room.
+
+### Navigation
+
+- `Tabs`: thin labels underlined with the accent, roving tabindex, automatic or manual activation.
+- `SegmentedControl`: pill switch built on native radio buttons.
+- `Accordion`: single or multiple, animated height, closed content out of the accessibility tree, arrow keys between titles.
+- `Breadcrumbs`: trail to the current page.
+- `Pagination`: constant-width range with ellipses, buttons or links (`href` function or `"/page/{page}"` pattern, usable from server components).
+- `LanguageSwitcher`: the EN | FR pill, as links (with `lang` and `hreflang`) or buttons.
+- `Steps`: vertical timeline with large thin numbers and the current step.
+
+### Forms
+
+- `RadioGroup`: native radio buttons in a fieldset, hint and error tied to the group, vertical or horizontal.
+- `PasswordInput`: Show / Hide button whose accessible name includes its visible text.
+- `PinInput`: one box per character, paste and text-message autofill, Backspace and arrow keys.
+- `Combobox`: search with suggestions, case and accent insensitive, `aria-activedescendant` keyboard navigation.
+- `FileInput` and `Dropzone`: native file input, drag and drop, validation by type, size and count, announced rejections; `formatBytes`, `acceptsFile` and `validateFiles` helpers.
+- `Slider`: native range input filled with the accent, formatted and announced value.
+- `DatePicker`: calendar dialog with full keyboard support, `Intl` month and day names, min and max dates.
+
+### Data display
+
+- `Avatar` and `AvatarGroup`: picture or initials, overlapping group with a counter.
+- `Tag`: small label, accent tone, optional remove button.
+- `Stat`: key figure in a large thin number, with its change.
+- `Table`: captioned data table, sortable columns announced with `aria-sort`, keyboard-scrollable region.
+- `Skeleton`, `Spinner` and `Progress`: loading placeholders, status spinner, determinate or indeterminate progress bar.
+- `Kbd` and `Divider`: keyboard keys, hairlines with an optional label.
+- `CodeBlock`: file tab and copy button; bring your own highlighting.
+
+### Tooling
+
+- Unit and accessibility tests (Vitest, Testing Library, axe) for every component.
+- Label props that took a function (`moreLabel`, `pageLabel`, `charLabel`, `countLabel`, `removeLabel`, `rejectionLabel`) also accept string templates such as `"{count} more"`, usable from server components.
+
+### Fixes
+
+- Header dropdowns opened by hovering no longer close on the click that follows.
+
+### Changes to note
+
+- The `SiteHeader` mobile menu is now a `Drawer`: if you styled its panel through the internal `.trc-drawer` classes, use the new `.trc-layer` and `.trc-drawer` structure.
+
 ## 0.1.0
 
 First public release.

package/README.md

@@ -3,7 +3,7 @@
 React components with a deep black design: near-black backgrounds, graphite cards, thin headings, a single accent color and pill buttons whose dot stretches on hover.
 
 [![npm](https://img.shields.io/npm/v/trc-ui?color=08c8d8&label=npm)](https://www.npmjs.com/package/trc-ui)
-[![license](https://img.shields.io/npm/l/trc-ui?color=08c8d8)](https://github.com/aa404/trc-ui/blob/main/LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-08c8d8)](https://github.com/aa404/trc-ui/blob/main/LICENSE)
 
 - **Sober.** Near-black backgrounds, graphite cards, one accent color. Depth comes from shades of grey, not shadows.
 - **Thin.** Light Montserrat headings carry the page, with one accent word per title.
@@ -11,10 +11,16 @@ React components with a deep black design: near-black backgrounds, graphite card
 - **Accessible.** Native form controls, labels and messages wired automatically, keyboard focus everywhere, reduced motion respected.
 - **Light.** No runtime dependency besides React. One stylesheet, themable with CSS variables.
 
+**Documentation and live demos: [ui.theringconcept.com](https://ui.theringconcept.com)**
+
 ## Installation
 
 ```bash
 npm install trc-ui
+# or
+yarn add trc-ui
+pnpm add trc-ui
+bun add trc-ui
 ```
 
 React 18 or later is required.
@@ -110,7 +116,7 @@ Every color, radius and motion setting is a CSS variable prefixed with `--trc-`.
 
 Variables cascade, so you can also theme a single area: `<div style={{ "--trc-accent": "#d41367" }}>`.
 
-The documentation includes a colors generator that builds a 10-shade scale from your brand color, checks WCAG contrast on deep black and gives you the code.
+The documentation includes a [colors generator](https://ui.theringconcept.com/docs/colors-generator/) that builds a 10-shade scale from your brand color, checks WCAG contrast on deep black and gives you the code.
 
 ## Browser support