trc-ui 0.0.0-stage → 0.5.0

package/CHANGELOG.md

@@ -0,0 +1,72 @@
+# 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.
+
+- Design tokens as CSS variables prefixed with `--trc-`, with a single themable accent color.
+- Typography: `Heading` with an accent word between asterisks, `Text`, `AccentText`, `plainText`, `StepNumber`.
+- Pill buttons: `PillButton` and `PillLink`, with the stretching dot, a compact size, a solid variant and a loading state.
+- Surfaces: `Card` (alt tone, interactive, watermark icon), `Section` (inset card), `Container`.
+- Forms: `Field`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, wired for screen readers.
+- Site chrome: `SiteHeader` (floating, dropdowns, accessible mobile panel) and `SiteFooter`.
+- Heroes: `PageHero`, `HeroVideo` (crossfading videos, soft parallax) and `BackToTop`.
+- ESM and CommonJS builds, TypeScript types, `"use client"` for the Next.js App Router.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aurel Agbado
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,127 @@
-# Temporary Holding Version
+# trc ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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/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.
+- **Alive.** Pills that stretch, cards that wake up on hover, a header that blurs as you scroll.
+- **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.
+
+## Setup
+
+Import the stylesheet once, at the root of your app, and add the `trc` class to `<body>`:
+
+```tsx
+import "trc-ui/styles.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="trc">{children}</body>
+    </html>
+  );
+}
+```
+
+The design relies on [Montserrat](https://fonts.google.com/specimen/Montserrat) (weights 300, 400 and 500), which is not bundled. Load it, then point trc ui to it:
+
+```tsx
+// Next.js
+import { Montserrat } from "next/font/google";
+
+const montserrat = Montserrat({ subsets: ["latin"], weight: ["300", "400", "500"], variable: "--font-montserrat" });
+// <html className={montserrat.variable}>
+```
+
+```css
+:root {
+  --trc-font: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Without Next.js, a Google Fonts `<link>` is enough: trc ui uses `"Montserrat"` by default.
+
+## Usage
+
+```tsx
+import { Heading, PillButton, Text } from "trc-ui";
+
+export function Welcome() {
+  return (
+    <section>
+      <Heading as="h1" size="display">
+        Welcome to *deep black.*
+      </Heading>
+      <Text size="lg">The words between asterisks take the accent color.</Text>
+      <PillButton solid>Get started</PillButton>
+    </section>
+  );
+}
+```
+
+## Components
+
+| Component | What it is |
+| --- | --- |
+| `Heading`, `Text`, `AccentText`, `StepNumber` | Thin headings with an accent word, body text, large thin step numbers. |
+| `PillButton`, `PillLink` | The signature pill: a round accent dot that stretches to fill the pill on hover. |
+| `Card`, `Section`, `Container` | Graphite cards (with an optional watermark icon), inset sections, centered containers. |
+| `Field`, `Input`, `Textarea`, `Select` | Native controls; `Field` wires the label, hint and error for screen readers. |
+| `Checkbox`, `Switch` | Native checkboxes, the switch announced as a switch. |
+| `SiteHeader`, `SiteFooter` | Floating header with dropdowns and a mobile side panel; footer as a graphite card. |
+| `PageHero`, `HeroVideo`, `BackToTop` | Photo and video heroes inset from the screen edges; a floating back-to-top button. |
+
+## With a router
+
+Links accept your router's link component: `as` on `PillLink` and `Card`, `linkAs` on `SiteHeader` and `SiteFooter`.
+
+```tsx
+import Link from "next/link";
+import { PillLink, SiteHeader } from "trc-ui";
+
+<PillLink as={Link} href="/pricing">See pricing</PillLink>
+<SiteHeader linkAs={Link} logo={<Logo />} logoLabel="Home" nav={nav} />
+```
+
+Components ship with the `"use client"` directive and work as-is in the Next.js App Router.
+
+## Theming
+
+Every color, radius and motion setting is a CSS variable prefixed with `--trc-`. Change the accent once:
+
+```css
+:root {
+  --trc-accent: #d41367;
+  --trc-on-accent: #ffffff; /* text on the accent: near black by default */
+}
+```
+
+Variables cascade, so you can also theme a single area: `<div style={{ "--trc-accent": "#d41367" }}>`.
+
+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
+
+trc ui uses `color-mix()` and `:has()`: Chrome and Edge 111+, Safari 16.2+, Firefox 121+.
+
+## License
+
+[MIT](https://github.com/aa404/trc-ui/blob/main/LICENSE), by Aurel Agbado, [The Ring Concept](https://www.theringconcept.com/).