# Qeetrix

- Getting Started: What Qeetrix is and how to install it.
  - [Introduction](/docs): The Qeetrix design system — components, tokens and icons for every Qeet product.
  - [Installation](/docs/installation): Add Qeetrix to a React 19 + Tailwind CSS v4 app.
- Guides: Theming, framework setup and accessibility.
  - [Guides](/docs/guides): Theme Qeetrix, set it up in your framework, and build accessible screens with it.
  - [Theming](/docs/guides/theming): Light and dark themes, and how an app overrides corners, colours and single components.
  - [Next.js](/docs/guides/nextjs): Set up Qeetrix in a Next.js App Router app.
  - [TanStack Start](/docs/guides/tanstack-start): Set up Qeetrix in a TanStack Start app on Vite, as the Qeet consoles do.
  - [Accessibility](/docs/guides/accessibility): What Qeetrix guarantees, and what your app still owns.
- Foundations: Colour, type, space, elevation, motion and icons.
  - [Foundations](/docs/foundations): The design tokens every Qeetrix component is built from.
  - [Colour](/docs/foundations/colors): Semantic colour roles for text, surfaces, borders, actions and feedback, and the palette behind them.
  - [Typography](/docs/foundations/typography): Typography roles, font families and the fonts that ship with Qeetrix.
  - [Spacing and Corners](/docs/foundations/spacing): The corner roles, the radius scale, and the primitive spacing scale.
  - [Elevation](/docs/foundations/elevation): Shadow roles for every surface, in the light and the dark theme.
  - [Motion](/docs/foundations/motion): Duration and easing roles, and how Qeetrix honours reduced motion.
  - [Icons](/docs/foundations/icons): Use icons and the Qeet logos from @qeetrix/icons.
- Components: Every @qeetrix/ui component.
  - [Components](/docs/components): Every component in @qeetrix/ui, with its import, variants, states, support and accessibility.
  - [Access Review](/docs/components/access-review): Product-neutral access surface for identity and security consoles, in two modes: - **Assignment** (default): each row's checkbox is the grant itself, and `onStateChange` emits grant / deny intent.
  - [Accordion](/docs/components/accordion)
  - [Action Bar](/docs/components/action-bar): The bulk-selection bar: floats above the page while rows are selected.
  - [Alert Dialog](/docs/components/alert-dialog): An alert dialog interrupts to ask for a decision, so it is dismissed by a decision.
  - [Alert](/docs/components/alert): An inline, assertive status message (`role="alert"`).
  - [Angle Slider](/docs/components/angle-slider): Circular slider for selecting a 0–360° angle (APG Slider).
  - [App Shell](/docs/components/app-shell): A minimal full-height application frame: a flex row for an optional sidebar beside a main column.
  - [Aspect Ratio](/docs/components/aspect-ratio): Constrains its content to a fixed width-to-height ratio using the native CSS `aspect-ratio` property.
  - [Audit Event](/docs/components/audit-event): Typed, product-neutral audit-event anatomy.
  - [Autocomplete](/docs/components/autocomplete): Free-text input with advisory suggestions — APG Combobox, the "no required selection" variant.
  - [Availability Grid](/docs/components/availability-grid): Week × time-slot picker (booking availability, shift planning).
  - [Avatar](/docs/components/avatar): A person's picture, initials or a neutral icon.
  - [Badge](/docs/components/badge)
  - [Banner](/docs/components/banner): App-wide announcement bar (maintenance notices, plan limits, new features).
  - [Blockquote](/docs/components/blockquote): Standalone pull-quote / testimonial — distinct from `Prose`-styled blockquotes.
  - [Breadcrumb](/docs/components/breadcrumb): The breadcrumb landmark.
  - [Button Group](/docs/components/button-group): A group of connected buttons with merged interior border-radius.
  - [Button](/docs/components/button)
  - [Calendar](/docs/components/calendar): Calendar — the canonical shadcn Calendar (react-day-picker v9), restyled for Qeet.
  - [Callout](/docs/components/callout): Inline informational box with a coloured inline-start accent.
  - [Card](/docs/components/card)
  - [Carousel](/docs/components/carousel): Accessible carousel built on Embla.
  - [Chart Presets](/docs/components/chart-presets)
  - [Chart](/docs/components/chart)
  - [Checkbox Card](/docs/components/checkbox-card): A checkbox with room for a title and a description — a choice that needs explaining, not a promotional tile.
  - [Checkbox](/docs/components/checkbox): The Qeet selection control, square.
  - [Chip](/docs/components/chip)
  - [Clipboard](/docs/components/clipboard)
  - [Close Button](/docs/components/close-button): Standalone dismiss/close button.
  - [Code Block](/docs/components/code-block): CodeBlock renders a copyable, optionally syntax-highlighted code block.
  - [Collapsible](/docs/components/collapsible)
  - [Color Picker](/docs/components/color-picker): ColorPicker consolidates the (clickable-swatch + hex-text + native picker) combo into one primitive.
  - [Color Swatch](/docs/components/color-swatch)
  - [Combobox](/docs/components/combobox): Single-select with type-to-filter: APG Combobox, list autocomplete.
  - [Command Palette](/docs/components/command-palette): CommandPalette is a Cmd-K modal: a centered search box with a filtered, grouped list of navigable items.
  - [Comment Thread](/docs/components/comment-thread): Threaded comments for review, approval and incident workflows: avatars, relative timestamps, an "edited" marker, reactions, replies, edit and delete, and a composer.
  - [Container](/docs/components/container): Centered responsive content shell.
  - [Context Menu](/docs/components/context-menu)
  - [Copyable Secret](/docs/components/copyable-secret): CopyableSecret renders a read-only code box next to a Copy button.
  - [Country Picker](/docs/components/country-picker): CountryPicker: ISO 3166-1 alpha-2 codes with localised names from `Intl.DisplayNames`.
  - [Currency Input](/docs/components/currency-input): Numeric amount entry with a locale-aware currency symbol.
  - [Data State](/docs/components/data-state): DataState collapses the four common render branches of a query-backed surface — loading / error / empty / data — into one component.
  - [Data Table](/docs/components/data-table): DataTable wraps TanStack Table over the qeetrix Table primitives.
  - [Date Picker](/docs/components/date-picker): A single-date picker: a field-styled trigger opening a Calendar in a Popover.
  - [Date Time Picker](/docs/components/date-time-picker): Date + time-of-day picker: a Calendar with a TimePicker footer inside a Popover, emitting a single `Date`.
  - [Description List](/docs/components/description-list): Key-value detail view for entity/settings pages.
  - [Dialog](/docs/components/dialog)
  - [Diff Viewer](/docs/components/diff-viewer): Read-only text/JSON diff (config history, file versions, audit).
  - [Drawer](/docs/components/drawer): Drawer is the mobile bottom sheet: anchored to the bottom edge, rounded on top, and dismissed by swiping it down as well as by Escape, the close button or the backdrop.
  - [Dropdown Menu](/docs/components/dropdown-menu)
  - [Editable](/docs/components/editable)
  - [Empty State](/docs/components/empty-state): EmptyState is the icon + title + description + action zero-state used for empty lists, no-results, no-permission, failed-load and first-run surfaces.
  - [Feed](/docs/components/feed): APG Feed pattern: an `aria-live` scrollable list of articles (activity streams, audit timelines, notification feeds).
  - [Field](/docs/components/field)
  - [File Card](/docs/components/file-card): Compact file presentation for grids and lists (Drive, Mail attachments, Tasks, Pay invoices).
  - [File Type Icon](/docs/components/file-type-icon): Monochrome file-type icon (Drive, Mail attachments, Tasks, Chat).
  - [File Upload](/docs/components/file-upload)
  - [Filter Bar](/docs/components/filter-bar): The filter bar above a table or list: search, saved views, active filters as editable chips, an "Add filter" builder, Clear all, and a slot for trailing table actions.
  - [Floating Window](/docs/components/floating-window): A draggable, non-modal floating panel (`role=dialog`, `aria-modal=false`) — for help overlays, detachable widgets, and in-context tools.
  - [Focus Trap](/docs/components/focus-trap): Component wrapper around `useFocusTrap`.
  - [Form](/docs/components/form): Form is a deliberately library-agnostic wrapper: a styled `<form>` with sensible vertical rhythm, plus `FormActions` for the footer button row.
  - [Highlight](/docs/components/highlight): Wraps matched substrings of `children` in `<mark>` — for search-result emphasis.
  - [Hover Card](/docs/components/hover-card): Rich preview shown on hover/focus of a trigger (user cards, entity previews).
  - [Icon Button](/docs/components/icon-button): Icon-only button that enforces an accessible label at the TypeScript level.
  - [Icon](/docs/components/icon): Icon standardises `@qeetrix/icons` (and brand) icons onto the Qeetrix size/stroke scale.
  - [Input Group](/docs/components/input-group): InputGroup composes a text input with leading/trailing addons — a search icon, a currency symbol or unit, a fixed prefix (`https://`), or an action button.
  - [Input](/docs/components/input): The Qeet text field.
  - [JSON Tree](/docs/components/json-tree): JSONTree renders any JSON-serialisable value as a collapsible indented tree.
  - [Kbd](/docs/components/kbd): A keyboard key cap — one key of a shortcut hint.
  - [Label](/docs/components/label)
  - [Link](/docs/components/link): A navigational text link.
  - [Listbox](/docs/components/listbox): Standalone listbox primitive (APG Listbox) — single or multi-select with roving `aria-activedescendant`.
  - [Logo Uploader](/docs/components/logo-uploader): LogoUploader is a drop-zone + URL fallback for picking a brand logo.
  - [Marquee](/docs/components/marquee): Continuous scrolling ticker — logo walls, status tickers.
  - [Mask Input](/docs/components/mask-input): `MaskInput` — a single `<Input>` element that formats user input according to a declarative mask string.
  - [Master Detail](/docs/components/master-detail): Responsive list + detail layout: a resizable two-pane split on wide screens, and a list with the detail in a slide-over `Sheet` below `collapseBelow` (Mail, Contacts, Tasks, Logs, People directories, payment ledgers).
  - [Mention Input](/docs/components/mention-input): Textarea with `@`-mention typeahead.
  - [Menubar](/docs/components/menubar): App menu bar: a horizontal row of menus (File, Edit, View, …).
  - [Meter](/docs/components/meter): A quota / usage gauge — like Progress, but semantically a measurement within a known range (storage used, seats consumed).
  - [Native Select](/docs/components/native-select): The platform `<select>`, drawn to match `SelectTrigger` — the same field recipe (`fieldTrigger`), the same chevron at the same inset — so the native and the custom select can sit in one form.
  - [Navigation Menu](/docs/components/navigation-menu): Top navigation / mega-menu.
  - [Notification Center](/docs/components/notification-center): In-app notification inbox: a bell trigger with an unread badge opening a feed of notifications (all / unread tabs, mark-all-read, per-item dismiss).
  - [Notification Preference Matrix](/docs/components/notification-preference-matrix): Channel × category notification preferences — a grid of switches (or checkboxes).
  - [Notification](/docs/components/notification): Inline notification card (icon + title + description + close + action), suited for a notification list/feed.
  - [Number Field](/docs/components/number-field)
  - [Number Formatter](/docs/components/number-formatter): Display-only, locale-aware number formatter (wraps `Intl.NumberFormat`).
  - [Org Chart](/docs/components/org-chart): Top-down organisation / hierarchy chart with collapsible branches (CSS connectors).
  - [OTP Input](/docs/components/otp-input): OTPInput renders `length` single-digit boxes used for entering MFA codes (TOTP, email OTP, SMS OTP).
  - [Overflow List](/docs/components/overflow-list): Renders as many items as fit on one line and collapses the rest into a "+N more" trigger.
  - [Page Header](/docs/components/page-header): The standard top-of-page title block: optional breadcrumb eyebrow, a title, a description, a metadata row and trailing actions.
  - [Pagination Bar](/docs/components/pagination-bar)
  - [Pagination](/docs/components/pagination): Pagination is the cursor-based pagination footer used by every index screen — a "First page" jump, a "Next" advance, and a centered label describing the current page.
  - [Password Input](/docs/components/password-input): A password field with a reveal toggle.
  - [Password Strength Meter](/docs/components/password-strength-meter): PasswordStrengthMeter renders a 4-segment bar that fills from the inline start with the password's score, plus a textual label and optional caller-supplied feedback strings.
  - [Popover](/docs/components/popover)
  - [Portal](/docs/components/portal)
  - [Presence Indicator](/docs/components/presence-indicator): A presence/status mark (online · away · busy · offline) for avatars and rows.
  - [Preview Card](/docs/components/preview-card)
  - [Progress Circle](/docs/components/progress-circle): Circular progress (`role="progressbar"`).
  - [Progress](/docs/components/progress): Task progress (`role="progressbar"`).
  - [QR Code](/docs/components/qr-code): QRCode renders a QR code as an inline SVG, encoded synchronously from `value` with the `qrcode` library's matrix encoder.
  - [Radio Card](/docs/components/radio-card): A radio with room for a title and a description.
  - [Radio Group](/docs/components/radio-group)
  - [Rating](/docs/components/rating): Star (or custom icon) rating.
  - [Reaction Bar](/docs/components/reaction-bar): Inline reactions with a "+" picker, for comments, approvals and activity feeds.
  - [Resizable](/docs/components/resizable)
  - [Rich Text Editor](/docs/components/rich-text-editor): WYSIWYG rich-text editor built on Tiptap (StarterKit) with a `Toggle`-based toolbar.
  - [Rolling Number](/docs/components/rolling-number): Animates numeric value changes with an eased count-up/down — a KPI tile, a running total.
  - [Schedule Calendar](/docs/components/schedule-calendar): ScheduleCalendar is a day/week/month agenda surface.
  - [Scroll Area](/docs/components/scroll-area): A scroll container with Qeet scrollbars.
  - [Security Item](/docs/components/security-item): Product-neutral security-resource row for sessions, devices, credentials, passkeys, integrations, and API keys.
  - [Segmented Control](/docs/components/segmented-control): Inline single-select control with an animated sliding indicator.
  - [Select](/docs/components/select): Wraps Base UI's `Select.Root`, auto-deriving the `items` label map from the declared `<SelectItem>`s so the closed trigger shows the option's label rather than its raw value.
  - [Separator](/docs/components/separator): A 1px rule with `role="separator"` and `aria-orientation`.
  - [Sheet](/docs/components/sheet)
  - [Sidebar](/docs/components/sidebar): The navigation rail itself.
  - [Skeleton](/docs/components/skeleton): A loading placeholder block.
  - [Skip Nav](/docs/components/skip-nav): First focusable element on the page — satisfies WCAG 2.4.1 (bypass blocks).
  - [Slider](/docs/components/slider): Qeet slider.
  - [Spinner](/docs/components/spinner): Indeterminate busy indicator.
  - [Spoiler](/docs/components/spoiler): Truncates content to `maxLines` with an inline show-more/less toggle (Disclosure).
  - [Stat](/docs/components/stat): Stat (a.k.a. metric card) is the KPI tile for dashboards: a label, a large value, an optional trend delta, an optional hint, and an optional footer (`children`) for a `Sparkline` or a link.
  - [Status Pill](/docs/components/status-pill): StatusPill is a thin wrapper over Badge that centralises the status-to-colour mapping (active = green, expired = red, etc.).
  - [Stepper](/docs/components/stepper): Step indicator for multi-step flows (onboarding, checkout, provisioning).
  - [Switch](/docs/components/switch): An on/off control.
  - [Table of Contents](/docs/components/table-of-contents): Scroll-spy table of contents (navigation landmark).
  - [Table](/docs/components/table)
  - [Tabs](/docs/components/tabs)
  - [Tag Input](/docs/components/tag-input): Free-form chips input: type and press Enter (or comma) to add a tag, Backspace on an empty field to remove the last one.
  - [Textarea](/docs/components/textarea): Multi-line text field on the shared field recipe.
  - [Time Picker](/docs/components/time-picker): Time-of-day picker built from `Select` columns (hours / minutes / optional seconds / AM-PM).
  - [Time Range Picker](/docs/components/time-range-picker): Preset + custom time-range selector (log windows, analytics, billing periods).
  - [Time Since](/docs/components/time-since): TimeSince renders a relative-time label ("5 minutes ago", "1 day ago") with a hover tooltip showing the absolute locale-formatted timestamp.
  - [Timeline](/docs/components/timeline): Vertical event/audit history.
  - [Timer](/docs/components/timer): A countdown or stopwatch readout with optional Start/Pause/Resume and Reset controls.
  - [Timezone Picker](/docs/components/timezone-picker): TimezonePicker: every IANA zone from `Intl.supportedValuesOf("timeZone")`, each with its current offset ("GMT+5:30") and, where it adds something, its localised name ("India Standard Time").
  - [Toast](/docs/components/toast)
  - [Toggle Tip](/docs/components/toggle-tip)
  - [Toggle](/docs/components/toggle)
  - [Toolbar](/docs/components/toolbar): Action bar for tables, editors, and detail views — buttons, links, separators.
  - [Tooltip](/docs/components/tooltip)
  - [Tour](/docs/components/tour): Step-by-step guided product onboarding overlay.
  - [Tree View](/docs/components/tree-view): Hierarchical disclosure tree (file trees, nested log scopes, org units).
  - [Typography](/docs/components/typography): Consistent text styling for discrete pieces of copy — headings, lead/body paragraphs, blockquotes, inline code, lists, and muted/small captions.
  - [Visually Hidden](/docs/components/visually-hidden)
- Patterns: Copy-paste blocks and layout patterns.
  - [Patterns](/docs/patterns): Blocks and patterns — compositions of Qeetrix components you copy into your app, rather than import.
- Resources: Releases, changelog, packages and source.
  - [Resources](/docs/resources): Where Qeetrix is released, recorded and developed.