@payfit/unity-components/src/agent-references/component-catalog.json

{
  "components": [
    {
      "description": "Groups high-priority page actions in a responsive toolbar for bulk or contextual workflows.",
      "docsHref": "?path=/docs/component-reference-actionbar--docs",
      "id": "component-reference-actionbar",
      "keywords": ["action-bar", "action", "bar"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-actionbar--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:tabular-data", "type:component", "category:actions"],
      "title": "ActionBar"
    },
    {
      "description": "Turns custom content into an accessible press target without changing its layout or visual structure.",
      "docsHref": "?path=/docs/component-reference-actionable--docs",
      "id": "component-reference-actionable",
      "keywords": ["actionable"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "component-reference-actionable--primary"
      },
      "related": [],
      "section": "components",
      "tags": ["type:primitive", "type:component", "category:foundations"],
      "title": "Actionable"
    },
    {
      "description": "Alerts communicate important contextual information, status, or calls to action.",
      "docsHref": "?path=/docs/component-reference-alert--docs",
      "id": "component-reference-alert",
      "keywords": ["message", "notice", "status", "banner", "information"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-alert--default",
        "zoom": 0.8
      },
      "related": [],
      "section": "components",
      "tags": [
        "type:component",
        "category:content",
        "behavior:disclosure",
        "behavior:validation"
      ],
      "title": "Alert"
    },
    {
      "description": "Position a small element relative to a bigger element in any of its corners",
      "docsHref": "?path=/docs/component-reference-anchor--docs",
      "id": "component-reference-anchor",
      "keywords": ["anchor"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "component-reference-anchor--primary"
      },
      "related": [],
      "section": "components",
      "tags": ["type:primitive", "type:component", "category:foundations"],
      "title": "Anchor"
    },
    {
      "description": "Provides the app shell structure for side navigation, top bars, and main page content.",
      "docsHref": "?path=/docs/component-reference-applayout--docs",
      "id": "component-reference-applayout",
      "keywords": ["app-layout", "app", "layout"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-applayout--default",
        "zoom": 0.4
      },
      "related": [],
      "section": "patterns",
      "tags": ["category:layout", "type:pattern"],
      "title": "AppLayout"
    },
    {
      "description": "Builds product navigation menus with grouped items, active states, and space-specific actions.",
      "docsHref": "?path=/docs/component-reference-appmenu--docs",
      "id": "component-reference-appmenu",
      "keywords": ["app-menu", "app", "menu"],
      "preview": {
        "type": "image",
        "src": "/catalog/appmenu-preview.png",
        "alt": "AppMenu preview with the application navigation drawer open."
      },
      "related": [],
      "section": "patterns",
      "tags": [
        "category:navigation",
        "behavior:selection",
        "behavior:disclosure",
        "behavior:navigation",
        "type:pattern",
        "category:layout"
      ],
      "title": "AppMenu"
    },
    {
      "description": "Combines text search and option selection for quickly finding one value from a filtered list.",
      "docsHref": "?path=/docs/component-reference-autocomplete--docs",
      "id": "component-reference-autocomplete",
      "keywords": ["autocomplete"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-autocomplete--default"
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:inputs",
        "type:component",
        "behavior:filtering",
        "behavior:editing"
      ],
      "title": "Autocomplete"
    },
    {
      "description": "Avatars represent people, companies, or entities with initials, icons, or images.",
      "docsHref": "?path=/docs/component-reference-avatar--docs",
      "id": "component-reference-avatar",
      "keywords": ["person", "profile", "user", "company", "identity"],
      "preview": {
        "type": "story",
        "story": "with-image",
        "storyId": "component-reference-avatar--with-image"
      },
      "related": [],
      "section": "components",
      "tags": [
        "type:component",
        "category:content",
        "category:inputs",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "Avatar"
    },
    {
      "description": "Labels statuses, counts, or metadata with compact contextual styling and optional icons.",
      "docsHref": "?path=/docs/component-reference-badge--docs",
      "id": "component-reference-badge",
      "keywords": ["badge"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "component-reference-badge--primary"
      },
      "related": [],
      "section": "components",
      "tags": ["category:information", "type:component", "category:content"],
      "title": "Badge"
    },
    {
      "description": "Displays mobile-first modal content from the bottom of the viewport for focused tasks.",
      "docsHref": "?path=/docs/component-reference-bottomsheet--docs",
      "id": "component-reference-bottomsheet",
      "keywords": ["bottom-sheet", "bottom", "sheet"],
      "preview": {
        "type": "image",
        "src": "/catalog/bottomsheet-preview.png",
        "alt": "BottomSheet preview with modal content opened from the bottom of the viewport."
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:feedback",
        "type:component",
        "behavior:blocking",
        "behavior:disclosure"
      ],
      "title": "BottomSheet"
    },
    {
      "description": "Breadcrumbs integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-breadcrumb--docs",
      "id": "library-integrations-reference-tanstack-router-breadcrumb",
      "keywords": ["tanstack-router", "breadcrumbs"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "library-integrations-reference-tanstack-router-breadcrumb--default"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation"
      ],
      "title": "Breadcrumb"
    },
    {
      "description": "Turns the current page hierarchy into compact parent links for backtracking across nested routes.",
      "docsHref": "?path=/docs/component-reference-breadcrumbs--docs",
      "id": "component-reference-breadcrumbs",
      "keywords": ["breadcrumbs", "dynamic-breadcrumbs", "dynamic"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-breadcrumbs--default",
        "zoom": 0.7
      },
      "related": [],
      "section": "components",
      "tags": ["category:navigation", "type:component", "behavior:navigation"],
      "title": "Breadcrumbs"
    },
    {
      "description": "Buttons allow users to take actions, and make choices, with a single tap.",
      "docsHref": "?path=/docs/component-reference-button--docs",
      "id": "component-reference-button",
      "keywords": ["action", "cta", "submit", "confirm", "trigger"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-button--default"
      },
      "related": [],
      "section": "components",
      "tags": [
        "type:component",
        "category:actions",
        "behavior:selection",
        "category:inputs"
      ],
      "title": "Button"
    },
    {
      "description": "Frames related content and actions in a reusable surface with consistent spacing and borders.",
      "docsHref": "?path=/docs/component-reference-card--docs",
      "id": "component-reference-card",
      "keywords": ["card"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-card--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:information", "type:component", "category:content"],
      "title": "Card"
    },
    {
      "description": "Present related content in a horizontally scrollable region with navigation controls.",
      "docsHref": "?path=/docs/component-reference-carousel--docs",
      "id": "component-reference-carousel",
      "keywords": ["carousel"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-carousel--default",
        "zoom": 0.7
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:content", "behavior:selection"],
      "title": "Carousel"
    },
    {
      "description": "Lets users toggle a single boolean option in forms or settings.",
      "docsHref": "?path=/docs/component-reference-checkbox--docs",
      "id": "component-reference-checkbox",
      "keywords": ["checkbox"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "component-reference-checkbox--primary"
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:inputs",
        "type:component",
        "behavior:selection",
        "behavior:editing"
      ],
      "title": "Checkbox"
    },
    {
      "description": "Combines a TanStack checkbox with label, helper text, validation feedback, and form state.",
      "docsHref": "?path=/docs/forms-reference-checkboxfield--docs",
      "id": "forms-reference-checkboxfield",
      "keywords": [
        "checkbox-field",
        "tanstack-checkbox-field",
        "tanstack",
        "checkbox",
        "field"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-checkboxfield--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:selection",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "CheckboxField"
    },
    {
      "description": "Groups related checkboxes so users can select multiple options from one set.",
      "docsHref": "?path=/docs/component-reference-checkboxgroup--docs",
      "id": "component-reference-checkboxgroup",
      "keywords": ["checkbox-group", "checkbox", "group"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-checkboxgroup--default"
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:inputs",
        "type:component",
        "behavior:multi-selection",
        "behavior:selection",
        "behavior:editing"
      ],
      "title": "CheckboxGroup"
    },
    {
      "description": "Combines a TanStack checkbox group with label, helper text, validation feedback, and form state.",
      "docsHref": "?path=/docs/forms-reference-checkboxgroupfield--docs",
      "id": "forms-reference-checkboxgroupfield",
      "keywords": [
        "checkbox-group-field",
        "tanstack-check-group-field",
        "tanstack",
        "check",
        "group",
        "field"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-checkboxgroupfield--default",
        "zoom": 0.7
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:multi-selection",
        "behavior:selection",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "CheckboxGroupField"
    },
    {
      "description": "Binds a checkbox group to TanStack Form state for selecting multiple values.",
      "docsHref": "?path=/docs/forms-reference-checkboxgroupinput--docs",
      "id": "forms-reference-checkboxgroupinput",
      "keywords": [
        "checkbox-group",
        "tanstack-checkbox-group",
        "tanstack",
        "checkbox",
        "group"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-checkboxgroupinput--default",
        "zoom": 0.7
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:inputs",
        "behavior:multi-selection",
        "behavior:selection",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "CheckboxGroupInput"
    },
    {
      "description": "Binds a checkbox to TanStack Form state for a single boolean value.",
      "docsHref": "?path=/docs/forms-reference-checkboxinput--docs",
      "id": "forms-reference-checkboxinput",
      "keywords": ["checkbox", "tanstack-checkbox", "tanstack"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-checkboxinput--default",
        "zoom": 0.7
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:inputs",
        "behavior:selection",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "CheckboxInput"
    },
    {
      "description": "Provides an accessible icon-only button for auxiliary actions.",
      "docsHref": "?path=/docs/component-reference-circulariconbutton--docs",
      "id": "component-reference-circulariconbutton",
      "keywords": [
        "icon-button",
        "circular-icon-button",
        "circular",
        "icon",
        "button"
      ],
      "preview": {
        "type": "story",
        "story": "enabled",
        "storyId": "component-reference-circulariconbutton--enabled"
      },
      "related": [],
      "section": "components",
      "tags": ["status:experimental", "category:actions", "type:component"],
      "title": "CircularIconButton"
    },
    {
      "description": "Displays inline code, technical values, or short tokens with monospace styling.",
      "docsHref": "?path=/docs/component-reference-code--docs",
      "id": "component-reference-code",
      "keywords": ["code"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-code--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:information", "type:primitive", "category:content"],
      "title": "Code"
    },
    {
      "description": "Creates disclosure sections for optional details without sending users to another page.",
      "docsHref": "?path=/docs/component-reference-collapsible--docs",
      "id": "component-reference-collapsible",
      "keywords": ["collapsible"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-collapsible--default"
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:information",
        "type:component",
        "category:content",
        "behavior:disclosure"
      ],
      "title": "Collapsible"
    },
    {
      "description": "Coordinates related disclosure sections as one accessible accordion with shared expanded state.",
      "docsHref": "?path=/docs/component-reference-collapsiblegroup--docs",
      "id": "component-reference-collapsiblegroup",
      "keywords": ["collapsible", "accordion", "disclosure", "group"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-collapsiblegroup--default"
      },
      "related": ["component-reference-collapsible"],
      "section": "components",
      "tags": ["type:component", "category:information", "behavior:disclosure"],
      "title": "CollapsibleGroup"
    },
    {
      "description": "Data Grid with sorting, pagination, row selection, and custom cells; powered by Tanstack Table",
      "docsHref": "?path=/docs/component-reference-datatable--docs",
      "id": "component-reference-datatable",
      "keywords": ["data-table", "category:tabular-data", "table"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-datatable--default",
        "zoom": 0.5
      },
      "related": [],
      "section": "components",
      "tags": ["category:tabular-data", "type:component", "behavior:selection"],
      "title": "DataTable"
    },
    {
      "description": "Provide contextual actions for selected table rows.",
      "docsHref": "?path=/docs/component-reference-datatable-datatablebulkactions--docs",
      "id": "component-reference-datatable-datatablebulkactions",
      "keywords": ["data-table", "bulk-actions", "selection", "table"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-datatable-datatablebulkactions--default",
        "zoom": 0.5
      },
      "principal": "component-reference-datatable",
      "related": [],
      "section": "components",
      "tags": [
        "category:tabular-data",
        "type:component",
        "behavior:multi-selection"
      ],
      "title": "DataTableBulkActions"
    },
    {
      "description": "Displays a calendar grid for selecting a single date, with controls for year and month selection",
      "docsHref": "?path=/docs/component-reference-datecalendar--docs",
      "id": "component-reference-datecalendar",
      "keywords": ["date-calendar", "date", "calendar"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-datecalendar--default",
        "zoom": 0.6
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:inputs", "behavior:editing"],
      "title": "DateCalendar"
    },
    {
      "description": "Lets users pick a date from an input-triggered calendar popover.",
      "docsHref": "?path=/docs/component-reference-datepicker--docs",
      "id": "component-reference-datepicker",
      "keywords": ["date-picker", "date", "picker"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-datepicker--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:inputs", "type:component", "behavior:editing"],
      "title": "DatePicker"
    },
    {
      "description": "Combines a TanStack date picker with label, helper text, validation feedback, and form state.",
      "docsHref": "?path=/docs/forms-reference-datepickerfield--docs",
      "id": "forms-reference-datepickerfield",
      "keywords": [
        "date-picker-field",
        "tanstack-date-picker-field",
        "tanstack",
        "date",
        "picker",
        "field"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-datepickerfield--default",
        "zoom": 0.7
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "DatePickerField"
    },
    {
      "description": "Binds a date picker input to TanStack Form state for single-date values.",
      "docsHref": "?path=/docs/forms-reference-datepickerinput--docs",
      "id": "forms-reference-datepickerinput",
      "keywords": [
        "date-picker",
        "tanstack-date-picker",
        "tanstack",
        "date",
        "picker"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-datepickerinput--default",
        "zoom": 0.8
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:inputs",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "DatePickerInput"
    },
    {
      "description": "Displays a calendar grid for selecting a start and end date range.",
      "docsHref": "?path=/docs/component-reference-daterangecalendar--docs",
      "id": "component-reference-daterangecalendar",
      "keywords": ["date-range-calendar", "date", "range", "calendar"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-daterangecalendar--default",
        "zoom": 0.8
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:inputs", "behavior:editing"],
      "title": "DateRangeCalendar"
    },
    {
      "description": "Lets users pick a start and end date from an input-triggered calendar popover.",
      "docsHref": "?path=/docs/component-reference-daterangepicker--docs",
      "id": "component-reference-daterangepicker",
      "keywords": ["date-range-picker", "date", "range", "picker"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-daterangepicker--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:inputs", "type:component", "behavior:editing"],
      "title": "DateRangePicker"
    },
    {
      "description": "Combines a TanStack date range picker with label, helper text, validation feedback, and form state.",
      "docsHref": "?path=/docs/forms-reference-daterangepickerfield--docs",
      "id": "forms-reference-daterangepickerfield",
      "keywords": [
        "date-range-picker-field",
        "tanstack-date-range-picker-field",
        "tanstack",
        "date",
        "range",
        "picker",
        "field"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-daterangepickerfield--default",
        "zoom": 0.8
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "DateRangePickerField"
    },
    {
      "description": "Binds a date range picker to TanStack Form state for start and end dates.",
      "docsHref": "?path=/docs/forms-reference-daterangepickerinput--docs",
      "id": "forms-reference-daterangepickerinput",
      "keywords": [
        "date-range-picker",
        "tanstack-date-range-picker",
        "tanstack",
        "date",
        "range",
        "picker"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-daterangepickerinput--default",
        "zoom": 0.8
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:inputs",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "DateRangePickerInput"
    },
    {
      "description": "Displays name-value pairs for summaries, details, and structured read-only data.",
      "docsHref": "?path=/docs/component-reference-definitionlist--docs",
      "id": "component-reference-definitionlist",
      "keywords": ["definition-list", "definition", "list"],
      "preview": {
        "type": "story",
        "story": "horizontal",
        "storyId": "component-reference-definitionlist--horizontal"
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:tabular-data", "behavior:selection"],
      "title": "DefinitionList"
    },
    {
      "description": "Attaches concise definitions to terms so users can clarify domain language in context.",
      "docsHref": "?path=/docs/component-reference-definitiontooltip--docs",
      "id": "component-reference-definitiontooltip",
      "keywords": ["definition-tooltip", "definition", "tooltip"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-definitiontooltip--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:feedback", "type:component", "behavior:disclosure"],
      "title": "DefinitionTooltip"
    },
    {
      "description": "Dialogs show modal content that requires focused attention or a blocking decision.",
      "docsHref": "?path=/docs/component-reference-dialog--docs",
      "id": "component-reference-dialog",
      "keywords": ["modal", "overlay", "confirmation", "blocking", "prompt"],
      "preview": {
        "type": "image",
        "src": "/catalog/dialog-preview.png",
        "alt": "Dialog preview with a centered modal, title, message, and two actions."
      },
      "related": [],
      "section": "components",
      "tags": [
        "type:component",
        "category:feedback",
        "behavior:blocking",
        "behavior:disclosure"
      ],
      "title": "Dialog"
    },
    {
      "description": "Explains an empty view and offers the next action when there is no content to show.",
      "docsHref": "?path=/docs/component-reference-emptystate--docs",
      "id": "component-reference-emptystate",
      "keywords": ["empty-state", "empty", "state"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-emptystate--default"
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:feedback"],
      "title": "EmptyState"
    },
    {
      "description": "Explains a failed view or request and gives users a clear recovery action.",
      "docsHref": "?path=/docs/component-reference-errorstate--docs",
      "id": "component-reference-errorstate",
      "keywords": ["error-state", "error", "state"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-errorstate--default",
        "zoom": 0.25
      },
      "related": [],
      "section": "components",
      "tags": ["category:feedback", "type:component", "behavior:validation"],
      "title": "ErrorState"
    },
    {
      "description": "Provides the atomic field wrapper for custom TanStack Form layouts with labels, help text, and feedback.",
      "docsHref": "?path=/docs/forms-reference-field--docs",
      "id": "forms-reference-field",
      "keywords": [
        "form-field",
        "tanstack-form-field",
        "tanstack",
        "form",
        "field"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-field--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "Field"
    },
    {
      "description": "Groups related form controls under one accessible legend.",
      "docsHref": "?path=/docs/forms-reference-fieldset--docs",
      "id": "forms-reference-fieldset",
      "keywords": ["fieldset"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-fieldset--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "Fieldset"
    },
    {
      "description": "Defines one table filter with a trigger, operator, and custom value control.",
      "docsHref": "?path=/docs/component-reference-filter--docs",
      "id": "component-reference-filter",
      "keywords": ["filter"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-filter--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:tabular-data", "type:component", "behavior:filtering"],
      "title": "Filter"
    },
    {
      "description": "Combine and manage multiple filters for narrowing table or list data.",
      "docsHref": "?path=/docs/component-reference-filtertoolbar--docs",
      "id": "component-reference-filtertoolbar",
      "keywords": ["filter-toolbar", "filter", "toolbar"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-filtertoolbar--default"
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:tabular-data", "behavior:filtering"],
      "title": "FilterToolbar"
    },
    {
      "description": "Arranges content in one dimension with Unity spacing, alignment, wrapping, and direction props.",
      "docsHref": "?path=/docs/component-reference-flex--docs",
      "id": "component-reference-flex",
      "keywords": ["flex"],
      "preview": {
        "type": "story",
        "story": "basic",
        "storyId": "component-reference-flex--basic"
      },
      "related": [],
      "section": "components",
      "tags": ["category:layout", "type:primitive"],
      "title": "Flex"
    },
    {
      "description": "Display high-priority page actions in a responsive bottom toolbar for persistent actions",
      "docsHref": "?path=/docs/component-reference-floatingactionbar--docs",
      "id": "component-reference-floatingactionbar",
      "keywords": ["floating-action-bar", "floating", "action", "bar"],
      "preview": {
        "type": "story",
        "story": "one-button",
        "storyId": "component-reference-floatingactionbar--one-button"
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:navigation",
        "type:component",
        "category:actions",
        "behavior:navigation"
      ],
      "title": "FloatingActionBar"
    },
    {
      "description": "Connects TanStack Form state to submission, validation, and native form semantics.",
      "docsHref": "?path=/docs/forms-reference-form--docs",
      "id": "forms-reference-form",
      "keywords": ["form", "tanstack-form", "tanstack"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "forms-reference-form--primary",
        "zoom": 0.8
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "Form"
    },
    {
      "description": "FormContextualLink integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-formcontextuallink--docs",
      "id": "library-integrations-reference-tanstack-router-formcontextuallink",
      "keywords": [
        "tanstack-router",
        "form-contextual-link",
        "form",
        "contextual",
        "link"
      ],
      "preview": {
        "type": "story",
        "story": "basic-navigation",
        "storyId": "library-integrations-reference-tanstack-router-formcontextuallink--basic-navigation"
      },
      "related": [],
      "section": "integrations",
      "tags": ["type:integration", "category:inputs", "behavior:navigation"],
      "title": "FormContextualLink"
    },
    {
      "description": "Covers the full page with a loading state while an app view is preparing content.",
      "docsHref": "?path=/docs/component-reference-fullpageloader--docs",
      "id": "component-reference-fullpageloader",
      "keywords": ["full-page-loader", "full", "page", "loader"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-fullpageloader--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:feedback", "type:pattern", "behavior:async"],
      "title": "FullPageLoader"
    },
    {
      "description": "Structures step-by-step flows with funnel navigation, content, and action areas.",
      "docsHref": "?path=/docs/component-reference-funnellayout--docs",
      "id": "component-reference-funnellayout",
      "keywords": ["funnel-layout", "funnel", "layout"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-funnellayout--default"
      },
      "related": [],
      "section": "patterns",
      "tags": ["category:layout", "behavior:editing", "type:pattern"],
      "title": "FunnelLayout"
    },
    {
      "description": "Creates responsive two-dimensional layouts using Unity grid primitives.",
      "docsHref": "?path=/docs/component-reference-grid--docs",
      "id": "component-reference-grid",
      "keywords": ["grid"],
      "preview": {
        "type": "story",
        "story": "basic",
        "storyId": "component-reference-grid--basic"
      },
      "related": [],
      "section": "components",
      "tags": ["category:layout", "type:primitive"],
      "title": "Grid"
    },
    {
      "description": "Provides an accessible icon-only button for compact actions.",
      "docsHref": "?path=/docs/component-reference-iconbutton--docs",
      "id": "component-reference-iconbutton",
      "keywords": ["icon-button", "icon", "button"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-iconbutton--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:actions", "type:component"],
      "title": "IconButton"
    },
    {
      "description": "Builds editable read/write field rows connected to TanStack Form values.",
      "docsHref": "?path=/docs/forms-reference-inlinefield--docs",
      "id": "forms-reference-inlinefield",
      "keywords": ["inline-field", "inline", "field"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-inlinefield--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:fields",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "InlineField"
    },
    {
      "description": "Groups inline editable fields for dense read-and-edit forms backed by TanStack Form.",
      "docsHref": "?path=/docs/forms-reference-inlinefieldgroup--docs",
      "id": "forms-reference-inlinefieldgroup",
      "keywords": ["inline-field-group", "inline", "field", "group"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-inlinefieldgroup--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:fields",
        "behavior:multi-selection",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "InlineFieldGroup"
    },
    {
      "description": "Provides the plain text input base with adornments, validation states, and native input props.",
      "docsHref": "?path=/docs/component-reference-input--docs",
      "id": "component-reference-input",
      "keywords": ["input"],
      "preview": {
        "type": "story",
        "story": "empty",
        "storyId": "component-reference-input--empty"
      },
      "related": [],
      "section": "components",
      "tags": ["category:inputs", "type:component", "behavior:editing"],
      "title": "Input"
    },
    {
      "description": "Labels a form control with required or optional indicators and accessible text styling.",
      "docsHref": "?path=/docs/component-reference-label--docs",
      "id": "component-reference-label",
      "keywords": ["label"],
      "preview": {
        "type": "story",
        "story": "is-required",
        "storyId": "component-reference-label--is-required"
      },
      "related": [],
      "section": "components",
      "tags": ["category:inputs", "type:component", "behavior:editing"],
      "title": "Label"
    },
    {
      "description": "Styles navigation anchors for routes or external destinations without button affordances.",
      "docsHref": "?path=/docs/component-reference-link--docs",
      "id": "component-reference-link",
      "keywords": ["link", "raw-link", "raw"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-link--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:navigation", "type:component", "behavior:navigation"],
      "title": "Link"
    },
    {
      "description": "Link integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-link--docs",
      "id": "library-integrations-reference-tanstack-router-link",
      "keywords": ["tanstack-router", "link"],
      "preview": {
        "type": "story",
        "story": "basic-navigation",
        "storyId": "library-integrations-reference-tanstack-router-link--basic-navigation"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation"
      ],
      "title": "Link"
    },
    {
      "description": "Gives navigation links button styling when the action should stand out as a primary path.",
      "docsHref": "?path=/docs/component-reference-linkbutton--docs",
      "id": "component-reference-linkbutton",
      "keywords": ["link-button", "raw-link-button", "raw", "link", "button"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-linkbutton--default"
      },
      "related": [],
      "section": "components",
      "tags": ["type:component", "category:actions", "behavior:navigation"],
      "title": "LinkButton"
    },
    {
      "description": "LinkButton integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-linkbutton--docs",
      "id": "library-integrations-reference-tanstack-router-linkbutton",
      "keywords": ["tanstack-router", "link-button", "link", "button"],
      "preview": {
        "type": "story",
        "story": "basic-navigation",
        "storyId": "library-integrations-reference-tanstack-router-linkbutton--basic-navigation"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation"
      ],
      "title": "LinkButton"
    },
    {
      "description": "Displays navigable lists with sections, item states, labels, and supporting text.",
      "docsHref": "?path=/docs/component-reference-listview--docs",
      "id": "component-reference-listview",
      "keywords": ["list-view", "list", "view"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-listview--example-documents-list"
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:navigation",
        "type:component",
        "behavior:selection",
        "behavior:navigation"
      ],
      "title": "ListView"
    },
    {
      "description": "ListView integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-listview--docs",
      "id": "library-integrations-reference-tanstack-router-listview",
      "keywords": ["tanstack-router", "list-view", "list", "view"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "library-integrations-reference-tanstack-router-listview--primary"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation",
        "behavior:selection"
      ],
      "title": "ListView"
    },
    {
      "description": "Collects contextual actions in a keyboard-accessible popover menu anchored to a trigger.",
      "docsHref": "?path=/docs/component-reference-menu--docs",
      "id": "component-reference-menu",
      "keywords": ["menu"],
      "preview": {
        "type": "image",
        "src": "/catalog/menu-preview.png",
        "alt": "Menu preview with a trigger and open list of contextual actions."
      },
      "related": [],
      "section": "components",
      "tags": [
        "category:navigation",
        "type:component",
        "behavior:selection",
        "behavior:disclosure",
        "behavior:navigation"
      ],
      "title": "Menu"
    },
    {
      "description": "MenuItem integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-menuitem--docs",
      "id": "library-integrations-reference-tanstack-router-menuitem",
      "keywords": ["tanstack-router", "menu-item", "menu", "item"],
      "preview": {
        "type": "story",
        "story": "basic-menu-navigation",
        "storyId": "library-integrations-reference-tanstack-router-menuitem--basic-menu-navigation"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation"
      ],
      "title": "MenuItem"
    },
    {
      "description": "MultiSelect lets users choose multiple options from a dropdown list with keyboard navigation.",
      "docsHref": "?path=/docs/component-reference-multiselect--docs",
      "id": "component-reference-multiselect",
      "keywords": ["dropdown", "combobox", "multiple choice", "tags", "filter"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "component-reference-multiselect--primary"
      },
      "related": ["forms-reference-multiselectfield"],
      "section": "components",
      "tags": [
        "type:component",
        "category:inputs",
        "behavior:multi-selection",
        "behavior:filtering",
        "behavior:selection",
        "behavior:editing"
      ],
      "title": "MultiSelect"
    },
    {
      "description": "MultiSelectField combines MultiSelect with TanStack Form field labeling, feedback, and validation.",
      "docsHref": "?path=/docs/forms-reference-multiselectfield--docs",
      "id": "forms-reference-multiselectfield",
      "keywords": [
        "form field",
        "tanstack form",
        "dropdown",
        "multiple choice",
        "validation"
      ],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "forms-reference-multiselectfield--primary"
      },
      "principal": "component-reference-multiselect",
      "related": ["component-reference-multiselect"],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:fields",
        "behavior:multi-selection",
        "behavior:validation",
        "behavior:selection",
        "behavior:editing"
      ],
      "title": "MultiSelectField"
    },
    {
      "description": "Binds a multi-select control to TanStack Form state for choosing multiple options.",
      "docsHref": "?path=/docs/forms-reference-multiselectinput--docs",
      "id": "forms-reference-multiselectinput",
      "keywords": [
        "multi-select",
        "story-tanstack-multi-select",
        "story",
        "tanstack",
        "multi",
        "select"
      ],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "forms-reference-multiselectinput--primary"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:inputs",
        "behavior:multi-selection",
        "behavior:selection",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "MultiSelectInput"
    },
    {
      "description": "Structures app navigation lists with active, disabled, and nested item states.",
      "docsHref": "?path=/docs/component-reference-nav--docs",
      "id": "component-reference-nav",
      "keywords": ["nav"],
      "preview": {
        "type": "story",
        "story": "primary",
        "storyId": "component-reference-nav--primary"
      },
      "related": [],
      "section": "components",
      "tags": ["category:navigation", "type:component", "behavior:navigation"],
      "title": "Nav"
    },
    {
      "description": "NavItem integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-navitem--docs",
      "id": "library-integrations-reference-tanstack-router-navitem",
      "keywords": ["tanstack-router", "nav-item", "nav", "item"],
      "preview": {
        "type": "story",
        "story": "basic-navigation",
        "storyId": "library-integrations-reference-tanstack-router-navitem--basic-navigation"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation"
      ],
      "title": "NavItem"
    },
    {
      "description": "Presents a navigational destination as a card with title, description, and optional media.",
      "docsHref": "?path=/docs/component-reference-navigationcard--docs",
      "id": "component-reference-navigationcard",
      "keywords": [
        "navigation-card",
        "raw-navigation-card",
        "raw",
        "navigation",
        "card"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-navigationcard--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:navigation", "type:component", "behavior:navigation"],
      "title": "NavigationCard"
    },
    {
      "description": "NavigationCard integrates Unity with TanStack Router navigation patterns.",
      "docsHref": "?path=/docs/library-integrations-reference-tanstack-router-navigationcard--docs",
      "id": "library-integrations-reference-tanstack-router-navigationcard",
      "keywords": [
        "tanstack-router",
        "navigation-card",
        "category:navigation",
        "card"
      ],
      "preview": {
        "type": "story",
        "story": "basic-navigation",
        "storyId": "library-integrations-reference-tanstack-router-navigationcard--basic-navigation"
      },
      "related": [],
      "section": "integrations",
      "tags": [
        "type:integration",
        "category:navigation",
        "behavior:navigation"
      ],
      "title": "NavigationCard"
    },
    {
      "description": "Combines a TanStack number input with label, helper text, validation feedback, and form state.",
      "docsHref": "?path=/docs/forms-reference-numberfield--docs",
      "id": "forms-reference-numberfield",
      "keywords": [
        "number-field",
        "tanstack-number-field",
        "tanstack",
        "number",
        "field"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-numberfield--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "category:fields",
        "type:form-control",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "NumberField"
    },
    {
      "description": "Accepts and formats numeric values, with validation states, and native number input behavior.",
      "docsHref": "?path=/docs/component-reference-numberinput--docs",
      "id": "component-reference-numberinput",
      "keywords": ["number-input", "number", "input"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-numberinput--default"
      },
      "related": [],
      "section": "components",
      "tags": ["category:inputs", "type:component", "behavior:editing"],
      "title": "NumberInput"
    },
    {
      "description": "Binds a numeric input to TanStack Form state for number values.",
      "docsHref": "?path=/docs/forms-reference-numberinput--docs",
      "id": "forms-reference-numberinput",
      "keywords": [
        "number-input",
        "tanstack-number-input",
        "tanstack",
        "number",
        "input"
      ],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "forms-reference-numberinput--default"
      },
      "related": [],
      "section": "forms",
      "tags": [
        "type:form-control",
        "category:inputs",
        "behavior:editing",
        "behavior:validation"
      ],
      "title": "NumberInput"
    },
    {
      "description": "Provides a page shell with header, content, and action regions for app screens.",
      "docsHref": "?path=/docs/component-reference-page--docs",
      "id": "component-reference-page",
      "keywords": ["page"],
      "preview": {
        "type": "story",
        "story": "default",
        "storyId": "component-reference-page--with-heading",
        "zoom": 0.7
      },
      "related": [],
      "section": "patterns",
      "tags": ["category:layout", "type:pattern"],
      "title": "Page"
    },
    {
      "description": "Lets users move through paginated data with page links, next and previous controls, and item counts.",
      "docsHref": "?path=/docs/component-reference-pagination--docs",
      "id": "component-reference-pagination",
      "keywords": ["pagination", "story-pagin