Releases
Changelog
Every release of @nizivo/react, @nizivo/tokens, @nizivo/icons and @nizivo/charts, newest first.
The four packages release together, at one version. Each release lists what changed in each package; a package with nothing of its own moved only to keep the versions in step.
0.5.0
@nizivo/react
Minor changes
- The unstable CommandMenu takes results from a server, caps its groups and says how many rows show.
filter="none"onCommandMenu.Popupshows every item as given,query,defaultQueryandonQueryChangemake the search text yours to fetch with, andloadingonCommandMenu.Listmarks the list busy and shows "Searching…" while it has no rows.limitonCommandMenu.Groupshows at most that many of its matching rows, and the arrow keys skip the rest; a group with no matching row is left out with its heading. Once the typing stops, a polite live region says "Results: {count}" or "No results". Two strings joinenUS.commandMenu:loadingandresults. - The unstable CommandMenu renders long lists in part:
virtualizedonCommandMenu.Listkeeps only the rows in view in the page, in a fixed 20rem box, while the arrow keys, the search and the spoken count still cover every row; the virtualizer loads in a chunk of its own, only for a virtualized list. A row withhrefnow renders an<a>, as React Aria's MenuItem expects (it warned in development), so it opens in a new tab like any link; in forced colours its text takes the system's link colour, as Menu's link rows do. - New, unstable:
GlowOrb(@nizivo/react/unstable/glow-orb), the voice orb as a WebGL shader with no dependency. A glossy sphere that grows with the voicelevel(a number, or a function read each frame), its outline moving while it listens or speaks and its light drifting so the highlight changes angle; without a level it simulates a voice for itsstate. Pass it as VoiceOrb'sorb. It draws only on screen, at a pixel ratio of at most 2, one still frame under Reduced motion, and shows VoiceOrb's CSS orb on the server and where WebGL is missing.--nz-glow-orb-light,--nz-glow-orb-deepand--nz-glow-orb-halorecolour it. - The unstable
ShaderSurfacehas every type the design's Shader Surface has:contourandcontour-dark(topographic lines),dot-matrix(a grid of dots in slow waves, always dark),glow-orbandglow-orb-dark(GlowOrb's sphere in a glow),rays(fine strands of light) andmesh(a soft four-colour field), besideauroraandaurora-dark. Each variant's shader loads when the first surface of that variant mounts. BentoTile's square and tall tiles take Glow Orb and Contour, as the design draws them. The colour hooks are now--nz-shader-surface-groundand--nz-shader-surface-tone-1to-tone-3, for every variant. GlowOrb and ShaderSurface now give their WebGL context back when they unmount, so a page that mounts many in turn never runs out. - New, unstable:
ShaderSurface(@nizivo/react/unstable/shader-surface), the design's Shader Surface as a dependency-free WebGL background, with Aurora first:variant="aurora"follows the theme and"aurora-dark"stays dark on a light page. Pass it as CtaBand'sbackground, BentoTile'sbackgroundor ProfileCard'scover, which then drop their CSS stand-ins; CtaBand keeps a soft dark scrim behind its text. It shares GlowOrb's runtime: it draws only on screen, at a pixel ratio of at most 2, one still frame under Reduced motion, and shows a CSS poster on the server and where WebGL is missing.
Patch changes
- The unstable AiWelcome takes
GlowOrbin itsorbslot (orb={<GlowOrb />}) and drops its own CSS halo behind it, as VoiceOrb does. - Select's trigger no longer names ids that are not on the page in its server HTML, which is what a page shows before hydration and without JavaScript. Outside a Field, or in a Field with no description or error, its
aria-describedbynamed React Aria's own description and error ids, which Nizivo never renders; it now carries only the Field's ids and the trigger's ownaria-describedby. With anaria-labeland anidof its own (a Field's, or one passed toSelect.Trigger), itsaria-labelledbynamed React Aria's generated id for the trigger, and now names the trigger's real id. - @nizivo/tokens@0.5.0
@nizivo/charts
Patch changes
- @nizivo/tokens@0.5.0
0.4.0
@nizivo/react
Minor changes
- The AI kit gains its answer and agent parts (unstable):
ResponseBlock(@nizivo/react/unstable/response-block) is one answer from thinking through streaming, with a Stop button, to complete or an error with Retry, read once when complete;ToolCallCard(./unstable/tool-call-card) shows an action the AI takes step by step, each step's status spoken;FeedbackBar(./unstable/feedback-bar) is a thumbs up and down that toggle, with optional reasons;ApprovalCard(./unstable/approval-card) asks before an action that cannot be undone, with focus on Cancel and Escape to cancel. ResponseBlock and ToolCallCard are server parts. Their strings join the unstable catalogue (./locales/en-US-unstable). - The AI kit gains its controls (unstable):
ModelSelector(@nizivo/react/unstable/model-selector) picks a model by its trade-off in words, on Select;InlineAssist(./unstable/inline-assist) is a toolbar of AI actions for selected text, with one Tab stop and the arrow keys;VoiceOrb(./unstable/voice-orb) is voice mode, a written state and one start and stop button, with a CSS orb that anorbslot can replace. VoiceOrb is a server part. Their strings join the unstable catalogue (./locales/en-US-unstable). - The AI kit gains the conversation (unstable):
ChatMessageandChatLog(@nizivo/react/unstable/chat-message) are a turn with its sender named in text and therole="log"live region that holds them;PromptComposer(./unstable/prompt-composer) is a growing textarea with tools and a send button, Enter to send and Shift+Enter for a line;AiWelcome(./unstable/ai-welcome) is a new conversation's empty state. ChatMessage, ChatLog and AiWelcome are server parts. Their strings join the unstable catalogue (./locales/en-US-unstable). - The AI kit begins (unstable, Figma's AI page), with six server parts and no client JavaScript:
AiBadge(@nizivo/react/unstable/ai-badge) says content was written or changed by AI, in the lime that marks AI;ThinkingIndicator(./unstable/thinking-indicator) is the wait before the first word, a polite status with CSS dots;Citation(./unstable/citation) links a claim to its source, named "Source 1: …";SourceCard(./unstable/source-card) is a web page or file as one link;SuggestionChipandSuggestionGroup(./unstable/suggestion-chip) are prompt starters that fill the composer;UsageMeter(./unstable/usage-meter) shows AI usage left on a Meter that warns from 80 %. Their strings join the unstable catalogue (./locales/en-US-unstable). - v0.5 adds Figma's Link and docs-site parts (unstable):
Link(@nizivo/react/unstable/link), underlined navigation in text that says when it opens a new tab;DocsCard(./unstable/docs-card), an entry point into documentation as one link;CopyButton(./unstable/copy-button), which copies text and announces "Copied" for 2 seconds; andCodeBlock(./unstable/code-block), copyable commands or snippets on a dark surface with versions as tabs. Link and DocsCard are server parts. Their strings join the unstable catalogue (./locales/en-US-unstable). - Labels sit in the middle of their box. In Chromium, Geist's letters sat about 0.055em above the middle of every centred control (0.77 px at 14 px). Labels now take
text-box: trim-both cap alphabeticwithpadding-block: calc((1lh - 1cap) / 2)inside@supports (text-box: …): each box keeps its height and only the letters move (Chromium 133+, Safari 18.2+; other browsers are unchanged). Badge, Kbd, Breadcrumb, Pagination's pages, AvatarGroup's overflow, Table's sort button and RankedList's action now wrap their text in a new slot (badge-label,kbd-label,breadcrumb-text,pagination-page-text,avatar-group-more-text,table-sort-text,ranked-list-action-text); CSS that targets these parts' text as a direct child of the part needs the new span. The unstable AiBadge, SuggestionChip, Tag, ToolCallCard, InlineAssist, Comment, Citation and LivePulse do the same. ToolCallCard's steps sit 6 px under its header and its actions 16 px under the steps, and a BentoTile narrower than 360 px keeps its caption 16 px in and padded 16. - v0.6 adds three more marketing parts (unstable):
CtaBand(@nizivo/react/unstable/cta-band), a closing heading, line and two actions on a band dark in both themes;SiteFooter(./unstable/site-footer), a footer whose link columns are navs named by their headings and that stacks when narrow; andNewsletterSignup(./unstable/newsletter-signup), an email form with a visible label, inline validation and an announced success. NewsletterSignup's strings join the unstable catalogue (./locales/en-US-unstable). - v0.6's last marketing parts (unstable):
BentoTile(@nizivo/react/unstable/bento-tile), a showcase tile with a frosted caption card, wide, square or tall in a 12-column grid; andSiteNavbar(./unstable/site-navbar), a website's main navigation as a bar or a floating pill, its links folding into a native<details>menu below 768 px. Both are server parts. SiteNavbar's strings join the unstable catalogue (./locales/en-US-unstable). - v0.6 begins (unstable, Figma's Marketing page) with five server parts:
AnnouncementBar(@nizivo/react/unstable/announcement-bar), one site-wide message with a link and a named close button;SectionHeader(./unstable/section-header), a section's heading and supporting line;FeatureCard(./unstable/feature-card), one benefit, plain, tinted or inverse;StatBlock(./unstable/stat-block), a headline number and its label, for a<dl>; andTestimonialCard(./unstable/testimonial-card), an attributed quote in a figure. AnnouncementBar's strings join the unstable catalogue (./locales/en-US-unstable). - Figma's CSS motion parts (unstable; D-dq):
Ticker(@nizivo/react/unstable/ticker), an endless strip that pauses under the pointer or focus;CaretHeadline(./unstable/caret-headline), a heading with a blinking caret;LivePulse(./unstable/live-pulse), a pulsing dot beside its words; andWordRotator(./unstable/word-rotator), a headline keyword that turns over while a screen reader hears every word once. Every loop stops under Reduced motion. The first three are server parts. - v0.5 adds three more server parts (unstable):
Comment(@nizivo/react/unstable/comment), a comment with Like (a toggle named with its count) and Reply, and its replies indented under it;EventCard(./unstable/event-card), an event with a presentational date block, a full<time>, when and where, and who is going;ProfileCard(./unstable/profile-card), a person with a cover, the name as the heading, counts as a description list and one action. Their strings join the unstable catalogue (./locales/en-US-unstable). - v0.5 begins (unstable, Figma's Data Display and Product Patterns pages) with four server parts:
Tag(@nizivo/react/unstable/tag), a filter chip or removable token with a pressed check and a named remove button;Rating(./unstable/rating), a read-only score read as one sentence;NotificationItem(./unstable/notification-item), an activity row as one link that says "Unread";FileItem(./unstable/file-item), an upload with real progress, a success mark or a written error, and cancel and retry buttons. Their strings join the unstable catalogue (./locales/en-US-unstable). - v0.5 adds two client parts (unstable):
Slider(@nizivo/react/unstable/slider), a value in a range on a native<input type="range">with its name and value written out and read asaria-valuetext; andMediaPlayer(./unstable/media-player), controls for audio or video that hold no media of their own, with a Slider scrubber read in minutes and seconds, a play button whose name follows its icon, and back and forward. MediaPlayer's strings join the unstable catalogue (./locales/en-US-unstable). - The unstable parts' built-in strings have their own catalogue,
@nizivo/react/locales/en-US-unstable(enUSUnstable, shaped likeenUS), so./locales/en-US, and a translation typedtypeof enUS, changes only with the stable parts. CommandMenu's and DateRangePicker's strings, which shipped inenUSwith 0.3.0, stay there.NizivoLabels(@nizivo/react/config) covers both catalogues, soNizivoConfig labelsstill reaches every client part, unstable ones included.
Patch changes
- DateRangePicker and CommandMenu (both unstable) load their React Aria parts on the first open, in a chunk of their own: a page ships the picker's trigger and presets without the calendar (the
./unstable/date-range-pickerentry drops from 61 to 37 KB gzip), and the menu's trigger and Dialog without the search (./unstable/command-menufrom 57 to 34 KB). A placeholder holds each part's place while it loads, and on a first open with no presets the calendar takes focus when it arrives. - Updated dependencies [9981305] - @nizivo/tokens@0.4.0
@nizivo/tokens
Minor changes
- Breaking (
tokens.jsonand its types):tokens.jsonis format 2. The provenancefigmais nowdesign(TokenProvenanceis'design' | 'code-owned' | 'override' | 'proposal'), and each token'sfigmafield (name,variableId,styleId) is nowdesign, withnameonly. Code that comparesprovenancewith'figma'or readstoken.figmachanges to'design'andtoken.design.name. The CSS variables, the.entry's references and every value are unchanged.
@nizivo/charts
Patch changes
- Updated dependencies [9981305] - @nizivo/tokens@0.4.0
0.3.0
@nizivo/react
Minor changes
- Accordion (
@nizivo/react/accordion): sections that open and close under their headings, with no client JavaScript. EachAccordion.Itemis a native<details>with anAccordion.Triggersummary and anAccordion.Panel;Accordion.Root namemakes the items exclusive through<details name>, anddefaultOpenopens one on the first render. - BulkActionBar (
@nizivo/react/bulk-action-bar): the bar over a selectable table, with how many rows are selected and the actions. A server part: inside TableSelection, its island writes the count ("2 selected", announced politely) as the selection changes, and the actions work before hydration through the rows' form.labels.selected(catalogue keybulkActionBar) andlocaleset the count. - Combobox (
@nizivo/react/combobox): a text input that suggests items from a list as the reader types, on React Aria's ComboBox.Combobox.Rootdraws Input's box aroundCombobox.Inputand an optionalCombobox.Trigger;Combobox.PopupholdsCombobox.Items with Groups, GroupLabels and Separators, in Select's popup and rows. The list filters with a "contains" match in the locale; the input keeps focus while the arrow keys move the active item; Enter chooses and Escape reverts.valueandinputValueare controllable,allowsCustomValueaccepts any text,menuTriggersets when the list opens, and a hidden input carries the chosen value into forms. It joins the react-aria overlay family and passes its conformance suite. Field wiring as Input. - CommandMenu (
@nizivo/react/unstable/command-menu, unstable): Figma's Command Menu, a search field over groups of rows in the Dialog, filtered as the reader types (React Aria's Autocomplete). ⌘K (Ctrl+K elsewhere) orCommandMenu.Triggeropens it; rows are links or actions with an icon, a kind and a shortcut. Unstable until async sources, a per-group cap and the lazy chunk land. - DataView (
@nizivo/react/data-view): the same records as a table on a wide view and as a list on a narrow one, with no client JavaScript. The server renders both and a container query on the root shows the table from 40rem of its own width, the list below.DataView.Itemrows follow Figma's Order List Item, with an optional stretchedDataView.ItemLink. - DateRangePicker (
@nizivo/react/unstable/date-range-picker, unstable): a range of ISO plain dates from a trigger in Select's look, through Figma's popover with presets, one month of React Aria's RangeCalendar and Cancel and Apply. "Today" counts in the requiredtimeZone; the form gets the ISO intervalstart/end. Unstable until design draws the unavailable day and a comparison period. @nizivo/react/hotkeys: keyboard shortcuts in one page-wide registry (registerHotkey,useHotkey,useHotkeys), written as Kbd takes them ("mod+k") and matched by tinykeys. Never during an IME composition, not while typing unlessallowInInputs, and a single printable key warns in development (WCAG 2.1.4).- NumberField (
@nizivo/react/number-field): a number in the reader's locale, a price, a percent or a unit, in Input's box, on React Aria's NumberField.formatOptionstakesIntl.NumberFormatoptions; what is typed is parsed in the locale on blur or Enter, clamped tominandmax, snapped tostepand formatted, and the server HTML already shows the formatted value. A hidden input carries the plain number into forms.NumberField.DecrementandNumberField.Incrementadd optional step buttons, out of the tab order and named by React Aria ("Increase Price");labelsreplaces the names. Field wiring as Input. - PageIndicator (
@nizivo/react/page-indicator): where a carousel or a sequence is, as dots or a "2 / 9" chip, with no client JavaScript. The visual is decorative and a visually hidden "2 of 9" says the position (labels.position, catalogue keypageIndicator).tone="media"sits on a photo, onbg/codeandtext/on-darkuntil design adds on-media tokens. - PointerFx and
usePointerFx(@nizivo/react/pointer-fx): an element that tilts toward a mouse pointer and lifts (effect="tilt"), or leans toward it (effect="magnetic"). The hook writes--nz-pointer-xand--nz-pointer-yonce per frame; touch, pen and reduced motion leave the element still, and the server renders onlydata-pointer-fx. - QuantityStepper (
@nizivo/react/quantity-stepper): a whole-number quantity in Input's box between a minus and a plus button. The input is a native number input, so Tab reaches only it and the arrow keys step it; the buttons, out of the tab order, step it for the pointer, fire the nativeinputandchangeevents and are disabled at the ends of the range. Field wiring as Input, andlabels.decrement/labels.increment("Decrease quantity" / "Increase quantity") in thequantitySteppercatalogue key. - Surface (
@nizivo/react/surface): a panel of the page's surface colour, with no client JavaScript.material="glass"is Figma's Surface/Glass,bg/surfaceat 72 % over a 24 px backdrop blur with a soft shadow; it stays opaque withoutbackdrop-filter(Safari before 18), underprefers-reduced-transparency: reduceand in forced colours.
Patch changes
- @nizivo/tokens@0.3.0
@nizivo/charts
Minor changes
- FunnelChart (
@nizivo/charts/funnel-chart): steps in order, each a bar of its share of the first step, with its count and its share of the step before as text, drawn on the server with no client JavaScript (Figma 03's Funnel Chart). Screen readers read the data table: step, count and % of previous.funnelStepsexports the rule. - Heatmap (
@nizivo/charts/heatmap): a value per row and column as a grid of cells on Figma's five-step ramp (chart/primaryat 8 to 100 %), with a "Fewer … More" scale, drawn on the server with no client JavaScript. Screen readers read the data table, one row per row of the grid.heatmapStepandheatmapGridexport the rules.
Patch changes
- The declaration files name d3-shape's
CurveFactory(AreaChart's and Sparkline'scurve), so@types/d3-shapeis now a dependency rather than a development one: an app that typechecks its dependencies (skipLibCheck: false) no longer fails on@nizivo/charts. - @nizivo/tokens@0.3.0
0.2.1
@nizivo/react
Patch changes
- Updated dependencies [79d72f3] - @nizivo/tokens@0.2.1
@nizivo/tokens
Patch changes
- Dark mode is no longer a preview. Design reviewed the rendered dark versions of Figma pages 02, 04, 06 and 07 and approved them, so the dark values follow the same compatibility rules as light. No token value changes.
@nizivo/charts
Patch changes
- Axis labels stay inside the chart. BarChart's first and last x labels, when wider than their bar's band, are clamped inward to the plot's edges instead of hanging past them (in either direction); a label that fits stays centred under its bar. The y labels' column is now a minimum width (
--nz-chart-frame-gutter, 2.75rem by default) that widens for longer labels, such as ar-EG's digits or "-2000 €", instead of letting them overflow; English charts keep the 2.75rem column. - Updated dependencies [79d72f3] - @nizivo/tokens@0.2.1
0.2.0
@nizivo/react
Minor changes
- Add the app shell.
Sidebar(@nizivo/react/sidebar): the main navigation from 640 px, 264 px wide from 1280 px and a 72 px icon rail below that, through CSS only;collapsedkeeps either width;SidebarItemis a NavItem whose Tooltip shows its label in the rail.TopBarandMobileTopBar: the bars above the page, with slots for the title, the search and the actions.MobileTabBar(@nizivo/react/mobile-tab-bar): five destinations at the bottom below 640 px, withMobileTabBarMoreopening the rest in a bottom sheet, and an island that writes the bar's height to--nz-layout-bottom-inset.AppShell: places them, shows each at its widths, and renders the page's<main>and a skip link. NavItem now folds to the rail inside a rail-narrow Sidebar (a size container query) instead of under anydata-collapsedancestor. StickyBar and the toast region no longer add the safe area twice above a tab bar. - Banner (
./banner): a page-wide message under the header,tonebrand(Figma's Promo) orwarning, with atitle, a line of text, a 72 pxmediapicture or anicon, oneactionand an optionalBannerDismiss. Server-rendered and static; only the dismiss button hydrates, and it callsonDismissfor your code to stop rendering the banner. No live role by default. - Card, and so KpiTile and TrendCard, declares
--nz-surface, the surface colour it paints in every tone (a--nz-card-bgoverride included), for any child to read with a fallback, such asvar(--nz-surface, var(--nz-bg-surface)); it is not a token and is undefined outside a Card. Ontone="brand"andtone="accent", a Delta pill inside the Card isbg/surface(the nearest Card decides), so it shows on the tint (Figma draws it inbg/success-subtle, which equalsbg/brand-subtle); its text colour is unchanged. Text and Headingtone="accent"are deprecated in favour oftone="brand", which paints the same colour; they keep working. - The dashboard parts (M41), each on its own subpath with its own stylesheet: NumberValue and
formatNumber(./number-value), Metric (./metric), KpiTile (./kpi-tile), TrendCard (./trend-card) and RankedList (./ranked-list), server components that ship no client JavaScript under React Server Components and keep their box in the loading, empty and error states; CountUp anduseCountUp(./motion), the one client part, which renders the final value on the server and counts on the client (0 ms under reduced motion); and Avatar with AvatarGroup (./avatar), Breadcrumb (./breadcrumb) and Pagination (./pagination), server components. Card gainstone="brand"andtone="accent", the tinted surfaces of the dashboard widgets; its other tones are unchanged. - FileUpload (
./file-upload): a dropzone over a native<input type="file">, with a list of the chosen files. Before hydration a click or a drop chooses files natively and a plain form submits them; hydrated, each pick or drop is checked againstacceptandmaxSize(refused files get a message under the dropzone and reachonReject),multipleadds to the list, and the component writes the list back into the input so the form submits exactly what is listed. It never uploads:onFilesChangegives each held file with an id, and the app passes each upload's state back asitems(uploadingwith a ProgressBar,complete, orerrorwith Retry), withonRemove,onRetryandonCancel. Inside a Field it is labelled, described and validated natively,requiredincluded. Every string is inlabels. The drop target is React Aria'suseDrop, behind an engine contract; the dropzone carries the newdata-drag-overattribute while files are dragged over it. - Form, SubmitButton and FormMessage (
./form), and PasswordInput (./password-input).Formis an optional client<form>: itserrors, keyed by Fieldname(a server action's field errors), appear in each Field after the Field's ownerrorand before the native message, until the user edits that control; a newerrorsobject moves focus to the first invalid control, or, withsummary, to an error summary that links to each control. Native validation stays on.SubmitButtonis a primary submit Button that ispendingwhile its form's action runs (useFormStatus).FormMessageis a server part: the form-level message in a live container that is always rendered (role="alert"forcritical, elserole="status").PasswordInputis a password input in Input's box with a show/hide toggle that keeps the name "Show password" and reports its state througharia-pressed; the password is hidden again when its form submits. Field reads Form's errors; a Field outside a Form is unchanged. NizivoConfigtakeslabels, shaped like theenUScatalogue (NizivoLabelsfrom@nizivo/react/config: keyed by component, every key and string optional, so a whole catalogue of another locale fits). The client parts read it: BannerDismiss, ChipGroup, Dialog.Close, Drawer.Close, FileUpload, Form, MobileTabBarMore, PasswordInput, Popover.Close, SearchField and Toaster. A part's ownlabelsprop still wins key by key, and without a provider every part shows its English default, as before. Server parts (Pagination, Button, Breadcrumb and the others) cannot read a context and keep per-instancelabels; the Strings and locales guide shows the one-file wrapper that passes them the same catalogue. AlertDismiss and SubmitButton do not read the provider yet.- Strings and locales.
@nizivo/react/i18nexportsformatLabel(template, values, locale = 'en-US')and thePluralLabeltype: a label is a string or a CLDR plural object ({ one, few, many, other }, the categories of its locale),values.countpicks the category throughIntl.PluralRules, and each{name}placeholder is replaced (numbers formatted for the locale, unknown placeholders kept).@nizivo/react/locales/en-USexportsenUS, every built-in English string as one plain object keyed by component (enUS.pagination,enUS.avatarGroup, …), the shape an app copies for its own locale and passes aslabels; the root entry does not re-export it. AvatarGroup'slabels.moreandlabels.overflow(the only labels whose default has a{count}placeholder) now takestring | PluralLabel; their English defaults and every other label are unchanged. - Add
PageHeader(@nizivo/react/page-header): the page's one<h1>, an optional status beside it and a line under it, and the page's controls at the row's end; Heading/H2's size under 40rem. AddTable(@nizivo/react/table): native table parts with no client JS, rows that link as a whole (interactiveandTable.RowLink), sorting through the URL (Table.SortButton,aria-sort), andnumericcolumns in tabular figures. - Add
onPageChangetoPagination, for client state with no URL: each page, previous and next is then a<button type="button">, and choosing another page callsonPageChange(page, details)with no navigation; the ends are disabled buttons.getHrefbecomes optional (give one of the two). Pagination stays server-safe: a Server Component still uses links and ships no client JavaScript. - Popover (
./popover) and Drawer (./drawer), client parts on React Aria in the overlay family. Popover is a dialog anchored to its trigger (side,align,sideOffset; Title, Description and a default close IconButton in the corner); Escape or a press outside closes it and focus returns to the trigger. Drawer is a modal panel at an edge,side="start" | "end" | "bottom"(the bottom sheet), with Header, Title, Description, Body (the only scroller), Footer and a default close IconButton; it locks page scroll, keeps focus inside, returns it on close (returnFocus, as Dialog's), and only fades under reduced motion. Both nest with Dialog, Select, Menu and Tooltip: an overlay opened inside one paints above it, and Escape and an outside press close only the topmost. - SearchField (
./search-field): a<search>landmark around a native<input type="search">, 32, 40 or 48 px, with a magnifier, a clear button (Escape clears too, in every engine) and an optionalshortcutdrawn with Kbd and announced througharia-keyshortcuts;pendingshows a spinner. In a<form method="get">it filters with no JavaScript; inside a Field it is labelled, described and validated by the Field. ChipGroup and Chip (./chip-group): pill choices as native radios, or checkboxes withmultiple, with aleadingswatch slot and anunavailablechip that keeps its colour, is struck through and can still be chosen; a group control (Fieldgroup). ChoiceCardGroup and ChoiceCard (./choice-card): cards around real visible radios, withleading,descriptionandtrailingslots (a "Default" Badge is composition); a Field's error marks the chosen card invalid. Selection never changes a chip's or card's size. NavItem (./nav-item): a server-safe sidebar link,aria-current="page"whencurrent, a router link throughrender, anicon, acountanddisabled, at a fixed 40 px; an ancestor'sdata-collapsed(the future Sidebar's) folds it to the icon rail. - Add
Split(@nizivo/react/split): a main column and an aside (360 px, or 232 px withaside="narrow") that sit side by side while the main column keeps 60 % of the row and stack below that, by the Split's own width, with no script. AddStickyBar(@nizivo/react/sticky-bar): a summary and actions that stick to the bottom of the viewport, above the device's safe area and the shell's bottom chrome. Both are server components with no client JavaScript. - Add
@nizivo/react/table-selection, row selection forTable:TableSelectRowandTableSelectAllare native checkboxes rendered on the server, so a bulk action's form receives the selected ids before any JavaScript runs, and a checked row showsbg/brand-subtle.TableSelection, its one client part, adds the select-all box's checked and mixed state, Shift-click ranges, Escape to clear andonSelectionChange. A page that imports only@nizivo/react/tableloads no client module. AddTable.Container'slabel, which makes a wide table a named, focusable scroll region. - Toast (
./toast):toast(message, options)shows a short message bottom-centre,toneneutral, success or critical, with an optionaldescriptionand oneaction;toast.dismiss(id?)removes one or all. Render one<Toaster />in the root layout. A toast with an action, or a critical one, stays until dismissed; any other leaves after 5 s, its time stopped while the pointer or focus is on the stack and while the page is hidden. Each toast is spoken once through the Toaster's announcer (assertive when critical), andannounce(message, politeness)speaks through it too. The stack is in the top layer above every overlay and stays reachable over a modal Dialog: F8 moves focus to it and back, Escape dismisses the focused toast, and its height keeps focused controls from scrolling under it (--nz-toast-inset).
Patch changes
- Menu, Select, Popover, Tooltip, Dialog and Drawer close when a hidden
<Activity>hides them, as Next'scacheComponentshides a route:onOpenChange(false, { reason: 'hidden' })fires, an uncontrolled overlay closes itself, and it is closed when the route is shown again. Before, the page could stay scroll-locked and the overlay reopened on return; on React 19.2 the popup also stayed on screen. A Toaster inside a hidden route hides its stack until the route is back. - A Menu or Select opened with the pointer inside a Dialog, while focus was on another control of that Dialog, now returns focus to its own trigger when it closes, on Escape or on a press outside it. Before, focus went to the control that had it before the press, and after an outside press to the Dialog's first control.
- A Select, Menu or Dialog opened inside a Dialog now closes on a press outside it, as Escape already closed it; since 0.1.0 such a press did nothing. Presses inside the toast region and on a tooltip still dismiss nothing, and an alertdialog still never closes on an outside press.
- Text and Heading
tone="accent"now paint--nz-text-brand, Figma'stext/brand: the same green/700 in Light, and green/300 (#79b993) instead of lime/300 in Dark.--nz-text-accentis deprecated because Figma will not addtext/accent(accent text onbg/inverseuses--nz-text-inverse-accent), and it is removed in 0.2.0. - Updated dependencies [001e1b4]
- Updated dependencies [a5b048a] - @nizivo/tokens@0.2.0
@nizivo/tokens
Minor changes
- BREAKING:
--nz-text-accentis removed, as its deprecation said, together withtextAccentin the.entry,color.text.accentintokens.jsonandcontract.json, and--color-nz-text-accentintailwind.css. Use--nz-text-brandfor accent-coloured text on page surfaces and--nz-text-inverse-accentonbg/inverse. No Nizivo component reads it.
Patch changes
- Text and Heading
tone="accent"now paint--nz-text-brand, Figma'stext/brand: the same green/700 in Light, and green/300 (#79b993) instead of lime/300 in Dark.--nz-text-accentis deprecated because Figma will not addtext/accent(accent text onbg/inverseuses--nz-text-inverse-accent), and it is removed in 0.2.0.
@nizivo/charts
Minor changes
- First publish of
@nizivo/charts: server-first SVG charts (ChartFrame, AreaChart, BarChart, DonutChart, Sparkline, Legend, ChartTooltip) with one small interaction island, themed by@nizivo/tokens. It joins the fixed group, so it releases at the same version as the other packages.
Patch changes
- Updated dependencies [001e1b4]
- Updated dependencies [a5b048a] - @nizivo/tokens@0.2.0
0.1.0
@nizivo/react
Minor changes
- 0.1.0: foundations, forms and core overlays, the first release.
Patch changes
- Updated dependencies [044c0b6] - @nizivo/tokens@0.1.0
@nizivo/tokens
Minor changes
- 0.1.0: foundations, forms and core overlays, the first release.
@nizivo/icons
Minor changes
- 0.1.0: foundations, forms and core overlays, the first release.