{
"generatedFrom": "src/registry/componentRegistry.ts",
"generatedDate": "2026-09-02",
"packageName": "@crossroads/ui",
"summary": {
"total": 113,
"ready": 92,
"flagship": 24
},
"components": [
{
"name": "ButtonBase",
"group": "Foundations",
"status": "ready",
"kind": "primitive",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Shared interaction surface for button-like controls.",
"importPath": "@crossroads/ui",
"exports": [
"ButtonBase"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { ButtonBase } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/buttons/ButtonBase/ButtonBase.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": true,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-buttons-buttonbase--docs"
},
{
"name": "ButtonGroup",
"group": "Foundations",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Logical grouping for related button actions.",
"importPath": "@crossroads/ui",
"exports": [
"ButtonGroup"
],
"props": [
{
"description": "Accessible label for the grouped actions; provide aria-label or aria-labelledby.",
"name": "aria-label",
"type": "string",
"importance": "normal"
},
{
"description": "Grouped button children.",
"name": "children",
"required": true,
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Group color token inherited by child buttons.",
"name": "color",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
"importance": "high"
},
{
"description": "Disables all child Crossroads buttons unless a child explicitly overrides it.",
"name": "disabled",
"type": "boolean",
"importance": "normal"
},
{
"description": "Stretch group and children to the available inline size.",
"name": "fullWidth",
"type": "boolean",
"importance": "normal"
},
{
"description": "Group orientation.",
"name": "orientation",
"type": "\"horizontal\" | \"vertical\"",
"importance": "high"
},
{
"description": "Group button size inherited by child buttons.",
"name": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "high"
},
{
"description": "Group variant inherited by child buttons.",
"name": "variant",
"type": "\"contained\" | \"outlined\" | \"text\"",
"importance": "high"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "Related actions",
"code": "import { Button, ButtonGroup } from \"@crossroads/ui\";\n\n\n \n \n"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Box"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/buttons/ButtonGroup/ButtonGroup.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [
"Button",
"IconButton",
"SplitButton"
],
"storyRequirements": {
"interaction": true,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-buttons-buttongroup--docs"
},
{
"name": "ContrastChecker",
"group": "Foundations",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": false,
"storybook": true
},
"description": "Token-aware contrast intelligence with automatic foreground selection and WCAG criterion results.",
"importPath": "@crossroads/ui",
"exports": [
"ContrastChecker"
],
"props": [
{
"description": "Foreground color to evaluate; omit when autoForeground is enabled.",
"name": "foreground",
"type": "string",
"importance": "high"
},
{
"description": "Background color to evaluate.",
"name": "background",
"required": true,
"type": "string",
"importance": "high"
},
{
"description": "Select and report the highest-contrast text candidate from the active theme.",
"name": "autoForeground",
"type": "boolean",
"importance": "high"
},
{
"description": "Whether to show large-text thresholds.",
"name": "showLargeText",
"type": "boolean",
"importance": "normal"
},
{
"description": "Whether to show non-text/UI contrast.",
"name": "showUiContrast",
"type": "boolean",
"importance": "normal"
},
{
"description": "Palette tokens ranked alongside synthetic alternatives; defaults to the active CrossroadsProvider palette.",
"name": "tokens",
"type": "Record",
"importance": "normal"
},
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { ContrastChecker } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/colors/ContrastChecker/ContrastChecker.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-colors-contrastchecker--docs"
},
{
"name": "Divider",
"group": "Foundations",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Visual separator for content and control regions.",
"importPath": "@crossroads/ui",
"exports": [
"Divider"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { Divider } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/utilities/Divider/Divider.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-utilities-divider--docs"
},
{
"name": "Icon",
"group": "Foundations",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Semantic vector icon primitive with swappable icon packs.",
"importPath": "@crossroads/ui",
"exports": [
"Icon"
],
"props": [
{
"description": "Semantic icon name from the active icon pack.",
"name": "name",
"required": true,
"type": "IconName",
"importance": "normal"
},
{
"description": "Physical icon box size.",
"name": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "normal"
},
{
"description": "Glyph color; omit to inherit currentColor from the surrounding plane.",
"name": "color",
"type": "IconColor",
"importance": "normal"
},
{
"description": "Rotation in degrees.",
"name": "rotation",
"type": "0 | 45 | 90 | 180 | 270",
"importance": "normal"
},
{
"description": "Opt-in mirroring for directional icons when direction is RTL; defaults to false.",
"name": "mirrorInRtl",
"type": "boolean",
"importance": "normal"
},
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "Decorative icon in a shaped container",
"code": "import { Icon, Shape } from \"@crossroads/ui\";\n\n\n \n"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic.",
"Use decorative icons with aria-hidden; provide aria-label only when the icon itself communicates meaning.",
"Mirror directional icons in RTL by default unless the icon represents a fixed object or brand."
],
"accessibilityNotes": [
"Decorative icons must be hidden from assistive technology; meaningful icons need an accessible label."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/utilities/Icon/Icon.css"
],
"iconDependencies": [
"search"
],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root",
"IconProvider"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [
"IconButton"
],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-utilities-icon--docs"
},
{
"name": "Field",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Composable wrapper for labels, help text, and errors.",
"importPath": "@crossroads/ui",
"exports": [
"Field"
],
"props": [
{
"description": "Control height applied to the wrapped input — sm 36px, md 40px, lg 44px. Omit for md; multiline controls do not take it.",
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\"",
"importance": "normal"
},
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { Field } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Box",
"FieldError",
"HelperText",
"Label",
"RequiredIndicator",
"FormControl"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/Field/Field.css",
"src/components/foundations/forms/Label/Label.css",
"src/components/foundations/forms/HelperText/HelperText.css",
"src/components/foundations/forms/FieldError/FieldError.css",
"src/components/foundations/forms/RequiredIndicator/RequiredIndicator.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-field--docs"
},
{
"name": "ControlLabel",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Accessible label wrapper for controls and their supporting text.",
"importPath": "@crossroads/ui",
"exports": [
"ControlLabel"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { ControlLabel } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"FormControl",
"RequiredIndicator",
"Typography"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/ControlLabel/ControlLabel.css",
"src/components/foundations/forms/RequiredIndicator/RequiredIndicator.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-controllabel--docs"
},
{
"name": "FormControl",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Context provider for shared form control state.",
"importPath": "@crossroads/ui",
"exports": [
"FormControl",
"useFormControl"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { FormControl } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Box"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/FormControl/FormControl.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-formcontrol--docs"
},
{
"name": "FormGroup",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Layout and semantic grouping primitive for related controls.",
"importPath": "@crossroads/ui",
"exports": [
"FormGroup"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { FormGroup } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Box"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/FormGroup/FormGroup.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-formgroup--docs"
},
{
"name": "FieldError",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Accessible validation message primitive.",
"importPath": "@crossroads/ui",
"exports": [
"FieldError"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { FieldError } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Typography"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/FieldError/FieldError.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-fielderror--docs"
},
{
"name": "Fieldset",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Semantic group for related form controls.",
"importPath": "@crossroads/ui",
"exports": [
"Fieldset"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { Fieldset } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"RequiredIndicator",
"FormControl",
"Typography"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/Fieldset/Fieldset.css",
"src/components/foundations/forms/RequiredIndicator/RequiredIndicator.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-fieldset--docs"
},
{
"name": "HelperText",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Supportive field description text.",
"importPath": "@crossroads/ui",
"exports": [
"HelperText"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { HelperText } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Typography"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/HelperText/HelperText.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-helpertext--docs"
},
{
"name": "Label",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Accessible text label for form controls.",
"importPath": "@crossroads/ui",
"exports": [
"Label"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { Label } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Typography"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/Label/Label.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-label--docs"
},
{
"name": "RequiredIndicator",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Decorative required-field marker; native control semantics announce the required state.",
"importPath": "@crossroads/ui",
"exports": [
"RequiredIndicator"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { RequiredIndicator } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/forms/RequiredIndicator/RequiredIndicator.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-forms-requiredindicator--docs"
},
{
"name": "Typography",
"group": "Foundations",
"status": "ready",
"kind": "foundation",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": false,
"storybook": true
},
"description": "Reusable text roles built on the Crossroads UI type scale.",
"importPath": "@crossroads/ui",
"exports": [
"Text",
"Heading",
"Caption",
"LabelText",
"ControlText",
"CodeText"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { Text } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/typography/Typography/Typography.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-typography--docs"
},
{
"name": "Spinner",
"group": "Foundations",
"status": "ready",
"kind": "utility",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Loading state indicator with accessible labeling.",
"importPath": "@crossroads/ui",
"exports": [
"Spinner"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { Spinner } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"VisuallyHidden"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/utilities/Spinner/Spinner.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-utilities-spinner--docs"
},
{
"name": "Transitions",
"group": "Foundations",
"status": "ready",
"kind": "utility",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Reusable token-backed motion primitives for entering and exiting UI.",
"importPath": "@crossroads/ui",
"exports": [
"Fade",
"Grow",
"Zoom",
"Slide",
"Collapse"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "Fade content",
"code": "import { Fade } from \"@crossroads/ui\";\n\n\n Animated content
\n"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic.",
"Use Fade, Grow, Zoom, Slide, or Collapse directly; Transitions is the documentation family, not an exported component."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/utilities/Transitions/Transitions.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-utilities-transitions--docs"
},
{
"name": "VisuallyHidden",
"group": "Foundations",
"status": "ready",
"kind": "utility",
"dependencyMode": "dependency-only",
"visibility": {
"dashboard": false,
"docs": true,
"exportBuilder": "dependency-only",
"sandbox": false,
"storybook": true
},
"description": "Assistive-only content for screen reader context.",
"importPath": "@crossroads/ui",
"exports": [
"VisuallyHidden"
],
"props": [
{
"description": "Content rendered by the primitive.",
"name": "children",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Polymorphic element override when supported.",
"name": "as",
"type": "ElementType",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { VisuallyHidden } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use foundation components to compose higher-level components instead of raw styled wrappers.",
"Prefer tokens, variants, and semantic props over hard-coded CSS values.",
"Keep foundation primitives low-level and free of product-specific business logic."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/utilities/VisuallyHidden/VisuallyHidden.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": false,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-foundations-utilities-visuallyhidden--docs"
},
{
"name": "Button",
"group": "Buttons",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Contained, outlined, text, loading, and responsive action button.",
"importPath": "@crossroads/ui",
"exports": [
"Button"
],
"props": [
{
"description": "Visible button label.",
"name": "label",
"required": true,
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Shows the spinner and disables interaction.",
"name": "isLoading",
"type": "boolean",
"importance": "high"
},
{
"description": "Optional replacement label while loading.",
"name": "loadingLabel",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Icon before the label.",
"name": "startIcon",
"type": "IconName",
"importance": "normal"
},
{
"description": "Icon after the label.",
"name": "endIcon",
"type": "IconName",
"importance": "normal"
},
{
"description": "Opt-in mirroring for directional button adornments when direction is RTL; defaults to false.",
"name": "mirrorIconInRtl",
"type": "boolean",
"importance": "normal"
},
{
"description": "Visible button content. Use localized text for user-facing labels.",
"name": "children",
"required": true,
"type": "ReactNode",
"importance": "normal"
},
{
"defaultValue": "contained",
"description": "Visual treatment: contained, outlined, or text.",
"name": "variant",
"type": "\"contained\" | \"outlined\" | \"text\"",
"importance": "high"
},
{
"defaultValue": "primary",
"description": "Theme color role used to derive background, border, hover, active, and focus states.",
"name": "color",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
"importance": "high"
},
{
"defaultValue": "md",
"description": "Control size.",
"name": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "high"
},
{
"description": "Prevents interaction and announces the disabled state to assistive tech.",
"name": "disabled",
"type": "boolean",
"importance": "high"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "Primary action",
"code": "import { Button } from \"@crossroads/ui\";\n\n"
}
],
"usageRules": [
"Use for commands that change state, submit forms, or trigger actions.",
"Prefer Button for text actions and IconButton only when the icon has a clear accessible label.",
"Choose color for semantic intent; hover, active, selected, and focus states are derived from tokens."
],
"accessibilityNotes": [
"Use native button semantics and never rely on color alone to communicate state."
],
"componentDependencies": [
"ButtonBase",
"Spinner",
"Icon"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/buttons/ButtonBase/ButtonBase.css",
"src/components/foundations/utilities/Spinner/Spinner.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [
"ButtonBase",
"IconButton",
"ButtonGroup",
"SplitButton"
],
"storyRequirements": {
"interaction": true,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-buttons-button--docs",
"showcase": {
"clientSuitability": "flagship",
"priority": 5,
"useCases": [
"Submit a form",
"Confirm or cancel in a dialog",
"Primary call to action on a page"
],
"aiPromptExamples": [
"Add a primary save button and a secondary cancel button",
"Show a loading state on the submit button while the form is saving"
]
}
},
{
"name": "FloatingActionButton",
"group": "Buttons",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Floating Action Button Prominent circular action for a primary screen command.",
"importPath": "@crossroads/ui",
"exports": [
"FloatingActionButton"
],
"props": [
{
"description": "Accessible name for the action.",
"name": "aria-label",
"required": true,
"type": "string",
"importance": "normal"
},
{
"description": "Crossroads icon name.",
"name": "iconName",
"required": true,
"type": "IconName",
"importance": "normal"
},
{
"description": "Optional visible label for the extended shape.",
"name": "label",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Button color role.",
"name": "color",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
"importance": "normal"
},
{
"description": "Border line style.",
"name": "borderStyle",
"type": "\"solid\" | \"dashed\" | \"dotted\"",
"importance": "normal"
},
{
"description": "Border weight from the shared scale.",
"name": "borderWidth",
"type": "\"none\" | \"normal\" | \"emphasis\"",
"importance": "normal"
},
{
"description": "Icon size override.",
"name": "iconSize",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "normal"
},
{
"description": "Opt-in mirroring for a directional floating-action icon when direction is RTL; defaults to false.",
"name": "mirrorIconInRtl",
"type": "boolean",
"importance": "normal"
},
{
"description": "Logical label placement relative to the icon.",
"name": "labelPlacement",
"type": "\"start\" | \"end\"",
"importance": "normal"
},
{
"description": "Optional fixed screen corner.",
"name": "placement",
"type": "\"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\"",
"importance": "normal"
},
{
"description": "Floating action size.",
"name": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "normal"
},
{
"description": "Visible button content. Use localized text for user-facing labels.",
"name": "children",
"required": true,
"type": "ReactNode",
"importance": "normal"
},
{
"defaultValue": "contained",
"description": "Visual treatment: contained, outlined, or text.",
"name": "variant",
"type": "\"contained\" | \"outlined\" | \"text\"",
"importance": "normal"
},
{
"description": "Prevents interaction and announces the disabled state to assistive tech.",
"name": "disabled",
"type": "boolean",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "Sandbox action",
"code": "import { FloatingActionButton } from \"@crossroads/ui\";\n\n"
}
],
"usageRules": [
"Use for commands that change state, submit forms, or trigger actions.",
"Prefer Button for text actions and IconButton only when the icon has a clear accessible label.",
"Choose color for semantic intent; hover, active, selected, and focus states are derived from tokens."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"ButtonBase",
"Icon"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/buttons/ButtonBase/ButtonBase.css",
"src/components/buttons/FloatingActionButton/FloatingActionButton.css",
"src/components/foundations/utilities/Icon/Icon.css"
],
"iconDependencies": [
"edit",
"shovel"
],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root",
"IconProvider"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": true,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-buttons-floatingactionbutton--docs"
},
{
"name": "IconButton",
"group": "Buttons",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Compact icon-only action with mandatory accessible name.",
"importPath": "@crossroads/ui",
"exports": [
"IconButton"
],
"props": [
{
"description": "Accessible name for icon-only action.",
"name": "aria-label",
"required": true,
"type": "string",
"importance": "normal"
},
{
"description": "Semantic icon name from the active icon pack.",
"name": "iconName",
"required": true,
"type": "IconName",
"importance": "high"
},
{
"description": "Button color role.",
"name": "color",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
"importance": "high"
},
{
"description": "Opt-in mirroring for a directional button icon when direction is RTL; defaults to false.",
"name": "mirrorIconInRtl",
"type": "boolean",
"importance": "normal"
},
{
"description": "Button variant.",
"name": "variant",
"type": "\"contained\" | \"outlined\" | \"text\"",
"importance": "high"
},
{
"description": "Visible button content. Use localized text for user-facing labels.",
"name": "children",
"required": true,
"type": "ReactNode",
"importance": "normal"
},
{
"defaultValue": "md",
"description": "Control size.",
"name": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "high"
},
{
"description": "Prevents interaction and announces the disabled state to assistive tech.",
"name": "disabled",
"type": "boolean",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { IconButton } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use for commands that change state, submit forms, or trigger actions.",
"Prefer Button for text actions and IconButton only when the icon has a clear accessible label.",
"Choose color for semantic intent; hover, active, selected, and focus states are derived from tokens."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"ButtonBase",
"Icon",
"Spinner"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/buttons/ButtonBase/ButtonBase.css",
"src/components/buttons/IconButton/IconButton.css",
"src/components/foundations/utilities/Icon/Icon.css"
],
"iconDependencies": [
"close"
],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root",
"IconProvider"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": true,
"keyboard": false,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-buttons-iconbutton--docs"
},
{
"name": "SplitButton",
"group": "Buttons",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Connected primary action with a related action menu.",
"importPath": "@crossroads/ui",
"exports": [
"SplitButton"
],
"props": [
{
"description": "Dropdown trigger accessible label.",
"name": "dropdownLabel",
"required": true,
"type": "string",
"importance": "normal"
},
{
"description": "Menu accessible label and group label.",
"name": "menuLabel",
"required": true,
"type": "string",
"importance": "normal"
},
{
"description": "Related actions available from the dropdown.",
"name": "options",
"required": true,
"type": "SplitButtonOption[]",
"importance": "normal"
},
{
"description": "Main action label override.",
"name": "label",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Icon before the main action label.",
"name": "startIcon",
"type": "IconName",
"importance": "normal"
},
{
"description": "Icon after the main action label.",
"name": "endIcon",
"type": "IconName",
"importance": "normal"
},
{
"description": "Opt-in mirroring for directional main-action adornments when direction is RTL; defaults to false.",
"name": "mirrorIconInRtl",
"type": "boolean",
"importance": "normal"
},
{
"description": "Controlled selected option value.",
"name": "selectedValue",
"type": "string",
"importance": "normal"
},
{
"description": "Selection behavior for menu choices.",
"name": "selectionMode",
"type": "\"change-action\" | \"trigger-action\"",
"importance": "normal"
},
{
"description": "Called when the main action or trigger-action menu item runs.",
"name": "onAction",
"type": "(option: SplitButtonOption) => void",
"importance": "normal"
},
{
"description": "Called when a menu option is selected.",
"name": "onSelect",
"type": "(option: SplitButtonOption) => void",
"importance": "normal"
},
{
"description": "Visible button content. Use localized text for user-facing labels.",
"name": "children",
"required": true,
"type": "ReactNode",
"importance": "normal"
},
{
"defaultValue": "contained",
"description": "Visual treatment: contained, outlined, or text.",
"name": "variant",
"type": "\"contained\" | \"outlined\" | \"text\"",
"importance": "normal"
},
{
"defaultValue": "primary",
"description": "Theme color role used to derive background, border, hover, active, and focus states.",
"name": "color",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
"importance": "normal"
},
{
"defaultValue": "md",
"description": "Control size.",
"name": "size",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"importance": "normal"
},
{
"description": "Prevents interaction and announces the disabled state to assistive tech.",
"name": "disabled",
"type": "boolean",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"code": "import { SplitButton } from \"@crossroads/ui\";\n\n",
"title": "Basic import"
}
],
"usageRules": [
"Use for commands that change state, submit forms, or trigger actions.",
"Prefer Button for text actions and IconButton only when the icon has a clear accessible label.",
"Choose color for semantic intent; hover, active, selected, and focus states are derived from tokens."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"ButtonGroup",
"Button",
"IconButton",
"Menu",
"Icon",
"Portal",
"Box"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/foundations/buttons/ButtonBase/ButtonBase.css",
"src/components/foundations/buttons/ButtonGroup/ButtonGroup.css",
"src/components/buttons/SplitButton/SplitButton.css",
"src/components/menus/Menu/Menu.css",
"src/components/foundations/utilities/Icon/Icon.css"
],
"iconDependencies": [
"chevron-right"
],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root",
"IconProvider"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon",
"density",
"z-index"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": true,
"keyboard": true,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-buttons-splitbutton--docs"
},
{
"name": "SegmentedControl",
"group": "Controls",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Single-choice segmented controller with keyboard support.",
"importPath": "@crossroads/ui",
"exports": [
"SegmentedControl",
"SegmentedControlOption",
"SegmentedControlRoot"
],
"props": [
{
"description": "Selected option value.",
"name": "value",
"type": "string",
"importance": "normal"
},
{
"description": "Initial selected option value.",
"name": "defaultValue",
"type": "string",
"importance": "normal"
},
{
"description": "Shared control size; maps to button padding, height, and icon size.",
"name": "size",
"type": "\"sm\" | \"md\" | \"lg\"",
"importance": "normal"
},
{
"description": "Inter-option spacing rhythm.",
"name": "density",
"type": "\"compact\" | \"comfortable\" | \"spacious\"",
"importance": "normal"
},
{
"description": "Stretch the group to its parent width and distribute options evenly.",
"name": "fullWidth",
"type": "boolean",
"importance": "normal"
},
{
"description": "Visible group label.",
"name": "legend",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Options rendered as mutually exclusive segments.",
"name": "items",
"required": true,
"type": "Array<{ label: ReactNode; value: string; disabled?: boolean }>",
"importance": "normal"
},
{
"description": "Called when a segment is selected.",
"name": "onChange",
"type": "(value: string) => void",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "View switcher",
"code": "import { SegmentedControl } from \"@crossroads/ui\";\n\n\n List\n Board\n"
}
],
"usageRules": [
"Use for compact mode or state selection when all options are visible.",
"Keep labels short and localized.",
"Do not use segmented controls for navigation across pages."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"Icon"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/controls/SegmentedControl/SegmentedControl.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion",
"keyboard-navigation"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": true,
"keyboard": true,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-controls-segmentedcontrol--docs",
"showcase": {
"clientSuitability": "flagship",
"priority": 70,
"useCases": [
"Switch between two or three modes",
"View toggle",
"Compact filter"
],
"aiPromptExamples": [
"Add a toggle between list and grid views",
"Let the user switch between monthly and yearly pricing"
]
}
},
{
"name": "Checkbox",
"group": "Controls",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Binary choice input with label and help text support.",
"importPath": "@crossroads/ui",
"exports": [
"Checkbox",
"CheckboxControl"
],
"props": [
{
"description": "Visible label rendered next to the checkbox when the control owns its text.",
"name": "label",
"type": "ReactNode",
"importance": "normal"
},
{
"description": "Accessible name required when no visible label is provided.",
"name": "aria-label",
"type": "string",
"importance": "normal"
},
{
"description": "Semantic color role applied to the checked and indeterminate fill.",
"name": "color",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
"importance": "high"
},
{
"description": "Checked state for controlled usage.",
"name": "checked",
"type": "boolean",
"importance": "high"
},
{
"description": "Initial checked state.",
"name": "defaultChecked",
"type": "boolean",
"importance": "high"
},
{
"description": "Indeterminate visual state.",
"name": "indeterminate",
"type": "boolean",
"importance": "high"
},
{
"description": "Options rendered as mutually exclusive segments.",
"name": "items",
"required": true,
"type": "Array<{ label: ReactNode; value: string; disabled?: boolean }>",
"importance": "normal"
},
{
"description": "Current selected value for controlled usage.",
"name": "value",
"type": "string",
"importance": "normal"
},
{
"description": "Initial selected value for uncontrolled usage.",
"name": "defaultValue",
"type": "string",
"importance": "normal"
},
{
"description": "Called when a segment is selected.",
"name": "onChange",
"type": "(value: string) => void",
"importance": "normal"
},
{
"description": "Optional class name for scoped overrides when tokens or props are not enough.",
"name": "className",
"type": "string",
"importance": "advanced"
}
],
"examples": [
{
"title": "Labeled choice",
"code": "import { Checkbox } from \"@crossroads/ui\";\n\n"
}
],
"usageRules": [
"Use for compact mode or state selection when all options are visible.",
"Keep labels short and localized.",
"Do not use segmented controls for navigation across pages."
],
"accessibilityNotes": [
"Preserve visible labels, keyboard access, focus-visible states, RTL behavior, and reduced-motion preferences in exported examples."
],
"componentDependencies": [
"ControlLabel"
],
"supportDependencies": [],
"cssDependencies": [
"src/components/forms/Checkbox/Checkbox.css",
"src/components/foundations/forms/ControlLabel/ControlLabel.css",
"src/components/foundations/forms/RequiredIndicator/RequiredIndicator.css"
],
"iconDependencies": [],
"providerDependencies": [
"CrossroadsProvider",
"dir-lang-root"
],
"runtimeDependencies": [
"react",
"css-variables",
"reduced-motion",
"keyboard-navigation"
],
"tokenDependencies": [
"color",
"typography",
"spacing",
"border",
"radius",
"shadow",
"motion",
"opacity",
"transform",
"layout",
"icon"
],
"relatedComponents": [],
"storyRequirements": {
"interaction": true,
"keyboard": true,
"localizedRtl": true,
"playground": true
},
"support": {
"a11y": true,
"responsive": true,
"rtl": true
},
"docsLink": "/?path=/docs/components-controls-checkbox--docs"
},
{
"name": "RadioGroup",
"group": "Controls",
"status": "ready",
"kind": "component",
"dependencyMode": "selectable",
"visibility": {
"dashboard": true,
"docs": true,
"exportBuilder": "selectable",
"sandbox": true,
"storybook": true
},
"description": "Single-choice radio set with accessible grouping.",
"importPath": "@crossroads/ui",
"exports": [
"RadioControl",
"RadioGroup",
"RadioGroupOption",
"RadioGroupRoot"
],
"props": [
{
"description": "Optional visible group label, rendered as the HTML