@allfitone/react

React and Next.js adapters for the Allfit One foundations. Import explicit subpaths so applications only include the capabilities they use.

import { BrandLockup, ProductLockup } from "@allfitone/react/brand";
import { BackIcon, FoundationIcon } from "@allfitone/react/icons";
import { semanticColor } from "@allfitone/react/tokens";
import "@allfitone/react/tokens.css";
import "@allfitone/react/app.css";
import "@allfitone/react/styles.css";

import { Button } from "@allfitone/react/components/button";
import { Dialog } from "@allfitone/react/components/dialog";
import { AnimatedBrandLockup } from "@allfitone/react/components/animated-brand-lockup";

<ProductLockup product="studio" surface="dark" title="Allfit Studio" />;

Entry points

• @allfitone/react/brand: accessible master-brand logo plus Space, Studio, and Backoffice SVG wordmark and shared-logo lockup components.
• @allfitone/react/icons: semantic Lucide icon component and icon metadata.
• @allfitone/react/tokens: typed platform-neutral token values.
• @allfitone/react/tokens.css: generated Web token variables and theme selectors.
• @allfitone/react/app.css: application canvas, browser reset, and product-font bridge.
• @allfitone/react/styles.css: compiled Tailwind 4 component utilities and the ALLFIT ONE shadcn bridge.
• @allfitone/react/components/*: explicit component subpaths; there is no all-components barrel.
• @allfitone/react/lib/utils: public cn class-composition utility.

The package root contains platform metadata only. This prevents accidental broad component imports and keeps bundle analysis predictable.

Component contract

The component API follows shadcn composition on Base UI while its visual variants, tokens, target sizes, focus treatment, and accessibility defaults belong to ALLFIT ONE. Import CSS once at the application root in this order: tokens.css, app.css, then styles.css. Change themes with data-afo-theme="dark|light" on the document element.

app.css keeps application-level visual decisions in the Design System. Products that load fonts with next/font should expose the generated family names as --afo-app-font-display and --afo-app-font-body:

const display = Barlow_Condensed({
  subsets: ["latin"],
  variable: "--afo-app-font-display",
  weight: ["500", "600", "700"],
});

const body = Manrope({
  subsets: ["latin"],
  variable: "--afo-app-font-body",
});

Available public component subpaths are:

• actions: button and icon-button;
• navigation: breadcrumb, navigation-menu, dropdown-menu, pagination, drawer, sidebar, workspace-shell, setup-shell, and command;
• entry: access-shell for responsive, brand-led authentication and product-entry pages, setup-shell for multi-step activation and onboarding, device-gate for replacing compact-phone workspaces with device guidance, and site-shell for the shared header and footer of public product sites;
• forms: field, label, input, and textarea;
• selection: checkbox, radio-group, switch, toggle-group, select, combobox, date-picker, time-picker, calendar, tabs, and choice-card;
• data display: table, data-table, avatar, badge, card, skeleton, and empty;
• signature: accent-block, stat-strip, tick-ring, pulse-mark, and animated-brand-lockup;
• overlays: dialog, alert-dialog, sheet, popover, tooltip, and the CommandDialog composition from command;
• feedback: progress, alert, sonner, and spinner;
• composition: collapsible and separator.

There is no all-components barrel. Import each component from its explicit @allfitone/react/components/{name} subpath.

SetupShell owns the responsive header, progress list, stage and split-panel hierarchy used by activation and setup flows. SetupProgressStep derives its completed icon and aria-current state from status; products provide only the index and label. Use SetupPanelTitle as="h2" when the panel sits below an existing page title.

ChoiceCard is one interactive surface, rendered as a button by default or through render for navigation. Compose its eyebrow, title, description and action slots inside it; do not place another interactive control inside the card.

Loading actions compose a named Spinner inside a disabled Button; components do not expose an isLoading prop. Icon-only actions use IconButton, whose TypeScript contract requires aria-label.

Table exposes comfortable and compact densities while preserving native table semantics. Use scrollAreaLabel when horizontal overflow is expected so keyboard users can reach the scroll region. Sorting is expressed with aria-sort on TableHead and a visually neutral TableSortButton; selected rows pair selected with a named Checkbox, and TableState provides loading, empty, and error compositions.

DataTable builds on those primitives with a TanStack-powered headless layer. Create the instance with useDataTable, then compose DataTableToolbar, DataTableFilterInput, DataTableViewOptions, DataTableSelectionBar, and DataTablePagination as needed. Pass TanStack state and on*Change options to control sorting, filters, visibility, selection, and pagination from a server-backed product screen.

Avatar keeps identity explicit across image loading and failure. Name the root with aria-label or aria-labelledby, include AvatarFallback, and use decorative only beside equivalent visible identity text. Presence states pair semantic color with distinct icons and labels; groups expose their remaining member count in words.

Command filters and ranks keyboard-first workspace destinations and actions. Give the root a descriptive label, compose a named input, grouped items, shortcuts, and an empty state, and provide stable item values. CommandDialog uses the same command children inside the public Dialog focus contract rather than introducing a separate global-search API. When a controlled global shortcut opens the dialog without DialogTrigger, retain the invoking element in a ref and pass it to finalFocus.

ToggleGroup composes two to seven compact pressed buttons for mode, locale, or filter choices. Its value, defaultValue, and onValueChange contracts always use arrays in both single and multiple modes. Give each group an accessible name. A single group can return an empty array when its active item is pressed again; consumers such as locale switchers that require one value must reject that empty change. Use Tabs when the choice controls panels and RadioGroup when exactly one form value must be submitted.

Combobox filters a predefined item collection and supports single or multiple selection, grouped rich options, removable chips, and async loading, empty, and error messages. Keep ComboboxStatus mounted and update its children when a remote request changes state. For async collections, retain any selected items in the items array so their labels remain available.

Calendar composes React DayPicker for single dates and ranges. Its public props support controlled selection, disabled matchers, locale and timezone configuration, multiple responsive months, and the canonical 44 px date grid. Import DateRange and Matcher types from the same component subpath.

DatePicker composes a typed field, Popover, and Calendar around one controlled or uncontrolled Date | undefined value. It keeps its accepted format visible, validates typed dates and disabled Calendar matchers, and exposes textual invalid or unavailable states without requiring a second parsing implementation in the product. formatLabel names the visible format in the product's language.

TimePicker is DatePicker's counterpart for a time of day. Its value is an HH:MM string on a 24-hour clock, with no date or timezone; the product combines it with both. Times can be typed or chosen from a list offered every step minutes, which opens on the current time and moves by arrow, page (one hour), Home and End keys. Every visible and announced word is a prop.

Alert provides info, success, warning, and danger callouts with an automatic semantic icon, title, description, and optional action. Static callouts stay silent by default; use live="polite" for status updates or live="assertive" for urgent failures inserted at runtime.

Progress composes a visible label and value with its track and indicator. Use value={null} for indeterminate operations, and pair domain-specific visible values with getAriaValueText. The full and compact variants share the same semantics and retain a static signal when reduced motion is enabled.

AnimatedBrandLockup is the opt-in web entrance for the canonical Allfit One lockup. It plays once, renders the final frame when reduced motion is requested, and can be replayed by changing replayKey. Static brand consumers should keep using BrandLockup from @allfitone/react/brand.

DeviceGate is a CSS-first composition for products that require tablet or desktop workspace. Compose the compact fallback before DeviceGateContent. Use DeviceGateActions for product-owned recovery actions such as copying a workspace link; the slot provides responsive layout but does not own clipboard, email, QR, or navigation behavior. Put the fallback accessible name on DeviceGateMain so its visible main remains the top-level landmark. The fallback replaces product content below 600px wide and on coarse-pointer landscape viewports below 600px high; no user-agent detection or client-side hydration is required. At 600px wide and above, tablet content remains available.