{
"name": "@fma-ds",
"$schema": "https://ui.shadcn.com/schema/registry.json",
"homepage": "https://ds.fmartinsandre.dev.br",
"items": [
{
"name": "accordion",
"type": "registry:ui",
"title": "Accordion",
"description": "A vertically stacked set of headers that expand to reveal or hide associated content. Supports single or multiple items open at once.",
"author": "@fma-ds/ds",
"categories": [
"disclosure"
],
"files": [
{
"path": "src/core/accordion/accordion.tsx",
"target": "components/fma-ds/accordion.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"disclosure",
"collapsible",
"react-aria"
],
"contentHash": "01447dcc1482"
}
},
{
"name": "alert",
"type": "registry:ui",
"title": "Alert",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"feedback"
],
"files": [
{
"path": "src/core/alert/alert.tsx",
"target": "components/fma-ds/alert.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"feedback",
"callout"
],
"contentHash": "c5d30353c0e0"
}
},
{
"name": "alert-dialog",
"type": "registry:ui",
"title": "Alert Dialog",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/alert-dialog/alert-dialog.tsx",
"target": "components/fma-ds/alert-dialog.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button"
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"overlay",
"modal",
"confirmation",
"react-aria"
],
"contentHash": "a4d060a3a152"
}
},
{
"name": "app-sidebar",
"type": "registry:block",
"title": "App Sidebar",
"description": "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.\n\nDriven by an `AppSidebarData` object, so teams, sections and items are data. Render it inside a `SidebarProvider`.\n\n- **Sub-items**: expand inline (`variant: \"collapse\"`) or open a menu (`\"dropdown\"`, and always while collapsed to icons).\n- **Links**: react-aria `Link`s; wrap the app in `RouterProvider` for client-side routing.\n- **Menus**: `onTeamChange`, `onAddTeam` and `onUserAction` handle them.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/app-sidebar/app-sidebar.tsx",
"target": "components/fma-ds/app-sidebar/app-sidebar.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/app-sidebar/nav-section.tsx",
"target": "components/fma-ds/app-sidebar/nav-section.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/app-sidebar/nav-user.tsx",
"target": "components/fma-ds/app-sidebar/nav-user.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/app-sidebar/team-switcher.tsx",
"target": "components/fma-ds/app-sidebar/team-switcher.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/app-sidebar/types.ts",
"target": "components/fma-ds/app-sidebar/types.ts",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/sidebar",
"@fma-ds/collapsible",
"@fma-ds/dropdown-menu",
"@fma-ds/avatar"
],
"dependencies": [
"lucide-react@^1.61.0"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"origin": "shadcn/ui block sidebar-07, rebuilt on the registry's react-aria Sidebar, Collapsible and DropdownMenu",
"tags": [
"block",
"sidebar",
"navigation",
"app-shell"
],
"contentHash": "82b8fa20f3f9"
}
},
{
"name": "aspect-ratio",
"type": "registry:ui",
"title": "Aspect Ratio",
"description": "Constrains content (typically an image or video) to a fixed width/height ratio, so it scales without distortion or layout shift.",
"author": "@fma-ds/ds",
"categories": [
"layout"
],
"files": [
{
"path": "src/core/aspect-ratio/aspect-ratio.tsx",
"target": "components/fma-ds/aspect-ratio.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"media",
"layout"
],
"contentHash": "39f84ad96b3d"
}
},
{
"name": "attachment",
"type": "registry:ui",
"title": "Attachment",
"description": "A file/attachment chip for chat-style UIs — shows a name, optional upload progress or error state, and an independently clickable remove action.",
"author": "@fma-ds/ds",
"categories": [
"chat"
],
"files": [
{
"path": "src/core/attachment/attachment.tsx",
"target": "components/fma-ds/attachment.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button"
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"chat",
"file-upload"
],
"contentHash": "93dc9b3db412"
}
},
{
"name": "auth",
"type": "registry:block",
"title": "Auth",
"description": "The frame of sign-in, sign-up and password recovery screens. The fields are the app's (`TextField`, `password-input`, `input-otp`, `password-rules`).\n\n- **`AuthLayout`**: puts the `logo` on top and the content centered. With `brand` (product message, illustration) the page splits in two on wide screens, the brand area on a muted surface or, with `brandSurface=\"brand\"`, the theme's brand color; without it, the column sits on a muted page.\n- **`AuthCard`**: the form's card — `title` as the page's `h1`, `description`, your fields, and a centered `footer` for the links between screens.\n- **`AuthSubmit`**: the full-width submit button, with a spinner while `isPending`.\n- **`ResendCode`**: \"Resend code\" behind a cooldown (`cooldown` seconds, 60 by default, started on mount). It's disabled with an `m:ss` countdown, then `onResend` (pending while its promise runs) restarts it.\n\nThe stories show sign-in, forgot password and a two-step reset (the server checks the code, then the new password follows the rules).\n\nBuilt-in text is in English; translate `ResendCode` with `i18n.labels`.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/auth/auth.tsx",
"target": "components/fma-ds/auth/auth.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/card",
"@fma-ds/spinner",
"@fma-ds/brand"
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"block",
"auth",
"login",
"password",
"otp"
],
"contentHash": "c1859f7520ac"
}
},
{
"name": "avatar",
"type": "registry:ui",
"title": "Avatar",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/avatar/avatar.tsx",
"target": "components/fma-ds/avatar.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"data-display",
"user",
"image"
],
"contentHash": "22b57a73c4cd"
}
},
{
"name": "badge",
"type": "registry:ui",
"title": "Badge",
"description": "A small label for status, count, or category — inline with text or attached to another element.\n\n- **Semantic variants**: info, success, warning, destructive and invert, in solid, `-light` and `-outline` styles.\n- **Neutral**: `muted`/`muted-outline` for inactive or pending states.\n- **Brand**: `brand`, `brand-light`, `brand-outline` and `brand-dot` in the theme's second identity color, for identity labels (\"New\", \"AI\", \"Pro\"), never for status.\n- **Dots**: a `*-dot` family (primary, secondary, brand, success, warning, info, destructive, muted) that shows a colored dot before plain text, for select items and dense lists.\n- **Shape**: size and radius options.\n\nCan also render as a link.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/badge/badge.tsx",
"target": "components/fma-ds/badge.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"data-display",
"status",
"label"
],
"contentHash": "791065f62240"
}
},
{
"name": "brand",
"type": "registry:lib",
"title": "Brand",
"description": "Class strings for the theme's second identity color (`brand`) on surfaces and decoration. Identity only: never for hover, focus, selection or status.\n\n- **`brandSurface`**: a solid brand surface whose focus ring follows the text.\n- **`brandGradient`**: a primary → brand gradient fill.\n- **`brandGradientBorder`**: a primary → brand gradient border; set the surface underneath with `--brand-border-fill`.\n- **`brandGlow`**: a soft brand glow (replaces the element's shadow).\n- **`brandSpinningBorder`**: a wrapper with a spinning gradient edge for something in progress, static with reduced motion.",
"author": "@fma-ds/ds",
"categories": [
"color"
],
"files": [
{
"path": "src/lib/brand.ts",
"target": "lib/fma-ds/brand.ts",
"type": "registry:lib"
}
],
"dependencies": [],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"color",
"brand",
"theme",
"decoration"
],
"contentHash": "8a1af4798cfd"
}
},
{
"name": "breadcrumb",
"type": "registry:ui",
"title": "Breadcrumb",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"navigation"
],
"files": [
{
"path": "src/core/breadcrumb/breadcrumb.tsx",
"target": "components/fma-ds/breadcrumb.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"navigation",
"react-aria"
],
"contentHash": "f29a2d3cb2d3"
}
},
{
"name": "bubble",
"type": "registry:ui",
"title": "Bubble",
"description": "A single chat message bubble — start/end alignment for sent vs. received, several color variants, and an optional reactions pill overlaid on a corner.",
"author": "@fma-ds/ds",
"categories": [
"chat"
],
"files": [
{
"path": "src/core/bubble/bubble.tsx",
"target": "components/fma-ds/bubble.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"chat",
"message"
],
"contentHash": "d8c23fa4e803"
}
},
{
"name": "button",
"type": "registry:ui",
"title": "Button",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"buttons"
],
"files": [
{
"path": "src/core/button/button.tsx",
"target": "components/fma-ds/button.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components). No asChild — use LinkButton for a link styled as a button, and isDisabled instead of disabled.",
"tags": [
"form",
"interactive",
"react-aria",
"nova"
],
"contentHash": "a6504d2df11f"
}
},
{
"name": "button-group",
"type": "registry:ui",
"title": "Button Group",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"buttons"
],
"files": [
{
"path": "src/core/button-group/button-group.tsx",
"target": "components/fma-ds/button-group.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/separator"
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"buttons",
"layout"
],
"contentHash": "f3df80aa3e96"
}
},
{
"name": "calendar",
"type": "registry:ui",
"title": "Calendar",
"description": "A date grid for selecting a single date, multiple dates or a range.\n\n- **Navigation**: the header opens month and year grids for fast navigation.\n- **Granularity**: `granularity` switches the selection to whole months or years.\n- **Availability**: `unavailableRanges` blocks booked spans, and an already-selected value that becomes blocked travels to the nearest available date.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/calendar/calendar.tsx",
"target": "components/fma-ds/calendar.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/select",
"@fma-ds/use-available-date-correction",
"@fma-ds/date-granularity",
"@fma-ds/interval-helpers",
"@fma-ds/types"
],
"dependencies": [
"@internationalized/date@^3.12.4",
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"form",
"date",
"react-aria"
],
"contentHash": "95e2dacf97d5"
}
},
{
"name": "card",
"type": "registry:ui",
"title": "Card",
"description": "A container for grouping related content, with header, title, description, action, content, and footer slots. Supports a compact size=\"sm\" variant.",
"author": "@fma-ds/ds",
"categories": [
"layout"
],
"files": [
{
"path": "src/core/card/card.tsx",
"target": "components/fma-ds/card.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova",
"tags": [
"layout",
"surface",
"nova"
],
"contentHash": "6d710b43a676"
}
},
{
"name": "carousel",
"type": "registry:ui",
"title": "Carousel",
"description": "A carousel for cycling through slides (images, cards, or any content) with keyboard, swipe, and button navigation.\n\nBuilt on embla-carousel-react; `CarouselPrevious`/`CarouselNext` are `Button`s wired to the carousel API.\n\n- **Autoplay**: `autoplay` (`true` or `{ delay }`, 5000 ms by default) advances on its own and wraps to the first slide. Rotation pauses while the pointer is over the carousel or focus is inside it, and starts paused under reduced motion.\n- **`CarouselAutoplayToggle`**: pause/resume — required for moving content by WCAG 2.2.2; a dev warning flags its absence.\n- **`CarouselDots`**: one dot per slide; marks the current one and goes to a slide on press.\n- **Announcements**: slide changes are announced (`aria-live`) only when not rotating.\n\nThe toggle and dots are not positioned; place them where they fit.\n\nBuilt-in labels are in English; translate them with `i18n.labels`.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/carousel/carousel.tsx",
"target": "components/fma-ds/carousel.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button"
],
"dependencies": [
"cn@^0.5.0",
"embla-carousel-react@^8.6.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"data-display",
"carousel",
"slider",
"embla"
],
"contentHash": "db3fae44db69"
}
},
{
"name": "chart",
"type": "registry:ui",
"title": "Chart",
"description": "Composable chart primitives (ChartContainer, ChartTooltip, ChartLegend) wrapping Recharts, themed via CSS custom properties from a ChartConfig. Supports area, bar, line, and pie charts.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/chart/chart.tsx",
"target": "components/fma-ds/chart.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"recharts@3.10.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"data-display",
"charts",
"recharts",
"visualization"
],
"contentHash": "0eb1a539328d"
}
},
{
"name": "checkbox",
"type": "registry:ui",
"title": "Checkbox",
"description": "A control for a single on/off/indeterminate value.\n\nPair it with an external `Label` (via `id`/`htmlFor`) laid out as a flex row, rather than passing label text as children.\n\n- **`CheckboxGroup`**: gathers several under one label and a `value` array (react-aria `CheckboxGroup`; each `Checkbox` takes a `value`).\n- **`CheckboxCard`**: a choice card — the whole card is the checkbox, its children are the content (an `IconTile`, `FieldContent` with `FieldTitle` and `FieldDescription`) and a square indicator sits at the end. Selected cards take a `primary` tint, hovered ones `accent`.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/checkbox/checkbox.tsx",
"target": "components/fma-ds/checkbox.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/field"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components). Pair with an external Label via id/htmlFor — Checkbox's own children slot is for a custom indicator override, not label text.",
"tags": [
"form",
"react-aria",
"selection",
"nova"
],
"contentHash": "a62172995df6"
}
},
{
"name": "code-block",
"type": "registry:ui",
"title": "Code Block",
"description": "A code block with shiki syntax highlighting, for docs and AI chat UIs. `` is complete on its own.\n\n### Parts\n\n- **`CodeBlockHeader`**: the chrome — `CodeBlockTitle`, `CodeBlockLanguage`, `CodeBlockWrapToggle`, `CodeBlockCopyButton`, `CodeBlockDownloadButton`.\n- **`CodeBlockExpandButton`**: with `maxLines`.\n- **`CodeBlockContent`**: to place inside your own scroll container.\n- **`CodeBlockLineActions`**: one action group on the hovered or focused line.\n\nA pinned copy button stays put while the code scrolls.\n\n### Highlighting\n\nshiki loads lazily on the first highlight (JavaScript regex engine, no WebAssembly) through the `code-block-highlight` lib. Pass `lines` from `highlightCode()` in a server loader, or `highlight={false}`, to never load it. Light and dark token colors switch with the theme.\n\n### Lines\n\n- **Marking**: `showLineNumbers`/`startLine`, `highlightedLines`/`highlightedWords`/`focusedLines` (line specs like `\"2-4,7\"`), `diff` and `lineLevels` — or shiki `transformers`.\n- **`streaming`**: grows the code with a caret and stick-to-bottom, re-rendering only changed lines.\n- **`foldable`**: folds by indentation.\n- **`selectable`**: turns lines into a multi-select listbox.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/code-block/code-block.tsx",
"target": "components/fma-ds/code-block.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/copy-button",
"@fma-ds/code-block-highlight"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/code-block, MIT); buttons rebuilt on react-aria Button",
"tags": [
"data-display",
"code",
"syntax-highlighting",
"shiki",
"ai"
],
"contentHash": "38255a4d8d09"
}
},
{
"name": "code-block-highlight",
"type": "registry:lib",
"title": "Code Block Highlight",
"description": "The code block's shiki engine and pure helpers, with no `\"use client\"`, so a server loader can call it.\n\n- **`highlightCode(code, options)`**: returns plain-JSON `CodeBlockLine[]` — dual light/dark token colors, line state from props or shiki transformers, and unchanged lines reused so streaming re-renders one row.\n- **Loading**: shiki loads lazily on the JavaScript regex engine (no WebAssembly), one chunk per language from the static `codeBlockLanguages` map and per theme from `codeBlockThemes` (`github-light`/`github-dark`, or `css-variables` for design-token colors).\n- **Helpers**: `parseLineSpec` (`\"2-4,7\"`), `markdownFences`/`markdownCodeProps` for AI transcripts, `ansiToLines` for terminal output, `parseUnifiedDiff` for git patches and `stripNotationComments`.",
"author": "@fma-ds/ds",
"categories": [
"code"
],
"files": [
{
"path": "src/lib/code-block-highlight.ts",
"target": "lib/fma-ds/code-block-highlight.ts",
"type": "registry:lib"
}
],
"dependencies": [
"shiki@^4.5.0"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/code-block, MIT)",
"tags": [
"code",
"syntax-highlighting",
"shiki",
"markdown",
"diff"
],
"contentHash": "821a624ac164"
}
},
{
"name": "collapsible",
"type": "registry:ui",
"title": "Collapsible",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"disclosure"
],
"files": [
{
"path": "src/core/collapsible/collapsible.tsx",
"target": "components/fma-ds/collapsible.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"react-aria",
"disclosure",
"toggle"
],
"contentHash": "6c2ef4e31910"
}
},
{
"name": "collection-field",
"type": "registry:block",
"title": "Collection Field",
"description": "A list edited in place inside a form: the user adds an item and fills it right there (payment methods, lots, recipients).\n\nRows, state and validation stay in the app (`useFieldArray`'s `fields`, `append`, `remove`).\n\n- **`CollectionField`**: takes the `label` (a legend), `description`, the list's `error`, `itemCount`, `onAdd` and `addLabel`. `minItems` removes the remove buttons at the minimum, `maxItems` swaps the add button for a note once reached, and an empty list shows `emptyMessage`.\n- **`CollectionFieldItem`**: `label` is numbered (\"Lot 2\") and also names its remove button; `onRemove` removes it. Two layouts: `row` for a few fields side by side on wide screens, with the remove button at the end; `group` for many fields under a visible legend with a static border, so items stay apart when fields stack on small screens.\n- **`CollectionFieldSummary`** with **`CollectionFieldSummaryItem`**: the total, what is allocated and what remains (`isEmphasized`: by size and weight, with the state in words).\n- **Focus**: adding announces the new item and focuses its first field; removing announces it and focuses the add button.\n\nLists filled elsewhere and only shown here (edited in a dialog, listed in a table) are a composition of `data-grid`/`item` and `dialog`, not this block.\n\nBuilt-in text is in English; translate it with `i18n.labels`.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/collection-field/collection-field.tsx",
"target": "components/fma-ds/collection-field/collection-field.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/description-list",
"@fma-ds/empty",
"@fma-ds/field"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"block",
"form",
"field-array",
"list",
"repeater"
],
"contentHash": "485d5b54137a"
}
},
{
"name": "color-contrast",
"type": "registry:lib",
"title": "Color Contrast",
"description": "WCAG 2 contrast helpers over OKLCH. Results are oklch strings clamped to sRGB.\n\n- **Ratio**: contrast ratio and level.\n- **`passingRanges`**: the ranges of any OKLCH, HSL, HSB or RGB channel where a color passes against a background.\n- **`passingRegion`**: the passing part of a 2D color area, such as chroma × lightness.\n- **`nearestContrastColor`**: the nearest passing color that keeps its hue.",
"author": "@fma-ds/ds",
"categories": [
"color"
],
"files": [
{
"path": "src/lib/color-contrast.ts",
"target": "lib/fma-ds/color-contrast.ts",
"type": "registry:lib"
}
],
"dependencies": [
"culori@^4.0.2"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"color",
"contrast",
"accessibility",
"oklch"
],
"contentHash": "0393adeafa43"
}
},
{
"name": "color-picker",
"type": "registry:ui",
"title": "Color Picker",
"description": "A composable color picker: `ColorPicker` holds the color and shares it with parts laid out in any way.\n\nWithout children, `ColorPicker` is a swatch that opens the default panel in a popover.\n\n### Parts\n\n- **`ColorPickerTrigger`** + **`ColorPickerContent`**: a popover.\n- **`ColorPickerPanel`**: a column of controls, or a standalone inline picker.\n- **`ColorPickerArea`**: OKLCH chroma × lightness at the hue (the part sRGB can't show is left blank), or HSB saturation × brightness.\n- **`ColorPickerWheel`**: a hue ring whose children fill the square inside it.\n- **`ColorPickerSlider`**: any channel of OKLCH, HSL, HSB or RGB, or alpha; horizontal or vertical, painted with the colors it reaches.\n- **`ColorPickerFields`**: a format menu with hex or per-channel fields; `ColorPickerChannelInput` for a single channel.\n- **`ColorPickerInput`**: a text field taking any CSS color (Escape reverts), with a swatch that opens the popover against it.\n- **`ColorPickerSwatches`**: presets, Tailwind's palette by default; `ColorPickerSwatch` for one.\n- **Extras**: `ColorPickerValue`, `ColorPickerCopy`, `ColorPickerEyeDropper`, `ColorPickerPreview` and `ColorPickerFixContrast`.\n- **`useColorPicker`**: reads and sets the color from custom parts.\n\n### Value\n\n- **Events**: `onChange` fires while dragging and `onChangeEnd` once an interaction ends.\n- **`format`**: what they emit — `oklch` by default, `hex`, `rgb` or `hsl`; `alpha` adds opacity controls.\n- **Forms**: `name` submits the value with a form (a hidden input), and a form reset restores the starting color.\n\n### Contrast\n\nGiven a background (`contrastWith`), every part shows contrast: the area hatches what fails AA and draws the AA and AAA thresholds across it, tracks hatch and mark them, presets failing AA are hatched, the preview shows the WCAG ratio, and \"Fix to AA/AAA\" jumps to the nearest passing lightness keeping the hue.\n\n`labels` translates every text it shows or announces.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/color-picker/color-picker.tsx",
"target": "components/fma-ds/color-picker.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/copy-button",
"@fma-ds/input",
"@fma-ds/input-group",
"@fma-ds/popover",
"@fma-ds/select",
"@fma-ds/color-contrast"
],
"dependencies": [
"cn@^0.5.0",
"culori@^4.0.2",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"color",
"composable",
"contrast",
"forms",
"oklch",
"react-aria"
],
"contentHash": "538c1f4f4734"
}
},
{
"name": "combobox",
"type": "registry:ui",
"title": "Combobox",
"description": "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).",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/combobox/combobox.tsx",
"target": "components/fma-ds/combobox.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/input-group"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"form",
"react-aria",
"selection",
"autocomplete"
],
"contentHash": "fbc6acc6716f"
}
},
{
"name": "command",
"type": "registry:ui",
"title": "Command",
"description": "A searchable list of commands or actions, filtered live as you type.\n\n- **`CommandDialog`**: wraps it in a `Dialog` for a full command-palette (⌘K) pattern.\n- **Empty state**: pass `CommandEmpty` through `CommandList`'s `renderEmptyState`, not as a child — the list only accepts items, groups and separators.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/command/command.tsx",
"target": "components/fma-ds/command.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/dialog",
"@fma-ds/input-group"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"react-aria",
"search",
"command-palette",
"overlay"
],
"contentHash": "98fd814bfa4f"
}
},
{
"name": "confirm-dialog",
"type": "registry:ui",
"title": "Confirm Dialog",
"description": "A ready-made yes/no dialog on top of the `use-dialog-promise` hook.\n\n`const ask = useDialogPromise()`, render `` once, then `const result = await ask.open(data)` and check `result.status`: `confirmed`, `cancelled`, or `dismissed` by Escape.\n\n- **Content**: `title` and `description` take the opened `data` when given as functions; `media` adds an icon.\n- **Actions**: `tone=\"destructive\"` marks a destructive action; `cancelLabel={null}` leaves a single action.\n- **`onConfirm`**: runs with the dialog open and the button pending; if it throws, the dialog stays open with `errorMessage`.\n\nFor dialogs that collect a value or hold a form, render your own dialog with the same hook and call `confirm(value)`.\n\nLabels default to English; pass translations through the label props.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/confirm-dialog/confirm-dialog.tsx",
"target": "components/fma-ds/confirm-dialog.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/alert-dialog",
"@fma-ds/button",
"@fma-ds/use-dialog-promise"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"overlay",
"dialog",
"confirm",
"alert"
],
"contentHash": "cb346e883317"
}
},
{
"name": "context-menu",
"type": "registry:ui",
"title": "Context Menu",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/context-menu/context-menu.tsx",
"target": "components/fma-ds/context-menu.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components). The trigger region must call usePress() — wrap a plain element in react-aria-components' Pressable if it doesn't already.",
"tags": [
"react-aria",
"menu",
"context-menu",
"nova"
],
"contentHash": "0b769e753bfb"
}
},
{
"name": "copy-button",
"type": "registry:ui",
"title": "Copy Button",
"description": "An icon button that copies a value too long to type (protocol, tracking code, Pix code, token) to the clipboard.\n\n- **Feedback**: the icon turns into a check, or a cross on failure, for a moment, and the outcome is announced in a separate live region.\n- **Labels**: translatable; an optional tooltip shows them.\n- **`useCopyToClipboard`**: also exported, for other triggers such as a menu item.",
"author": "@fma-ds/ds",
"categories": [
"buttons"
],
"files": [
{
"path": "src/core/copy-button/copy-button.tsx",
"target": "components/fma-ds/copy-button.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/tooltip"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"buttons",
"clipboard",
"copy"
],
"contentHash": "ee9f7a219cca"
}
},
{
"name": "credit-card",
"type": "registry:ui",
"title": "Credit Card",
"description": "A payment card drawn from its data, to show a saved card or preview one while it's typed.\n\n- **Front**: the chip, the issuer's logo and color, the number padded with `•` and grouped by issuer (Amex 4-6-5), the holder and the expiry.\n- **Back**: the stripe, the signature panel and the security code.\n\n### Props\n\n- **Data**: `number`, `name`, `expiry` (`MM/YY`, `MM/YYYY` or digits only) and `cvc` are plain strings. `*` or `x` in `number` hide digits of a saved card.\n- **`issuer`**: `visa`, `mastercard`, `amex`… — pass it for a saved card; by default it is detected from the number.\n- **`focused`**: `number`, `name`, `expiry` or `cvc` highlights the field being typed, and `cvc` turns the card over (Amex keeps its code on the front). With reduced motion it turns without the 3D spin.\n- **Size**: its width sets its size (`w-72` by default) and the text scales with it.\n- **`labels`**: translates the captions and the accessible name. The card is one `role=\"img\"` (\"Visa card ending in 4242, expires 12/28\").\n\nLogos for Visa, Mastercard, Elo, American Express, Hipercard, Diners Club, Discover and JCB; other issuers show their name on the theme gray.\n\nIssuer detection and the form's validation (number, expiry, security code) live in the `credit-card-validation` lib, usable without the card. Pair the number field with the `credit-card` mask, which follows the issuer too.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/credit-card/credit-card.tsx",
"target": "components/fma-ds/credit-card.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/credit-card-validation"
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "react-credit-cards-2 (https://github.com/felquis/react-credit-cards-2, MIT), ported to Tailwind",
"tags": [
"payment",
"credit-card",
"data-display",
"form"
],
"contentHash": "793d900d3ab2"
}
},
{
"name": "credit-card-validation",
"type": "registry:lib",
"title": "Credit Card Validation",
"description": "Payment card helpers for forms, without React.\n\n- **`getCreditCardIssuer(number)`**: detects the issuer from the first digits with `credit-card-type` (`null` while ambiguous).\n- **`getCreditCardIssuerById`**: reads it from saved card data (`visa`, `Mastercard`, `amex`). Both return the name, valid lengths, digit groups and security-code size.\n- **`isValidCreditCardNumber`**: checks the length for the issuer and the Luhn digit.\n- **`isValidCreditCardExpiry`**: a real month not yet ended (`MM/YY`, `MM/YYYY` or digits only).\n- **`isValidCreditCardCode`**: the code size for the issuer.\n- **`getCreditCardNumberLayout`**: the digit groups for what's typed (Amex 4-6-5), used by the `credit-card` mask and component.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/lib/credit-card-validation.ts",
"target": "lib/fma-ds/credit-card-validation.ts",
"type": "registry:lib"
}
],
"dependencies": [
"credit-card-type@^10.3.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"forms",
"validation",
"credit-card",
"payment"
],
"contentHash": "32371e346133"
}
},
{
"name": "data-grid",
"type": "registry:ui",
"title": "Data Grid",
"description": "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.\n\n### Table\n\nCreate the table with `useTable({ features: dataGridFeatures, ... })`. The exported features cover sorting, filtering with facets, pagination, selection, row expanding (tree rows from `getSubRows`), row and column pinning, ordering, visibility and sizing, with client-side row models. For server-side data (or to show every row), set `manualSorting`/`manualFiltering`/`manualPagination`.\n\nColumn `meta` takes:\n\n- **`headerTitle`**, **`headerClassName`** and **`cellClassName`**.\n- **`skeleton`**: the cell shown in loading rows.\n- **`autoSize`**: the column takes the remaining width (not measured from content).\n- **`headerColSpan`**: the header spans the next visible columns on its pin side, e.g. \"Quantity\" over the amount and its unit. Covered headers take its accessible name and the last one keeps the resize handle.\n\n### Parts\n\nWrap them in `DataGrid table={table} recordCount={…}`:\n\n- **`DataGridTable`** and **`DataGridPagination`**.\n- **`DataGridColumnHeader`**: sort indicator, plus a menu for pinning, moving and visibility when `tableLayout` enables them.\n- **`DataGridColumnVisibility`**: a column visibility menu.\n- **`DataGridColumnFilter`**: faceted; use `filterFn: \"arrHas\"`.\n- **`DataGridRowSelect`**: a row checkbox, with `enableRowSelection`.\n- **`DataGridRowPin`**: pins to the top, or the bottom with `position=\"bottom\"`.\n- **`DataGridRowActions`**: a row's actions as `DropdownMenuItem`s behind a menu button, named from `rowLabel`. It doesn't trigger `onRowClick`, and with no items it shows a disabled \"no actions\" entry.\n- **`DataGridRowDragHandle`**: with `onRowsReorder`.\n- **`DataGridRowExpand`**: shows `getSubRows` children, indented by depth — or, with `getRowCanExpand` and `DataGridTable`'s `renderExpandedRow`, a full-width details row.\n- **`DataGridSelectionBar`**: shows while rows are selected — the count (announced, with how many are on other pages), your bulk actions as children and \"Clear selection\".\n\n### Rows\n\n- **`onRowClick`**: makes rows actionable (click or Enter).\n- **`onRowHover`**: fires when the pointer enters a row, e.g. to prefetch its details.\n- **`isLoading`**: shows skeleton rows (`meta.skeleton`) or a spinner.\n- **Footer**: `DataGridTable`'s `footerContent` takes footer rows (`DataGridTableFootRow` with `DataGridTableFootRowCell`, `colSpan` to span columns); `tableLayout.footerBackground` tints them.\n\n### Infinite scroll\n\n`DataGridTable`'s `onFetchMore` fires near the end of the loaded rows (`fetchMoreScrollOffset`, in viewport heights), `isFetchingMore` shows a loading row and `hasMore={false}` stops it with `allRowsLoadedMessage`. Works with `isVirtualized`.\n\n### Layout and styling\n\n- **`tableLayout.columnsDraggable`**: lets users drag headers to reorder columns; keyboard users use the header menu's move actions, and pinned columns stay put.\n- **`tableLayout`**: also takes `rowRounded`, `headerBorder` and `columnsResizeMode` (`\"onEnd\"` commits the width on release and draws a line at the pointer while dragging).\n- **`tableClassNames`**: adds classes to parts of the table (`base`, `header`, `headerSticky`, `body`, `bodyRow`, `footer`, `edgeCell`).\n- **Surfaces**: pinned cells and sticky headers paint `--data-grid-surface` (else `--card` inside a `Card`, else `--background`) and carry `data-pinned`/`data-last-col`.\n\n### i18n\n\nThe `i18n` prop on `DataGrid` replaces every built-in string (`{ labels: { sortAscending, rowsPerPage, paginationInfo: ({ from, to, count }) => …, goToPage: (page) => …, … } }`, defaults in `defaultDataGridI18n`). Specific props like `emptyMessage` or the pagination labels still win.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/data-grid/data-grid.tsx",
"target": "components/fma-ds/data-grid.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/badge",
"@fma-ds/button",
"@fma-ds/checkbox",
"@fma-ds/dropdown-menu",
"@fma-ds/input",
"@fma-ds/popover",
"@fma-ds/select",
"@fma-ds/skeleton",
"@fma-ds/spinner"
],
"dependencies": [
"@tanstack/react-table@^9.3.1",
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/data-grid, MIT); rendering rebuilt on react-aria Table",
"tags": [
"data-display",
"table",
"grid",
"tanstack",
"react-aria"
],
"contentHash": "1fe5772f3aab"
}
},
{
"name": "date-availability",
"type": "registry:lib",
"title": "Date Availability",
"description": "Finds the nearest date that isn't blocked by min/max or unavailable ranges, and centralizes the travel-or-clear correction policy.\n\nA blocked value moves to a valid neighbour instead of being discarded, and is cleared only when no available date exists.",
"author": "@fma-ds/ds",
"categories": [
"date"
],
"files": [
{
"path": "src/lib/date-availability.ts",
"target": "lib/fma-ds/date-availability.ts",
"type": "registry:lib"
}
],
"registryDependencies": [
"@fma-ds/interval-helpers"
],
"dependencies": [
"@internationalized/date@^3.12.4"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"date",
"validation"
],
"contentHash": "ddd34969c656"
}
},
{
"name": "date-field",
"type": "registry:ui",
"title": "Date Field",
"description": "A segmented, keyboard-editable date input.\n\n- **Granularity**: `granularity` also accepts `\"month\"` and `\"year\"` for month- or year-only fields.\n- **Availability**: values blocked by `minValue`/`maxValue` or `unavailableRanges` move to the nearest available date once the field loses focus, so typing is never interrupted.\n- **`DateInput`**: exported for composing date pickers.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/date-field/date-field.tsx",
"target": "components/fma-ds/date-field.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/use-available-date-correction",
"@fma-ds/date-granularity",
"@fma-ds/interval-helpers",
"@fma-ds/types"
],
"dependencies": [
"@internationalized/date@^3.12.4",
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"form",
"date",
"react-aria"
],
"contentHash": "e80a3917a28a"
}
},
{
"name": "date-fns-compat",
"type": "registry:lib",
"title": "Date Fns Compat",
"description": "A date-fns-shaped API (`addDays`, `format`, `isBefore`, `TZDate`, …) backed by `@internationalized/date`.\n\n- **Same shape**: same names and argument order as date-fns/`@date-fns/tz`, taking and returning plain `Date` (or `TZDate`).\n- **Arithmetic**: DST-safe calendar arithmetic.\n- **Migration**: also exports `toZoned`/`fromZoned`, for moving call sites onto `ZonedDateTime` directly.",
"author": "@fma-ds/ds",
"categories": [
"date"
],
"files": [
{
"path": "src/lib/date-fns-compat/arithmetic.ts",
"target": "lib/fma-ds/date-fns-compat/arithmetic.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/boundaries.ts",
"target": "lib/fma-ds/date-fns-compat/boundaries.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/comparison.ts",
"target": "lib/fma-ds/date-fns-compat/comparison.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/context.ts",
"target": "lib/fma-ds/date-fns-compat/context.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/convert.ts",
"target": "lib/fma-ds/date-fns-compat/convert.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/difference.ts",
"target": "lib/fma-ds/date-fns-compat/difference.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/format.ts",
"target": "lib/fma-ds/date-fns-compat/format.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/index.ts",
"target": "lib/fma-ds/date-fns-compat/index.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/tz.ts",
"target": "lib/fma-ds/date-fns-compat/tz.ts",
"type": "registry:lib"
},
{
"path": "src/lib/date-fns-compat/week.ts",
"target": "lib/fma-ds/date-fns-compat/week.ts",
"type": "registry:lib"
}
],
"dependencies": [
"@internationalized/date@^3.12.4"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"date",
"time-zone",
"date-fns"
],
"contentHash": "1d2fce1731f8"
}
},
{
"name": "date-granularity",
"type": "registry:lib",
"title": "Date Granularity",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"date"
],
"files": [
{
"path": "src/lib/date-granularity.ts",
"target": "lib/fma-ds/date-granularity.ts",
"type": "registry:lib"
}
],
"dependencies": [
"@internationalized/date@^3.12.4"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"date",
"granularity"
],
"contentHash": "02393ebaf1cd"
}
},
{
"name": "date-picker",
"type": "registry:ui",
"title": "Date Picker",
"description": "A typed date input paired with a calendar popover over one value, for single dates (`DatePicker`) or ranges (`DateRangePicker`).\n\n- **Granularity**: month- and year-only, as well as days.\n- **Availability**: `unavailableRanges` blocks dates.\n- **Non-modal popover**: the input stays editable while the calendar is open, and the calendar follows what is typed.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/date-picker/date-picker.tsx",
"target": "components/fma-ds/date-picker.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/calendar",
"@fma-ds/date-field",
"@fma-ds/input-group",
"@fma-ds/popover",
"@fma-ds/date-granularity",
"@fma-ds/types"
],
"dependencies": [
"@internationalized/date@^3.12.4",
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"form",
"date",
"react-aria"
],
"contentHash": "0a51418ce3bf"
}
},
{
"name": "description-list",
"type": "registry:ui",
"title": "Description List",
"description": "Term/value pairs on a semantic `
`: `DescriptionList` > `DescriptionItem` > `DescriptionTerm` + `DescriptionDetails`.\n\n- **`layout=\"inline\"`** (default): each value at the end of its row, right-aligned with tabular numbers — for order summaries, totals and plan details.\n- **`layout=\"stacked\"`**: the value under a smaller term, in a grid whose columns you set with `className` — for record details.\n- **`divided`**: draws rules between rows.\n- **Icons**: an icon inside `DescriptionTerm` sits before the label.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/description-list/description-list.tsx",
"target": "components/fma-ds/description-list.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"data-display",
"list",
"summary",
"key-value"
],
"contentHash": "0561f036df5d"
}
},
{
"name": "dialog",
"type": "registry:ui",
"title": "Dialog",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/dialog/dialog.tsx",
"target": "components/fma-ds/dialog.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"react-aria",
"modal",
"overlay"
],
"contentHash": "bc7c3204eb2f"
}
},
{
"name": "direction",
"type": "registry:ui",
"title": "Direction",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"layout"
],
"files": [
{
"path": "src/core/direction/direction.tsx",
"target": "components/fma-ds/direction.tsx",
"type": "registry:component"
}
],
"dependencies": [
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"layout",
"i18n",
"react-aria"
],
"contentHash": "74859b34147c"
}
},
{
"name": "drawer",
"type": "registry:ui",
"title": "Drawer",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/drawer/drawer.tsx",
"target": "components/fma-ds/drawer.tsx",
"type": "registry:component"
}
],
"dependencies": [
"@base-ui/react@^1.9.0",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova. Built on @base-ui/react/drawer (stable 1.x), not react-aria-components — upstream hasn't ported this component to the aria base yet; vendored unchanged.",
"tags": [
"@base-ui/react",
"overlay",
"modal"
],
"contentHash": "3e2556163a9d"
}
},
{
"name": "dropdown-menu",
"type": "registry:ui",
"title": "Dropdown Menu",
"description": "A menu of actions or options triggered by clicking a button. Supports nested submenus, separators, labels, and a shortcut-display slot for each item.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/dropdown-menu/dropdown-menu.tsx",
"target": "components/fma-ds/dropdown-menu.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"tags": [
"react-aria",
"menu",
"overlay"
],
"contentHash": "190a62e4bf3e"
}
},
{
"name": "emoji-picker",
"type": "registry:ui",
"title": "Emoji Picker",
"description": "An emoji picker with search, skin tones, recently used emoji, custom emoji and a virtualized grid.\n\n`` alone renders a trigger and a popover. Compose `EmojiPickerTrigger` + `EmojiPickerContent`, or `EmojiPickerPanel` in place, from `EmojiPickerSearch`, `EmojiPickerCategories`, `EmojiPickerList`, `EmojiPickerPreview` and `EmojiPickerSkinTone`.\n\n- **Search**: names, keywords and shortcodes.\n- **Categories**: a category bar that follows the scroll, plus a frequently or recently used section.\n- **Data**: emojibase, fetched once per page from jsDelivr (`dataUrl` to self-host, `locale` for 28 languages) or passed as `data`. `emojiVersion=\"auto\"` hides emoji the device can't draw.\n- **Value**: `value`/`defaultValue`/`onChange` hold the native emoji (or `:shortcode:` for a custom one). `selectionMode=\"multiple\"` toggles a list (with `max`), and `onEmojiSelect` fires on every pick, for inserting into text.\n- **Keyboard**: focus stays in the search while the arrows move through the grid (a combobox over an `aria-activedescendant` listbox); Enter picks.\n- **Persistence**: recent picks and the tone persist in localStorage (`recentStorageKey`, `skinToneStorageKey`; `null` keeps them in memory).\n- **Forms**: `name` submits with a native form.\n\nEvery string comes from `i18n`.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/emoji-picker/emoji-picker.tsx",
"target": "components/fma-ds/emoji-picker.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/dropdown-menu",
"@fma-ds/empty",
"@fma-ds/input-group",
"@fma-ds/popover",
"@fma-ds/skeleton",
"@fma-ds/tabs"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/emoji-picker, MIT); rebuilt on react-aria Popover, Dialog, Button, Tabs and Menu",
"tags": [
"forms",
"emoji",
"picker",
"popover",
"react-aria"
],
"contentHash": "401d10890e88"
}
},
{
"name": "empty",
"type": "registry:ui",
"title": "Empty",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"feedback"
],
"files": [
{
"path": "src/core/empty/empty.tsx",
"target": "components/fma-ds/empty.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"tags": [
"feedback",
"empty-state",
"placeholder"
],
"contentHash": "970d4f33fa01"
}
},
{
"name": "error-pages",
"type": "registry:block",
"title": "Error Pages",
"description": "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).\n\nEach shows an icon, the status `code` as a small label, the title as the page's `h1`, a description and your `actions` (home, back, support).\n\n- **Layout**: `layout=\"page\"` fills the viewport; `layout=\"inline\"` fills the content area of the app's layout.\n- **`UnexpectedError`**: puts a \"Try again\" button first with `onRetry` (pending while its promise runs). With `error`, it adds a collapsible `ErrorDetails` with the message and stack and a button that copies them — leave `error` out where users shouldn't see it.\n- **In the app**: wiring to the router (error and not-found routes), reporting and automatic reloads.\n\nBuilt-in text is in English; translate it with `i18n.labels`, or override `title` and `description`.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/error-pages/error-pages.tsx",
"target": "components/fma-ds/error-pages/error-pages.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/collapsible",
"@fma-ds/copy-button",
"@fma-ds/empty",
"@fma-ds/icon-stack"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"block",
"error",
"404",
"403",
"not-found",
"forbidden",
"empty-state"
],
"contentHash": "00336537e030"
}
},
{
"name": "event-calendar",
"type": "registry:block",
"title": "Event Calendar",
"description": "A headless-first event calendar: month, week, day, N-day, agenda and resource views, with recurring events, time zones and drag and drop.\n\n- **Recurrence**: structured rules or RRULE strings.\n- **Drag and drop**: drag to move, resize and create; keyboard users create through `showDayAddButton`'s per-day buttons.\n- **i18n**: with RTL support.\n- **State**: a subscribable store (`useEventCalendar`, `useEventCalendarSelector`).\n\nCompose `` with `EventCalendarNav` and `EventCalendarContent`, or build your own parts from the hooks. Events are controlled (`events`/`onEventsChange`) or not (`defaultEvents`); `onEventUpdate` accepts, rejects or adjusts each drag.\n\nThe nav, view switcher, date picker and \"+N more\" popover use the registry's react-aria `Button`, `Tooltip`, `DropdownMenu`, `Popover` and `Calendar`.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/event-calendar/event-calendar-agenda-view.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-agenda-view.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-content.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-content.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-dnd.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-dnd.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-event.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-event.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-i18n.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-i18n.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-lib.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-lib.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-merge-props.ts",
"target": "components/fma-ds/event-calendar/event-calendar-merge-props.ts",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-month-view.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-month-view.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-nav.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-nav.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-recurrence.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-recurrence.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-resource-view.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-resource-view.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-time-grid.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-time-grid.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar-types.tsx",
"target": "components/fma-ds/event-calendar/event-calendar-types.tsx",
"type": "registry:component"
},
{
"path": "src/blocks/event-calendar/event-calendar.tsx",
"target": "components/fma-ds/event-calendar/event-calendar.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/icon-stack",
"@fma-ds/scroll-area",
"@fma-ds/tooltip",
"@fma-ds/popover",
"@fma-ds/button",
"@fma-ds/calendar",
"@fma-ds/dropdown-menu",
"@fma-ds/date-fns-compat"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1",
"@internationalized/date@^3.12.4"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/event-calendar, MIT); overlays rebuilt on the registry's react-aria components",
"tags": [
"block",
"calendar",
"scheduler",
"events",
"recurrence"
],
"contentHash": "2067b0243b9b"
}
},
{
"name": "feature-promo",
"type": "registry:block",
"title": "Feature Promo",
"description": "A locked feature or an offer on a card: why it matters, what it gives and the call to action.\n\nInside `FeaturePromo`, put:\n\n- **`FeaturePromoContent`**: with `FeaturePromoTitle`, one or more `FeaturePromoDescription`, `FeaturePromoBenefits` of `FeaturePromoBenefit` (with an `icon` tile) and `FeaturePromoActions`.\n- **`FeaturePromoMedia`** (optional): a framed panel — no background images or gradients.\n- **`FeaturePromoGrid`** (optional): spans the full width with one to three columns — choice cards, `Item`s with `href` for shortcuts, or cards that explain options.\n\n`variant=\"brand\"` frames the card with a primary → brand gradient border.\n\n`layout=\"split\"` puts the media beside the content and hides it when the card is narrow; `layout=\"centered\"` stacks everything in the middle.\n\nWith a `FeaturePromoAcceptance` (a checkbox card), the buttons in `FeaturePromoActions` stay disabled until it is checked — uncontrolled (`defaultAccepted`) or controlled (`isAccepted` + `onAcceptedChange`).",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/feature-promo/feature-promo.tsx",
"target": "components/fma-ds/feature-promo/feature-promo.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/checkbox",
"@fma-ds/icon-tile",
"@fma-ds/brand"
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"block",
"promo",
"upsell",
"locked",
"onboarding",
"empty-state"
],
"contentHash": "d3122ff1aacf"
}
},
{
"name": "field",
"type": "registry:ui",
"title": "Field",
"description": "Layout primitives for building form fields. Pairs with `Label`, `Input`, and friends.\n\n- **`Field`**: the field wrapper.\n- **`FieldSet`/`FieldLegend`**: for grouping.\n- **`FieldLabel`/`FieldDescription`/`FieldError`**: the usual label + hint + error stack.\n- **`FieldSeparator`**: splits a group.\n- **`FieldHelp`**: an ⓘ button beside a label or column header that opens help in a popover (touch and keyboard, unlike a tooltip); its required `label` names the subject.\n- **`choiceCardClassName`**: the choice-card surface shared by `CheckboxCard` and `RadioCard`; hover uses `accent`. With react-aria the control is the card, instead of shadcn's `FieldLabel` wrapping a `Field`, which would nest labels.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/field/field.tsx",
"target": "components/fma-ds/field.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/label",
"@fma-ds/popover",
"@fma-ds/separator"
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"forms",
"layout",
"react-aria"
],
"contentHash": "cb9b71a3043a"
}
},
{
"name": "file-type",
"type": "registry:ui",
"title": "File Type",
"description": "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).\n\n- **`type`**: one of 171 extensions (documents, certificates, code, config, archives…), one of 13 families (`image`, `folder`… drawn as a glyph) or any other string (a neutral labelled page).\n- **`getFileType()`**: resolves a file name, path, URL or MIME type, including well-known names without an extension (Dockerfile, `.env.local`, `go.mod`, LICENSE) and aliases such as `.cer`. `getFileTypeCategory()` returns the family.\n- **`variant`**: `outline`, `solid`, `light` or `mono` (theme gray). A `text-*` class recolors it.\n- **`size`**: from `mini` (18px, for table rows) to `xl`; a Tailwind `size-*` class scales the label and stroke with the box (container units).\n- **Content**: `label` replaces the text, `glyph` shows the family glyph and `icon` draws a custom icon.\n\nRenders a `span` with `role=\"img\"` named after the type. It has no state, so it works in Server Components.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/file-type/file-type.tsx",
"target": "components/fma-ds/file-type.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/file-type, MIT)",
"tags": [
"data-display",
"file",
"icon",
"upload"
],
"contentHash": "5144cf26921c"
}
},
{
"name": "file-upload",
"type": "registry:ui",
"title": "File Upload",
"description": "Picks files by dragging them in, pasting them or browsing, and lists them; it doesn't upload.\n\n`FileUpload` holds the `use-file-upload` state — `accept` (`.pdf,.docx`, `image/*`), `maxSize`, `multiple` + `maxFiles`, uncontrolled (`defaultValue`) or controlled (`value`/`onChange`), `isDisabled` — and the parts read it:\n\n- **`FileUploadDropzone`**: a react-aria `DropZone`, with keyboard and paste support. By default an icon, title, `description` and a trigger, highlighted with `accent` while a drag is over it.\n- **`FileUploadTrigger`**: a `FileTrigger` button.\n- **`FileUploadList`**: renders each file with a function.\n- **`FileUploadItem`**: a file-type icon or image thumbnail, name, size, optional `progress`, `error`, extra `actions` such as retry, and a remove button that keeps focus in the widget.\n- **`FileUploadError`**: a `FieldError` with the validation errors (type, size, count).\n\nUpload progress and retries stay with the app, keyed by file id.\n\nBuilt-in text is in English; translate labels and error messages with `i18n`.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/file-upload/file-upload.tsx",
"target": "components/fma-ds/file-upload.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/field",
"@fma-ds/file-type",
"@fma-ds/icon-tile",
"@fma-ds/progress",
"@fma-ds/use-file-upload"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"form",
"file",
"upload",
"dropzone",
"react-aria"
],
"contentHash": "c41bcda28536"
}
},
{
"name": "filter-toolbar",
"type": "registry:block",
"title": "Filter Toolbar",
"description": "The controls above a list or `DataGrid`, composed from parts that are each controlled (`value`/`onChange`), so every filter maps to a search param.\n\n- **`FilterToolbar`**: lays the parts out, wrapping on narrow screens; its `i18n.labels` reaches every part.\n- **`FilterSearch`**: a react-aria `SearchField` that commits the term on Enter and when cleared — and, with `debounceMs`, after the user stops typing.\n- **`FilterQuickToggles`**: an outlined `ToggleGroup` for one-press filters.\n- **`FilterToolbarActions`**: holds the trailing actions, `FilterSheet` and `FilterRefresh`.\n- **`FilterSheet`**: a \"Filters\" button with the active count, opening a side `Sheet`. Its children are the `Field`s of a draft the app keeps: `onApply` commits it (return `false` to stay open), `onClear` empties it, and Enter applies.\n- **`FilterRefresh`**: spins while `isPending`.\n- **`FilterChips`**: the applied filters as a react-aria `TagGroup`, each removable with its × or Backspace/Delete, plus \"Clear filters\". Renders nothing when empty.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/filter-toolbar/filter-toolbar.tsx",
"target": "components/fma-ds/filter-toolbar/filter-toolbar.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/badge",
"@fma-ds/button",
"@fma-ds/input",
"@fma-ds/input-group",
"@fma-ds/sheet",
"@fma-ds/toggle-group",
"@fma-ds/tooltip"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"block",
"filters",
"search",
"toolbar",
"list"
],
"contentHash": "7b36ec2c4eb6"
}
},
{
"name": "form-wizard",
"type": "registry:block",
"title": "Form Wizard",
"description": "A form in steps, in a dialog or on a page (a new customer, an onboarding).\n\n`FormWizard` takes `steps` (`{ title, description }` per step) and the current step, controlled (`step`/`onStepChange`) or not (`defaultStep`).\n\n- **Navigation**: it's a react-aria `Form` whose submit is Next, so Enter advances and the current step's fields validate natively (only that step is mounted). Then `onNext(step)` runs — validate or save there (react-hook-form's `trigger`). Returning `false` or throwing keeps the user on the step, and a promise shows Next as pending. Finish runs `onNext` of the last step and then `onComplete`.\n- **`FormWizardSteps`**: the `stepper` list. Earlier steps are reachable, later ones only through Next. Titles show when the wizard is wide enough for that many steps; narrower, only the numbers, with the current title under them (container query).\n- **`FormWizardStep`**: holds a step's fields; after Back or Next, focus moves to its first field.\n- **`FormWizardFooter`**: the progress (\"Step 2 of 4\", announced politely), `children` before Back (a dialog's Cancel), Back and Next/Finish.\n\nThe values stay in the app; with react-hook-form, keep `shouldUnregister` off.\n\nBuilt-in text is in English; translate it with `i18n.labels`.",
"author": "@fma-ds/ds",
"categories": [
"blocks"
],
"files": [
{
"path": "src/blocks/form-wizard/form-wizard.tsx",
"target": "components/fma-ds/form-wizard/form-wizard.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/spinner",
"@fma-ds/stepper"
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"block",
"form",
"wizard",
"stepper",
"steps"
],
"contentHash": "6ab43968d4da"
}
},
{
"name": "glance",
"type": "registry:ui",
"title": "Glance",
"description": "A quick piece of information that opens more context one click away — an account notice, a balance, a count of pending items.\n\n`Glance` wraps react-aria's `DialogTrigger` and shares a `tone` (`default`, `info`, `success`, `warning`, `destructive`) with its parts.\n\n- **`GlanceTrigger`**: the compact button — an icon plus `GlanceText` (a `GlanceLabel` caption over a `GlanceValue`), or icon-only with `size=\"icon\"` and an `aria-label`.\n- **`GlanceIndicator`**: pins a dot or count to the trigger's corner.\n- **`GlanceContent`**: a popover holding a dialog (focus moves in, Escape closes, focus returns), laid out with `GlanceHeader`, `GlanceMedia` (an `IconTile` in the tone), `GlanceTitle`, `GlanceDescription` and `GlanceFooter`. Its children can be a function of `{ close }`, to close it from an action.\n\nTone tints the trigger like `Alert`, with no motion — urgency comes from tone and wording.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/glance/glance.tsx",
"target": "components/fma-ds/glance.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/icon-tile",
"@fma-ds/popover"
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "experimental",
"source": "original",
"license": "MIT",
"tags": [
"overlay",
"popover",
"notice",
"status",
"header"
],
"contentHash": "24871faccb10"
}
},
{
"name": "hover-card",
"type": "registry:ui",
"title": "Hover Card",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"overlay"
],
"files": [
{
"path": "src/core/hover-card/hover-card.tsx",
"target": "components/fma-ds/hover-card.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"overlay",
"popover",
"react-aria"
],
"contentHash": "f7733fe02493"
}
},
{
"name": "icon-stack",
"type": "registry:ui",
"title": "Icon Stack",
"description": "A layered icon illustration for empty states: three receding cards drawn from `currentColor`, with an optional glyph (`children`) laid flat on the front card.\n\nPairs with `EmptyMedia`. Decorative: the SVG is hidden from assistive tech, so give the glyph `aria-hidden` too.",
"author": "@fma-ds/ds",
"categories": [
"feedback"
],
"files": [
{
"path": "src/core/icon-stack/icon-stack.tsx",
"target": "components/fma-ds/icon-stack.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/icon-stack, MIT)",
"tags": [
"feedback",
"empty-state",
"illustration",
"icon"
],
"contentHash": "e1ff3cc7fc9a"
}
},
{
"name": "icon-tile",
"type": "registry:ui",
"title": "Icon Tile",
"description": "A square surface that gives icons a consistent footprint.\n\n- **`variant`**: `outline` (bordered), `elevated` (raised chip), `soft` (tinted double container), `solid` (filled) or `frame` (double container matching `Card`). `soft` and `solid` follow `currentColor`, so a text color class retints them.\n- **`size`**: from `xs` to `xl`.\n- **`radius`**: `default` (clamped to the tile) or `full` (circular).\n\nRenders a ``; wrap it in a `Button` or `Link` to make it interactive.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/icon-tile/icon-tile.tsx",
"target": "components/fma-ds/icon-tile.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "third-party",
"license": "MIT",
"origin": "reui.io (https://reui.io/docs/components/base/icon-tile, MIT)",
"tags": [
"data-display",
"icon",
"surface"
],
"contentHash": "47b0a69cb33e"
}
},
{
"name": "input",
"type": "registry:ui",
"title": "Input",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/input/input.tsx",
"target": "components/fma-ds/input.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"forms",
"input",
"react-aria"
],
"contentHash": "617dcbe2db7d"
}
},
{
"name": "input-group",
"type": "registry:ui",
"title": "Input Group",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/input-group/input-group.tsx",
"target": "components/fma-ds/input-group.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button",
"@fma-ds/input",
"@fma-ds/textarea"
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"forms",
"input",
"react-aria"
],
"contentHash": "e387b2fb09b3"
}
},
{
"name": "input-masks",
"type": "registry:lib",
"title": "Input Masks",
"description": "An input-mask system built on Maskito: mask option hooks, formatters and remover utilities for Brazilian documents and common formats.\n\n- **Documents**: CPF, CNPJ, CPF-or-CNPJ, CEP.\n- **Contact and payment**: phone; credit card, grouped by issuer (Amex 4-6-5, up to 19 digits).\n- **Dates and numbers**: date, date range, date-time, time, decimal.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/lib/input-masks/cep-mask.ts",
"target": "lib/fma-ds/input-masks/cep-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/cnpj-mask.ts",
"target": "lib/fma-ds/input-masks/cnpj-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/cnpj-or-cpf-mask.ts",
"target": "lib/fma-ds/input-masks/cnpj-or-cpf-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/cpf-mask.ts",
"target": "lib/fma-ds/input-masks/cpf-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/credit-card-mask.ts",
"target": "lib/fma-ds/input-masks/credit-card-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/date-mask.ts",
"target": "lib/fma-ds/input-masks/date-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/date-range-mask.ts",
"target": "lib/fma-ds/input-masks/date-range-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/date-time-mask.ts",
"target": "lib/fma-ds/input-masks/date-time-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/decimal-mask.ts",
"target": "lib/fma-ds/input-masks/decimal-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/index.ts",
"target": "lib/fma-ds/input-masks/index.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/pattern-mask.ts",
"target": "lib/fma-ds/input-masks/pattern-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/phone-mask.ts",
"target": "lib/fma-ds/input-masks/phone-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/presets.ts",
"target": "lib/fma-ds/input-masks/presets.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/stable-mask.ts",
"target": "lib/fma-ds/input-masks/stable-mask.ts",
"type": "registry:lib"
},
{
"path": "src/lib/input-masks/time-mask.ts",
"target": "lib/fma-ds/input-masks/time-mask.ts",
"type": "registry:lib"
}
],
"registryDependencies": [
"@fma-ds/credit-card-validation",
"@fma-ds/type-helper",
"@fma-ds/types"
],
"dependencies": [
"@maskito/core@^5.6.0",
"@maskito/kit@^5.6.0"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"forms",
"mask",
"input",
"pt-BR"
],
"contentHash": "7f3e9e524aa5"
}
},
{
"name": "input-otp",
"type": "registry:ui",
"title": "Input Otp",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/input-otp/input-otp.tsx",
"target": "components/fma-ds/input-otp.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"input-otp@^1.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova. Built on the input-otp library, not react-aria-components.",
"tags": [
"forms",
"input",
"otp"
],
"contentHash": "872cd0243092"
}
},
{
"name": "interval-helpers",
"type": "registry:lib",
"title": "Interval Helpers",
"description": "Helpers for inclusive `Interval` spans (e.g. unavailable date ranges), generic over any `T` with a `.compare()` method, such as `@internationalized/date`'s `DateValue`.\n\n`createIsWithinAnyInterval` plugs straight into react-aria's `isDateUnavailable` prop.",
"author": "@fma-ds/ds",
"categories": [
"date"
],
"files": [
{
"path": "src/lib/interval-helpers.ts",
"target": "lib/fma-ds/interval-helpers.ts",
"type": "registry:lib"
}
],
"registryDependencies": [
"@fma-ds/types"
],
"dependencies": [],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"date",
"interval"
],
"contentHash": "df7e3a47b4bc"
}
},
{
"name": "item",
"type": "registry:ui",
"title": "Item",
"description": "A generic row layout for lists of things — media/icon, title, description, and trailing actions.\n\n- **Rendering**: a `
` or, when given an `href`, a real link (hovered with the theme's `accent`).\n- **`ItemGroup`**: stacks several with consistent spacing.",
"author": "@fma-ds/ds",
"categories": [
"layout"
],
"files": [
{
"path": "src/core/item/item.tsx",
"target": "components/fma-ds/item.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/separator"
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "customized",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"layout",
"list",
"react-aria"
],
"contentHash": "7ed39bf534dc"
}
},
{
"name": "kbd",
"type": "registry:ui",
"title": "Kbd",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"data-display"
],
"files": [
{
"path": "src/core/kbd/kbd.tsx",
"target": "components/fma-ds/kbd.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"data-display",
"keyboard",
"react-aria"
],
"contentHash": "e7787023a469"
}
},
{
"name": "label",
"type": "registry:ui",
"title": "Label",
"description": "A form field label.\n\nPair it with a control via `id`/`htmlFor` rather than passing label text as the control's own children: several toggle-style primitives (`Checkbox`, `Switch`, `RadioGroupItem`) render their children inside a small fixed-size box meant for a custom indicator, not prose.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/label/label.tsx",
"target": "components/fma-ds/label.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
"tags": [
"forms",
"label",
"react-aria"
],
"contentHash": "2afa3c4f3ff9"
}
},
{
"name": "loading-overlay",
"type": "registry:ui",
"title": "Loading Overlay",
"description": "Blocks interaction while an operation runs. No brand animation: just a spinner.\n\n- **`LoadingOverlay`**: wraps a region. While `isLoading`, its children stay visible under a veil with a spinner and `label` (default \"Loading…\", announced via `role=\"status\"`), become `inert`, and the region is `aria-busy`.\n- **`LoadingScreen`**: the same for the whole app, as a non-dismissable modal (focus held, page hidden from assistive tech, scroll locked) — for operations that must finish before anything else, like saving a status change.\n\nPass a translated `label` as needed.",
"author": "@fma-ds/ds",
"categories": [
"feedback"
],
"files": [
{
"path": "src/core/loading-overlay/loading-overlay.tsx",
"target": "components/fma-ds/loading-overlay.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0",
"lucide-react@^1.61.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"feedback",
"loading",
"overlay",
"busy"
],
"contentHash": "51bfa514b089"
}
},
{
"name": "marker",
"type": "registry:ui",
"title": "Marker",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"chat"
],
"files": [
{
"path": "src/core/marker/marker.tsx",
"target": "components/fma-ds/marker.tsx",
"type": "registry:component"
}
],
"dependencies": [
"class-variance-authority@^0.7.1",
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova",
"tags": [
"chat",
"data-display"
],
"contentHash": "3010ea1b1e2f"
}
},
{
"name": "masked-input",
"type": "registry:ui",
"title": "Masked Input",
"description": "An `Input` with live Maskito formatting. Works inside a react-aria `TextField`.\n\n- **`mask`**: a preset name (`\"cpf\"`, `\"cnpj\"`, `\"cpf-cnpj\"`, `\"cep\"`, `\"phone\"`, `\"credit-card\"`, `\"date\"`, `\"time\"`, `\"date-time\"`, `\"date-range\"`, `\"decimal\"`), a parameterized preset such as `{ type: \"decimal\", prefix: \"R$ \" }` or `{ type: \"date\", mode: \"mm/yy\" }` for a card expiry (safe to write inline), or custom Maskito options.\n- **Presets**: set `inputMode`, `autoComplete` and a placeholder.\n- **Value**: `onValueChange` receives the raw value (digits, ISO date, dot-decimal) and the masked text. `value` may be either, so a form can store only the raw value.\n\nFor other inputs, such as `InputGroupInput`, spread `useMask(...).inputProps` instead.",
"author": "@fma-ds/ds",
"categories": [
"forms"
],
"files": [
{
"path": "src/core/masked-input/masked-input.tsx",
"target": "components/fma-ds/masked-input.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/input",
"@fma-ds/use-mask"
],
"dependencies": [],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"tags": [
"forms",
"input",
"mask",
"pt-BR"
],
"contentHash": "1ed1383fe0d0"
}
},
{
"name": "menubar",
"type": "registry:ui",
"title": "Menubar",
"description": "An app-style menu bar (File, Edit, View…).\n\n- **Structure**: `Menubar` is a react-aria `Toolbar`, so arrow keys move between menus. Each `MenubarMenu` pairs a `MenubarTrigger` with a `MenubarContent` built on `DropdownMenu`, including submenus (`MenubarSub`).\n- **Checkable items**: come from react-aria selection — give a `MenubarGroup` a `selectionMode` (`\"multiple\"` or `\"single\"`) and `selectedKeys`/`onSelectionChange`, and its items show a check when selected.\n- **Opening**: menus open on press or Enter/Space/ArrowDown. While one is open, hovering another trigger or pressing ArrowLeft/ArrowRight opens the neighbouring menu.",
"author": "@fma-ds/ds",
"categories": [
"navigation"
],
"files": [
{
"path": "src/core/menubar/menubar.tsx",
"target": "components/fma-ds/menubar.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/dropdown-menu"
],
"dependencies": [
"cn@^0.5.0",
"react-aria-components@^1.22.1"
],
"meta": {
"status": "stable",
"source": "original",
"license": "MIT",
"origin": "API of shadcn/ui's Menubar, rebuilt on react-aria Toolbar and the registry's DropdownMenu",
"tags": [
"navigation",
"menu",
"menubar",
"toolbar",
"react-aria"
],
"contentHash": "f80f96b72a64"
}
},
{
"name": "message",
"type": "registry:ui",
"title": "Message",
"description": "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.",
"author": "@fma-ds/ds",
"categories": [
"chat"
],
"files": [
{
"path": "src/core/message/message.tsx",
"target": "components/fma-ds/message.tsx",
"type": "registry:component"
}
],
"dependencies": [
"cn@^0.5.0"
],
"meta": {
"status": "stable",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova",
"tags": [
"chat",
"layout"
],
"contentHash": "866cf9356b98"
}
},
{
"name": "message-scroller",
"type": "registry:ui",
"title": "Message Scroller",
"description": "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.\n\n**Experimental**: it doesn't sit on react-aria-components like the rest of this registry, and `@shadcn/react` is still pre-1.0.",
"author": "@fma-ds/ds",
"categories": [
"chat"
],
"files": [
{
"path": "src/core/message-scroller/message-scroller.tsx",
"target": "components/fma-ds/message-scroller.tsx",
"type": "registry:component"
}
],
"registryDependencies": [
"@fma-ds/button"
],
"dependencies": [
"@shadcn/react@^0.3.1",
"cn@^0.5.0",
"lucide-react@^1.61.0"
],
"meta": {
"status": "experimental",
"source": "shadcn",
"license": "MIT",
"origin": "shadcn/ui, style: aria-nova. Built on @shadcn/react/message-scroller, not react-aria-components — upstream hasn't ported this one to the aria base yet.",
"tags": [
"chat",
"scroll",
"@shadcn/react"
],
"contentHash": "3ae18a214230"
}
},
{
"name": "native-select",
"type": "registry:ui",
"title": "Native Select",
"description": "A styled wrapper around the real, native