trc_ui 0.1.0 (Flutter)

First release: the Flutter port of trc ui 0.5.

• Tokens and theme: TrcThemeData (a ThemeExtension), TrcTheme, toMaterialTheme(); the accent drives the soft accent and the focus ring. Montserrat bundled.
• Typography: TrcHeading with an accent word between asterisks, TrcText, TrcAccentText, plainText, TrcStepNumber, TrcEnter.
• TrcPillButton: the stretching dot on hover and keyboard focus, a short stretch on touch, solid and compact variants, loading state, custom icon.
• Surfaces: TrcCard (alt tone, interactive, watermark icon), TrcSection (inset card), TrcContainer.
• Forms: TrcField, TrcTextField, TrcTextArea, TrcSelect, TrcCheckbox, TrcSwitch, TrcRadioGroup, TrcPasswordField, TrcPinInput, TrcCombobox, TrcSlider, TrcDatePicker, TrcFileField and TrcDropzone (with acceptsFile, validateFiles, formatBytes).
• Overlays and feedback: showTrcDialog, showTrcDrawer, TrcMenu, TrcPopover, TrcTooltip, TrcToaster and TrcToast, TrcAlert.
• Navigation: TrcTabs, TrcSegmentedControl, TrcAccordion, TrcBreadcrumbs, TrcPagination (paginationRange), TrcLanguageSwitcher, TrcSteps, and TrcBottomNav (floating or docked, sliding accent pill, badges, glass).
• Data display: TrcAvatar, TrcAvatarGroup, TrcTag, TrcStat, TrcTable, TrcSkeleton, TrcSpinner, TrcProgress, TrcKbd, TrcDivider, TrcCodeBlock.
• App chrome: TrcHeader, TrcPageHero, TrcBackToTop.
• Semantics, keyboard support and reduced motion throughout; every built-in text translatable.

Install

flutter pub add trc_ui

Package: https://pub.dev/packages/trc_ui

trc-ui 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.

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.

Install

npm install trc-ui

trc-ui on npm · Documentation

trc-ui 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.

Install

npm install trc-ui

trc-ui on npm