@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",
        "Bulk action bar",
        "Contextual action bar",
        "Toolbar"
      ],
      "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", "Pressable", "Clickable"],
      "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",
        "Inline notification"
      ],
      "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", "Corner anchor", "Overlay 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",
        "App shell",
        "Application shell"
      ],
      "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",
        "Sidebar navigation",
        "Side navigation",
        "Navigation 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",
        "Combobox",
        "Searchable select",
        "Typeahead"
      ],
      "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",
        "Profile picture",
        "User avatar"
      ],
      "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", "Status badge", "Count 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",
        "Bottom drawer",
        "Mobile 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",
        "RouterBreadcrumbs",
        "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",
        "Breadcrumb trail",
        "Breadcrumb navigation"
      ],
      "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",
        "Action button"
      ],
      "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", "Content card", "Surface", "Panel"],
      "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", "Slider", "Content slider"],
      "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", "Tickbox"],
      "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",
        "TanStackCheckboxField",
        "Form checkbox"
      ],
      "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",
        "Multi-checkbox group",
        "Checkbox list"
      ],
      "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",
        "TanStackCheckboxGroupField",
        "Form checkbox group"
      ],
      "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",
        "TanStackCheckboxGroup",
        "Bound 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",
        "TanStackCheckbox",
        "Bound checkbox"
      ],
      "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",
        "Round icon button",
        "Circle 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", "InlineCode", "Code text"],
      "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", "Disclosure", "Expandable section"],
      "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",
        "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",
        "Data grid",
        "Smart table",
        "TanStack 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",
        "Bulk action toolbar",
        "Selection actions"
      ],
      "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",
        "Single-date calendar",
        "Calendar picker"
      ],
      "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",
        "Calendar input",
        "Date input"
      ],
      "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",
        "TanStackDatePickerField",
        "Form date picker"
      ],
      "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",
        "TanStackDatePicker",
        "Bound 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",
        "Range calendar",
        "Date interval 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",
        "Date interval picker",
        "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",
        "TanStackDateRangePickerField",
        "Form date range picker"
      ],
      "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",
        "TanStackDateRangePicker",
        "Bound 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",
        "Description list",
        "Key-value list",
        "Property 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",
        "Glossary tooltip",
        "Term 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",
        "Modal dialog",
        "Confirmation dialog"
      ],
      "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",
        "Blank slate",
        "No-content 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",
        "Failure state",
        "Error view"
      ],
      "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",
        "FormField",
        "TanStackFormField",
        "Field wrapper"
      ],
      "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", "Form group", "Control group"],
      "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", "Data filter", "Column 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",
        "Filter bar",
        "Advanced filters"
      ],
      "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", "Flexbox", "Stack"],
      "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",
        "Sticky action bar",
        "Bottom 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",
        "TanStackForm",
        "Form root"
      ],
      "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",
        "RouterFormContextualLink",
        "TanStack Router 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",
        "Page loader",
        "Loading screen"
      ],
      "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",
        "Wizard layout",
        "Multi-step form 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", "CSS Grid", "Grid layout"],
      "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",
        "Icon-only button",
        "Square 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",
        "Inline edit",
        "Editable 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",
        "Inline edit group",
        "Editable 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", "Base input", "Raw input", "Text input primitive"],
      "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", "Form label", "Field 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",
        "RawLink",
        "Anchor link",
        "Hyperlink"
      ],
      "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", "RouterLink", "TanStack 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",
        "RawLinkButton",
        "Button link",
        "Anchor 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",
        "RouterLinkButton",
        "TanStack 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",
        "Navigation list",
        "Action list"
      ],
      "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",
        "RouterListView",
        "TanStack Router ListView"
      ],
      "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", "Dropdown menu", "Action menu", "Context 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",
        "RouterMenuItem",
        "Navigation 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",
        "Multi-select dropdown",
        "Multiple combobox",
        "Tag picker"
      ],
      "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",
        "TanStackMultiSelectField",
        "Form multi-select"
      ],
      "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",
        "TanStackMultiSelect",
        "Bound 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", "Navigation list", "Sidebar 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-integr