# fma-ds

> A personal component registry in the shadcn/ui format, built on react-aria-components: components, blocks, libs, hooks and themes copied into your project by the shadcn CLI (not an npm package).

Register the namespace in components.json:

```json
{
  "registries": {
    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"
  }
}
```

Then add items by name: `pnpm dlx shadcn@latest add @fma-ds/button`. Dependencies between items resolve through the same namespace. Everything installs into `fma-ds` folders (`components/fma-ds/`, `hooks/fma-ds/`, `lib/fma-ds/`), so it never collides with the official shadcn components.

The APIs follow React Aria, not Radix: `isDisabled` instead of `disabled`, `onPress` instead of `onClick`, and no `asChild` (use `LinkButton` for a link that looks like a button). Wrap the app in React Aria's `RouterProvider` for client-side links (see the Routing guide).

License: MIT, except for themes adapted from tweakcn (Apache-2.0). Each registry item states its own in meta.license; upstream notices are in https://github.com/fmartins-andre/fma-ds/blob/main/THIRD_PARTY_NOTICES.md.

## Docs

- [Introduction](https://ds.fmartinsandre.dev.br/docs): Installation, React Aria conventions, themes.
- [Compatibility](https://ds.fmartinsandre.dev.br/docs/compatibility): fma-ds is code you copy, so it runs on your project's toolchain. These are the versions it is built and tested against.
- [Dark mode](https://ds.fmartinsandre.dev.br/docs/dark-mode): Dark mode is on by a `dark` class on an ancestor, usually `<html>`. Every theme defines both palettes, so adding the class is all it takes.
- [Routing](https://ds.fmartinsandre.dev.br/docs/routing): Links in fma-ds are react-aria links. Without a router they do a full page load, so wrap your app in React Aria's `RouterProvider` to send them through your router.
- [Offline and privacy](https://ds.fmartinsandre.dev.br/docs/offline): fma-ds makes no network requests at runtime, with one exception. There is no telemetry, and themes don't load fonts from a CDN.
- [Touch](https://ds.fmartinsandre.dev.br/docs/touch): Controls meet WCAG 2.2 AA for pointer targets (2.5.8): at least 24 by 24 CSS pixels, or spaced far enough apart that a 24px circle on one doesn't touch the next. They are sized for desktop density, so an app used mostly by touch should pick larger sizes.
- [Updating items](https://ds.fmartinsandre.dev.br/docs/updating): The code lives in your project, so nothing updates by itself: you choose when to pull changes and which ones to keep.
- [Contributing](https://ds.fmartinsandre.dev.br/docs/contributing): fma-ds is a personal registry, developed in the open. Issues are welcome, and new components start from a real need in an app.
- [Registry index](https://ds.fmartinsandre.dev.br/r/registry.json): Every component, block, lib, hook and theme in one file.
- [Theme editor](https://ds.fmartinsandre.dev.br/themes): Tweak a theme and export it as CSS or JSON.
- [Full text](https://ds.fmartinsandre.dev.br/llms-full.txt): This file plus every item's usage example.

## Components

- [Accordion](https://ds.fmartinsandre.dev.br/components/accordion): A vertically stacked set of headers that expand to reveal or hide associated content. Supports single or multiple items open at once. Registry item: https://ds.fmartinsandre.dev.br/r/accordion.json
- [Alert](https://ds.fmartinsandre.dev.br/components/alert): A callout for important, static information — supports an icon, title, description, and an optional action, with semantic variants (destructive/info/success/warning/invert) and a `brand` variant for announcements and promos in the theme's second identity color. Registry item: https://ds.fmartinsandre.dev.br/r/alert.json
- [Alert Dialog](https://ds.fmartinsandre.dev.br/components/alert-dialog): A modal dialog that interrupts the user with important content and expects an explicit response (e.g. confirming a destructive action) — unlike Dialog, it can't be dismissed by clicking outside or pressing Escape. Registry item: https://ds.fmartinsandre.dev.br/r/alert-dialog.json
- [Aspect Ratio](https://ds.fmartinsandre.dev.br/components/aspect-ratio): Constrains content (typically an image or video) to a fixed width/height ratio, so it scales without distortion or layout shift. Registry item: https://ds.fmartinsandre.dev.br/r/aspect-ratio.json
- [Attachment](https://ds.fmartinsandre.dev.br/components/attachment): A file/attachment chip for chat-style UIs — shows a name, optional upload progress or error state, and an independently clickable remove action. Registry item: https://ds.fmartinsandre.dev.br/r/attachment.json
- [Avatar](https://ds.fmartinsandre.dev.br/components/avatar): A user/entity image with a text or icon fallback for when the image fails to load. Composes into overlapping groups for showing multiple participants. Registry item: https://ds.fmartinsandre.dev.br/r/avatar.json
- [Badge](https://ds.fmartinsandre.dev.br/components/badge): A small label for status, count, or category — inline with text or attached to another element. Registry item: https://ds.fmartinsandre.dev.br/r/badge.json
- [Breadcrumb](https://ds.fmartinsandre.dev.br/components/breadcrumb): Shows the user's current location within a hierarchy, as a trail of links back to parent pages, with an ellipsis for collapsing long paths. Registry item: https://ds.fmartinsandre.dev.br/r/breadcrumb.json
- [Bubble](https://ds.fmartinsandre.dev.br/components/bubble): A single chat message bubble — start/end alignment for sent vs. received, several color variants, and an optional reactions pill overlaid on a corner. Registry item: https://ds.fmartinsandre.dev.br/r/bubble.json
- [Button](https://ds.fmartinsandre.dev.br/components/button): Displays a button, or a component that looks like one, with a set of visual variants and sizes. Also exports LinkButton (react-aria-components' Link, same variants) for link-as-button use cases. Registry item: https://ds.fmartinsandre.dev.br/r/button.json
- [Button Group](https://ds.fmartinsandre.dev.br/components/button-group): Visually joins a row (or column) of buttons into one connected control, with shared borders and rounded end corners. Can include a separator or a plain text segment. Registry item: https://ds.fmartinsandre.dev.br/r/button-group.json
- [Calendar](https://ds.fmartinsandre.dev.br/components/calendar): A date grid for selecting a single date, multiple dates or a range. Registry item: https://ds.fmartinsandre.dev.br/r/calendar.json
- [Card](https://ds.fmartinsandre.dev.br/components/card): A container for grouping related content, with header, title, description, action, content, and footer slots. Supports a compact size="sm" variant. Registry item: https://ds.fmartinsandre.dev.br/r/card.json
- [Carousel](https://ds.fmartinsandre.dev.br/components/carousel): A carousel for cycling through slides (images, cards, or any content) with keyboard, swipe, and button navigation. Registry item: https://ds.fmartinsandre.dev.br/r/carousel.json
- [Chart](https://ds.fmartinsandre.dev.br/components/chart): Composable chart primitives (ChartContainer, ChartTooltip, ChartLegend) wrapping Recharts, themed via CSS custom properties from a ChartConfig. Supports area, bar, line, and pie charts. Registry item: https://ds.fmartinsandre.dev.br/r/chart.json
- [Checkbox](https://ds.fmartinsandre.dev.br/components/checkbox): A control for a single on/off/indeterminate value. Registry item: https://ds.fmartinsandre.dev.br/r/checkbox.json
- [Code Block](https://ds.fmartinsandre.dev.br/components/code-block): A code block with shiki syntax highlighting, for docs and AI chat UIs. `<CodeBlock code={code} language="tsx" />` is complete on its own. Registry item: https://ds.fmartinsandre.dev.br/r/code-block.json
- [Collapsible](https://ds.fmartinsandre.dev.br/components/collapsible): Shows or hides a single section of content behind a trigger. A thin wrapper around react-aria-components' Disclosure — for several mutually-exclusive sections, use Accordion instead. Registry item: https://ds.fmartinsandre.dev.br/r/collapsible.json
- [Color Picker](https://ds.fmartinsandre.dev.br/components/color-picker): A composable color picker: `ColorPicker` holds the color and shares it with parts laid out in any way. Registry item: https://ds.fmartinsandre.dev.br/r/color-picker.json
- [Combobox](https://ds.fmartinsandre.dev.br/components/combobox): A searchable, filterable select combining a text input with a listbox popover. Supports single selection (ComboboxValue) or a multi-select tag/chip input (ComboboxChips + ComboboxChip). Registry item: https://ds.fmartinsandre.dev.br/r/combobox.json
- [Command](https://ds.fmartinsandre.dev.br/components/command): A searchable list of commands or actions, filtered live as you type. Registry item: https://ds.fmartinsandre.dev.br/r/command.json
- [Confirm Dialog](https://ds.fmartinsandre.dev.br/components/confirm-dialog): A ready-made yes/no dialog on top of the `use-dialog-promise` hook. Registry item: https://ds.fmartinsandre.dev.br/r/confirm-dialog.json
- [Context Menu](https://ds.fmartinsandre.dev.br/components/context-menu): A menu that opens on right-click (or long-press on touch) instead of a regular trigger click. Supports nested submenus, separators, and keyboard shortcut display. Registry item: https://ds.fmartinsandre.dev.br/r/context-menu.json
- [Copy Button](https://ds.fmartinsandre.dev.br/components/copy-button): An icon button that copies a value too long to type (protocol, tracking code, Pix code, token) to the clipboard. Registry item: https://ds.fmartinsandre.dev.br/r/copy-button.json
- [Credit Card](https://ds.fmartinsandre.dev.br/components/credit-card): A payment card drawn from its data, to show a saved card or preview one while it's typed. Registry item: https://ds.fmartinsandre.dev.br/r/credit-card.json
- [Data Grid](https://ds.fmartinsandre.dev.br/components/data-grid): A data grid driven by a TanStack Table v9 instance and rendered with react-aria's `Table`, which brings cell keyboard navigation, `aria-sort`, selection, column resizing, row drag and drop and virtualization. Registry item: https://ds.fmartinsandre.dev.br/r/data-grid.json
- [Date Field](https://ds.fmartinsandre.dev.br/components/date-field): A segmented, keyboard-editable date input. Registry item: https://ds.fmartinsandre.dev.br/r/date-field.json
- [Date Picker](https://ds.fmartinsandre.dev.br/components/date-picker): A typed date input paired with a calendar popover over one value, for single dates (`DatePicker`) or ranges (`DateRangePicker`). Registry item: https://ds.fmartinsandre.dev.br/r/date-picker.json
- [Description List](https://ds.fmartinsandre.dev.br/components/description-list): Term/value pairs on a semantic `<dl>`: `DescriptionList` > `DescriptionItem` > `DescriptionTerm` + `DescriptionDetails`. Registry item: https://ds.fmartinsandre.dev.br/r/description-list.json
- [Dialog](https://ds.fmartinsandre.dev.br/components/dialog): A modal window layered over the page, requiring explicit action (or Escape) to dismiss. Pair with react-aria-components' DialogTrigger to wire up the trigger and open state. Registry item: https://ds.fmartinsandre.dev.br/r/dialog.json
- [Direction](https://ds.fmartinsandre.dev.br/components/direction): Sets LTR/RTL text-direction context for descendant react-aria-components — a compatibility shim so a Radix/Base UI-style `direction` prop keeps working via react-aria's locale system. Registry item: https://ds.fmartinsandre.dev.br/r/direction.json
- [Drawer](https://ds.fmartinsandre.dev.br/components/drawer): A panel that slides in from an edge of the screen, with swipe-to-dismiss and snap-point support. Uses @base-ui/react (not react-aria-components), so its API and data attributes differ from this repo's other overlays. Registry item: https://ds.fmartinsandre.dev.br/r/drawer.json
- [Dropdown Menu](https://ds.fmartinsandre.dev.br/components/dropdown-menu): A menu of actions or options triggered by clicking a button. Supports nested submenus, separators, labels, and a shortcut-display slot for each item. Registry item: https://ds.fmartinsandre.dev.br/r/dropdown-menu.json
- [Emoji Picker](https://ds.fmartinsandre.dev.br/components/emoji-picker): An emoji picker with search, skin tones, recently used emoji, custom emoji and a virtualized grid. Registry item: https://ds.fmartinsandre.dev.br/r/emoji-picker.json
- [Empty](https://ds.fmartinsandre.dev.br/components/empty): A placeholder for empty states — no data, no search results, nothing configured yet. Composes an icon/media, title, description, and optional call-to-action content. Registry item: https://ds.fmartinsandre.dev.br/r/empty.json
- [Field](https://ds.fmartinsandre.dev.br/components/field): Layout primitives for building form fields. Pairs with `Label`, `Input`, and friends. Registry item: https://ds.fmartinsandre.dev.br/r/field.json
- [File Type](https://ds.fmartinsandre.dev.br/components/file-type): A file type icon: a page with a folded corner and the extension label, in the format's brand or family color (Word blue, Excel green, the GitHub language colors). Registry item: https://ds.fmartinsandre.dev.br/r/file-type.json
- [File Upload](https://ds.fmartinsandre.dev.br/components/file-upload): Picks files by dragging them in, pasting them or browsing, and lists them; it doesn't upload. Registry item: https://ds.fmartinsandre.dev.br/r/file-upload.json
- [Glance](https://ds.fmartinsandre.dev.br/components/glance): A quick piece of information that opens more context one click away — an account notice, a balance, a count of pending items. Registry item: https://ds.fmartinsandre.dev.br/r/glance.json
- [Hover Card](https://ds.fmartinsandre.dev.br/components/hover-card): A popover that shows on hover or focus instead of click, for previewing content (a profile card, a link preview) without navigating away. Unlike a tooltip, it can contain interactive content. Registry item: https://ds.fmartinsandre.dev.br/r/hover-card.json
- [Icon Stack](https://ds.fmartinsandre.dev.br/components/icon-stack): A layered icon illustration for empty states: three receding cards drawn from `currentColor`, with an optional glyph (`children`) laid flat on the front card. Registry item: https://ds.fmartinsandre.dev.br/r/icon-stack.json
- [Icon Tile](https://ds.fmartinsandre.dev.br/components/icon-tile): A square surface that gives icons a consistent footprint. Registry item: https://ds.fmartinsandre.dev.br/r/icon-tile.json
- [Input](https://ds.fmartinsandre.dev.br/components/input): A single-line text input, styled to match the rest of the registry. Plain native attributes (disabled, not isDisabled) since it wraps react-aria-components' bare Input rather than a higher-level field primitive. Registry item: https://ds.fmartinsandre.dev.br/r/input.json
- [Input Group](https://ds.fmartinsandre.dev.br/components/input-group): Wraps an Input or Textarea with leading/trailing addons (icons, text, or buttons) inside one bordered container, so the whole group shares a single focus ring and border. Registry item: https://ds.fmartinsandre.dev.br/r/input-group.json
- [Input Otp](https://ds.fmartinsandre.dev.br/components/input-otp): A one-time-password / verification-code input rendered as individual boxed slots, backed by a single hidden text input for real typing, paste, and autofill behavior. Registry item: https://ds.fmartinsandre.dev.br/r/input-otp.json
- [Item](https://ds.fmartinsandre.dev.br/components/item): A generic row layout for lists of things — media/icon, title, description, and trailing actions. Registry item: https://ds.fmartinsandre.dev.br/r/item.json
- [Kbd](https://ds.fmartinsandre.dev.br/components/kbd): Displays a keyboard key or shortcut (e.g. ⌘K) inline, styled as a small pill. KbdGroup lays out several keys side by side for combos like ⌘+Shift+P. Registry item: https://ds.fmartinsandre.dev.br/r/kbd.json
- [Label](https://ds.fmartinsandre.dev.br/components/label): A form field label. Registry item: https://ds.fmartinsandre.dev.br/r/label.json
- [Loading Overlay](https://ds.fmartinsandre.dev.br/components/loading-overlay): Blocks interaction while an operation runs. No brand animation: just a spinner. Registry item: https://ds.fmartinsandre.dev.br/r/loading-overlay.json
- [Marker](https://ds.fmartinsandre.dev.br/components/marker): A small inline label used in chat/message timelines — a date separator, a status note, or similar metadata — rendered in muted text with an optional icon. Registry item: https://ds.fmartinsandre.dev.br/r/marker.json
- [Masked Input](https://ds.fmartinsandre.dev.br/components/masked-input): An `Input` with live Maskito formatting. Works inside a react-aria `TextField`. Registry item: https://ds.fmartinsandre.dev.br/r/masked-input.json
- [Menubar](https://ds.fmartinsandre.dev.br/components/menubar): An app-style menu bar (File, Edit, View…). Registry item: https://ds.fmartinsandre.dev.br/r/menubar.json
- [Message](https://ds.fmartinsandre.dev.br/components/message): Layout for one message row in a chat UI — avatar, header, footer, and a content column that aligns to the start or end depending on who sent it. Pairs with Bubble for the actual message content. Registry item: https://ds.fmartinsandre.dev.br/r/message.json
- [Message Scroller](https://ds.fmartinsandre.dev.br/components/message-scroller): An auto-scrolling viewport for chat message lists: sticks to the latest message as new ones arrive, and shows a jump-to-end/start button once the user scrolls away. Registry item: https://ds.fmartinsandre.dev.br/r/message-scroller.json
- [Native Select](https://ds.fmartinsandre.dev.br/components/native-select): A styled wrapper around the real, native <select> — use it when you need actual native select behavior (mobile OS pickers, form autofill, no JS dependency) instead of react-aria-components' custom Select. Registry item: https://ds.fmartinsandre.dev.br/r/native-select.json
- [Navigation Menu](https://ds.fmartinsandre.dev.br/components/navigation-menu): Site-header navigation: a `<nav>` list of top-level links and disclosure dropdowns. For app command menus use `Menubar` or `DropdownMenu`. Registry item: https://ds.fmartinsandre.dev.br/r/navigation-menu.json
- [Pagination](https://ds.fmartinsandre.dev.br/components/pagination): Page-number navigation built from LinkButton — previous/next controls, numbered links, and an ellipsis for collapsed ranges. Registry item: https://ds.fmartinsandre.dev.br/r/pagination.json
- [Password Input](https://ds.fmartinsandre.dev.br/components/password-input): A password field with a show/hide toggle, built on `InputGroup`. Pair it with `password-rules` when creating a password. Registry item: https://ds.fmartinsandre.dev.br/r/password-input.json
- [Password Rules](https://ds.fmartinsandre.dev.br/components/password-rules): The rules a new password must follow, each marked pending, met or unmet as the user types — by icon and a screen-reader state label (`stateLabels`), not color alone. Registry item: https://ds.fmartinsandre.dev.br/r/password-rules.json
- [Popover](https://ds.fmartinsandre.dev.br/components/popover): A non-modal floating panel anchored to a trigger — for supplementary controls or content (e.g. a settings form) that shouldn't block the rest of the page. Registry item: https://ds.fmartinsandre.dev.br/r/popover.json
- [Progress](https://ds.fmartinsandre.dev.br/components/progress): A horizontal progress bar communicating the completion of a task, determinate or indeterminate, with optional label/value slots. Registry item: https://ds.fmartinsandre.dev.br/r/progress.json
- [Questionnaire](https://ds.fmartinsandre.dev.br/components/questionnaire): A multi-step form/survey block (progress, choices, text input, previous/skip/next/submit) for chat-kit style conversational flows. Registry item: https://ds.fmartinsandre.dev.br/r/questionnaire.json
- [Radio Group](https://ds.fmartinsandre.dev.br/components/radio-group): A set of mutually-exclusive radio options. Registry item: https://ds.fmartinsandre.dev.br/r/radio-group.json
- [Resizable](https://ds.fmartinsandre.dev.br/components/resizable): Resizable split panes (panel group, panel, drag handle) built on react-resizable-panels — for layouts like a sidebar/editor split the user can drag to resize. Registry item: https://ds.fmartinsandre.dev.br/r/resizable.json
- [Scroll Area](https://ds.fmartinsandre.dev.br/components/scroll-area): A scrollable container with a themeable, always-consistent-looking scrollbar via native scrollbar-width/scrollbar-color — no JS scrollbar emulation. Registry item: https://ds.fmartinsandre.dev.br/r/scroll-area.json
- [Select](https://ds.fmartinsandre.dev.br/components/select): A listbox-style picker (react-aria-components' Select) with a trigger, popover, groups, and an optional search input — richer than the native <select> (see native-select for that). Registry item: https://ds.fmartinsandre.dev.br/r/select.json
- [Separator](https://ds.fmartinsandre.dev.br/components/separator): A thin visual divider between content, horizontal or vertical. Registry item: https://ds.fmartinsandre.dev.br/r/separator.json
- [Sheet](https://ds.fmartinsandre.dev.br/components/sheet): A modal panel that slides in from an edge of the screen (top/right/bottom/left) — for navigation drawers, filters, or forms that need more room than a popover. Registry item: https://ds.fmartinsandre.dev.br/r/sheet.json
- [Sidebar](https://ds.fmartinsandre.dev.br/components/sidebar): A collapsible application sidebar with a mobile drawer fallback, a Cmd/Ctrl+B keyboard shortcut, and composable header/content/footer/menu slots. Registry item: https://ds.fmartinsandre.dev.br/r/sidebar.json
- [Skeleton](https://ds.fmartinsandre.dev.br/components/skeleton): A pulsing placeholder block for content that's still loading — size and shape it with className to match whatever it stands in for. Registry item: https://ds.fmartinsandre.dev.br/r/skeleton.json
- [Slider](https://ds.fmartinsandre.dev.br/components/slider): A draggable single- or range-value slider, horizontal or vertical. Pass an array default/value to get one thumb per value. Registry item: https://ds.fmartinsandre.dev.br/r/slider.json
- [Sonner](https://ds.fmartinsandre.dev.br/components/sonner): A themed wrapper around the sonner toast library. Renders the toast viewport (Toaster); call toast() from "sonner" anywhere to actually show one. Registry item: https://ds.fmartinsandre.dev.br/r/sonner.json
- [Sortable](https://ds.fmartinsandre.dev.br/components/sortable): A reorderable list, row or grid (`layout`: `vertical`, `horizontal`, `grid`). Registry item: https://ds.fmartinsandre.dev.br/r/sortable.json
- [Spinner](https://ds.fmartinsandre.dev.br/components/spinner): A spinning loading indicator icon (role="status"), sized via className — drop it inside a disabled button or empty state while something loads. Registry item: https://ds.fmartinsandre.dev.br/r/spinner.json
- [Stepper](https://ds.fmartinsandre.dev.br/components/stepper): Multi-step navigation, horizontal or vertical, built on react-aria `Tabs`. Registry item: https://ds.fmartinsandre.dev.br/r/stepper.json
- [Switch](https://ds.fmartinsandre.dev.br/components/switch): A two-state on/off toggle switch, in default and compact sizes. Registry item: https://ds.fmartinsandre.dev.br/r/switch.json
- [Tab Nav](https://ds.fmartinsandre.dev.br/components/tab-nav): Navigation between the pages of an area that looks like tabs: a `<nav>` of react-aria links where the current page carries `aria-current="page"`. Registry item: https://ds.fmartinsandre.dev.br/r/tab-nav.json
- [Table](https://ds.fmartinsandre.dev.br/components/table): Semantic table primitives (header, body, rows, cells, footer, caption) built on react-aria-components' Table for accessible, sorting/selection-ready markup. Registry item: https://ds.fmartinsandre.dev.br/r/table.json
- [Tabs](https://ds.fmartinsandre.dev.br/components/tabs): A tab list and its panels for switching between related views, with default and line visual variants, horizontal or vertical orientation. Registry item: https://ds.fmartinsandre.dev.br/r/tabs.json
- [Textarea](https://ds.fmartinsandre.dev.br/components/textarea): A multi-line text input that auto-sizes to its content by default (field-sizing-content), rather than staying a fixed number of rows. Registry item: https://ds.fmartinsandre.dev.br/r/textarea.json
- [Time Picker](https://ds.fmartinsandre.dev.br/components/time-picker): A composable time picker: hour, minute, second and AM/PM columns, in a popover or in place. Registry item: https://ds.fmartinsandre.dev.br/r/time-picker.json
- [Timeline](https://ds.fmartinsandre.dev.br/components/timeline): A vertical or horizontal timeline rendered as an ordered list. Registry item: https://ds.fmartinsandre.dev.br/r/timeline.json
- [Toggle](https://ds.fmartinsandre.dev.br/components/toggle): A single two-state pressable button (on/off) — the single-button counterpart to `ToggleGroup`. Registry item: https://ds.fmartinsandre.dev.br/r/toggle.json
- [Toggle Group](https://ds.fmartinsandre.dev.br/components/toggle-group): A connected row (or column) of Toggle buttons sharing one visual variant/size/spacing, for grouped single- or multi-select controls (e.g. text formatting). Registry item: https://ds.fmartinsandre.dev.br/r/toggle-group.json
- [Tooltip](https://ds.fmartinsandre.dev.br/components/tooltip): A short, non-interactive hint that appears on hover or keyboard focus of its trigger. Registry item: https://ds.fmartinsandre.dev.br/r/tooltip.json
- [Trace](https://ds.fmartinsandre.dev.br/components/trace): A compact activity log for AI agents. Registry item: https://ds.fmartinsandre.dev.br/r/trace.json

## Blocks

- [App Sidebar](https://ds.fmartinsandre.dev.br/blocks/app-sidebar): An app-shell sidebar block, collapsible to icons: a team switcher (or a static logo), one navigation section per `data.nav` entry and a user menu. Registry item: https://ds.fmartinsandre.dev.br/r/app-sidebar.json
- [Auth](https://ds.fmartinsandre.dev.br/blocks/auth): The frame of sign-in, sign-up and password recovery screens. The fields are the app's (`TextField`, `password-input`, `input-otp`, `password-rules`). Registry item: https://ds.fmartinsandre.dev.br/r/auth.json
- [Collection Field](https://ds.fmartinsandre.dev.br/blocks/collection-field): A list edited in place inside a form: the user adds an item and fills it right there (payment methods, lots, recipients). Registry item: https://ds.fmartinsandre.dev.br/r/collection-field.json
- [Error Pages](https://ds.fmartinsandre.dev.br/blocks/error-pages): Error screens on top of `empty` and `icon-stack`: `NotFound` (404), `Forbidden` (403) and `UnexpectedError`, plus the bare `ErrorPage` for other cases (maintenance, expired link). Registry item: https://ds.fmartinsandre.dev.br/r/error-pages.json
- [Event Calendar](https://ds.fmartinsandre.dev.br/blocks/event-calendar): A headless-first event calendar: month, week, day, N-day, agenda and resource views, with recurring events, time zones and drag and drop. Registry item: https://ds.fmartinsandre.dev.br/r/event-calendar.json
- [Feature Promo](https://ds.fmartinsandre.dev.br/blocks/feature-promo): A locked feature or an offer on a card: why it matters, what it gives and the call to action. Registry item: https://ds.fmartinsandre.dev.br/r/feature-promo.json
- [Filter Toolbar](https://ds.fmartinsandre.dev.br/blocks/filter-toolbar): The controls above a list or `DataGrid`, composed from parts that are each controlled (`value`/`onChange`), so every filter maps to a search param. Registry item: https://ds.fmartinsandre.dev.br/r/filter-toolbar.json
- [Form Wizard](https://ds.fmartinsandre.dev.br/blocks/form-wizard): A form in steps, in a dialog or on a page (a new customer, an onboarding). Registry item: https://ds.fmartinsandre.dev.br/r/form-wizard.json
- [Notification Center](https://ds.fmartinsandre.dev.br/blocks/notification-center): Notifications in the header and on their own page, driven by props and callbacks (no server state). Registry item: https://ds.fmartinsandre.dev.br/r/notification-center.json
- [Order Summary](https://ds.fmartinsandre.dev.br/blocks/order-summary): What the user is about to confirm before buying: lines, an applicable benefit, discounts, the total and the action. Registry item: https://ds.fmartinsandre.dev.br/r/order-summary.json
- [Page Header](https://ds.fmartinsandre.dev.br/blocks/page-header): The top of a page, composed from parts: breadcrumbs, the title with its description and actions, and an optional sub-page nav. Registry item: https://ds.fmartinsandre.dev.br/r/page-header.json
- [Panel Card](https://ds.fmartinsandre.dev.br/blocks/panel-card): A panel on a `Card` — a dashboard chart or table, or one resource and its status (a contract, the current plan) — with a standard header and a body that handles its own states. Registry item: https://ds.fmartinsandre.dev.br/r/panel-card.json
- [Payment Card](https://ds.fmartinsandre.dev.br/blocks/payment-card): The payment card screens: the saved card and the form to add one. Registry item: https://ds.fmartinsandre.dev.br/r/payment-card.json
- [Plan Builder](https://ds.fmartinsandre.dev.br/blocks/plan-builder): Build what the user is about to buy by choosing quantities, with the price in real time: a custom plan with several resources, or a quantity of one item (extra notes, credits). Registry item: https://ds.fmartinsandre.dev.br/r/plan-builder.json
- [Pricing Plans](https://ds.fmartinsandre.dev.br/blocks/pricing-plans): Choose one of a few fixed plans, then confirm. For a plan built from quantities and add-ons, use `plan-builder`. Registry item: https://ds.fmartinsandre.dev.br/r/pricing-plans.json
- [Settings Form](https://ds.fmartinsandre.dev.br/blocks/settings-form): A long edit form in sections, saved as a whole (account, company, preferences). Registry item: https://ds.fmartinsandre.dev.br/r/settings-form.json
- [Stat Cards](https://ds.fmartinsandre.dev.br/blocks/stat-cards): Totals above a list or on a dashboard: figures on their own or on cards that are static, pressable, links or filters. Registry item: https://ds.fmartinsandre.dev.br/r/stat-cards.json

## Themes

- [Amber Minimal](https://ds.fmartinsandre.dev.br/r/theme-amber-minimal.json): Amber accents on white and near-black, Inter and tight 0.375rem corners.
- [Caffeine](https://ds.fmartinsandre.dev.br/r/theme-caffeine.json): Coffee-brown primary with a latte-colored secondary; the dark mode inverts to a cream primary.
- [Catppuccin](https://ds.fmartinsandre.dev.br/r/theme-catppuccin.json): Catppuccin's Latte and Mocha pastels: mauve primary, sky accent, Montserrat and Fira Code.
- [Claude](https://ds.fmartinsandre.dev.br/r/theme-claude.json): Claude's warm palette: terracotta primary on cream and warm charcoal, system fonts and 0.5rem corners.
- [Clean Slate](https://ds.fmartinsandre.dev.br/r/theme-clean-slate.json): Slate grays with an indigo primary, Inter and a navy dark mode.
- [Cobalt](https://ds.fmartinsandre.dev.br/r/theme-cobalt.json): Deep blue primary and sidebar, green brand, Inter and 0.5rem corners.
- [Cosmic Night](https://ds.fmartinsandre.dev.br/r/theme-cosmic-night.json): Lavender and indigo, with a deep navy-black dark mode and Inter.
- [Default](https://ds.fmartinsandre.dev.br/r/theme-default.json): The stock fma-ds theme from styles.css: neutral grays, Geist and 0.625rem corners.
- [Elegant Luxury](https://ds.fmartinsandre.dev.br/r/theme-elegant-luxury.json): Burgundy primary with cream and gold accents, Poppins and Libre Baskerville.
- [Graphite](https://ds.fmartinsandre.dev.br/r/theme-graphite.json): Monochrome graphite grays from light to charcoal, Montserrat and soft shadows.
- [Indigo](https://ds.fmartinsandre.dev.br/r/theme-indigo.json): Indigo primary and sidebar, violet brand, DM Sans and 0.625rem corners.
- [Kodama Grove](https://ds.fmartinsandre.dev.br/r/theme-kodama-grove.json): Parchment and olive greens with Merriweather throughout; a warm forest dark mode.
- [Modern Minimal](https://ds.fmartinsandre.dev.br/r/theme-modern-minimal.json): White surfaces with a bright blue primary, Inter and tight 0.375rem corners.
- [Mono](https://ds.fmartinsandre.dev.br/r/theme-mono.json): Stark grayscale with Geist Mono everywhere and square corners.
- [Nature](https://ds.fmartinsandre.dev.br/r/theme-nature.json): Forest greens over warm off-white, with Montserrat for UI and Merriweather for serif text.
- [Northern Lights](https://ds.fmartinsandre.dev.br/r/theme-northern-lights.json): Aurora greens and blues on light gray with Plus Jakarta Sans; dark slate mode.
- [Ocean Breeze](https://ds.fmartinsandre.dev.br/r/theme-ocean-breeze.json): Sea-green primary over a pale sky-blue background with DM Sans and Lora; navy dark mode.
- [Plum](https://ds.fmartinsandre.dev.br/r/theme-plum.json): Deep purple primary and sidebar, pink brand, Manrope and 0.5rem corners.
- [Soft Pop](https://ds.fmartinsandre.dev.br/r/theme-soft-pop.json): Indigo, teal and amber pops on a soft off-white, DM Sans and round 1rem corners.
- [Starry Night](https://ds.fmartinsandre.dev.br/r/theme-starry-night.json): Deep night blue with a golden secondary and Libre Baskerville, after Van Gogh.
- [Supabase](https://ds.fmartinsandre.dev.br/r/theme-supabase.json): Supabase's emerald green on near-white and near-black, Outfit with loose tracking and 0.5rem corners.
- [Vintage Paper](https://ds.fmartinsandre.dev.br/r/theme-vintage-paper.json): Parchment backgrounds, brown ink and Libre Baskerville for an old-print feel.
- [Violet Bloom](https://ds.fmartinsandre.dev.br/r/theme-violet-bloom.json): Vivid violet primary on near-white, Plus Jakarta Sans and very round 1.4rem corners.

## Optional

- [Brand](https://ds.fmartinsandre.dev.br/r/brand.json): Class strings for the theme's second identity color (`brand`) on surfaces and decoration. Identity only: never for hover, focus, selection or status.
- [Code Block Highlight](https://ds.fmartinsandre.dev.br/r/code-block-highlight.json): The code block's shiki engine and pure helpers, with no `"use client"`, so a server loader can call it.
- [Color Contrast](https://ds.fmartinsandre.dev.br/r/color-contrast.json): WCAG 2 contrast helpers over OKLCH. Results are oklch strings clamped to sRGB.
- [Credit Card Validation](https://ds.fmartinsandre.dev.br/r/credit-card-validation.json): Payment card helpers for forms, without React.
- [Date Availability](https://ds.fmartinsandre.dev.br/r/date-availability.json): Finds the nearest date that isn't blocked by min/max or unavailable ranges, and centralizes the travel-or-clear correction policy.
- [Date Fns Compat](https://ds.fmartinsandre.dev.br/r/date-fns-compat.json): A date-fns-shaped API (`addDays`, `format`, `isBefore`, `TZDate`, …) backed by `@internationalized/date`.
- [Date Granularity](https://ds.fmartinsandre.dev.br/r/date-granularity.json): Period helpers for month/year date selection: period start/end, same-period comparison, period-widened min/max bounds, and lifting a day-level isDateUnavailable predicate to whole months or years.
- [Input Masks](https://ds.fmartinsandre.dev.br/r/input-masks.json): An input-mask system built on Maskito: mask option hooks, formatters and remover utilities for Brazilian documents and common formats.
- [Interval Helpers](https://ds.fmartinsandre.dev.br/r/interval-helpers.json): Helpers for inclusive `Interval<T>` spans (e.g. unavailable date ranges), generic over any `T` with a `.compare()` method, such as `@internationalized/date`'s `DateValue`.
- [Type Helper](https://ds.fmartinsandre.dev.br/r/type-helper.json): Runtime type-checking helpers (typeHelper.isString/isNumber/isArray/...) built on Object.prototype.toString, usable as TypeScript type guards.
- [Types](https://ds.fmartinsandre.dev.br/r/types.json): Shared type utilities: Brand<T, B> for nominal typing of structurally-identical types, and Interval<T> for inclusive from/to spans.
- [Use Available Date Correction](https://ds.fmartinsandre.dev.br/r/use-available-date-correction.json): useAvailableDateCorrection: revalidates an already-committed date value against min/max/unavailable ranges whenever the value or constraints change, correcting it through the date-availability travel-or-clear policy.
- [Use Dialog Promise](https://ds.fmartinsandre.dev.br/r/use-dialog-promise.json): `useDialogPromise<D, V>()`: state and promise for a dialog you render yourself.
- [Use File Upload](https://ds.fmartinsandre.dev.br/r/use-file-upload.json): `useFileUpload`: headless state for picking files, without uploading them.
- [Use Mask](https://ds.fmartinsandre.dev.br/r/use-mask.json): `useMask`: applies an `input-masks` preset (`"cpf"`, `"phone"`, `{ type: "decimal", prefix: "R$ " }`…) or custom Maskito options to any input.
- [Use Mobile](https://ds.fmartinsandre.dev.br/r/use-mobile.json): useIsMobile: reports whether the viewport is below the 768px mobile breakpoint, updating on resize. Used by sidebar.