[ { "filePath": "src/components/Accordion/Accordion/Accordion.tsx", "aggregator": "core", "symbols": [ "default as Accordion", "type AccordionProps" ], "displayName": "Accordion", "description": "", "props": { "children": { "defaultValue": null, "description": "The content of the accordion (`AccordionItem` components).", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } }, "allowMultiple": { "defaultValue": { "value": "false" }, "description": "If true, multiple accordion items can be expanded at the same time.", "name": "allowMultiple", "required": false, "type": { "name": "boolean" } }, "defaultIndex": { "defaultValue": { "value": "[]" }, "description": "An array of initially expanded item indexes.", "name": "defaultIndex", "required": false, "type": { "name": "number[]" } }, "className": { "defaultValue": { "value": "" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Accordion } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/AlertBanner/AlertBanner.tsx", "aggregator": "core", "symbols": [ "default as AlertBanner", "type AlertBannerProps", "AlertBannerBackgroundColor" ], "displayName": "AlertBanner", "description": "", "props": { "backgroundColor": { "defaultValue": { "value": "primary" }, "description": "The background color of the alert banner.", "name": "backgroundColor", "required": false, "type": { "name": "enum", "raw": "AlertBannerBackgroundColor", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"dark\"" }, { "value": "\"warning\"" } ] } }, "isCloseHidden": { "defaultValue": { "value": "false" }, "description": "If true, the close button is hidden.", "name": "isCloseHidden", "required": false, "type": { "name": "boolean" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label of the alert banner for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "closeButtonAriaLabel": { "defaultValue": { "value": "Close" }, "description": "The ARIA label of the close button for accessibility.", "name": "closeButtonAriaLabel", "required": false, "type": { "name": "string" } }, "onClose": { "defaultValue": null, "description": "Callback fired when the close button is clicked.", "name": "onClose", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "children": { "defaultValue": null, "description": "The content of the alert banner.", "name": "children", "required": false, "type": { "name": "ChildrenType | ChildrenType[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { AlertBanner } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/AlertBanner/AlertBannerButton/AlertBannerButton.tsx", "aggregator": "core", "symbols": [ "default as AlertBannerButton", "type AlertBannerButtonProps" ], "displayName": "AlertBannerButton", "description": "", "props": { "isDarkBackground": { "defaultValue": { "value": "false" }, "description": "If true, the button is displayed on a dark background.", "name": "isDarkBackground", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "Custom class names to pass to the component", "name": "className", "required": false, "type": { "name": "string" } }, "activeButtonClassName": { "defaultValue": null, "description": "", "name": "activeButtonClassName", "required": false, "type": { "name": "string" } }, "kind": { "defaultValue": null, "description": "The button's kind", "name": "kind", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "onClick": { "defaultValue": null, "description": "Callback function to run when the button is clicked", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "blurOnMouseUp": { "defaultValue": null, "description": "Blur on button click", "name": "blurOnMouseUp", "required": false, "type": { "name": "boolean" } }, "name": { "defaultValue": null, "description": "Name of the button - for form submit usages", "name": "name", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The button's size", "name": "size", "required": false, "type": { "name": "enum", "raw": "ButtonSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "color": { "defaultValue": null, "description": "The button's color", "name": "color", "required": false, "type": { "name": "enum", "raw": "ButtonColor", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"inverted\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" }, { "value": "\"brand\"" }, { "value": "\"fixed-light\"" }, { "value": "\"fixed-dark\"" } ] } }, "type": { "defaultValue": null, "description": "The button's type", "name": "type", "required": false, "type": { "name": "enum", "raw": "ButtonInputType", "value": [ { "value": "\"button\"" }, { "value": "\"submit\"" }, { "value": "\"reset\"" } ] } }, "disabled": { "defaultValue": null, "description": "Whether the button should be disabled or not", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "rightIcon": { "defaultValue": null, "description": "Icon to place on the right", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "leftIcon": { "defaultValue": null, "description": "Icon to place on the left", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "success": { "defaultValue": null, "description": "the success props are used when you have async action and wants to display a success message", "name": "success", "required": false, "type": { "name": "boolean" } }, "successIcon": { "defaultValue": null, "description": "Success icon name", "name": "successIcon", "required": false, "type": { "name": "SubIcon" } }, "successText": { "defaultValue": null, "description": "Success text", "name": "successText", "required": false, "type": { "name": "string" } }, "loading": { "defaultValue": null, "description": "loading boolean which switches the text to a loader", "name": "loading", "required": false, "type": { "name": "boolean" } }, "loaderClassName": { "defaultValue": null, "description": "className which is applied to loader container *", "name": "loaderClassName", "required": false, "type": { "name": "string" } }, "style": { "defaultValue": null, "description": "", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "active": { "defaultValue": null, "description": "displays the active state", "name": "active", "required": false, "type": { "name": "boolean" } }, "id": { "defaultValue": null, "description": "id to pass to the button", "name": "id", "required": false, "type": { "name": "string" } }, "marginRight": { "defaultValue": null, "description": "adds 8px margin to the right", "name": "marginRight", "required": false, "type": { "name": "boolean" } }, "marginLeft": { "defaultValue": { "value": "false" }, "description": "adds 8px margin to the left", "name": "marginLeft", "required": false, "type": { "name": "boolean" } }, "aria-labelledby": { "defaultValue": null, "description": "element id to describe the button accordingly", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "aria label to provide important when providing only Icon", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-haspopup": { "defaultValue": null, "description": "aria for a button popup", "name": "aria-haspopup", "required": false, "type": { "name": "React.HTMLProps" } }, "aria-expanded": { "defaultValue": null, "description": "aria to be set if the popup is open", "name": "aria-expanded", "required": false, "type": { "name": "boolean" } }, "aria-controls": { "defaultValue": null, "description": "aria controls - receives id for the controlled region", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-hidden": { "defaultValue": null, "description": "aria to be used for screen reader to know if the button is hidden", "name": "aria-hidden", "required": false, "type": { "name": "Booleanish" } }, "aria-pressed": { "defaultValue": null, "description": "Indicates the current \"pressed\" state of toggle buttons", "name": "aria-pressed", "required": false, "type": { "name": "boolean | \"true\" | \"false\" | \"mixed\"" } }, "onFocus": { "defaultValue": null, "description": "On Button Focus callback", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onBlur": { "defaultValue": null, "description": "On Button Blur callback", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "rightFlat": { "defaultValue": null, "description": "", "name": "rightFlat", "required": false, "type": { "name": "boolean" } }, "leftFlat": { "defaultValue": null, "description": "", "name": "leftFlat", "required": false, "type": { "name": "boolean" } }, "preventClickAnimation": { "defaultValue": null, "description": "", "name": "preventClickAnimation", "required": false, "type": { "name": "boolean" } }, "noSidePadding": { "defaultValue": null, "description": "", "name": "noSidePadding", "required": false, "type": { "name": "boolean" } }, "defaultTextColorOnPrimaryColor": { "defaultValue": null, "description": "default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)", "name": "defaultTextColorOnPrimaryColor", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "insetFocus": { "defaultValue": null, "description": "Change the focus indicator from around the button to within it", "name": "insetFocus", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": null, "description": "Specifies the tab order of an element", "name": "tabIndex", "required": false, "type": { "name": "number" } } }, "import": "import { AlertBannerButton } from \"@vibe/core\"", "parentComponent": "AlertBanner", "subComponents": [] }, { "filePath": "src/components/AlertBanner/AlertBannerLink/AlertBannerLink.tsx", "aggregator": "core", "symbols": [ "default as AlertBannerLink", "type AlertBannerLinkProps" ], "displayName": "AlertBannerLink", "description": "", "props": { "marginLeft": { "defaultValue": { "value": "false" }, "description": "If true, a left margin is applied to the link.", "name": "marginLeft", "required": false, "type": { "name": "boolean" } }, "textClassName": { "defaultValue": null, "description": "Class name applied to the link text.", "name": "textClassName", "required": false, "type": { "name": "string" } }, "href": { "defaultValue": null, "description": "The URL the link points to.", "name": "href", "required": false, "type": { "name": "string" } }, "text": { "defaultValue": null, "description": "The text content of the link.", "name": "text", "required": false, "type": { "name": "string" } }, "rel": { "defaultValue": null, "description": "Specifies the relationship between the current document and the linked resource.", "name": "rel", "required": false, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the link is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "target": { "defaultValue": null, "description": "Specifies where to open the linked document.", "name": "target", "required": false, "type": { "name": "enum", "raw": "LinkTarget", "value": [ { "value": "\"_blank\"" }, { "value": "\"_self\"" }, { "value": "\"_parent\"" }, { "value": "\"_top\"" } ] } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "The ID of the element that describes this link.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element labeling this link.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "icon": { "defaultValue": null, "description": "Icon displayed next to the link text.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "iconPosition": { "defaultValue": null, "description": "The position of the icon relative to the text.", "name": "iconPosition", "required": false, "type": { "name": "enum", "raw": "LinkIconPosition", "value": [ { "value": "\"start\"" }, { "value": "\"end\"" } ] } }, "disableNavigation": { "defaultValue": null, "description": "If true, disables navigation when the link is clicked.", "name": "disableNavigation", "required": false, "type": { "name": "boolean" } }, "inheritFontSize": { "defaultValue": null, "description": "If true, the link inherits the surrounding text's font size.", "name": "inheritFontSize", "required": false, "type": { "name": "boolean" } }, "inlineText": { "defaultValue": null, "description": "If true, the link is styled to fit within inline text content.", "name": "inlineText", "required": false, "type": { "name": "boolean" } }, "color": { "defaultValue": null, "description": "The link's color style", "name": "color", "required": false, "type": { "name": "enum", "raw": "LinkColor", "value": [ { "value": "\"primary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"onInverted\"" } ] } }, "style": { "defaultValue": null, "description": "Inline style object applied to the link element.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { AlertBannerLink } from \"@vibe/core\"", "parentComponent": "AlertBanner", "subComponents": [] }, { "filePath": "src/components/AlertBanner/AlertBannerText/AlertBannerText.tsx", "aggregator": "core", "symbols": [ "default as AlertBannerText", "type AlertBannerTextProps" ], "displayName": "AlertBannerText", "description": "", "props": { "text": { "defaultValue": null, "description": "The text content displayed within the alert banner.", "name": "text", "required": true, "type": { "name": "string" } }, "marginLeft": { "defaultValue": { "value": "false" }, "description": "If true, a left margin is applied to the alert banner text.", "name": "marginLeft", "required": false, "type": { "name": "boolean" } }, "ariaLive": { "defaultValue": null, "description": "The aria-live attribute value for the alert banner text.", "name": "ariaLive", "required": false, "type": { "name": "enum", "raw": "\"polite\" | \"assertive\" | \"off\"", "value": [ { "value": "\"polite\"" }, { "value": "\"assertive\"" }, { "value": "\"off\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { AlertBannerText } from \"@vibe/core\"", "parentComponent": "AlertBanner", "subComponents": [] }, { "filePath": "src/components/AttentionBox/AttentionBox.tsx", "aggregator": "core", "symbols": [ "default as AttentionBox", "AttentionBoxProps", "AttentionBoxType" ], "displayName": "AttentionBox", "description": "", "props": { "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "text": { "defaultValue": null, "description": "The main text content", "name": "text", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "Custom children to override the default text content", "name": "children", "required": false, "type": { "name": "ReactNode" } }, "compact": { "defaultValue": { "value": "false" }, "description": "When true, the attention box will be displayed in compact mode of one-liner", "name": "compact", "required": false, "type": { "name": "boolean" } }, "title": { "defaultValue": null, "description": "The title of the attention box", "name": "title", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { "value": "primary" }, "description": "The variant type of the attention box", "name": "type", "required": false, "type": { "name": "enum", "raw": "AttentionBoxType", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"warning\"" }, { "value": "\"neutral\"" } ] } }, "iconType": { "defaultValue": { "value": "svg" }, "description": "The type of the icon", "name": "iconType", "required": false, "type": { "name": "enum", "raw": "IconType", "value": [ { "value": "\"svg\"" }, { "value": "\"font\"" }, { "value": "\"src\"" } ] } }, "icon": { "defaultValue": null, "description": "The icon to display. Pass `false` to hide the icon entirely, or omit to use the default icon for the type.", "name": "icon", "required": false, "type": { "name": "false | SubIcon" } }, "onClose": { "defaultValue": null, "description": "Callback when the close button is clicked", "name": "onClose", "required": false, "type": { "name": "(event: MouseEvent) => void" } }, "closeButtonAriaLabel": { "defaultValue": null, "description": "Custom aria label for the close button", "name": "closeButtonAriaLabel", "required": false, "type": { "name": "string" } }, "animate": { "defaultValue": { "value": "true" }, "description": "Whether to animate the entrance", "name": "animate", "required": false, "type": { "name": "boolean" } }, "action": { "defaultValue": null, "description": "Action button configuration", "name": "action", "required": false, "type": { "name": "AttentionBoxButtonProps" } }, "link": { "defaultValue": null, "description": "Link configuration", "name": "link", "required": false, "type": { "name": "Omit" } } }, "import": "import { AttentionBox } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Avatar/Avatar.tsx", "aggregator": "core", "symbols": [ "default as Avatar", "type AvatarProps", "AvatarType", "AvatarSize" ], "displayName": "Avatar", "description": "", "props": { "src": { "defaultValue": null, "description": "The image source for the avatar.", "name": "src", "required": false, "type": { "name": "string" } }, "text": { "defaultValue": null, "description": "The text displayed inside the avatar.", "name": "text", "required": false, "type": { "name": "string" } }, "tooltipProps": { "defaultValue": null, "description": "Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label of the avatar.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "withoutTooltip": { "defaultValue": { "value": "false" }, "description": "If true, the tooltip is disabled.", "name": "withoutTooltip", "required": false, "type": { "name": "boolean" } }, "icon": { "defaultValue": null, "description": "The icon displayed inside the avatar.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "type": { "defaultValue": { "value": "text" }, "description": "The type of the avatar.", "name": "type", "required": false, "type": { "name": "enum", "raw": "AvatarType", "value": [ { "value": "\"img\"" }, { "value": "\"icon\"" }, { "value": "\"text\"" } ] } }, "textClassName": { "defaultValue": { "value": "" }, "description": "Class name applied to the text inside the avatar.", "name": "textClassName", "required": false, "type": { "name": "string" } }, "avatarContentWrapperClassName": { "defaultValue": null, "description": "Class name applied to the avatar content wrapper.", "name": "avatarContentWrapperClassName", "required": false, "type": { "name": "string" } }, "backgroundColor": { "defaultValue": { "value": "chili-blue" }, "description": "The background color of the avatar.", "name": "backgroundColor", "required": false, "type": { "name": "enum", "raw": "ElementAllowedColor", "value": [ { "value": "\"grass_green\"" }, { "value": "\"done-green\"" }, { "value": "\"bright-green\"" }, { "value": "\"saladish\"" }, { "value": "\"egg_yolk\"" }, { "value": "\"working_orange\"" }, { "value": "\"dark-orange\"" }, { "value": "\"peach\"" }, { "value": "\"sunset\"" }, { "value": "\"stuck-red\"" }, { "value": "\"dark-red\"" }, { "value": "\"sofia_pink\"" }, { "value": "\"lipstick\"" }, { "value": "\"bubble\"" }, { "value": "\"purple\"" }, { "value": "\"dark_purple\"" }, { "value": "\"berry\"" }, { "value": "\"dark_indigo\"" }, { "value": "\"indigo\"" }, { "value": "\"navy\"" }, { "value": "\"bright-blue\"" }, { "value": "\"dark-blue\"" }, { "value": "\"aquamarine\"" }, { "value": "\"chili-blue\"" }, { "value": "\"river\"" }, { "value": "\"winter\"" }, { "value": "\"explosive\"" }, { "value": "\"american_gray\"" }, { "value": "\"blackish\"" }, { "value": "\"brown\"" }, { "value": "\"orchid\"" }, { "value": "\"tan\"" }, { "value": "\"sky\"" }, { "value": "\"coffee\"" }, { "value": "\"royal\"" }, { "value": "\"teal\"" }, { "value": "\"lavender\"" }, { "value": "\"steel\"" }, { "value": "\"lilac\"" }, { "value": "\"pecan\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"primary\"" }, { "value": "\"warning\"" }, { "value": "\"neutral\"" } ] } }, "customBackgroundColor": { "defaultValue": { "value": "null" }, "description": "A custom background color.", "name": "customBackgroundColor", "required": false, "type": { "name": "string" } }, "role": { "defaultValue": null, "description": "The ARIA role of the avatar.", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "size": { "defaultValue": { "value": "large" }, "description": "The size of the avatar.", "name": "size", "required": false, "type": { "name": "enum", "raw": "AvatarSize", "value": [ { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "customSize": { "defaultValue": { "value": "null" }, "description": "A custom size in pixels.", "name": "customSize", "required": false, "type": { "name": "number" } }, "tabIndex": { "defaultValue": null, "description": "The tab index of the avatar.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "aria-hidden": { "defaultValue": null, "description": "If true, the avatar is hidden from assistive technologies.", "name": "aria-hidden", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": null, "description": "If true, the avatar is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "square": { "defaultValue": null, "description": "If true, renders the avatar as a square instead of a circle.", "name": "square", "required": false, "type": { "name": "boolean" } }, "topLeftBadgeProps": { "defaultValue": null, "description": "Props for the top-left badge.", "name": "topLeftBadgeProps", "required": false, "type": { "name": "AvatarBadgeProps" } }, "topRightBadgeProps": { "defaultValue": null, "description": "Props for the top-right badge.", "name": "topRightBadgeProps", "required": false, "type": { "name": "AvatarBadgeProps" } }, "bottomLeftBadgeProps": { "defaultValue": null, "description": "Props for the bottom-left badge.", "name": "bottomLeftBadgeProps", "required": false, "type": { "name": "AvatarBadgeProps" } }, "bottomRightBadgeProps": { "defaultValue": null, "description": "Props for the bottom-right badge.", "name": "bottomRightBadgeProps", "required": false, "type": { "name": "AvatarBadgeProps" } }, "withoutBorder": { "defaultValue": { "value": "false" }, "description": "If true, removes the avatar's border.", "name": "withoutBorder", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the avatar is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any, avatarId: string) => void" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Avatar } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Badge/Badge.tsx", "aggregator": "core", "symbols": [ "default as Badge", "type BadgeProps", "BadgeType", "BadgeAnchor", "BadgeAlignments" ], "displayName": "Badge", "description": "", "props": { "anchor": { "defaultValue": { "value": "top-end" }, "description": "The position of the badge relative to its parent.", "name": "anchor", "required": false, "type": { "name": "enum", "raw": "BadgeAnchor", "value": [ { "value": "\"top-start\"" }, { "value": "\"top-end\"" }, { "value": "\"bottom-start\"" }, { "value": "\"bottom-end\"" } ] } }, "alignment": { "defaultValue": { "value": "rectangular" }, "description": "The alignment style of the badge.", "name": "alignment", "required": false, "type": { "name": "enum", "raw": "BadgeAlignments", "value": [ { "value": "\"rectangular\"" }, { "value": "\"outside\"" }, { "value": "\"circular\"" } ] } }, "children": { "defaultValue": null, "description": "The content the badge is attached to.", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { "value": "indicator" }, "description": "The type of badge, set to `\"counter\"` for numeric values.\nThe type of badge, set to `\"indicator\"` for a simple dot.", "name": "type", "required": false, "type": { "name": "enum", "raw": "\"indicator\" | \"counter\"", "value": [ { "value": "\"indicator\"" }, { "value": "\"counter\"" } ] } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element describing the counter.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "counterClassName": { "defaultValue": null, "description": "Class name applied to the counter element.", "name": "counterClassName", "required": false, "type": { "name": "string" } }, "count": { "defaultValue": null, "description": "The numeric value displayed in the counter.", "name": "count", "required": false, "type": { "name": "number" } }, "aria-label": { "defaultValue": null, "description": "The label of the counter for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The size of the counter.", "name": "size", "required": false, "type": { "name": "enum", "raw": "CounterSize", "value": [ { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"large\"" } ] } }, "kind": { "defaultValue": null, "description": "The visual style of the counter.", "name": "kind", "required": false, "type": { "name": "enum", "raw": "CounterType", "value": [ { "value": "\"fill\"" }, { "value": "\"line\"" } ] } }, "color": { "defaultValue": null, "description": "The color of the counter.\nThe color of the indicator.", "name": "color", "required": false, "type": { "name": "enum", "raw": "\"primary\" | \"dark\" | \"negative\" | \"light\" | \"notification\"", "value": [ { "value": "\"primary\"" }, { "value": "\"dark\"" }, { "value": "\"negative\"" }, { "value": "\"light\"" }, { "value": "\"notification\"" } ] } }, "maxDigits": { "defaultValue": null, "description": "The maximum number of digits displayed before truncation.", "name": "maxDigits", "required": false, "type": { "name": "number" } }, "prefix": { "defaultValue": null, "description": "Text prepended to the counter value.", "name": "prefix", "required": false, "type": { "name": "string" } }, "onMouseDown": { "defaultValue": null, "description": "Callback fired when the counter is clicked.", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "noAnimation": { "defaultValue": null, "description": "If true, disables counter animations.", "name": "noAnimation", "required": false, "type": { "name": "boolean" } } }, "import": "import { Badge } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/BreadcrumbsBar/BreadcrumbsBar.tsx", "aggregator": "core", "symbols": [ "default as BreadcrumbsBar", "type BreadcrumbBarProps" ], "displayName": "BreadcrumbsBar", "description": "", "props": { "type": { "defaultValue": { "value": "indication" }, "description": "The type of the breadcrumb bar, determining if it is navigational or for indication only.", "name": "type", "required": false, "type": { "name": "enum", "raw": "BreadcrumbsBarType", "value": [ { "value": "\"navigation\"" }, { "value": "\"indication\"" } ] } }, "children": { "defaultValue": null, "description": "The breadcrumb items displayed in the bar.", "name": "children", "required": true, "type": { "name": "ReactElement> | ReactElement<...>[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { BreadcrumbsBar } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/BreadcrumbsBar/BreadcrumbMenu/BreadcrumbMenu.tsx", "aggregator": "core", "symbols": [ "default as BreadcrumbMenu", "type BreadcrumbMenuProps" ], "displayName": "BreadcrumbMenu", "description": "", "props": { "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { BreadcrumbMenu } from \"@vibe/core\"", "parentComponent": "BreadcrumbsBar", "subComponents": [] }, { "filePath": "src/Button/Button.tsx", "aggregator": "core", "symbols": [ "default as Button", "type ButtonProps", "ButtonType", "ButtonInputType", "ButtonColor", "ButtonSize" ], "displayName": "Button", "description": "", "props": { "className": { "defaultValue": null, "description": "Custom class names to pass to the component", "name": "className", "required": false, "type": { "name": "string" } }, "activeButtonClassName": { "defaultValue": null, "description": "", "name": "activeButtonClassName", "required": false, "type": { "name": "string" } }, "kind": { "defaultValue": { "value": "primary" }, "description": "The button's kind", "name": "kind", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "onClick": { "defaultValue": null, "description": "Callback function to run when the button is clicked", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "blurOnMouseUp": { "defaultValue": { "value": "true" }, "description": "Blur on button click", "name": "blurOnMouseUp", "required": false, "type": { "name": "boolean" } }, "name": { "defaultValue": null, "description": "Name of the button - for form submit usages", "name": "name", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The button's size", "name": "size", "required": false, "type": { "name": "enum", "raw": "ButtonSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "color": { "defaultValue": { "value": "primary" }, "description": "The button's color", "name": "color", "required": false, "type": { "name": "enum", "raw": "ButtonColor", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"inverted\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" }, { "value": "\"brand\"" }, { "value": "\"fixed-light\"" }, { "value": "\"fixed-dark\"" } ] } }, "type": { "defaultValue": { "value": "button" }, "description": "The button's type", "name": "type", "required": false, "type": { "name": "enum", "raw": "ButtonInputType", "value": [ { "value": "\"button\"" }, { "value": "\"submit\"" }, { "value": "\"reset\"" } ] } }, "disabled": { "defaultValue": { "value": "false" }, "description": "Whether the button should be disabled or not", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "rightIcon": { "defaultValue": { "value": "null" }, "description": "Icon to place on the right", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "leftIcon": { "defaultValue": { "value": "null" }, "description": "Icon to place on the left", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "success": { "defaultValue": { "value": "false" }, "description": "the success props are used when you have async action and wants to display a success message", "name": "success", "required": false, "type": { "name": "boolean" } }, "successIcon": { "defaultValue": { "value": "null" }, "description": "Success icon name", "name": "successIcon", "required": false, "type": { "name": "SubIcon" } }, "successText": { "defaultValue": { "value": "" }, "description": "Success text", "name": "successText", "required": false, "type": { "name": "string" } }, "loading": { "defaultValue": null, "description": "loading boolean which switches the text to a loader", "name": "loading", "required": false, "type": { "name": "boolean" } }, "loaderClassName": { "defaultValue": null, "description": "className which is applied to loader container *", "name": "loaderClassName", "required": false, "type": { "name": "string" } }, "style": { "defaultValue": null, "description": "", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "active": { "defaultValue": { "value": "false" }, "description": "displays the active state", "name": "active", "required": false, "type": { "name": "boolean" } }, "id": { "defaultValue": null, "description": "id to pass to the button", "name": "id", "required": false, "type": { "name": "string" } }, "marginRight": { "defaultValue": { "value": "false" }, "description": "adds 8px margin to the right", "name": "marginRight", "required": false, "type": { "name": "boolean" } }, "marginLeft": { "defaultValue": { "value": "false" }, "description": "adds 8px margin to the left", "name": "marginLeft", "required": false, "type": { "name": "boolean" } }, "aria-labelledby": { "defaultValue": null, "description": "element id to describe the button accordingly", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "aria label to provide important when providing only Icon", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-haspopup": { "defaultValue": null, "description": "aria for a button popup", "name": "aria-haspopup", "required": false, "type": { "name": "React.HTMLProps" } }, "aria-expanded": { "defaultValue": null, "description": "aria to be set if the popup is open", "name": "aria-expanded", "required": false, "type": { "name": "boolean" } }, "aria-controls": { "defaultValue": null, "description": "aria controls - receives id for the controlled region", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-hidden": { "defaultValue": null, "description": "aria to be used for screen reader to know if the button is hidden", "name": "aria-hidden", "required": false, "type": { "name": "Booleanish" } }, "aria-pressed": { "defaultValue": null, "description": "Indicates the current \"pressed\" state of toggle buttons", "name": "aria-pressed", "required": false, "type": { "name": "boolean | \"true\" | \"false\" | \"mixed\"" } }, "onFocus": { "defaultValue": null, "description": "On Button Focus callback", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onBlur": { "defaultValue": null, "description": "On Button Blur callback", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "rightFlat": { "defaultValue": { "value": "false" }, "description": "", "name": "rightFlat", "required": false, "type": { "name": "boolean" } }, "leftFlat": { "defaultValue": { "value": "false" }, "description": "", "name": "leftFlat", "required": false, "type": { "name": "boolean" } }, "preventClickAnimation": { "defaultValue": { "value": "false" }, "description": "", "name": "preventClickAnimation", "required": false, "type": { "name": "boolean" } }, "noSidePadding": { "defaultValue": { "value": "false" }, "description": "", "name": "noSidePadding", "required": false, "type": { "name": "boolean" } }, "defaultTextColorOnPrimaryColor": { "defaultValue": { "value": "rgba(0, 0, 0, 0)" }, "description": "default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)", "name": "defaultTextColorOnPrimaryColor", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "insetFocus": { "defaultValue": { "value": "false" }, "description": "Change the focus indicator from around the button to within it", "name": "insetFocus", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": null, "description": "Specifies the tab order of an element", "name": "tabIndex", "required": false, "type": { "name": "number" } } }, "import": "import { Button } from \"@vibe/button\"", "subComponents": [] }, { "filePath": "src/components/ButtonGroup/ButtonGroup.tsx", "aggregator": "core", "symbols": [ "default as ButtonGroup", "type ButtonGroupProps" ], "displayName": "ButtonGroup", "description": "", "props": { "options": { "defaultValue": null, "description": "The list of button options.", "name": "options", "required": true, "type": { "name": "ButtonGroupOption[]" } }, "value": { "defaultValue": { "value": "" }, "description": "The currently selected button value.", "name": "value", "required": false, "type": { "name": "ButtonValue" } }, "onSelect": { "defaultValue": null, "description": "Callback fired when a button is selected.", "name": "onSelect", "required": false, "type": { "name": "(value: ButtonValue, name: string) => void" } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the buttons.", "name": "size", "required": false, "type": { "name": "enum", "raw": "ButtonSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "kind": { "defaultValue": { "value": "secondary" }, "description": "The style variant of the buttons.", "name": "kind", "required": false, "type": { "name": "enum", "raw": "\"secondary\" | \"tertiary\"", "value": [ { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "name": { "defaultValue": { "value": "" }, "description": "The name of the button group.", "name": "name", "required": false, "type": { "name": "string" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, disables all buttons in the group.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "groupAriaLabel": { "defaultValue": { "value": "" }, "description": "The label of the button group for accessibility.", "name": "groupAriaLabel", "required": false, "type": { "name": "string" } }, "tooltipPosition": { "defaultValue": null, "description": "The position of the tooltip relative to the button.", "name": "tooltipPosition", "required": false, "type": { "name": "enum", "raw": "TooltipPositions", "value": [ { "value": "\"top\"" }, { "value": "\"right\"" }, { "value": "\"bottom\"" }, { "value": "\"left\"" } ] } }, "tooltipHideDelay": { "defaultValue": null, "description": "The delay in milliseconds before the tooltip hides.", "name": "tooltipHideDelay", "required": false, "type": { "name": "number" } }, "tooltipShowDelay": { "defaultValue": null, "description": "The delay in milliseconds before the tooltip shows.", "name": "tooltipShowDelay", "required": false, "type": { "name": "number" } }, "tooltipContainerSelector": { "defaultValue": null, "description": "CSS selector for the tooltip container.", "name": "tooltipContainerSelector", "required": false, "type": { "name": "string" } }, "tooltipMoveBy": { "defaultValue": null, "description": "Adjusts the tooltip position.", "name": "tooltipMoveBy", "required": false, "type": { "name": "MoveBy" } }, "children": { "defaultValue": null, "description": "The content inside the button group.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "fullWidth": { "defaultValue": { "value": "false" }, "description": "If true, makes the button group take the full width of its container.", "name": "fullWidth", "required": false, "type": { "name": "boolean" } }, "blurOnMouseUp": { "defaultValue": { "value": "true" }, "description": "If true, removes focus from the button after clicking.", "name": "blurOnMouseUp", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ButtonGroup } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Checkbox/Checkbox.tsx", "aggregator": "core", "symbols": [ "default as Checkbox", "type CheckBoxProps as CheckboxProps" ], "displayName": "Checkbox", "description": "", "props": { "checkboxClassName": { "defaultValue": null, "description": "Class name applied to the checkbox element.", "name": "checkboxClassName", "required": false, "type": { "name": "string" } }, "labelClassName": { "defaultValue": null, "description": "Class name applied to the label element.", "name": "labelClassName", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The label of the checkbox for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "label": { "defaultValue": null, "description": "The content displayed next to the checkbox.", "name": "label", "required": false, "type": { "name": "any" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of an element describing the checkbox.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the checkbox value changes.", "name": "onChange", "required": false, "type": { "name": "(event: React.ChangeEvent) => void" } }, "checked": { "defaultValue": null, "description": "If true, controls the checked state of the checkbox.", "name": "checked", "required": false, "type": { "name": "boolean" } }, "indeterminate": { "defaultValue": { "value": "false" }, "description": "If true, displays an indeterminate state.", "name": "indeterminate", "required": false, "type": { "name": "boolean" } }, "autoFocus": { "defaultValue": null, "description": "If true, the checkbox automatically receives focus.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the checkbox is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "defaultChecked": { "defaultValue": null, "description": "The initial checked state of the checkbox.", "name": "defaultChecked", "required": false, "type": { "name": "boolean" } }, "value": { "defaultValue": { "value": "" }, "description": "The value submitted with the form when checked.", "name": "value", "required": false, "type": { "name": "string" } }, "name": { "defaultValue": { "value": "" }, "description": "The name of the checkbox, used for form submission.", "name": "name", "required": false, "type": { "name": "string" } }, "tabIndex": { "defaultValue": null, "description": "The tab order of the checkbox.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "separateLabel": { "defaultValue": { "value": "false" }, "description": "If true, uses separate labels with htmlFor/id association instead of wrapping the input.\nIf using this the id prop is required for it to function correctly.", "name": "separateLabel", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Checkbox } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Chips/Chips.tsx", "aggregator": "core", "symbols": [ "default as Chips", "type ChipsProps" ], "displayName": "Chips", "description": "", "props": { "label": { "defaultValue": { "value": "" }, "description": "The text or content displayed inside the chip.", "name": "label", "required": false, "type": { "name": "ElementContent" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the chip is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "readOnly": { "defaultValue": { "value": "false" }, "description": "If true, the chip is read-only and cannot be deleted.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "rightRenderer": { "defaultValue": null, "description": "A React element displayed on the right side.", "name": "rightRenderer", "required": false, "type": { "name": "ElementContent" } }, "leftRenderer": { "defaultValue": null, "description": "A React element displayed on the left side.", "name": "leftRenderer", "required": false, "type": { "name": "ElementContent" } }, "rightIcon": { "defaultValue": { "value": "null" }, "description": "Icon displayed on the right side.", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "leftIcon": { "defaultValue": { "value": "null" }, "description": "Icon displayed on the left side.", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "rightAvatar": { "defaultValue": { "value": "null" }, "description": "Image URL or text for an avatar displayed on the right.", "name": "rightAvatar", "required": false, "type": { "name": "string" } }, "rightAvatarType": { "defaultValue": { "value": "img" }, "description": "The type of avatar displayed on the right.", "name": "rightAvatarType", "required": false, "type": { "name": "enum", "raw": "AvatarType", "value": [ { "value": "\"img\"" }, { "value": "\"icon\"" }, { "value": "\"text\"" } ] } }, "leftAvatar": { "defaultValue": { "value": "null" }, "description": "Image URL or text for an avatar displayed on the left.", "name": "leftAvatar", "required": false, "type": { "name": "string" } }, "leftAvatarType": { "defaultValue": { "value": "img" }, "description": "The type of avatar displayed on the left.", "name": "leftAvatarType", "required": false, "type": { "name": "enum", "raw": "AvatarType", "value": [ { "value": "\"img\"" }, { "value": "\"icon\"" }, { "value": "\"text\"" } ] } }, "iconClassName": { "defaultValue": null, "description": "Class name applied to left or right icons.", "name": "iconClassName", "required": false, "type": { "name": "string" } }, "avatarClassName": { "defaultValue": null, "description": "Class name applied to left or right avatars.", "name": "avatarClassName", "required": false, "type": { "name": "string" } }, "color": { "defaultValue": { "value": "primary" }, "description": "The background color of the chip.", "name": "color", "required": false, "type": { "name": "enum", "raw": "\"grass_green\" | \"done-green\" | \"bright-green\" | \"saladish\" | \"egg_yolk\" | \"working_orange\" | \"dark-orange\" | \"peach\" | \"sunset\" | \"stuck-red\" | \"dark-red\" | \"sofia_pink\" | \"lipstick\" | ... 29 more ... | \"neutral\"", "value": [ { "value": "\"grass_green\"" }, { "value": "\"done-green\"" }, { "value": "\"bright-green\"" }, { "value": "\"saladish\"" }, { "value": "\"egg_yolk\"" }, { "value": "\"working_orange\"" }, { "value": "\"dark-orange\"" }, { "value": "\"peach\"" }, { "value": "\"sunset\"" }, { "value": "\"stuck-red\"" }, { "value": "\"dark-red\"" }, { "value": "\"sofia_pink\"" }, { "value": "\"lipstick\"" }, { "value": "\"bubble\"" }, { "value": "\"purple\"" }, { "value": "\"dark_purple\"" }, { "value": "\"berry\"" }, { "value": "\"indigo\"" }, { "value": "\"navy\"" }, { "value": "\"bright-blue\"" }, { "value": "\"dark-blue\"" }, { "value": "\"aquamarine\"" }, { "value": "\"chili-blue\"" }, { "value": "\"river\"" }, { "value": "\"winter\"" }, { "value": "\"explosive\"" }, { "value": "\"american_gray\"" }, { "value": "\"brown\"" }, { "value": "\"orchid\"" }, { "value": "\"tan\"" }, { "value": "\"sky\"" }, { "value": "\"coffee\"" }, { "value": "\"royal\"" }, { "value": "\"teal\"" }, { "value": "\"lavender\"" }, { "value": "\"steel\"" }, { "value": "\"lilac\"" }, { "value": "\"pecan\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"primary\"" }, { "value": "\"warning\"" }, { "value": "\"neutral\"" } ] } }, "iconSize": { "defaultValue": { "value": "18" }, "description": "The size of the icons inside the chip.", "name": "iconSize", "required": false, "type": { "name": "string | number" } }, "onDelete": { "defaultValue": { "value": "(_id: string, _e: React.MouseEvent) => {}" }, "description": "Callback fired when the chip is deleted.", "name": "onDelete", "required": false, "type": { "name": "(id: string, event: React.MouseEvent) => void" } }, "noAnimation": { "defaultValue": { "value": "true" }, "description": "If true, disables the chip's entry animation.", "name": "noAnimation", "required": false, "type": { "name": "boolean" } }, "allowTextSelection": { "defaultValue": { "value": "false" }, "description": "If true, allows the user to select text inside the chip.", "name": "allowTextSelection", "required": false, "type": { "name": "boolean" } }, "onMouseDown": { "defaultValue": null, "description": "Callback fired when the mouse button is pressed on the chip.", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the chip is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "aria-label": { "defaultValue": null, "description": "The label of the chip for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-haspopup": { "defaultValue": null, "description": "If true, indicates that the chip has a popup.", "name": "aria-haspopup", "required": false, "type": { "name": "boolean" } }, "showBorder": { "defaultValue": { "value": "false" }, "description": "If true, displays a border around the chip.", "name": "showBorder", "required": false, "type": { "name": "boolean" } }, "closeButtonAriaLabel": { "defaultValue": { "value": "Remove" }, "description": "The label for the close button.", "name": "closeButtonAriaLabel", "required": false, "type": { "name": "string" } }, "noMargin": { "defaultValue": { "value": "false" }, "description": "If true, removes the default margin from the chip.", "name": "noMargin", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Chips } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Clickable/Clickable.tsx", "aggregator": "core", "symbols": [ "default as Clickable", "type ClickableProps" ], "displayName": "Clickable", "description": "", "props": { "elementType": { "defaultValue": { "value": "div" }, "description": "The HTML element or custom component used as the root.", "name": "elementType", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The content inside the clickable element.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "role": { "defaultValue": { "value": "button" }, "description": "The ARIA role of the element.", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the element is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any) => void" } }, "enableTextSelection": { "defaultValue": { "value": "false" }, "description": "If true, allows text selection inside the element.", "name": "enableTextSelection", "required": false, "type": { "name": "boolean" } }, "onMouseDown": { "defaultValue": null, "description": "Callback fired when the mouse button is pressed down on the element.", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseEnter": { "defaultValue": null, "description": "Callback fired when the mouse enters the element.", "name": "onMouseEnter", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseLeave": { "defaultValue": null, "description": "Callback fired when the mouse leaves the element.", "name": "onMouseLeave", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "aria-label": { "defaultValue": null, "description": "The label of the element for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-hidden": { "defaultValue": null, "description": "If true, hides the element from assistive technologies.", "name": "aria-hidden", "required": false, "type": { "name": "boolean" } }, "aria-haspopup": { "defaultValue": null, "description": "Indicates the presence of a popup associated with the element.", "name": "aria-haspopup", "required": false, "type": { "name": "boolean" } }, "aria-expanded": { "defaultValue": null, "description": "If true, indicates that the associated popup is open.", "name": "aria-expanded", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": { "value": "0" }, "description": "The tab order of the element.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the element is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "style": { "defaultValue": null, "description": "Inline styles applied to the element.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "className": { "defaultValue": { "value": "" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Clickable } from \"@vibe/clickable\"", "subComponents": [ "ClickableWrapper" ] }, { "filePath": "src/Clickable/ClickableWrapper.tsx", "aggregator": "core", "symbols": [ "default as ClickableWrapper", "type ClickableWrapperProps" ], "displayName": "ClickableWrapper", "description": "", "props": { "children": { "defaultValue": null, "description": "The content inside the wrapper.", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "isClickable": { "defaultValue": { "value": "true" }, "description": "If true, wraps the content in a `Clickable` component.", "name": "isClickable", "required": false, "type": { "name": "boolean" } }, "clickableProps": { "defaultValue": { "value": "{}" }, "description": "Props passed to the `Clickable` component.", "name": "clickableProps", "required": false, "type": { "name": "ClickableProps" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ClickableWrapper } from \"@vibe/clickable\"", "subComponents": [] }, { "filePath": "src/useClickableProps/useClickableProps.ts", "aggregator": "core", "symbols": [ "default as useClickableProps" ], "displayName": "useClickableProps", "description": "Return props for adding clickable functionality to the element except for the styles and classNames", "props": {}, "import": "import { useClickableProps } from \"@vibe/clickable\"", "subComponents": [] }, { "filePath": "src/components/ColorPicker/ColorPicker.tsx", "aggregator": "core", "symbols": [ "default as ColorPicker", "type ColorPickerProps", "ColorShapes", "ColorPickerSizes", "ColorPickerValueOnly", "ColorPickerArrayValueOnly", "ColorPickerValue" ], "displayName": "ColorPicker", "description": "", "props": { "value": { "defaultValue": { "value": "" }, "description": "The selected color(s).", "name": "value", "required": false, "type": { "name": "ColorPickerValue" } }, "onSave": { "defaultValue": null, "description": "Callback fired when the selected color(s) change.", "name": "onSave", "required": false, "type": { "name": "(value: ColorPickerArrayValueOnly) => void" } }, "ColorIndicatorIcon": { "defaultValue": null, "description": "Icon displayed as an indicator inside the color.", "name": "ColorIndicatorIcon", "required": false, "type": { "name": "SubIcon" } }, "SelectedIndicatorIcon": { "defaultValue": null, "description": "Icon displayed when a color is selected.", "name": "SelectedIndicatorIcon", "required": false, "type": { "name": "SubIcon" } }, "NoColorIcon": { "defaultValue": null, "description": "Icon used for clearing the color selection.", "name": "NoColorIcon", "required": false, "type": { "name": "SubIcon" } }, "colorStyle": { "defaultValue": { "value": "regular" }, "description": "The style applied to the colors.", "name": "colorStyle", "required": false, "type": { "name": "enum", "raw": "ColorStyle", "value": [ { "value": "\"regular\"" }, { "value": "\"hover\"" }, { "value": "\"selected\"" } ] } }, "noColorText": { "defaultValue": null, "description": "Text displayed for the \"no color\" option.", "name": "noColorText", "required": false, "type": { "name": "string" } }, "shouldRenderIndicatorWithoutBackground": { "defaultValue": null, "description": "If true, renders the color indicator without a background.", "name": "shouldRenderIndicatorWithoutBackground", "required": false, "type": { "name": "boolean" } }, "isBlackListMode": { "defaultValue": { "value": "true" }, "description": "If true, treats the color list as a blacklist rather than a whitelist.", "name": "isBlackListMode", "required": false, "type": { "name": "boolean" } }, "colorsList": { "defaultValue": { "value": "[]" }, "description": "The list of colors available for selection.", "name": "colorsList", "required": false, "type": { "name": "ColorPickerArrayValueOnly" } }, "isMultiselect": { "defaultValue": null, "description": "If true, allows selecting multiple colors.", "name": "isMultiselect", "required": false, "type": { "name": "boolean" } }, "colorSize": { "defaultValue": { "value": "medium" }, "description": "The size of the color items.", "name": "colorSize", "required": false, "type": { "name": "enum", "raw": "ColorPickerSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "numberOfColorsInLine": { "defaultValue": { "value": "5" }, "description": "The number of colors displayed per row.", "name": "numberOfColorsInLine", "required": false, "type": { "name": "number" } }, "focusOnMount": { "defaultValue": null, "description": "If true, the first color is focused when the component mounts.", "name": "focusOnMount", "required": false, "type": { "name": "boolean" } }, "colorShape": { "defaultValue": { "value": "square" }, "description": "The shape of the color items.", "name": "colorShape", "required": false, "type": { "name": "enum", "raw": "ColorShapes", "value": [ { "value": "\"square\"" }, { "value": "\"circle\"" } ] } }, "forceUseRawColorList": { "defaultValue": null, "description": "Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\nUsually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.", "name": "forceUseRawColorList", "required": false, "type": { "name": "boolean" } }, "showColorNameTooltip": { "defaultValue": null, "description": "Used to enable color name tooltip on each color in the component.\nWhen \"tooltipContentByColor\" is supplied, it will override the color name tooltip.", "name": "showColorNameTooltip", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ColorPicker } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.tsx", "aggregator": "core", "symbols": [ "default as ColorPickerContent", "type ColorPickerContentProps" ], "displayName": "ColorPickerContent", "description": "", "props": { "value": { "defaultValue": null, "description": "The selected color(s).", "name": "value", "required": true, "type": { "name": "ColorPickerValue" } }, "onValueChange": { "defaultValue": null, "description": "Callback fired when the selected color(s) change.", "name": "onValueChange", "required": true, "type": { "name": "(value: ColorPickerArrayValueOnly) => void" } }, "colorsList": { "defaultValue": null, "description": "The list of colors available for selection.", "name": "colorsList", "required": true, "type": { "name": "ColorPickerArrayValueOnly" } }, "ColorIndicatorIcon": { "defaultValue": null, "description": "Icon displayed as an indicator inside the color.", "name": "ColorIndicatorIcon", "required": false, "type": { "name": "SubIcon" } }, "SelectedIndicatorIcon": { "defaultValue": null, "description": "Icon displayed when a color is selected.", "name": "SelectedIndicatorIcon", "required": false, "type": { "name": "SubIcon" } }, "NoColorIcon": { "defaultValue": null, "description": "Icon used for clearing the color selection.", "name": "NoColorIcon", "required": false, "type": { "name": "SubIcon" } }, "colorStyle": { "defaultValue": { "value": "regular" }, "description": "The style applied to the colors.", "name": "colorStyle", "required": false, "type": { "name": "enum", "raw": "ColorStyle", "value": [ { "value": "\"regular\"" }, { "value": "\"hover\"" }, { "value": "\"selected\"" } ] } }, "colorSize": { "defaultValue": { "value": "BaseSizes.MEDIUM" }, "description": "The size of the color items.", "name": "colorSize", "required": false, "type": { "name": "enum", "raw": "ColorPickerSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "colorShape": { "defaultValue": { "value": "square" }, "description": "The shape of the color items.", "name": "colorShape", "required": false, "type": { "name": "enum", "raw": "ColorShapes", "value": [ { "value": "\"square\"" }, { "value": "\"circle\"" } ] } }, "tooltipContentByColor": { "defaultValue": { "value": "{}" }, "description": "Custom tooltip content for specific colors.", "name": "tooltipContentByColor", "required": false, "type": { "name": "Partial>" } }, "noColorText": { "defaultValue": null, "description": "Text displayed for the \"no color\" option.", "name": "noColorText", "required": false, "type": { "name": "string" } }, "shouldRenderIndicatorWithoutBackground": { "defaultValue": null, "description": "If true, renders the color indicator without a background.", "name": "shouldRenderIndicatorWithoutBackground", "required": false, "type": { "name": "boolean" } }, "isBlackListMode": { "defaultValue": { "value": "true" }, "description": "If true, treats the color list as a blacklist rather than a whitelist.", "name": "isBlackListMode", "required": false, "type": { "name": "boolean" } }, "numberOfColorsInLine": { "defaultValue": { "value": "5" }, "description": "The number of colors displayed per row.", "name": "numberOfColorsInLine", "required": false, "type": { "name": "number" } }, "focusOnMount": { "defaultValue": null, "description": "If true, the first color is focused when the component mounts.", "name": "focusOnMount", "required": false, "type": { "name": "boolean" } }, "isMultiselect": { "defaultValue": null, "description": "If true, allows selecting multiple colors.", "name": "isMultiselect", "required": false, "type": { "name": "boolean" } }, "forceUseRawColorList": { "defaultValue": null, "description": "Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.\nUsually, only \"monday colors\" will be rendered (unless blacklist mode is used). This flag will override this behavior.", "name": "forceUseRawColorList", "required": false, "type": { "name": "boolean" } }, "showColorNameTooltip": { "defaultValue": null, "description": "Used to enable color name tooltip on each color in the component.\nWhen \"tooltipContentByColor\" is supplied, it will override the color name tooltip.", "name": "showColorNameTooltip", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ColorPickerContent } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Combobox/Combobox.tsx", "aggregator": "core", "symbols": [ "default as Combobox", "type ComboboxProps", "ComboboxOptionIconType", "ComboboxSizes", "ComboboxCategoryMap", "ComboboxCategory", "ComboboxItem", "ComboboxOption", "ComboboxOptionEvents", "ComboboxOptionItemRendererArgs" ], "displayName": "Combobox", "description": "", "props": { "optionClassName": { "defaultValue": { "value": "" }, "description": "Class name applied to each option item.", "name": "optionClassName", "required": false, "type": { "name": "string" } }, "searchWrapperClassName": { "defaultValue": null, "description": "Class name applied to the search wrapper.", "name": "searchWrapperClassName", "required": false, "type": { "name": "string" } }, "stickyCategoryClassName": { "defaultValue": null, "description": "Class name applied to the sticky category header.", "name": "stickyCategoryClassName", "required": false, "type": { "name": "string" } }, "placeholder": { "defaultValue": { "value": "" }, "description": "Placeholder text displayed in the search input.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "noResultsMessage": { "defaultValue": { "value": "No results found" }, "description": "Message displayed when no results are found.", "name": "noResultsMessage", "required": false, "type": { "name": "string" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the combobox is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "options": { "defaultValue": { "value": "[]" }, "description": "The list of available options.", "name": "options", "required": false, "type": { "name": "IComboboxOption[]" } }, "categories": { "defaultValue": null, "description": "The list of available categories.", "name": "categories", "required": false, "type": { "name": "IComboboxCategoryMap" } }, "withCategoriesDivider": { "defaultValue": { "value": "false" }, "description": "If true, displays a divider between category sections.", "name": "withCategoriesDivider", "required": false, "type": { "name": "boolean" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The size of the combobox.", "name": "size", "required": false, "type": { "name": "enum", "raw": "ComboboxSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "optionLineHeight": { "defaultValue": { "value": "32" }, "description": "The height of each option item.", "name": "optionLineHeight", "required": false, "type": { "name": "number" } }, "optionsListHeight": { "defaultValue": null, "description": "The height of the options list.", "name": "optionsListHeight", "required": false, "type": { "name": "number" } }, "autoFocus": { "defaultValue": { "value": "false" }, "description": "If true, the search input is focused when the component mounts.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "onAddNew": { "defaultValue": null, "description": "Callback fired when the \"Add new\" button is clicked.", "name": "onAddNew", "required": false, "type": { "name": "(value: string) => void" } }, "addNewLabel": { "defaultValue": { "value": "Add new" }, "description": "Label displayed for the \"Add new\" button.", "name": "addNewLabel", "required": false, "type": { "name": "string | ((label: string) => ElementContent)" } }, "filter": { "defaultValue": { "value": "(filterValue: string, options: IComboboxOption[]) =>\n options.filter(\n ({ label }: { label: string }) => !filterValue || label.toLowerCase().includes(filterValue.toLowerCase())\n )" }, "description": "Custom filter function for searching options.", "name": "filter", "required": false, "type": { "name": "(filterValue: string, options: IComboboxOption[]) => IComboboxOption[]" } }, "defaultFilter": { "defaultValue": null, "description": "The default search input", "name": "defaultFilter", "required": false, "type": { "name": "string" } }, "disableFilter": { "defaultValue": { "value": "false" }, "description": "If true, disables filtering.", "name": "disableFilter", "required": false, "type": { "name": "boolean" } }, "filterValue": { "defaultValue": null, "description": "Controlled search input value.", "name": "filterValue", "required": false, "type": { "name": "string" } }, "onFilterChanged": { "defaultValue": null, "description": "Callback fired when the search input value changes.", "name": "onFilterChanged", "required": false, "type": { "name": "(value: string) => void" } }, "loading": { "defaultValue": { "value": "false" }, "description": "If true, displays a loading state.", "name": "loading", "required": false, "type": { "name": "boolean" } }, "onOptionHover": { "defaultValue": null, "description": "Callback fired when an option is hovered.", "name": "onOptionHover", "required": false, "type": { "name": "(event: React.MouseEvent, index: number, option: IComboboxOption) => void" } }, "onOptionLeave": { "defaultValue": null, "description": "Callback fired when the mouse leaves an option.", "name": "onOptionLeave", "required": false, "type": { "name": "() => void" } }, "shouldScrollToSelectedItem": { "defaultValue": { "value": "true" }, "description": "If true, automatically scrolls to the selected option.", "name": "shouldScrollToSelectedItem", "required": false, "type": { "name": "boolean" } }, "noResultsRenderer": { "defaultValue": null, "description": "Custom renderer for when no results are found.", "name": "noResultsRenderer", "required": false, "type": { "name": "() => Element" } }, "stickyCategories": { "defaultValue": { "value": "false" }, "description": "If true, keeps categories visible when scrolling.", "name": "stickyCategories", "required": false, "type": { "name": "boolean" } }, "defaultVisualFocusFirstIndex": { "defaultValue": null, "description": "If true, visually focuses the first item by default.", "name": "defaultVisualFocusFirstIndex", "required": false, "type": { "name": "boolean" } }, "clearFilterOnSelection": { "defaultValue": { "value": "false" }, "description": "If true, clears the search input when an option is selected.", "name": "clearFilterOnSelection", "required": false, "type": { "name": "boolean" } }, "optionRenderer": { "defaultValue": { "value": "null" }, "description": "Custom renderer for options.", "name": "optionRenderer", "required": false, "type": { "name": "(option: IComboboxOption) => Element" } }, "maxOptionsWithoutScroll": { "defaultValue": null, "description": "Maximum number of options displayed before scrolling.", "name": "maxOptionsWithoutScroll", "required": false, "type": { "name": "number" } }, "renderOnlyVisibleOptions": { "defaultValue": { "value": "false" }, "description": "If true, renders only visible options for performance optimization.", "name": "renderOnlyVisibleOptions", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": { "value": "(_optionData: IComboboxOption) => {}" }, "description": "Callback fired when an option is clicked.", "name": "onClick", "required": false, "type": { "name": "(optionData: IComboboxOption) => void" } }, "searchIcon": { "defaultValue": null, "description": "Custom search icon.", "name": "searchIcon", "required": false, "type": { "name": "SubIcon" } }, "searchInputAriaLabel": { "defaultValue": { "value": "Search for content" }, "description": "ARIA label for the search input.", "name": "searchInputAriaLabel", "required": false, "type": { "name": "string" } }, "debounceRate": { "defaultValue": null, "description": "The debounce rate for filtering.", "name": "debounceRate", "required": false, "type": { "name": "number" } }, "searchInputRef": { "defaultValue": null, "description": "Ref for the search input element.", "name": "searchInputRef", "required": false, "type": { "name": "React.RefObject" } }, "renderAction": { "defaultValue": null, "description": "Additional action button inside the search input.", "name": "renderAction", "required": false, "type": { "name": "React.ReactElement" } }, "hideRenderActionOnInput": { "defaultValue": null, "description": "If true, hides the additional action when the user types in the search input.", "name": "hideRenderActionOnInput", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": { "value": "" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": { "value": "" }, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Combobox } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Counter/Counter.tsx", "aggregator": "core", "symbols": [ "default as Counter", "type CounterProps", "CounterType", "CounterColor", "CounterSize" ], "displayName": "Counter", "description": "", "props": { "aria-labelledby": { "defaultValue": null, "description": "The ID of the element describing the counter.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "counterClassName": { "defaultValue": null, "description": "Class name applied to the counter element.", "name": "counterClassName", "required": false, "type": { "name": "string" } }, "count": { "defaultValue": { "value": "0" }, "description": "The numeric value displayed in the counter.", "name": "count", "required": false, "type": { "name": "number" } }, "aria-label": { "defaultValue": null, "description": "The label of the counter for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { "value": "large" }, "description": "The size of the counter.", "name": "size", "required": false, "type": { "name": "enum", "raw": "CounterSize", "value": [ { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"large\"" } ] } }, "kind": { "defaultValue": { "value": "fill" }, "description": "The visual style of the counter.", "name": "kind", "required": false, "type": { "name": "enum", "raw": "CounterType", "value": [ { "value": "\"fill\"" }, { "value": "\"line\"" } ] } }, "color": { "defaultValue": { "value": "primary" }, "description": "The color of the counter.", "name": "color", "required": false, "type": { "name": "enum", "raw": "CounterColor", "value": [ { "value": "\"primary\"" }, { "value": "\"dark\"" }, { "value": "\"negative\"" }, { "value": "\"light\"" } ] } }, "maxDigits": { "defaultValue": { "value": "3" }, "description": "The maximum number of digits displayed before truncation.", "name": "maxDigits", "required": false, "type": { "name": "number" } }, "prefix": { "defaultValue": { "value": "" }, "description": "Text prepended to the counter value.", "name": "prefix", "required": false, "type": { "name": "string" } }, "onMouseDown": { "defaultValue": null, "description": "Callback fired when the counter is clicked.", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "noAnimation": { "defaultValue": { "value": "false" }, "description": "If true, disables counter animations.", "name": "noAnimation", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": { "value": "" }, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Counter } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/DatePicker/DatePicker.tsx", "aggregator": "core", "symbols": [ "default as DatePicker", "DatePickerRange", "DatePickerProps" ], "displayName": "DatePicker", "description": "", "props": { "mode": { "defaultValue": { "value": "single" }, "description": "", "name": "mode", "required": false, "type": { "name": "enum", "raw": "\"single\" | \"range\"", "value": [ { "value": "\"single\"" }, { "value": "\"range\"" } ] } }, "onDateChange": { "defaultValue": null, "description": "", "name": "onDateChange", "required": true, "type": { "name": "((date: Date) => void) | ((range: DatePickerRange) => void)" } }, "date": { "defaultValue": null, "description": "", "name": "date", "required": true, "type": { "name": "Date" } }, "endDate": { "defaultValue": null, "description": "", "name": "endDate", "required": false, "type": { "name": "Date" } }, "firstDayOfWeek": { "defaultValue": { "value": "0" }, "description": "", "name": "firstDayOfWeek", "required": false, "type": { "name": "enum", "raw": "0 | 1 | 2 | 3 | 4 | 5 | 6", "value": [ { "value": "0" }, { "value": "1" }, { "value": "2" }, { "value": "3" }, { "value": "4" }, { "value": "5" }, { "value": "6" } ] } }, "showWeekNumber": { "defaultValue": null, "description": "", "name": "showWeekNumber", "required": false, "type": { "name": "boolean" } }, "isDateDisabled": { "defaultValue": null, "description": "", "name": "isDateDisabled", "required": false, "type": { "name": "(date: Date) => boolean" } }, "locale": { "defaultValue": null, "description": "", "name": "locale", "required": false, "type": { "name": "Locale" } }, "monthSelectionAriaLabel": { "defaultValue": { "value": "Month" }, "description": "", "name": "monthSelectionAriaLabel", "required": false, "type": { "name": "string" } }, "yearSelectionAriaLabel": { "defaultValue": { "value": "Year" }, "description": "", "name": "yearSelectionAriaLabel", "required": false, "type": { "name": "string" } }, "nextButtonAriaLabel": { "defaultValue": { "value": "Next" }, "description": "", "name": "nextButtonAriaLabel", "required": false, "type": { "name": "string" } }, "prevButtonAriaLabel": { "defaultValue": { "value": "Previous" }, "description": "", "name": "prevButtonAriaLabel", "required": false, "type": { "name": "string" } }, "dayClassName": { "defaultValue": null, "description": "", "name": "dayClassName", "required": false, "type": { "name": "string" } }, "selectedDayClassName": { "defaultValue": null, "description": "", "name": "selectedDayClassName", "required": false, "type": { "name": "string" } }, "dropdownsClassName": { "defaultValue": null, "description": "", "name": "dropdownsClassName", "required": false, "type": { "name": "string" } }, "intent": { "defaultValue": { "value": "to" }, "description": "", "name": "intent", "required": false, "type": { "name": "enum", "raw": "Intent", "value": [ { "value": "\"to\"" }, { "value": "\"from\"" } ] } }, "dialogContainerSelector": { "defaultValue": null, "description": "", "name": "dialogContainerSelector", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { DatePicker } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Dialog/Dialog.tsx", "aggregator": "core", "symbols": [ "default as Dialog", "DialogType", "DialogSize", "DialogPosition", "DialogTriggerEvent", "DialogAnimationType", "DialogStartingEdge", "DialogOffset", "DialogEvent", "DialogMiddleware", "DialogPlacement", "DialogProps" ], "displayName": "Dialog", "description": "", "props": { "onBlur": { "defaultValue": null, "description": "Event handler for blur events on the reference element.", "name": "onBlur", "required": false, "type": { "name": "(e: React.FocusEvent) => void" } }, "onKeyDown": { "defaultValue": null, "description": "Event handler for keydown events on the reference element.", "name": "onKeyDown", "required": false, "type": { "name": "(e: React.KeyboardEvent) => void" } }, "onClick": { "defaultValue": null, "description": "Event handler for click events on the reference element.", "name": "onClick", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onFocus": { "defaultValue": null, "description": "Event handler for focus events on the reference element.", "name": "onFocus", "required": false, "type": { "name": "(e: React.FocusEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "Event handler for mousedown events on the reference element.", "name": "onMouseDown", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onMouseEnter": { "defaultValue": null, "description": "Event handler for mouseenter events on the reference element.", "name": "onMouseEnter", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onMouseLeave": { "defaultValue": null, "description": "Event handler for mouseleave events on the reference element.", "name": "onMouseLeave", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onContextMenu": { "defaultValue": null, "description": "Event handler for contextmenu events on the reference element.", "name": "onContextMenu", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "referenceWrapperClassName": { "defaultValue": null, "description": "Class name applied to the reference wrapper element.", "name": "referenceWrapperClassName", "required": false, "type": { "name": "string" } }, "referenceWrapperElement": { "defaultValue": null, "description": "The wrapper element type to use for React components. Defaults to \"span\".", "name": "referenceWrapperElement", "required": false, "type": { "name": "enum", "raw": "\"span\" | \"div\"", "value": [ { "value": "\"span\"" }, { "value": "\"div\"" } ] } }, "position": { "defaultValue": { "value": "top" }, "description": "The placement of the dialog relative to the reference element.", "name": "position", "required": false, "type": { "name": "enum", "raw": "DialogPosition", "value": [ { "value": "\"left\"" }, { "value": "\"left-start\"" }, { "value": "\"left-end\"" }, { "value": "\"right\"" }, { "value": "\"right-start\"" }, { "value": "\"right-end\"" }, { "value": "\"top\"" }, { "value": "\"top-start\"" }, { "value": "\"top-end\"" }, { "value": "\"bottom\"" }, { "value": "\"bottom-start\"" }, { "value": "\"bottom-end\"" } ] } }, "middleware": { "defaultValue": null, "description": "Custom Floating UI middleware for positioning logic.\nIf you provide `offset`, `flip`, or `shift` middleware, the defaults will be skipped.\nOther middleware (like `size`, `inline`, `autoPlacement`) are added to the chain.\n@see https://floating-ui.com/docs/middleware", "name": "middleware", "required": false, "type": { "name": "{ name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; placement: Placement; strategy: Strategy; middlewareData: MiddlewareData; rects: ElementRects; platform: { ...; } & Platform; elements: Elements; }) => Promisable<...>; }[]" } }, "startingEdge": { "defaultValue": null, "description": "The starting edge of the dialog animation.", "name": "startingEdge", "required": false, "type": { "name": "enum", "raw": "DialogStartingEdge", "value": [ { "value": "\"top\"" }, { "value": "\"bottom\"" } ] } }, "moveBy": { "defaultValue": { "value": "{ main: 0, secondary: 0 }" }, "description": "Offset values for positioning adjustments.\n`main` - distance from reference element\n`secondary` - cross-axis offset (skidding)", "name": "moveBy", "required": false, "type": { "name": "{ main?: number; secondary?: number; }" } }, "showDelay": { "defaultValue": { "value": "100" }, "description": "Delay in milliseconds before showing the dialog.", "name": "showDelay", "required": false, "type": { "name": "number" } }, "hideDelay": { "defaultValue": { "value": "100" }, "description": "Delay in milliseconds before hiding the dialog.", "name": "hideDelay", "required": false, "type": { "name": "number" } }, "showTrigger": { "defaultValue": { "value": "mouseenter" }, "description": "Events that trigger showing the dialog.", "name": "showTrigger", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "hideTrigger": { "defaultValue": { "value": "mouseleave" }, "description": "Events that trigger hiding the dialog.", "name": "hideTrigger", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "showOnDialogEnter": { "defaultValue": { "value": "false" }, "description": "If true, keeps the dialog open when mouse enters it.", "name": "showOnDialogEnter", "required": false, "type": { "name": "boolean" } }, "shouldShowOnMount": { "defaultValue": { "value": "false" }, "description": "If true, shows the dialog when the component mounts.", "name": "shouldShowOnMount", "required": false, "type": { "name": "boolean" } }, "disable": { "defaultValue": { "value": "false" }, "description": "If true, disables opening the dialog.", "name": "disable", "required": false, "type": { "name": "boolean" } }, "open": { "defaultValue": { "value": "false" }, "description": "Controls the open state of the dialog (controlled mode).", "name": "open", "required": false, "type": { "name": "boolean" } }, "isOpen": { "defaultValue": null, "description": "Controlled open state for derived state pattern.", "name": "isOpen", "required": false, "type": { "name": "boolean" } }, "showTriggerIgnoreClass": { "defaultValue": null, "description": "CSS class names that, when present on target, prevent showing the dialog.", "name": "showTriggerIgnoreClass", "required": false, "type": { "name": "string | string[]" } }, "hideTriggerIgnoreClass": { "defaultValue": null, "description": "CSS class names that, when present on target, prevent hiding the dialog.", "name": "hideTriggerIgnoreClass", "required": false, "type": { "name": "string | string[]" } }, "animationType": { "defaultValue": { "value": "expand" }, "description": "The animation type used for the dialog.", "name": "animationType", "required": false, "type": { "name": "enum", "raw": "DialogAnimationType", "value": [ { "value": "\"opacity-and-slide\"" }, { "value": "\"expand\"" } ] } }, "wrapperClassName": { "defaultValue": null, "description": "Class name applied to the dialog content wrapper.", "name": "wrapperClassName", "required": false, "type": { "name": "string" } }, "preventAnimationOnMount": { "defaultValue": { "value": "false" }, "description": "If true, prevents animation when mounting.", "name": "preventAnimationOnMount", "required": false, "type": { "name": "boolean" } }, "containerSelector": { "defaultValue": null, "description": "CSS selector of the container where the dialog is portaled.", "name": "containerSelector", "required": false, "type": { "name": "string" } }, "tooltip": { "defaultValue": { "value": "false" }, "description": "If true, renders with tooltip arrow styling.", "name": "tooltip", "required": false, "type": { "name": "boolean" } }, "tooltipClassName": { "defaultValue": null, "description": "Class name applied to the tooltip arrow element.", "name": "tooltipClassName", "required": false, "type": { "name": "string" } }, "onDialogDidShow": { "defaultValue": null, "description": "Callback fired when the dialog is shown.", "name": "onDialogDidShow", "required": false, "type": { "name": "(event?: any, eventName?: string) => void" } }, "onDialogDidHide": { "defaultValue": null, "description": "Callback fired when the dialog is hidden.", "name": "onDialogDidHide", "required": false, "type": { "name": "(event: any, eventName: string) => void" } }, "onClickOutside": { "defaultValue": null, "description": "Callback fired when clicking outside the dialog.", "name": "onClickOutside", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onContentClick": { "defaultValue": null, "description": "Callback fired when clicking inside the dialog content.", "name": "onContentClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "zIndex": { "defaultValue": null, "description": "The z-index applied to the dialog.", "name": "zIndex", "required": false, "type": { "name": "number" } }, "useDerivedStateFromProps": { "defaultValue": { "value": "false" }, "description": "If true, uses derived state from props pattern.", "name": "useDerivedStateFromProps", "required": false, "type": { "name": "boolean" } }, "hideWhenReferenceHidden": { "defaultValue": { "value": "false" }, "description": "If true, hides the dialog when the reference element scrolls out of view.", "name": "hideWhenReferenceHidden", "required": false, "type": { "name": "boolean" } }, "shouldCallbackOnMount": { "defaultValue": { "value": "false" }, "description": "If true, fires onDialogDidShow callback on mount.", "name": "shouldCallbackOnMount", "required": false, "type": { "name": "boolean" } }, "instantShowAndHide": { "defaultValue": { "value": "false" }, "description": "If true, shows and hides the dialog without delay.", "name": "instantShowAndHide", "required": false, "type": { "name": "boolean" } }, "getDynamicShowDelay": { "defaultValue": null, "description": "Callback to dynamically adjust show delay and animation behavior.", "name": "getDynamicShowDelay", "required": false, "type": { "name": "() => { showDelay: number; preventAnimation: boolean; }" } }, "content": { "defaultValue": null, "description": "The content displayed inside the dialog. Can be a render function.", "name": "content", "required": false, "type": { "name": "(() => Element) | Element" } }, "children": { "defaultValue": null, "description": "The reference element(s) that the dialog is positioned relative to.", "name": "children", "required": false, "type": { "name": "string | ReactElement> | ReactElement>[]" } }, "addKeyboardHideShowTriggersByDefault": { "defaultValue": { "value": "true" }, "description": "If true, keyboard focus/blur events behave like mouse enter/leave.", "name": "addKeyboardHideShowTriggersByDefault", "required": false, "type": { "name": "boolean" } }, "disableContainerScroll": { "defaultValue": null, "description": "If true or a selector string, disables scrolling in the container when open.", "name": "disableContainerScroll", "required": false, "type": { "name": "string | boolean" } }, "observeContentResize": { "defaultValue": { "value": "false" }, "description": "If true, automatically updates position when content resizes.", "name": "observeContentResize", "required": false, "type": { "name": "boolean" } }, "enableNestedDialogLayer": { "defaultValue": { "value": "true" }, "description": "If true, provides a LayerProvider context for nested dialogs to render correctly.\nThis is useful when you have components that use Dialog internally (like Dropdown)\ninside another Dialog, ensuring proper z-index stacking and click-outside behavior.", "name": "enableNestedDialogLayer", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Dialog } from \"@vibe/dialog\"", "subComponents": [ "DialogConstants" ] }, { "filePath": "src/DialogContentContainer/DialogContentContainer.tsx", "aggregator": "core", "symbols": [ "default as DialogContentContainer", "type DialogContentContainerProps" ], "displayName": "DialogContentContainer", "description": "", "props": { "children": { "defaultValue": null, "description": "The content inside the dialog container.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element that labels this dialog.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "The ID of the element that describes this dialog.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { "value": "popover" }, "description": "The type of dialog.", "name": "type", "required": false, "type": { "name": "enum", "raw": "DialogType", "value": [ { "value": "\"modal\"" }, { "value": "\"popover\"" } ] } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the dialog.", "name": "size", "required": false, "type": { "name": "enum", "raw": "DialogSize", "value": [ { "value": "\"none\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "style": { "defaultValue": null, "description": "Custom styles applied to the dialog container.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "role": { "defaultValue": null, "description": "The ARIA role applied to the dialog container.\nDefaults to \"dialog\" when not provided. Pass `null` to remove the role attribute entirely.", "name": "role", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": { "value": "" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { DialogContentContainer } from \"@vibe/dialog\"", "subComponents": [] }, { "filePath": "src/components/Divider/Divider.tsx", "aggregator": "core", "symbols": [ "default as Divider", "type DividerProps", "DividerDirection" ], "displayName": "Divider", "description": "", "props": { "direction": { "defaultValue": { "value": "horizontal" }, "description": "The direction of the divider.", "name": "direction", "required": false, "type": { "name": "enum", "raw": "DividerDirection", "value": [ { "value": "\"vertical\"" }, { "value": "\"horizontal\"" } ] } }, "withoutMargin": { "defaultValue": { "value": "false" }, "description": "If true, removes margin from the divider.", "name": "withoutMargin", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": { "value": "undefined" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Divider } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Dropdown/Dropdown.tsx", "aggregator": "core", "symbols": [ "default as Dropdown", "DropdownOption", "DropdownGroupOption", "BaseDropdownProps", "DropdownSizes", "DropdownDirection", "DropdownMultiControllerProps", "DropdownSingleControllerProps" ], "displayName": "Dropdown", "description": "", "props": { "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "searchable": { "defaultValue": null, "description": "If true, the dropdown is searchable.", "name": "searchable", "required": false, "type": { "name": "boolean" } }, "boxMode": { "defaultValue": null, "description": "If true, the dropdown menu is displayed inline without a popup/dialog.", "name": "boxMode", "required": false, "type": { "name": "boolean" } }, "options": { "defaultValue": null, "description": "The list of options available in the list.", "name": "options", "required": true, "type": { "name": "DropdownGroupOption" } }, "tooltipProps": { "defaultValue": null, "description": "Props to be passed to the Tooltip component that wraps the dropdown.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "withGroupDivider": { "defaultValue": null, "description": "If true, displays dividers between grouped options.", "name": "withGroupDivider", "required": false, "type": { "name": "boolean" } }, "stickyGroupTitle": { "defaultValue": null, "description": "If true, makes the group title sticky.", "name": "stickyGroupTitle", "required": false, "type": { "name": "boolean" } }, "size": { "defaultValue": null, "description": "The size of the dropdown.", "name": "size", "required": false, "type": { "name": "enum", "raw": "DropdownSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "dir": { "defaultValue": null, "description": "The direction of the dropdown.", "name": "dir", "required": false, "type": { "name": "enum", "raw": "DropdownDirection", "value": [ { "value": "\"ltr\"" }, { "value": "\"rtl\"" }, { "value": "\"auto\"" } ] } }, "borderless": { "defaultValue": null, "description": "If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.", "name": "borderless", "required": false, "type": { "name": "boolean" } }, "optionRenderer": { "defaultValue": null, "description": "The function to call to render an option.", "name": "optionRenderer", "required": false, "type": { "name": "(option: Item) => React.ReactNode" } }, "menuRenderer": { "defaultValue": null, "description": "The function to call to render the menu.", "name": "menuRenderer", "required": false, "type": { "name": "(props: { children: React.ReactNode; filteredOptions: DropdownListGroup[]; selectedItems: Item[]; getItemProps: (options: any) => Record; }) => React.ReactNode" } }, "noOptionsMessage": { "defaultValue": null, "description": "The message to display when there are no options.", "name": "noOptionsMessage", "required": false, "type": { "name": "any" } }, "placeholder": { "defaultValue": null, "description": "The placeholder to display when the dropdown is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "disabled": { "defaultValue": null, "description": "If true, the dropdown is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "readOnly": { "defaultValue": null, "description": "If true, the dropdown is read only.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "error": { "defaultValue": null, "description": "If true, the dropdown is in an error state.", "name": "error", "required": false, "type": { "name": "boolean" } }, "helperText": { "defaultValue": null, "description": "The helper text to display below the dropdown.", "name": "helperText", "required": false, "type": { "name": "string" } }, "required": { "defaultValue": null, "description": "If true, the dropdown is required.", "name": "required", "required": false, "type": { "name": "boolean" } }, "label": { "defaultValue": null, "description": "The label to display above the dropdown.", "name": "label", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for the dropdown.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "inputAriaLabel": { "defaultValue": null, "description": "The ARIA label for the dropdown input.", "name": "inputAriaLabel", "required": false, "type": { "name": "string" } }, "menuAriaLabel": { "defaultValue": null, "description": "The ARIA label for the menu container.", "name": "menuAriaLabel", "required": false, "type": { "name": "string" } }, "clearAriaLabel": { "defaultValue": null, "description": "The ARIA label for the clear button.", "name": "clearAriaLabel", "required": false, "type": { "name": "string" } }, "inputValue": { "defaultValue": null, "description": "The current value of the input field.", "name": "inputValue", "required": false, "type": { "name": "string" } }, "maxMenuHeight": { "defaultValue": null, "description": "The maximum height of the dropdown menu.", "name": "maxMenuHeight", "required": false, "type": { "name": "number" } }, "isMenuOpen": { "defaultValue": null, "description": "If true, controls the menu open state.", "name": "isMenuOpen", "required": false, "type": { "name": "boolean" } }, "closeMenuOnSelect": { "defaultValue": null, "description": "If true, closes the menu when an option is selected.", "name": "closeMenuOnSelect", "required": false, "type": { "name": "boolean" } }, "autoFocus": { "defaultValue": null, "description": "If true, the dropdown menu will be auto focused.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "clearable": { "defaultValue": null, "description": "If true, the dropdown will have a clear button.", "name": "clearable", "required": false, "type": { "name": "boolean" } }, "onBlur": { "defaultValue": null, "description": "Callback fired when the dropdown loses focus.", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onClear": { "defaultValue": null, "description": "Callback fired when the clear button is clicked.", "name": "onClear", "required": false, "type": { "name": "() => void" } }, "onFocus": { "defaultValue": null, "description": "Callback fired when the dropdown gains focus.", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onInputChange": { "defaultValue": null, "description": "Callback fired when the dropdown input value changes.", "name": "onInputChange", "required": false, "type": { "name": "(input: string) => void" } }, "onKeyDown": { "defaultValue": null, "description": "Callback fired when a key is pressed inside the dropdown.", "name": "onKeyDown", "required": false, "type": { "name": "(event: React.KeyboardEvent) => void" } }, "onMenuOpen": { "defaultValue": null, "description": "Callback fired when the dropdown menu opens.", "name": "onMenuOpen", "required": false, "type": { "name": "() => void" } }, "onMenuClose": { "defaultValue": null, "description": "Callback fired when the dropdown menu closes.", "name": "onMenuClose", "required": false, "type": { "name": "() => void" } }, "onOptionSelect": { "defaultValue": null, "description": "Callback fired when an option is selected.", "name": "onOptionSelect", "required": false, "type": { "name": "(option: Item) => void" } }, "onScroll": { "defaultValue": null, "description": "Callback fired when scrolling inside the dropdown.", "name": "onScroll", "required": false, "type": { "name": "(event: React.UIEvent) => void" } }, "filterOption": { "defaultValue": null, "description": "A function to customize the filtering of options.\nIt receives an option and the current input value, and should return true if the option should be included, false otherwise.", "name": "filterOption", "required": false, "type": { "name": "(option: Item, inputValue: string) => boolean" } }, "showSelectedOptions": { "defaultValue": null, "description": "If false, selected options will be hidden from the list. Defaults to true.", "name": "showSelectedOptions", "required": false, "type": { "name": "boolean" } }, "menuWrapperClassName": { "defaultValue": null, "description": "The class name to be applied to the menu wrapper.", "name": "menuWrapperClassName", "required": false, "type": { "name": "string" } }, "loading": { "defaultValue": null, "description": "If true, displays a loading indicator in the dropdown controls.", "name": "loading", "required": false, "type": { "name": "boolean" } }, "multi": { "defaultValue": null, "description": "If true, the dropdown allows multiple selections.\nIf true, the dropdown allows multiple selections. Defaults to false.", "name": "multi", "required": false, "type": { "name": "boolean" } }, "multiline": { "defaultValue": null, "description": "If true, the dropdown allows multiple lines of selected items. (Not available for single select)", "name": "multiline", "required": false, "type": { "name": "boolean" } }, "onOptionRemove": { "defaultValue": null, "description": "Callback fired when an option is removed in multi-select mode. Only available when multi is true.\nCallback fired when an option is removed in multi-select mode. (Not available for single select)", "name": "onOptionRemove", "required": false, "type": { "name": "(option: Item) => void" } }, "valueRenderer": { "defaultValue": null, "description": "The function to call to render the selected value on single select mode.", "name": "valueRenderer", "required": false, "type": { "name": "(option: Item) => React.ReactNode" } }, "defaultValue": { "defaultValue": null, "description": "The default selected values for multi-select.\nThe default selected value for single-select.", "name": "defaultValue", "required": false, "type": { "name": "BaseItemData> | Item[]" } }, "value": { "defaultValue": null, "description": "The controlled selected values for multi-select.\nThe controlled selected value for single-select.", "name": "value", "required": false, "type": { "name": "BaseItemData> | Item[]" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the selected values change in multi-select mode.\nCallback fired when the selected value changes in single-select mode.", "name": "onChange", "required": false, "type": { "name": "((options: Item[]) => void) | ((option: Item) => void)" } }, "minVisibleCount": { "defaultValue": null, "description": "Minimum number of selected chips to always show before overflowing to the counter.\nMinimum number of selected chips to always show before overflowing to the counter. (Not available for single select)", "name": "minVisibleCount", "required": false, "type": { "name": "number" } }, "ref": { "defaultValue": null, "description": "", "name": "ref", "required": false, "type": { "name": "React.ForwardedRef" } } }, "import": "import { Dropdown } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/EditableHeading/EditableHeading.tsx", "aggregator": "core", "symbols": [ "default as EditableHeading", "type EditableHeadingProps" ], "displayName": "EditableHeading", "description": "", "props": { "type": { "defaultValue": { "value": "h1" }, "description": "The type of the heading element.", "name": "type", "required": false, "type": { "name": "enum", "raw": "HeadingType", "value": [ { "value": "\"h1\"" }, { "value": "\"h2\"" }, { "value": "\"h3\"" } ] } }, "weight": { "defaultValue": { "value": "normal" }, "description": "The font weight of the heading.", "name": "weight", "required": false, "type": { "name": "enum", "raw": "HeadingWeight", "value": [ { "value": "\"bold\"" }, { "value": "\"medium\"" }, { "value": "\"normal\"" }, { "value": "\"light\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "value": { "defaultValue": null, "description": "The current value of the text.", "name": "value", "required": true, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the value changes.", "name": "onChange", "required": false, "type": { "name": "(value: string) => void" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the component is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any) => void" } }, "onKeyDown": { "defaultValue": null, "description": "Callback fired when a key is pressed inside the input/textarea element.", "name": "onKeyDown", "required": false, "type": { "name": "(event: React.KeyboardEvent) => void" } }, "readOnly": { "defaultValue": null, "description": "If true, the text is read-only and cannot be edited.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "placeholder": { "defaultValue": null, "description": "Placeholder text displayed when the value is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The label of the component for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "isEditMode": { "defaultValue": null, "description": "Controls whether the component is in edit mode.", "name": "isEditMode", "required": false, "type": { "name": "boolean" } }, "autoSelectTextOnEditMode": { "defaultValue": null, "description": "If true, automatically selects all text when entering edit mode.", "name": "autoSelectTextOnEditMode", "required": false, "type": { "name": "boolean" } }, "onEditModeChange": { "defaultValue": null, "description": "Callback fired when the edit mode changes.", "name": "onEditModeChange", "required": false, "type": { "name": "(isEditMode: boolean) => void" } }, "tooltipProps": { "defaultValue": null, "description": "Props to customize the tooltip.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } } }, "import": "import { EditableHeading } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/EditableText/EditableText.tsx", "aggregator": "core", "symbols": [ "default as EditableText", "type EditableTextProps" ], "displayName": "EditableText", "description": "", "props": { "type": { "defaultValue": { "value": "text2" }, "description": "The text style variant.", "name": "type", "required": false, "type": { "name": "enum", "raw": "TextType", "value": [ { "value": "\"text1\"" }, { "value": "\"text2\"" }, { "value": "\"text3\"" } ] } }, "weight": { "defaultValue": { "value": "normal" }, "description": "The font weight of the text.", "name": "weight", "required": false, "type": { "name": "enum", "raw": "TextWeight", "value": [ { "value": "\"bold\"" }, { "value": "\"medium\"" }, { "value": "\"normal\"" } ] } }, "multiline": { "defaultValue": null, "description": "If true, enables editing multiple lines of text.", "name": "multiline", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "value": { "defaultValue": null, "description": "The current value of the text.", "name": "value", "required": true, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the value changes.", "name": "onChange", "required": false, "type": { "name": "(value: string) => void" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the component is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any) => void" } }, "onKeyDown": { "defaultValue": null, "description": "Callback fired when a key is pressed inside the input/textarea element.", "name": "onKeyDown", "required": false, "type": { "name": "(event: React.KeyboardEvent) => void" } }, "readOnly": { "defaultValue": null, "description": "If true, the text is read-only and cannot be edited.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "placeholder": { "defaultValue": null, "description": "Placeholder text displayed when the value is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The label of the component for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "isEditMode": { "defaultValue": null, "description": "Controls whether the component is in edit mode.", "name": "isEditMode", "required": false, "type": { "name": "boolean" } }, "autoSelectTextOnEditMode": { "defaultValue": null, "description": "If true, automatically selects all text when entering edit mode.", "name": "autoSelectTextOnEditMode", "required": false, "type": { "name": "boolean" } }, "onEditModeChange": { "defaultValue": null, "description": "Callback fired when the edit mode changes.", "name": "onEditModeChange", "required": false, "type": { "name": "(isEditMode: boolean) => void" } }, "tooltipProps": { "defaultValue": null, "description": "Props to customize the tooltip.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } } }, "import": "import { EditableText } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/EmptyState/EmptyState.tsx", "aggregator": "core", "symbols": [ "default as EmptyState", "EmptyStateLayout", "EmptyStateProps" ], "displayName": "EmptyState", "description": "", "props": { "title": { "defaultValue": null, "description": "Optional title for the empty state", "name": "title", "required": false, "type": { "name": "string" } }, "description": { "defaultValue": null, "description": "Required description text explaining the empty state", "name": "description", "required": true, "type": { "name": "any" } }, "visual": { "defaultValue": null, "description": "Optional visual element like image, animation, video, or illustration to display", "name": "visual", "required": false, "type": { "name": "React.ReactNode" } }, "mainAction": { "defaultValue": null, "description": "Main action button configuration", "name": "mainAction", "required": false, "type": { "name": "any" } }, "supportingAction": { "defaultValue": null, "description": "Supporting action (link or tertiary button) configuration", "name": "supportingAction", "required": false, "type": { "name": "any" } }, "layout": { "defaultValue": { "value": "default" }, "description": "Layout style of the empty state", "name": "layout", "required": false, "type": { "name": "enum", "raw": "EmptyStateLayout", "value": [ { "value": "\"default\"" }, { "value": "\"compact\"" } ] } } }, "import": "import { EmptyState } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ExpandCollapse/ExpandCollapse.tsx", "aggregator": "core", "symbols": [ "default as ExpandCollapse", "type ExpandCollapseProps" ], "displayName": "ExpandCollapse", "description": "", "props": { "headerComponentRenderer": { "defaultValue": { "value": "null" }, "description": "Custom renderer for the header component.", "name": "headerComponentRenderer", "required": false, "type": { "name": "() => ReactElement>" } }, "headerClassName": { "defaultValue": null, "description": "Class name applied to the header.", "name": "headerClassName", "required": false, "type": { "name": "string" } }, "contentClassName": { "defaultValue": null, "description": "Class name applied to the content.", "name": "contentClassName", "required": false, "type": { "name": "string" } }, "componentClassName": { "defaultValue": null, "description": "Class name applied to the root component.", "name": "componentClassName", "required": false, "type": { "name": "string" } }, "title": { "defaultValue": { "value": "" }, "description": "The title displayed in the header.", "name": "title", "required": false, "type": { "name": "ElementContent" } }, "children": { "defaultValue": null, "description": "The content inside the expandable section.", "name": "children", "required": false, "type": { "name": "ElementContent" } }, "iconSize": { "defaultValue": { "value": "24" }, "description": "The size of the expand/collapse icon.", "name": "iconSize", "required": false, "type": { "name": "string | number" } }, "iconPosition": { "defaultValue": { "value": "right" }, "description": "The position of the icon.", "name": "iconPosition", "required": false, "type": { "name": "enum", "raw": "ExpandCollapseIconPosition", "value": [ { "value": "\"left\"" }, { "value": "\"right\"" } ] } }, "defaultOpenState": { "defaultValue": { "value": "false" }, "description": "If true, the section is open by default when rendered.", "name": "defaultOpenState", "required": false, "type": { "name": "boolean" } }, "open": { "defaultValue": null, "description": "Controls the open state of the section.", "name": "open", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": { "value": "null" }, "description": "Callback fired when the header is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "hideBorder": { "defaultValue": { "value": "false" }, "description": "If true, hides the border around the component.", "name": "hideBorder", "required": false, "type": { "name": "boolean" } }, "captureOnClick": { "defaultValue": { "value": "true" }, "description": "If true, captures the click event on the button.", "name": "captureOnClick", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": { "value": "" }, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ExpandCollapse } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Flex/Flex.tsx", "aggregator": "core", "symbols": [ "default as Flex", "type FlexProps" ], "displayName": "Flex", "description": "", "props": { "style": { "defaultValue": null, "description": "Inline styles applied to the flex container.", "name": "style", "required": false, "type": { "name": "object" } }, "direction": { "defaultValue": { "value": "row" }, "description": "The direction of the flex container.", "name": "direction", "required": false, "type": { "name": "enum", "raw": "FlexDirection", "value": [ { "value": "\"row\"" }, { "value": "\"column\"" } ] } }, "elementType": { "defaultValue": { "value": "div" }, "description": "The HTML element or component used as the root.", "name": "elementType", "required": false, "type": { "name": "React.ElementType" } }, "wrap": { "defaultValue": { "value": "false" }, "description": "If true, allows wrapping of flex items.", "name": "wrap", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The content inside the flex container.", "name": "children", "required": false, "type": { "name": "ElementContent | ElementContent[]" } }, "justify": { "defaultValue": { "value": "start" }, "description": "Defines how flex items are aligned along the main axis.", "name": "justify", "required": false, "type": { "name": "enum", "raw": "FlexJustify", "value": [ { "value": "\"start\"" }, { "value": "\"center\"" }, { "value": "\"end\"" }, { "value": "\"space-around\"" }, { "value": "\"space-between\"" }, { "value": "\"initial\"" } ] } }, "align": { "defaultValue": { "value": "center" }, "description": "Defines how flex items are aligned along the cross axis.", "name": "align", "required": false, "type": { "name": "enum", "raw": "FlexAlign", "value": [ { "value": "\"start\"" }, { "value": "\"center\"" }, { "value": "\"end\"" }, { "value": "\"initial\"" }, { "value": "\"stretch\"" }, { "value": "\"baseline\"" } ] } }, "gap": { "defaultValue": null, "description": "The gap between flex items.", "name": "gap", "required": false, "type": { "name": "number | FlexGap" } }, "flex": { "defaultValue": null, "description": "The flex shorthand of the flex container.", "name": "flex", "required": false, "type": { "name": "FlexShorthand" } }, "aria-label": { "defaultValue": null, "description": "The label of the flex container for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "tabIndex": { "defaultValue": null, "description": "The tab order of the element.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the flex container is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "Callback fired when the mouse button is pressed on the flex container.", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "aria-labelledby": { "defaultValue": null, "description": "ID of the element describing the flex container.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Flex } from \"@vibe/layout\"", "subComponents": [] }, { "filePath": "src/Box/Box.tsx", "aggregator": "core", "symbols": [ "default as Box", "type BoxProps", "BorderColor", "BackgroundColor", "BoxTextColor", "BaseBoxSize", "BoxSize", "Shadow", "RoundedSize" ], "displayName": "Box", "description": "", "props": { "elementType": { "defaultValue": { "value": "div" }, "description": "The HTML element or custom component used as the root.", "name": "elementType", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The content inside the box.", "name": "children", "required": false, "type": { "name": "ElementContent" } }, "disabled": { "defaultValue": null, "description": "If true, the box is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "border": { "defaultValue": null, "description": "If true, applies a border to the box.", "name": "border", "required": false, "type": { "name": "boolean" } }, "borderColor": { "defaultValue": null, "description": "The color of the border.", "name": "borderColor", "required": false, "type": { "name": "enum", "raw": "BorderColor", "value": [ { "value": "\"uiBorderColor\"" }, { "value": "\"layoutBorderColor\"" } ] } }, "rounded": { "defaultValue": null, "description": "The border radius of the box.", "name": "rounded", "required": false, "type": { "name": "enum", "raw": "RoundedSize", "value": [ { "value": "\"big\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" } ] } }, "shadow": { "defaultValue": null, "description": "The shadow style applied to the box.", "name": "shadow", "required": false, "type": { "name": "enum", "raw": "Shadow", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" } ] } }, "margin": { "defaultValue": null, "description": "The margin applied to all sides.", "name": "margin", "required": false, "type": { "name": "enum", "raw": "BoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" }, { "value": "\"auto\"" } ] } }, "marginX": { "defaultValue": null, "description": "The horizontal margin.", "name": "marginX", "required": false, "type": { "name": "enum", "raw": "BoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" }, { "value": "\"auto\"" } ] } }, "marginY": { "defaultValue": null, "description": "The vertical margin.", "name": "marginY", "required": false, "type": { "name": "enum", "raw": "BoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" }, { "value": "\"auto\"" } ] } }, "marginTop": { "defaultValue": null, "description": "The top margin.", "name": "marginTop", "required": false, "type": { "name": "enum", "raw": "BoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" }, { "value": "\"auto\"" } ] } }, "marginEnd": { "defaultValue": null, "description": "The end (right in LTR, left in RTL) margin.", "name": "marginEnd", "required": false, "type": { "name": "enum", "raw": "BoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" }, { "value": "\"auto\"" } ] } }, "marginBottom": { "defaultValue": null, "description": "The bottom margin.", "name": "marginBottom", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "marginStart": { "defaultValue": null, "description": "The start (left in LTR, right in RTL) margin.", "name": "marginStart", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "padding": { "defaultValue": null, "description": "The padding applied to all sides.", "name": "padding", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "paddingX": { "defaultValue": null, "description": "The horizontal padding.", "name": "paddingX", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "paddingY": { "defaultValue": null, "description": "The vertical padding.", "name": "paddingY", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "paddingTop": { "defaultValue": null, "description": "The top padding.", "name": "paddingTop", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "paddingEnd": { "defaultValue": null, "description": "The end (right in LTR, left in RTL) padding.", "name": "paddingEnd", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "paddingBottom": { "defaultValue": null, "description": "The bottom padding.", "name": "paddingBottom", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "paddingStart": { "defaultValue": null, "description": "The start (left in LTR, right in RTL) padding.", "name": "paddingStart", "required": false, "type": { "name": "enum", "raw": "BaseBoxSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"xs\"" }, { "value": "\"large\"" }, { "value": "\"xl\"" }, { "value": "\"xxl\"" }, { "value": "\"xxxl\"" } ] } }, "backgroundColor": { "defaultValue": null, "description": "The background color of the box.", "name": "backgroundColor", "required": false, "type": { "name": "enum", "raw": "BackgroundColor", "value": [ { "value": "\"primaryBackgroundColor\"" }, { "value": "\"secondaryBackgroundColor\"" }, { "value": "\"greyBackgroundColor\"" }, { "value": "\"allgreyBackgroundColor\"" }, { "value": "\"invertedColorBackground\"" } ] } }, "textColor": { "defaultValue": null, "description": "The text color inside the box.", "name": "textColor", "required": false, "type": { "name": "enum", "raw": "BoxTextColor", "value": [ { "value": "\"primaryTextColor\"" }, { "value": "\"textColorOnInverted\"" }, { "value": "\"secondaryTextColor\"" } ] } }, "scrollable": { "defaultValue": null, "description": "If true, the box content is scrollable.", "name": "scrollable", "required": false, "type": { "name": "boolean" } }, "style": { "defaultValue": null, "description": "Inline styles applied to the box.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Box } from \"@vibe/layout\"", "subComponents": [] }, { "filePath": "src/components/FormattedNumber/FormattedNumber.tsx", "aggregator": "core", "symbols": [ "default as FormattedNumber", "type FormattedNumberProps" ], "displayName": "FormattedNumber", "description": "", "props": { "value": { "defaultValue": null, "description": "The numeric value to format.", "name": "value", "required": false, "type": { "name": "string | number" } }, "prefix": { "defaultValue": null, "description": "The text displayed before the number.", "name": "prefix", "required": false, "type": { "name": "string" } }, "suffix": { "defaultValue": null, "description": "The text displayed after the number.", "name": "suffix", "required": false, "type": { "name": "string" } }, "emptyPlaceHolder": { "defaultValue": { "value": "N/A" }, "description": "The text displayed when no value is provided.", "name": "emptyPlaceHolder", "required": false, "type": { "name": "string" } }, "decimalPrecision": { "defaultValue": { "value": "2" }, "description": "The number of decimal places to display (0 ~ 20).", "name": "decimalPrecision", "required": false, "type": { "name": "number" } }, "compact": { "defaultValue": { "value": "true" }, "description": "If true, formats the number into a compact notation.", "name": "compact", "required": false, "type": { "name": "boolean" } }, "local": { "defaultValue": { "value": "formatNumberConsts.DEFAULT_LOCAL" }, "description": "The locale used for formatting (Unicode BCP 47 locale identifier).", "name": "local", "required": false, "type": { "name": "string" } }, "rtl": { "defaultValue": null, "description": "If true, reverses the order of the prefix and suffix.", "name": "rtl", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { FormattedNumber } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Text/Text.tsx", "aggregator": "core", "symbols": [ "default as Text", "type TextProps", "TextType", "TextWeight" ], "displayName": "Text", "description": "", "props": { "type": { "defaultValue": { "value": "text2" }, "description": "The text style variant.", "name": "type", "required": false, "type": { "name": "enum", "raw": "TextType", "value": [ { "value": "\"text1\"" }, { "value": "\"text2\"" }, { "value": "\"text3\"" } ] } }, "weight": { "defaultValue": { "value": "normal" }, "description": "The font weight of the text.", "name": "weight", "required": false, "type": { "name": "enum", "raw": "TextWeight", "value": [ { "value": "\"bold\"" }, { "value": "\"medium\"" }, { "value": "\"normal\"" } ] } }, "children": { "defaultValue": null, "description": "The content inside the text component.", "name": "children", "required": true, "type": { "name": "ReactNode" } }, "element": { "defaultValue": { "value": "div" }, "description": "The HTML element tag used for the text component.", "name": "element", "required": false, "type": { "name": "string" } }, "color": { "defaultValue": null, "description": "The text color.", "name": "color", "required": false, "type": { "name": "enum", "raw": "TypographyColor", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"onInverted\"" }, { "value": "\"fixedLight\"" }, { "value": "\"fixedDark\"" }, { "value": "\"inherit\"" }, { "value": "\"negative\"" } ] } }, "align": { "defaultValue": null, "description": "The text alignment.", "name": "align", "required": false, "type": { "name": "enum", "raw": "TypographyAlign", "value": [ { "value": "\"inherit\"" }, { "value": "\"start\"" }, { "value": "\"center\"" }, { "value": "\"end\"" } ] } }, "ellipsis": { "defaultValue": null, "description": "If true, truncates overflowing text with an ellipsis.", "name": "ellipsis", "required": false, "type": { "name": "boolean" } }, "maxLines": { "defaultValue": null, "description": "The maximum number of lines before truncating with an ellipsis.", "name": "maxLines", "required": false, "type": { "name": "number" } }, "tooltipProps": { "defaultValue": null, "description": "Props passed to the tooltip displayed when hovering over the text.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "withoutTooltip": { "defaultValue": null, "description": "If true, disables the tooltip that appears when text is truncated.", "name": "withoutTooltip", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Text } from \"@vibe/typography\"", "subComponents": [] }, { "filePath": "src/Heading/Heading.tsx", "aggregator": "core", "symbols": [ "default as Heading", "type HeadingProps", "HeadingType", "HeadingWeight" ], "displayName": "Heading", "description": "", "props": { "type": { "defaultValue": { "value": "h1" }, "description": "The heading type.", "name": "type", "required": false, "type": { "name": "enum", "raw": "HeadingType", "value": [ { "value": "\"h1\"" }, { "value": "\"h2\"" }, { "value": "\"h3\"" } ] } }, "weight": { "defaultValue": { "value": "normal" }, "description": "The font weight of the heading.", "name": "weight", "required": false, "type": { "name": "enum", "raw": "HeadingWeight", "value": [ { "value": "\"bold\"" }, { "value": "\"medium\"" }, { "value": "\"normal\"" }, { "value": "\"light\"" } ] } }, "align": { "defaultValue": null, "description": "The text alignment.", "name": "align", "required": false, "type": { "name": "enum", "raw": "TypographyAlign", "value": [ { "value": "\"start\"" }, { "value": "\"center\"" }, { "value": "\"end\"" }, { "value": "\"inherit\"" } ] } }, "color": { "defaultValue": null, "description": "The text color.", "name": "color", "required": false, "type": { "name": "enum", "raw": "TypographyColor", "value": [ { "value": "\"inherit\"" }, { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"onInverted\"" }, { "value": "\"fixedLight\"" }, { "value": "\"fixedDark\"" }, { "value": "\"negative\"" } ] } }, "children": { "defaultValue": null, "description": "The content inside the heading.", "name": "children", "required": true, "type": { "name": "ReactNode" } }, "element": { "defaultValue": null, "description": "The HTML element tag used for the text component.", "name": "element", "required": false, "type": { "name": "string" } }, "ellipsis": { "defaultValue": null, "description": "If true, truncates overflowing text with an ellipsis.", "name": "ellipsis", "required": false, "type": { "name": "boolean" } }, "maxLines": { "defaultValue": null, "description": "The maximum number of lines before truncating with an ellipsis.", "name": "maxLines", "required": false, "type": { "name": "number" } }, "tooltipProps": { "defaultValue": null, "description": "Props passed to the tooltip displayed when hovering over the text.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "withoutTooltip": { "defaultValue": null, "description": "If true, disables the tooltip that appears when text is truncated.", "name": "withoutTooltip", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Heading } from \"@vibe/typography\"", "subComponents": [] }, { "filePath": "src/Typography/Typography.tsx", "aggregator": "core", "symbols": [ "default as Typography", "type TypographyProps", "TypographyColor", "TypographyAlign" ], "displayName": "Typography", "description": "", "props": { "element": { "defaultValue": { "value": "span" }, "description": "The HTML element tag used for the text component.", "name": "element", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The content inside the typography component.", "name": "children", "required": true, "type": { "name": "ElementContent" } }, "color": { "defaultValue": { "value": "primary" }, "description": "The text color.", "name": "color", "required": false, "type": { "name": "enum", "raw": "TypographyColor", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"onInverted\"" }, { "value": "\"fixedLight\"" }, { "value": "\"fixedDark\"" }, { "value": "\"inherit\"" }, { "value": "\"negative\"" } ] } }, "align": { "defaultValue": { "value": "start" }, "description": "The text alignment.", "name": "align", "required": false, "type": { "name": "enum", "raw": "TypographyAlign", "value": [ { "value": "\"inherit\"" }, { "value": "\"start\"" }, { "value": "\"center\"" }, { "value": "\"end\"" } ] } }, "ellipsis": { "defaultValue": { "value": "true" }, "description": "If true, truncates overflowing text with an ellipsis.", "name": "ellipsis", "required": false, "type": { "name": "boolean" } }, "maxLines": { "defaultValue": { "value": "1" }, "description": "The maximum number of lines before truncating with an ellipsis.", "name": "maxLines", "required": false, "type": { "name": "number" } }, "tooltipProps": { "defaultValue": null, "description": "Props passed to the tooltip displayed when hovering over the text.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "withoutTooltip": { "defaultValue": { "value": "false" }, "description": "If true, disables the tooltip that appears when text is truncated.", "name": "withoutTooltip", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Typography } from \"@vibe/typography\"", "subComponents": [] }, { "filePath": "src/components/HiddenText/HiddenText.tsx", "aggregator": "core", "symbols": [ "default as HiddenText", "type HiddenTextProps" ], "displayName": "HiddenText", "description": "", "props": { "text": { "defaultValue": null, "description": "The text content that is hidden but available for assistive technologies.", "name": "text", "required": true, "type": { "name": "string" } }, "className": { "defaultValue": { "value": "" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": { "value": "hiddenText" }, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { HiddenText } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Icon/Icon.tsx", "aggregator": "core", "symbols": [ "default as Icon", "type IconProps" ], "displayName": "Icon", "description": "", "props": { "icon": { "defaultValue": { "value": "" }, "description": "The icon name, component, or source URL.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "label": { "defaultValue": null, "description": "The accessible label for the icon.", "name": "label", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { "value": "svg" }, "description": "The type of the icon: `svg`, `font`, or `src` (external source).", "name": "type", "required": false, "type": { "name": "enum", "raw": "IconType", "value": [ { "value": "\"svg\"" }, { "value": "\"font\"" }, { "value": "\"src\"" } ] } }, "size": { "defaultValue": { "value": "16" }, "description": "The size of the icon.", "name": "size", "required": false, "type": { "name": "string | number" } }, "ignoreFocusStyle": { "defaultValue": { "value": "false" }, "description": "If true, removes focus styles from the icon.", "name": "ignoreFocusStyle", "required": false, "type": { "name": "boolean" } }, "tabindex": { "defaultValue": null, "description": "The tab index of the icon for keyboard navigation.", "name": "tabindex", "required": false, "type": { "name": "string | number" } }, "aria-hidden": { "defaultValue": null, "description": "If true, hides the icon from screen readers.", "name": "aria-hidden", "required": false, "type": { "name": "boolean" } }, "style": { "defaultValue": null, "description": "Inline styles applied to the icon.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "useCurrentColor": { "defaultValue": { "value": "false" }, "description": "If true, replaces `fill` property with `currentColor` when using an `src` icon.", "name": "useCurrentColor", "required": false, "type": { "name": "boolean" } }, "customColor": { "defaultValue": null, "description": "Overrides the default color with a custom color.", "name": "customColor", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Icon } from \"@vibe/icon\"", "subComponents": [] }, { "filePath": "src/Icon/CustomSvgIcon/CustomSvgIcon.tsx", "aggregator": "core", "symbols": [ "default as CustomSvgIcon", "type CustomSvgIconProps" ], "displayName": "CustomSvgIcon", "description": "", "props": { "src": { "defaultValue": null, "description": "The source URL or object of the SVG icon.", "name": "src", "required": true, "type": { "name": "string | object" } }, "aria-label": { "defaultValue": null, "description": "The accessible label for the icon.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "tabIndex": { "defaultValue": null, "description": "The tab index of the icon for keyboard navigation.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "role": { "defaultValue": null, "description": "The ARIA role of the icon.", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "aria-hidden": { "defaultValue": null, "description": "If true, hides the icon from screen readers.", "name": "aria-hidden", "required": false, "type": { "name": "boolean" } }, "replaceToCurrentColor": { "defaultValue": { "value": "false" }, "description": "If true, replaces the `fill` attribute in the SVG with `currentColor`.", "name": "replaceToCurrentColor", "required": false, "type": { "name": "boolean" } }, "customColor": { "defaultValue": null, "description": "Overrides the default color of the icon.", "name": "customColor", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The size (width and height) of the icon.", "name": "size", "required": false, "type": { "name": "string | number" } }, "ref": { "defaultValue": null, "description": "Reference to the SVG element.", "name": "ref", "required": false, "type": { "name": "Ref" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { CustomSvgIcon } from \"@vibe/icon\"", "subComponents": [] }, { "filePath": "src/IconButton/IconButton.tsx", "aggregator": "core", "symbols": [ "default as IconButton", "type IconButtonProps" ], "displayName": "IconButton", "description": "", "props": { "onClick": { "defaultValue": null, "description": "Callback fired when the button is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "wrapperClassName": { "defaultValue": null, "description": "Class name applied to the button wrapper.", "name": "wrapperClassName", "required": false, "type": { "name": "string" } }, "iconClassName": { "defaultValue": null, "description": "Class name applied to the icon.", "name": "iconClassName", "required": false, "type": { "name": "string" } }, "icon": { "defaultValue": null, "description": "The icon displayed inside the button.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element that labels this button.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-haspopup": { "defaultValue": null, "description": "If true, indicates that the button controls a popup.", "name": "aria-haspopup", "required": false, "type": { "name": "React.HTMLProps" } }, "aria-expanded": { "defaultValue": null, "description": "If true, indicates that the associated popup is open.", "name": "aria-expanded", "required": false, "type": { "name": "boolean" } }, "aria-controls": { "defaultValue": null, "description": "The ID of the region controlled by the button.", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "ID of the element describing the button.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-hidden": { "defaultValue": null, "description": "If true, hides the button from assistive technologies.", "name": "aria-hidden", "required": false, "type": { "name": "Booleanish" } }, "aria-pressed": { "defaultValue": null, "description": "Indicates the current \"pressed\" state of toggle buttons.", "name": "aria-pressed", "required": false, "type": { "name": "boolean | \"true\" | \"false\" | \"mixed\"" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The size of the button.", "name": "size", "required": false, "type": { "name": "enum", "raw": "Size", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" }, { "value": "\"xxs\"" }, { "value": "\"xs\"" } ] } }, "hideTooltip": { "defaultValue": { "value": "false" }, "description": "If true, hides the tooltip.", "name": "hideTooltip", "required": false, "type": { "name": "boolean" } }, "tooltipProps": { "defaultValue": { "value": "{} as TooltipProps" }, "description": "Props for the Tooltip component.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "tooltipContent": { "defaultValue": null, "description": "Tooltip content displayed on hover.", "name": "tooltipContent", "required": false, "type": { "name": "string" } }, "kind": { "defaultValue": { "value": "tertiary" }, "description": "The button variant.", "name": "kind", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "active": { "defaultValue": null, "description": "If true, the button is in an active state.", "name": "active", "required": false, "type": { "name": "boolean" } }, "color": { "defaultValue": null, "description": "The color of the button.", "name": "color", "required": false, "type": { "name": "enum", "raw": "ButtonColor", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"inverted\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" }, { "value": "\"brand\"" }, { "value": "\"fixed-light\"" }, { "value": "\"fixed-dark\"" } ] } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the button is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "disabledReason": { "defaultValue": null, "description": "If disabled, this message will be displayed in the tooltip.", "name": "disabledReason", "required": false, "type": { "name": "string" } }, "insetFocus": { "defaultValue": { "value": "false" }, "description": "If true, the focus indicator is displayed inside the button instead of around it.", "name": "insetFocus", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": null, "description": "The tab order of the button.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "loading": { "defaultValue": { "value": "false" }, "description": "If true, a loader replaces the icon.", "name": "loading", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { IconButton } from \"@vibe/icon-button\"", "subComponents": [] }, { "filePath": "src/components/Info/Info.tsx", "aggregator": "core", "symbols": [ "default as Info", "InfoProps" ], "displayName": "Info", "description": "", "props": { "title": { "defaultValue": null, "description": "The title text displayed at the top of the info dialog.", "name": "title", "required": false, "type": { "name": "string" } }, "body": { "defaultValue": null, "description": "The main body text content displayed in the info dialog.", "name": "body", "required": true, "type": { "name": "string" } }, "link": { "defaultValue": null, "description": "Link configuration for the info dialog.", "name": "link", "required": false, "type": { "name": "LinkProps" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element that labels the info button.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "position": { "defaultValue": { "value": "bottom-start" }, "description": "The placement of the dialog relative to the info button.", "name": "position", "required": false, "type": { "name": "enum", "raw": "DialogPosition", "value": [ { "value": "\"left\"" }, { "value": "\"left-start\"" }, { "value": "\"left-end\"" }, { "value": "\"right\"" }, { "value": "\"right-start\"" }, { "value": "\"right-end\"" }, { "value": "\"top\"" }, { "value": "\"top-start\"" }, { "value": "\"top-end\"" }, { "value": "\"bottom\"" }, { "value": "\"bottom-start\"" }, { "value": "\"bottom-end\"" } ] } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the info dialog is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "onDialogShow": { "defaultValue": null, "description": "Callback fired when the info dialog is shown.", "name": "onDialogShow", "required": false, "type": { "name": "() => void" } }, "onDialogHide": { "defaultValue": null, "description": "Callback fired when the info dialog is hidden.", "name": "onDialogHide", "required": false, "type": { "name": "() => void" } }, "dialogClassName": { "defaultValue": null, "description": "Class name applied to the dialog content.", "name": "dialogClassName", "required": false, "type": { "name": "string" } }, "containerSelector": { "defaultValue": null, "description": "The CSS selector of the container where the dialog is rendered.", "name": "containerSelector", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for the info button.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "hideButtonTooltip": { "defaultValue": null, "description": "If true, the tooltip for the info button is hidden.", "name": "hideButtonTooltip", "required": false, "type": { "name": "boolean" } } }, "import": "import { Info } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Label/Label.tsx", "aggregator": "core", "symbols": [ "default as Label", "type LabelProps", "LabelSizes", "LabelKind", "ContentColor", "LabelColor" ], "displayName": "Label", "description": "", "props": { "labelClassName": { "defaultValue": null, "description": "Class name applied to the inner text wrapper.", "name": "labelClassName", "required": false, "type": { "name": "string" } }, "kind": { "defaultValue": { "value": "fill" }, "description": "The visual style of the label.", "name": "kind", "required": false, "type": { "name": "enum", "raw": "LabelKind", "value": [ { "value": "\"fill\"" }, { "value": "\"line\"" } ] } }, "color": { "defaultValue": { "value": "primary" }, "description": "The background color of the label.", "name": "color", "required": false, "type": { "name": "enum", "raw": "LabelColor", "value": [ { "value": "\"primary\"" }, { "value": "\"dark\"" }, { "value": "\"negative\"" }, { "value": "\"positive\"" }, { "value": "\"grass_green\"" }, { "value": "\"done-green\"" }, { "value": "\"bright-green\"" }, { "value": "\"saladish\"" }, { "value": "\"egg_yolk\"" }, { "value": "\"working_orange\"" }, { "value": "\"dark-orange\"" }, { "value": "\"peach\"" }, { "value": "\"sunset\"" }, { "value": "\"stuck-red\"" }, { "value": "\"dark-red\"" }, { "value": "\"sofia_pink\"" }, { "value": "\"lipstick\"" }, { "value": "\"bubble\"" }, { "value": "\"purple\"" }, { "value": "\"dark_purple\"" }, { "value": "\"berry\"" }, { "value": "\"dark_indigo\"" }, { "value": "\"indigo\"" }, { "value": "\"navy\"" }, { "value": "\"bright-blue\"" }, { "value": "\"dark-blue\"" }, { "value": "\"aquamarine\"" }, { "value": "\"chili-blue\"" }, { "value": "\"river\"" }, { "value": "\"winter\"" }, { "value": "\"explosive\"" }, { "value": "\"american_gray\"" }, { "value": "\"blackish\"" }, { "value": "\"brown\"" }, { "value": "\"orchid\"" }, { "value": "\"tan\"" }, { "value": "\"sky\"" }, { "value": "\"coffee\"" }, { "value": "\"royal\"" }, { "value": "\"teal\"" }, { "value": "\"lavender\"" }, { "value": "\"steel\"" }, { "value": "\"lilac\"" }, { "value": "\"pecan\"" } ] } }, "text": { "defaultValue": { "value": "" }, "description": "The text content of the label.", "name": "text", "required": false, "type": { "name": "string" } }, "isLegIncluded": { "defaultValue": { "value": "false" }, "description": "If true, includes a leg (decorative extension).", "name": "isLegIncluded", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the label is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "celebrationAnimation": { "defaultValue": null, "description": "If true, triggers a celebration animation.", "name": "celebrationAnimation", "required": false, "type": { "name": "boolean" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The size of the label.", "name": "size", "required": false, "type": { "name": "enum", "raw": "LabelSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Label } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/LayerProvider/LayerProvider.tsx", "aggregator": "core", "symbols": [ "default as LayerProvider", "type LayerProviderType" ], "displayName": "LayerProvider", "description": "", "props": { "children": { "defaultValue": null, "description": "The child elements.", "name": "children", "required": true, "type": { "name": "ReactNode | ReactNode[]" } }, "layerRef": { "defaultValue": null, "description": "A reference to the layer container element.", "name": "layerRef", "required": true, "type": { "name": "RefObject" } } }, "import": "import { LayerProvider } from \"@vibe/layer\"", "subComponents": [] }, { "filePath": "src/components/Link/Link.tsx", "aggregator": "core", "symbols": [ "default as Link", "type LinkProps", "LinkTarget", "LinkIconPosition", "LinkColor" ], "displayName": "Link", "description": "", "props": { "textClassName": { "defaultValue": null, "description": "Class name applied to the link text.", "name": "textClassName", "required": false, "type": { "name": "string" } }, "href": { "defaultValue": { "value": "" }, "description": "The URL the link points to.", "name": "href", "required": false, "type": { "name": "string" } }, "text": { "defaultValue": { "value": "" }, "description": "The text content of the link.", "name": "text", "required": false, "type": { "name": "string" } }, "rel": { "defaultValue": { "value": "noreferrer" }, "description": "Specifies the relationship between the current document and the linked resource.", "name": "rel", "required": false, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the link is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "target": { "defaultValue": { "value": "_blank" }, "description": "Specifies where to open the linked document.", "name": "target", "required": false, "type": { "name": "enum", "raw": "LinkTarget", "value": [ { "value": "\"_blank\"" }, { "value": "\"_self\"" }, { "value": "\"_parent\"" }, { "value": "\"_top\"" } ] } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "The ID of the element that describes this link.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element labeling this link.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "icon": { "defaultValue": { "value": "" }, "description": "Icon displayed next to the link text.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "iconPosition": { "defaultValue": { "value": "start" }, "description": "The position of the icon relative to the text.", "name": "iconPosition", "required": false, "type": { "name": "enum", "raw": "LinkIconPosition", "value": [ { "value": "\"start\"" }, { "value": "\"end\"" } ] } }, "disableNavigation": { "defaultValue": { "value": "false" }, "description": "If true, disables navigation when the link is clicked.", "name": "disableNavigation", "required": false, "type": { "name": "boolean" } }, "inheritFontSize": { "defaultValue": { "value": "false" }, "description": "If true, the link inherits the surrounding text's font size.", "name": "inheritFontSize", "required": false, "type": { "name": "boolean" } }, "inlineText": { "defaultValue": { "value": "false" }, "description": "If true, the link is styled to fit within inline text content.", "name": "inlineText", "required": false, "type": { "name": "boolean" } }, "color": { "defaultValue": { "value": "primary" }, "description": "The link's color style", "name": "color", "required": false, "type": { "name": "enum", "raw": "LinkColor", "value": [ { "value": "\"primary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"onInverted\"" } ] } }, "style": { "defaultValue": null, "description": "Inline style object applied to the link element.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": { "value": "" }, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Link } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/List/List.tsx", "aggregator": "core", "symbols": [ "default as List", "type ListProps", "ListElement" ], "displayName": "List", "description": "", "props": { "component": { "defaultValue": { "value": "ul" }, "description": "The wrapping component for the list.", "name": "component", "required": false, "type": { "name": "enum", "raw": "ListElement", "value": [ { "value": "\"div\"" }, { "value": "\"nav\"" }, { "value": "\"ul\"" }, { "value": "\"ol\"" } ] } }, "aria-label": { "defaultValue": null, "description": "The ARIA label describing the list.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "The ID of an element that describes the list.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-controls": { "defaultValue": null, "description": "The ID of an element controlled by the list.", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The child elements inside the list.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } }, "renderOnlyVisibleItems": { "defaultValue": { "value": "false" }, "description": "If true, uses a virtualized list to render only visible items for performance optimization.", "name": "renderOnlyVisibleItems", "required": false, "type": { "name": "boolean" } }, "style": { "defaultValue": null, "description": "Custom inline styles applied to the list.", "name": "style", "required": false, "type": { "name": "CSSProperties" } }, "role": { "defaultValue": { "value": "listbox" }, "description": "The ARIA role of the list.", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { List } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ListItem/ListItem.tsx", "aggregator": "core", "symbols": [ "default as ListItem", "type ListItemProps", "ListItemElement", "ListItemSize" ], "displayName": "ListItem", "description": "", "props": { "component": { "defaultValue": { "value": "div" }, "description": "The HTML element used for the list item.", "name": "component", "required": false, "type": { "name": "enum", "raw": "ListItemElement", "value": [ { "value": "\"div\"" }, { "value": "\"li\"" }, { "value": "\"a\"" } ] } }, "children": { "defaultValue": null, "description": "The textual content inside the list item.", "name": "children", "required": false, "type": { "name": "ElementContent" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the item is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any, id: string) => void" } }, "onHover": { "defaultValue": null, "description": "Callback fired when the item is hovered.", "name": "onHover", "required": false, "type": { "name": "(event: any, id: string) => void" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, disables the item and prevents interactions.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "selected": { "defaultValue": null, "description": "If true, marks the item as selected.", "name": "selected", "required": false, "type": { "name": "boolean" } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the list item.", "name": "size", "required": false, "type": { "name": "enum", "raw": "ListItemSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "tabIndex": { "defaultValue": { "value": "0" }, "description": "The tab index of the list item for keyboard navigation.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "aria-current": { "defaultValue": null, "description": "Indicates the current state of the item in a set of items.", "name": "aria-current", "required": false, "type": { "name": "boolean | \"false\" | \"true\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"" } }, "role": { "defaultValue": { "value": "option" }, "description": "The ARIA role of the list item.", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "tooltipProps": { "defaultValue": null, "description": "Props passed to the tooltip displayed when hovering over the text.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ListItem } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ListItemAvatar/ListItemAvatar.tsx", "aggregator": "core", "symbols": [ "default as ListItemAvatar", "type ListItemAvatarProps" ], "displayName": "ListItemAvatar", "description": "", "props": { "component": { "defaultValue": null, "description": "The HTML element used for the list item avatar.", "name": "component", "required": false, "type": { "name": "enum", "raw": "ListItemElement", "value": [ { "value": "\"div\"" }, { "value": "\"li\"" }, { "value": "\"a\"" } ] } }, "src": { "defaultValue": null, "description": "The source URL of the avatar image.", "name": "src", "required": false, "type": { "name": "string" } }, "avatarClassName": { "defaultValue": null, "description": "Class name applied to the avatar.", "name": "avatarClassName", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ListItemAvatar } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ListItemIcon/ListItemIcon.tsx", "aggregator": "core", "symbols": [ "default as ListItemIcon", "type ListItemIconProps", "ListItemIconMargin" ], "displayName": "ListItemIcon", "description": "", "props": { "component": { "defaultValue": null, "description": "The HTML element used for the list item icon.", "name": "component", "required": false, "type": { "name": "enum", "raw": "ListItemElement", "value": [ { "value": "\"div\"" }, { "value": "\"li\"" }, { "value": "\"a\"" } ] } }, "icon": { "defaultValue": null, "description": "The icon displayed inside the list item.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "margin": { "defaultValue": { "value": "start" }, "description": "The position of the icon inside the list item, determining its margins.", "name": "margin", "required": false, "type": { "name": "enum", "raw": "ListItemIconMargin", "value": [ { "value": "\"start\"" }, { "value": "\"end\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ListItemIcon } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Loader/Loader.tsx", "aggregator": "core", "symbols": [ "default as Loader", "type LoaderProps", "LoaderColors", "LoaderSizes", "LoaderSize" ], "displayName": "Loader", "description": "", "props": { "size": { "defaultValue": null, "description": "The size of the loader, either a predefined size or a custom number.", "name": "size", "required": false, "type": { "name": "LoaderSize" } }, "color": { "defaultValue": null, "description": "The color of the loader.", "name": "color", "required": false, "type": { "name": "enum", "raw": "LoaderColors", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"dark\"" } ] } }, "hasBackground": { "defaultValue": { "value": "false" }, "description": "If true, a background circle is displayed behind the loader.", "name": "hasBackground", "required": false, "type": { "name": "boolean" } }, "wrapperClassName": { "defaultValue": null, "description": "Class name applied to the wrapper element.", "name": "wrapperClassName", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Loader } from \"@vibe/loader\"", "subComponents": [] }, { "filePath": "src/components/Menu/Menu/Menu.tsx", "aggregator": "core", "symbols": [ "default as Menu", "type MenuProps" ], "displayName": "Menu", "description": "", "props": { "size": { "defaultValue": { "value": "medium" }, "description": "Size of the menu.", "name": "size", "required": false, "type": { "name": "enum", "raw": "\"xxs\" | \"xs\" | \"small\" | \"medium\" | \"large\"", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "tabIndex": { "defaultValue": { "value": "0" }, "description": "The tab index of the menu.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "aria-label": { "defaultValue": null, "description": "ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "ARIA description ID.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "focusOnMount": { "defaultValue": { "value": "false" }, "description": "If true, the menu will automatically focus on mount.", "name": "focusOnMount", "required": false, "type": { "name": "boolean" } }, "onItemFocus": { "defaultValue": null, "description": "Callback when a menu item gains focus.", "name": "onItemFocus", "required": false, "type": { "name": "(index: number) => void" } }, "isVisible": { "defaultValue": { "value": "true" }, "description": "Controls the visibility of the menu.", "name": "isVisible", "required": false, "type": { "name": "boolean" } }, "onClose": { "defaultValue": null, "description": "Callback triggered when the menu closes.", "name": "onClose", "required": false, "type": { "name": "(option: CloseMenuOption) => void" } }, "focusItemIndex": { "defaultValue": { "value": "-1" }, "description": "Index of the focused menu item.", "name": "focusItemIndex", "required": false, "type": { "name": "number" } }, "isSubMenu": { "defaultValue": { "value": "false" }, "description": "If true, this menu is a submenu.", "name": "isSubMenu", "required": false, "type": { "name": "boolean" } }, "useDocumentEventListeners": { "defaultValue": { "value": "false" }, "description": "If true, event listeners will be attached to the document.", "name": "useDocumentEventListeners", "required": false, "type": { "name": "boolean" } }, "focusItemIndexOnMount": { "defaultValue": { "value": "-1" }, "description": "Index of the item that should be focused when the menu mounts.", "name": "focusItemIndexOnMount", "required": false, "type": { "name": "number" } }, "shouldScrollMenu": { "defaultValue": { "value": "false" }, "description": "If true, enables scrolling within the menu.", "name": "shouldScrollMenu", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The menu items.", "name": "children", "required": false, "type": { "name": "ElementContent" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Menu } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Menu/MenuItem/MenuItem.tsx", "aggregator": "core", "symbols": [ "default as MenuItem", "type MenuItemProps" ], "displayName": "MenuItem", "description": "", "props": { "title": { "defaultValue": { "value": "" }, "description": "The title of the menu item.", "name": "title", "required": false, "type": { "name": "string | ReactElement>" } }, "label": { "defaultValue": { "value": "" }, "description": "The label displayed alongside the title.", "name": "label", "required": false, "type": { "name": "any" } }, "icon": { "defaultValue": { "value": "" }, "description": "The icon displayed in the menu item.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "iconType": { "defaultValue": null, "description": "The type of icon.", "name": "iconType", "required": false, "type": { "name": "enum", "raw": "IconType", "value": [ { "value": "\"svg\"" }, { "value": "\"font\"" }, { "value": "\"src\"" } ] } }, "iconBackgroundColor": { "defaultValue": null, "description": "The background color of the icon.", "name": "iconBackgroundColor", "required": false, "type": { "name": "string" } }, "rightIcon": { "defaultValue": { "value": "" }, "description": "The right icon to be displayed.", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "rightIconType": { "defaultValue": null, "description": "The type of right icon.", "name": "rightIconType", "required": false, "type": { "name": "enum", "raw": "IconType", "value": [ { "value": "\"svg\"" }, { "value": "\"font\"" }, { "value": "\"src\"" } ] } }, "rightIconBackgroundColor": { "defaultValue": null, "description": "The background color of the right icon.", "name": "rightIconBackgroundColor", "required": false, "type": { "name": "string" } }, "rightIconWrapperClassName": { "defaultValue": null, "description": "Class name applied to the icon wrapper.", "name": "rightIconWrapperClassName", "required": false, "type": { "name": "string" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the menu item is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "disableReason": { "defaultValue": null, "description": "The reason for disabling the item, shown in a tooltip.", "name": "disableReason", "required": false, "type": { "name": "string" } }, "selected": { "defaultValue": { "value": "false" }, "description": "If true, the menu item is selected.", "name": "selected", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the menu item is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any) => void" } }, "activeItemIndex": { "defaultValue": null, "description": "The active item index in the menu.", "name": "activeItemIndex", "required": false, "type": { "name": "number" } }, "setActiveItemIndex": { "defaultValue": null, "description": "Callback to set the active item index.", "name": "setActiveItemIndex", "required": false, "type": { "name": "(index: number) => void" } }, "index": { "defaultValue": null, "description": "The index of the menu item.", "name": "index", "required": false, "type": { "name": "number" } }, "key": { "defaultValue": null, "description": "The key of the menu item.", "name": "key", "required": false, "type": { "name": "string" } }, "isParentMenuVisible": { "defaultValue": null, "description": "If true, the parent menu is visible.", "name": "isParentMenuVisible", "required": false, "type": { "name": "boolean" } }, "resetOpenSubMenuIndex": { "defaultValue": null, "description": "Callback to reset the open submenu index.", "name": "resetOpenSubMenuIndex", "required": false, "type": { "name": "() => void" } }, "hasOpenSubMenu": { "defaultValue": null, "description": "If true, a submenu is open.", "name": "hasOpenSubMenu", "required": false, "type": { "name": "boolean" } }, "setSubMenuIsOpenByIndex": { "defaultValue": null, "description": "Callback to open or close a submenu by index.", "name": "setSubMenuIsOpenByIndex", "required": false, "type": { "name": "(index: number, isOpen: boolean) => void" } }, "useDocumentEventListeners": { "defaultValue": null, "description": "If true, document event listeners are used for handling interactions.", "name": "useDocumentEventListeners", "required": false, "type": { "name": "boolean" } }, "tooltipContent": { "defaultValue": null, "description": "The tooltip content for the menu item.", "name": "tooltipContent", "required": false, "type": { "name": "string" } }, "tooltipPosition": { "defaultValue": { "value": "right" }, "description": "The position of the tooltip.", "name": "tooltipPosition", "required": false, "type": { "name": "enum", "raw": "TooltipPositions", "value": [ { "value": "\"top\"" }, { "value": "\"right\"" }, { "value": "\"bottom\"" }, { "value": "\"left\"" } ] } }, "tooltipShowDelay": { "defaultValue": { "value": "300" }, "description": "The delay in milliseconds before the tooltip shows.", "name": "tooltipShowDelay", "required": false, "type": { "name": "number" } }, "tooltipProps": { "defaultValue": null, "description": "Additional props for customizing the tooltip.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "onMouseLeave": { "defaultValue": null, "description": "Callback fired when the mouse leaves the item.", "name": "onMouseLeave", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseEnter": { "defaultValue": null, "description": "Callback fired when the mouse enters the item.", "name": "onMouseEnter", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "iconWrapperClassName": { "defaultValue": null, "description": "Class name applied to the icon wrapper.", "name": "iconWrapperClassName", "required": false, "type": { "name": "string" } }, "isInitialSelectedState": { "defaultValue": null, "description": "If true, the menu item starts as selected.", "name": "isInitialSelectedState", "required": false, "type": { "name": "boolean" } }, "shouldScrollMenu": { "defaultValue": null, "description": "If true, the menu scrolls to ensure visibility.", "name": "shouldScrollMenu", "required": false, "type": { "name": "boolean" } }, "closeMenu": { "defaultValue": null, "description": "Function to close the menu with a given option.", "name": "closeMenu", "required": false, "type": { "name": "(option: CloseMenuOption) => void" } }, "menuRef": { "defaultValue": null, "description": "Reference to the menu container.", "name": "menuRef", "required": false, "type": { "name": "any" } }, "children": { "defaultValue": null, "description": "The submenu, if applicable. Must be a single `Menu` element.", "name": "children", "required": false, "type": { "name": "MenuChild" } }, "splitMenuItem": { "defaultValue": null, "description": "If true, enables a split menu item interaction where the main area triggers an action,\nwhile the icon button opens the submenu.", "name": "splitMenuItem", "required": false, "type": { "name": "boolean" } }, "aria-label": { "defaultValue": null, "description": "The label of the menu item for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "submenuPosition": { "defaultValue": null, "description": "The position of a submenu relative to the menu item.", "name": "submenuPosition", "required": false, "type": { "name": "enum", "raw": "SubmenuPosition", "value": [ { "value": "\"right\"" }, { "value": "\"left\"" } ] } }, "autoAdjustOnSubMenuContentResize": { "defaultValue": null, "description": "If true, automatically repositions the submenu when its content changes.", "name": "autoAdjustOnSubMenuContentResize", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MenuItem } from \"@vibe/core\"", "parentComponent": "Menu", "subComponents": [] }, { "filePath": "src/components/Menu/MenuItemButton/MenuItemButton.tsx", "aggregator": "core", "symbols": [ "default as MenuItemButton", "type MenuItemButtonProps" ], "displayName": "MenuItemButton", "description": "", "props": { "kind": { "defaultValue": { "value": "primary" }, "description": "The style variant of the button.", "name": "kind", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "leftIcon": { "defaultValue": { "value": "null" }, "description": "Icon displayed on the left side of the button.", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "rightIcon": { "defaultValue": { "value": "null" }, "description": "Icon displayed on the right side of the button.", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "index": { "defaultValue": null, "description": "The index of the menu item in the menu.", "name": "index", "required": false, "type": { "name": "number" } }, "activeItemIndex": { "defaultValue": { "value": "-1" }, "description": "The index of the currently active menu item.", "name": "activeItemIndex", "required": false, "type": { "name": "number" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the button is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "disableReason": { "defaultValue": null, "description": "The reason why the button is disabled, displayed as a tooltip.", "name": "disableReason", "required": false, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the button is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any) => void" } }, "tooltipPosition": { "defaultValue": { "value": "right" }, "description": "The position of the tooltip.", "name": "tooltipPosition", "required": false, "type": { "name": "enum", "raw": "TooltipPositions", "value": [ { "value": "\"top\"" }, { "value": "\"right\"" }, { "value": "\"bottom\"" }, { "value": "\"left\"" } ] } }, "tooltipShowDelay": { "defaultValue": { "value": "300" }, "description": "The delay in milliseconds before the tooltip appears.", "name": "tooltipShowDelay", "required": false, "type": { "name": "number" } }, "resetOpenSubMenuIndex": { "defaultValue": null, "description": "Callback to reset the open submenu index.", "name": "resetOpenSubMenuIndex", "required": false, "type": { "name": "() => void" } }, "setSubMenuIsOpenByIndex": { "defaultValue": null, "description": "Callback to open or close a submenu by index.", "name": "setSubMenuIsOpenByIndex", "required": false, "type": { "name": "(index: number, isOpen: boolean) => void" } }, "setActiveItemIndex": { "defaultValue": null, "description": "Callback to set the active item index.", "name": "setActiveItemIndex", "required": false, "type": { "name": "(index: number) => void" } }, "menuRef": { "defaultValue": null, "description": "Reference to the menu container.", "name": "menuRef", "required": false, "type": { "name": "React.RefObject" } }, "closeMenu": { "defaultValue": null, "description": "Function to close the menu.", "name": "closeMenu", "required": false, "type": { "name": "() => void" } }, "useDocumentEventListeners": { "defaultValue": null, "description": "If true, event listeners are added at the document level.", "name": "useDocumentEventListeners", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The content of the button.", "name": "children", "required": false, "type": { "name": "ElementContent | ElementContent[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MenuItemButton } from \"@vibe/core\"", "parentComponent": "Menu", "subComponents": [] }, { "filePath": "src/components/Menu/MenuDivider/MenuDivider.tsx", "aggregator": "core", "symbols": [ "default as MenuDivider", "type MenuDividerProps" ], "displayName": "MenuDivider", "description": "", "props": { "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MenuDivider } from \"@vibe/core\"", "parentComponent": "Menu", "subComponents": [] }, { "filePath": "src/components/Menu/MenuTitle/MenuTitle.tsx", "aggregator": "core", "symbols": [ "default as MenuTitle", "type MenuTitleProps" ], "displayName": "MenuTitle", "description": "", "props": { "caption": { "defaultValue": { "value": "" }, "description": "The caption text displayed alongside the title.", "name": "caption", "required": false, "type": { "name": "any" } }, "captionPosition": { "defaultValue": { "value": "bottom" }, "description": "The position of the caption relative to the title.", "name": "captionPosition", "required": false, "type": { "name": "enum", "raw": "MenuTitleCaptionPosition", "value": [ { "value": "\"top\"" }, { "value": "\"bottom\"" }, { "value": "\"center\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MenuTitle } from \"@vibe/core\"", "parentComponent": "Menu", "subComponents": [ "MenuTitle.type" ] }, { "filePath": "src/components/Menu/MenuGridItem/MenuGridItem.tsx", "aggregator": "core", "symbols": [ "default as MenuGridItem", "type MenuGridItemProps" ], "displayName": "MenuGridItem", "description": "", "props": { "children": { "defaultValue": null, "description": "The content of the menu grid item.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, keyboard navigation will skip this item. This prop is also passed to the child.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "closeMenu": { "defaultValue": null, "description": "A callback function to close the wrapping menu.", "name": "closeMenu", "required": false, "type": { "name": "(option: CloseMenuOption) => void" } }, "activeItemIndex": { "defaultValue": { "value": "-1" }, "description": "The currently active index of the wrapping menu.", "name": "activeItemIndex", "required": false, "type": { "name": "number" } }, "setActiveItemIndex": { "defaultValue": null, "description": "Callback function to set the active item index.", "name": "setActiveItemIndex", "required": false, "type": { "name": "(index: number) => void" } }, "getNextSelectableIndex": { "defaultValue": null, "description": "Function to get the next selectable index.", "name": "getNextSelectableIndex", "required": false, "type": { "name": "(activeItemIndex: number) => number" } }, "getPreviousSelectableIndex": { "defaultValue": null, "description": "Function to get the previous selectable index.", "name": "getPreviousSelectableIndex", "required": false, "type": { "name": "(activeItemIndex: number) => number" } }, "index": { "defaultValue": null, "description": "The index of this menu grid item.", "name": "index", "required": false, "type": { "name": "number" } }, "isUnderSubMenu": { "defaultValue": { "value": "false" }, "description": "If true, this item is under a submenu instead of a top-level menu.", "name": "isUnderSubMenu", "required": false, "type": { "name": "boolean" } }, "setSubMenuIsOpenByIndex": { "defaultValue": null, "description": "Callback function to open or close a submenu by its index.", "name": "setSubMenuIsOpenByIndex", "required": false, "type": { "name": "(index: number, isOpen: boolean) => void" } }, "useDocumentEventListeners": { "defaultValue": { "value": "false" }, "description": "If true, event listeners will be attached to the document.", "name": "useDocumentEventListeners", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MenuGridItem } from \"@vibe/core\"", "parentComponent": "Menu", "subComponents": [] }, { "filePath": "src/components/MenuButton/MenuButton.tsx", "aggregator": "core", "symbols": [ "default as MenuButton", "type MenuButtonProps", "MenuButtonSize", "MenuButtonComponentPosition" ], "displayName": "MenuButton", "description": "", "props": { "active": { "defaultValue": null, "description": "If true, the button is in an active state.", "name": "active", "required": false, "type": { "name": "boolean" } }, "openDialogComponentClassName": { "defaultValue": null, "description": "Class name applied to the button when the dialog is open.", "name": "openDialogComponentClassName", "required": false, "type": { "name": "string" } }, "component": { "defaultValue": null, "description": "The component used as the button icon.", "name": "component", "required": false, "type": { "name": "any" } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the button.", "name": "size", "required": false, "type": { "name": "enum", "raw": "MenuButtonSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "open": { "defaultValue": { "value": "false" }, "description": "If true, the menu is open.", "name": "open", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the button is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "zIndex": { "defaultValue": { "value": "null" }, "description": "The z-index of the menu.", "name": "zIndex", "required": false, "type": { "name": "number" } }, "aria-label": { "defaultValue": null, "description": "The label of the button for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "dialogClassName": { "defaultValue": null, "description": "Class name applied to the menu dialog wrapper.", "name": "dialogClassName", "required": false, "type": { "name": "string" } }, "dialogOffset": { "defaultValue": { "value": "{ main: 8, secondary: 0 }" }, "description": "The offset of the menu relative to the button.", "name": "dialogOffset", "required": false, "type": { "name": "DialogOffset" } }, "dialogPaddingSize": { "defaultValue": { "value": "small" }, "description": "The padding size inside the menu dialog.", "name": "dialogPaddingSize", "required": false, "type": { "name": "enum", "raw": "DialogSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" }, { "value": "\"none\"" } ] } }, "dialogPosition": { "defaultValue": { "value": "bottom-start" }, "description": "The position of the menu dialog relative to the button.", "name": "dialogPosition", "required": false, "type": { "name": "enum", "raw": "DialogPosition", "value": [ { "value": "\"left\"" }, { "value": "\"left-start\"" }, { "value": "\"left-end\"" }, { "value": "\"right\"" }, { "value": "\"right-start\"" }, { "value": "\"right-end\"" }, { "value": "\"top\"" }, { "value": "\"top-start\"" }, { "value": "\"top-end\"" }, { "value": "\"bottom\"" }, { "value": "\"bottom-start\"" }, { "value": "\"bottom-end\"" } ] } }, "dialogShowTriggerIgnoreClass": { "defaultValue": null, "description": "Classes that prevent showing the dialog when present.", "name": "dialogShowTriggerIgnoreClass", "required": false, "type": { "name": "string | string[]" } }, "dialogHideTriggerIgnoreClass": { "defaultValue": null, "description": "Classes that prevent hiding the dialog when present.", "name": "dialogHideTriggerIgnoreClass", "required": false, "type": { "name": "string | string[]" } }, "dialogContainerSelector": { "defaultValue": null, "description": "The container selector in which to append the dialog.", "name": "dialogContainerSelector", "required": false, "type": { "name": "string" } }, "startingEdge": { "defaultValue": { "value": "bottom" }, "description": "The starting edge alignment of the menu.", "name": "startingEdge", "required": false, "type": { "name": "enum", "raw": "DialogStartingEdge", "value": [ { "value": "\"top\"" }, { "value": "\"bottom\"" } ] } }, "onMenuShow": { "defaultValue": null, "description": "Callback fired when the menu is shown.", "name": "onMenuShow", "required": false, "type": { "name": "() => void" } }, "onMenuHide": { "defaultValue": null, "description": "Callback fired when the menu is hidden.", "name": "onMenuHide", "required": false, "type": { "name": "() => void" } }, "text": { "defaultValue": null, "description": "The text displayed inside the button.", "name": "text", "required": false, "type": { "name": "string" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the button is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "tooltipContent": { "defaultValue": null, "description": "The tooltip content displayed when hovering over the button.", "name": "tooltipContent", "required": false, "type": { "name": "string" } }, "removeTabCloseTrigger": { "defaultValue": { "value": "false" }, "description": "If true, removes the tab key from the hide trigger.", "name": "removeTabCloseTrigger", "required": false, "type": { "name": "boolean" } }, "tooltipTriggers": { "defaultValue": { "value": "[\"mouseleave\"]" }, "description": "The triggers that cause the tooltip to show or hide.", "name": "tooltipTriggers", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "tooltipPosition": { "defaultValue": { "value": "right" }, "description": "The position of the tooltip.", "name": "tooltipPosition", "required": false, "type": { "name": "enum", "raw": "TooltipPositions", "value": [ { "value": "\"left\"" }, { "value": "\"right\"" }, { "value": "\"top\"" }, { "value": "\"bottom\"" } ] } }, "tooltipReferenceClassName": { "defaultValue": null, "description": "Class name applied to the tooltip reference wrapper.", "name": "tooltipReferenceClassName", "required": false, "type": { "name": "string" } }, "tooltipProps": { "defaultValue": null, "description": "Additional props for customizing the tooltip.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "hideWhenReferenceHidden": { "defaultValue": { "value": "true" }, "description": "If true, hides the menu and tooltip when the button is not visible.", "name": "hideWhenReferenceHidden", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The content inside the menu button.", "name": "children", "required": false, "type": { "name": "ElementContent" } }, "componentPosition": { "defaultValue": { "value": "start" }, "description": "The position of the component relative to the text.", "name": "componentPosition", "required": false, "type": { "name": "enum", "raw": "MenuButtonComponentPosition", "value": [ { "value": "\"start\"" }, { "value": "\"end\"" } ] } }, "triggerElement": { "defaultValue": null, "description": "The element used as the trigger for the menu.", "name": "triggerElement", "required": false, "type": { "name": "React.ElementType" } }, "closeMenuOnItemClick": { "defaultValue": null, "description": "If true, closes the menu when a menu item is clicked.", "name": "closeMenuOnItemClick", "required": false, "type": { "name": "boolean" } }, "showTooltipOnlyOnTriggerElement": { "defaultValue": null, "description": "If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.", "name": "showTooltipOnlyOnTriggerElement", "required": false, "type": { "name": "boolean" } }, "closeDialogOnContentClick": { "defaultValue": { "value": "false" }, "description": "If true, closes the menu when clicking inside the dialog.", "name": "closeDialogOnContentClick", "required": false, "type": { "name": "boolean" } }, "aria-controls": { "defaultValue": null, "description": "The ARIA control of the menu button for accessibility.", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MenuButton } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/NumberField/NumberField.tsx", "aggregator": "core", "symbols": [ "default as NumberField", "NumberFieldProps" ], "displayName": "NumberField", "description": "", "props": { "value": { "defaultValue": null, "description": "The current value of the number field.", "name": "value", "required": true, "type": { "name": "number" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the value changes.\n@param value - The new value.\n@param event - The event that triggered the change.", "name": "onChange", "required": true, "type": { "name": "(value: number, event: ChangeEvent | MouseEvent | KeyboardEvent) => void" } }, "required": { "defaultValue": null, "description": "If true, the input will be required.", "name": "required", "required": false, "type": { "name": "boolean" } }, "placeholder": { "defaultValue": null, "description": "The placeholder text to display when the input is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "error": { "defaultValue": null, "description": "If true, the input will be in an error state.", "name": "error", "required": false, "type": { "name": "boolean" } }, "success": { "defaultValue": null, "description": "If true, the input will be in a success state.", "name": "success", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": null, "description": "If true, the input will be disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "readOnly": { "defaultValue": null, "description": "If true, the input will be read-only.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "min": { "defaultValue": null, "description": "The minimum value allowed.", "name": "min", "required": false, "type": { "name": "number" } }, "max": { "defaultValue": null, "description": "The maximum value allowed.", "name": "max", "required": false, "type": { "name": "number" } }, "step": { "defaultValue": { "value": "1" }, "description": "The amount to increment or decrement the value by.", "name": "step", "required": false, "type": { "name": "number" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The size of the input.", "name": "size", "required": false, "type": { "name": "enum", "raw": "\"small\" | \"medium\" | \"large\"", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "leftIcon": { "defaultValue": null, "description": "An icon to display on the left side of the input.", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "label": { "defaultValue": null, "description": "The label for the input.", "name": "label", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "The id of the input.\nRequired when `label` or `infoText` is provided for accessibility reasons.\nThe id of the input.\nRequired when `infoText` or `label` is provided for accessibility reasons.\nThe id of the input.", "name": "id", "required": false, "type": { "name": "string" } }, "infoText": { "defaultValue": null, "description": "Informational text to display below the input.\nInformational text to display below the input.\nIf provided, an `id` is also required for accessibility.", "name": "infoText", "required": false, "type": { "name": "string" } }, "allowOutOfBounds": { "defaultValue": null, "description": "If false, the value will be clamped to the min/max values on change.\nIf true, the value can exceed the min/max values.\nCan be used alongside `onValidityChange` to handle the validity of the value.", "name": "allowOutOfBounds", "required": false, "type": { "name": "boolean" } }, "onValidityChange": { "defaultValue": null, "description": "Callback fired when the validity of the value changes (if it is within the min/max bounds).", "name": "onValidityChange", "required": false, "type": { "name": "(isValid: boolean) => void" } } }, "import": "import { NumberField } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Modal/footers/ModalFooter/ModalFooter.tsx", "aggregator": "core", "symbols": [ "default as ModalFooter", "type ModalFooterProps" ], "displayName": "ModalFooter", "description": "", "props": { "renderSideAction": { "defaultValue": null, "description": "Content displayed on the left side of the footer.", "name": "renderSideAction", "required": false, "type": { "name": "React.ReactNode" } }, "primaryButton": { "defaultValue": null, "description": "Props for the primary action button.", "name": "primaryButton", "required": true, "type": { "name": "ModalFooterActionProps" } }, "secondaryButton": { "defaultValue": null, "description": "Props for the optional secondary action button.", "name": "secondaryButton", "required": false, "type": { "name": "ModalFooterActionProps" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalFooter } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx", "aggregator": "core", "symbols": [ "default as ModalFooterWizard", "type ModalFooterWizardProps" ], "displayName": "ModalFooterWizard", "description": "", "props": { "stepCount": { "defaultValue": null, "description": "The total number of steps in the wizard.\nRenders the corresponding number of step indicators (\"dots\") in the footer.", "name": "stepCount", "required": true, "type": { "name": "number" } }, "activeStep": { "defaultValue": null, "description": "The current active step (0-based index).\nHighlights the corresponding step indicator (\"dot\") in the footer.", "name": "activeStep", "required": true, "type": { "name": "number" } }, "onStepClick": { "defaultValue": null, "description": "Callback fired when a step indicator (\"dot\") is clicked.", "name": "onStepClick", "required": true, "type": { "name": "(stepIndex: number) => void" } }, "primaryButton": { "defaultValue": null, "description": "Props for the primary action button.", "name": "primaryButton", "required": true, "type": { "name": "ModalFooterActionProps" } }, "secondaryButton": { "defaultValue": null, "description": "Props for the optional secondary action button.", "name": "secondaryButton", "required": false, "type": { "name": "ModalFooterActionProps" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalFooterWizard } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx", "aggregator": "core", "symbols": [ "default as ModalBasicLayout", "type ModalBasicLayoutProps" ], "displayName": "ModalBasicLayout", "description": "", "props": { "children": { "defaultValue": null, "description": "The content of the layout, structured as:\n1. Header content\n2. Main content", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalBasicLayout } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx", "aggregator": "core", "symbols": [ "default as ModalMediaLayout", "type ModalMediaLayoutProps" ], "displayName": "ModalMediaLayout", "description": "", "props": { "children": { "defaultValue": null, "description": "The content of the layout, structured as:\n1. Media content\n2. Header content\n3. Main content", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalMediaLayout } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx", "aggregator": "core", "symbols": [ "default as ModalSideBySideLayout", "type ModalSideBySideLayoutProps" ], "displayName": "ModalSideBySideLayout", "description": "", "props": { "children": { "defaultValue": null, "description": "The content of the layout, structured as:\n1. Header content\n2. Main content\n3. Media content", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalSideBySideLayout } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Modal/Modal/Modal.tsx", "aggregator": "core", "symbols": [ "default as Modal" ], "displayName": "Modal", "description": "", "props": { "id": { "defaultValue": null, "description": "Unique identifier for the modal.", "name": "id", "required": true, "type": { "name": "string" } }, "show": { "defaultValue": null, "description": "Controls the visibility of the modal.", "name": "show", "required": true, "type": { "name": "boolean" } }, "size": { "defaultValue": { "value": "medium" }, "description": "Determines the width and max-height of the modal.", "name": "size", "required": false, "type": { "name": "enum", "raw": "ModalSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" }, { "value": "\"full-view\"" } ] } }, "closeButtonTheme": { "defaultValue": null, "description": "Theme color for the close button.", "name": "closeButtonTheme", "required": false, "type": { "name": "enum", "raw": "ModalTopActionsTheme", "value": [ { "value": "\"light\"" }, { "value": "\"dark\"" } ] } }, "closeButtonAriaLabel": { "defaultValue": null, "description": "Accessibility label for the close button.", "name": "closeButtonAriaLabel", "required": false, "type": { "name": "string" } }, "onClose": { "defaultValue": { "value": "() => {}" }, "description": "Callback fired when the modal should close.", "name": "onClose", "required": false, "type": { "name": "(event: any) => void" } }, "autoFocus": { "defaultValue": { "value": "true" }, "description": "This is intended for advanced use-cases.\nIt allows you to control the default focus behavior when the modal mounts.\nMake sure to use this prop only when you understand the implications.\n\nDetermines if focus should automatically move to the first focusable element when the component mounts.\nWhen set to `false` - disables the automatic focus behavior.\n- Notice this might break keyboard and general accessibility and should be used with caution.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "allowFocusEscapeTo": { "defaultValue": null, "description": "Specifies elements/containers that should be allowed to receive focus outside this modal.\nWhen focus moves to these elements, the focus lock will ignore them.\nThis allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.\n\nAccepts:\n- CSS selectors (string)\n- Refs to elements (React.RefObject)\n- Direct element references (HTMLElement)", "name": "allowFocusEscapeTo", "required": false, "type": { "name": "any[]" } }, "onFocusAttempt": { "defaultValue": null, "description": "This is intended for advanced use-cases.\nIt allows you to control which elements the focus lock should manage.\nMake sure to use this prop only when you understand the implications.\n\n**Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.\n\nCalled whenever focus is attempting to move to any element (inside or outside the modal).\nReturn:\n- `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).\n- `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).\n- An HTMLElement to redirect focus to that element instead.\n- Any other value (e.g., null, undefined) would act as `false`.\n@example // Complex custom logic\n {\n if (el?.dataset.customBehavior) return false;\n return true;\n }}\n/>", "name": "onFocusAttempt", "required": false, "type": { "name": "(nextFocusedElement?: HTMLElement) => boolean | HTMLElement" } }, "renderHeaderAction": { "defaultValue": null, "description": "Additional action to render in the header area.", "name": "renderHeaderAction", "required": false, "type": { "name": "any" } }, "anchorElementRef": { "defaultValue": null, "description": "Reference to an element that triggered the modal, used for animations.", "name": "anchorElementRef", "required": false, "type": { "name": "React.RefObject" } }, "alertModal": { "defaultValue": null, "description": "When true, prevents closing the modal when clicking the overlay (\"click-outside\") or pressing ESC.", "name": "alertModal", "required": false, "type": { "name": "boolean" } }, "container": { "defaultValue": { "value": "document.body" }, "description": "The target element to render the modal into.", "name": "container", "required": false, "type": { "name": "any" } }, "children": { "defaultValue": null, "description": "Modal content.", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "style": { "defaultValue": null, "description": "Additional inline styles for the modal.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "zIndex": { "defaultValue": null, "description": "The z-index to be used for the modal and overlay.", "name": "zIndex", "required": false, "type": { "name": "number" } }, "aria-labelledby": { "defaultValue": null, "description": "If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } } }, "import": "import { Modal } from \"@vibe/core\"", "subComponents": [ "Modal.types" ] }, { "filePath": "src/components/Modal/ModalHeader/ModalHeader.tsx", "aggregator": "core", "symbols": [ "default as ModalHeader", "type ModalHeaderProps" ], "displayName": "ModalHeader", "description": "", "props": { "title": { "defaultValue": null, "description": "Main heading text of the modal.\n\n- If you pass a **string**, `ModalHeader` will generate an internal ID and communicate it to the parent `Modal`\n so that `aria-labelledby` is set automatically (unless `Modal` receives `aria-labelledby` prop).\n- If you pass a **ReactNode** (such as a custom component), **you must**:\n 1. Assign an **`id`** to that element (or a nested element), and\n 2. Pass that **same `id`** as the `aria-labelledby` prop to the `Modal`.\n\nThis ensures that assistive technologies know which element is the modal's title.\n@see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)", "name": "title", "required": true, "type": { "name": "any" } }, "description": { "defaultValue": null, "description": "Descriptive text or content below the title.\n- If you pass a **string**, this will automatically set an internally generated `aria-describedby` on the parent Modal.\n- If you pass a **ReactNode** (e.g., a complex component), we recommend assigning an **`id`** to that component (or a nested element),\n and then pass that same ID in `aria-describedby` to the **Modal** (overriding the internal ID).\n\nThis ensures that assistive technologies know which element is the modal's descriptive content.\n@see [WAI-ARIA Authoring Practices for Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/#wai-ariaroles,states,andproperties)", "name": "description", "required": false, "type": { "name": "any" } }, "descriptionIcon": { "defaultValue": null, "description": "Icon to display before the description. Can only be passed when description is supplied.", "name": "descriptionIcon", "required": false, "type": { "name": "SubIcon | { name: SubIcon; className?: string; }" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalHeader } from \"@vibe/core\"", "parentComponent": "Modal", "subComponents": [] }, { "filePath": "src/components/Modal/ModalContent/ModalContent.tsx", "aggregator": "core", "symbols": [ "default as ModalContent", "type ModalContentProps" ], "displayName": "ModalContent", "description": "", "props": { "children": { "defaultValue": null, "description": "The main content of the modal.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalContent } from \"@vibe/core\"", "parentComponent": "Modal", "subComponents": [] }, { "filePath": "src/components/Modal/ModalMedia/ModalMedia.tsx", "aggregator": "core", "symbols": [ "default as ModalMedia", "type ModalMediaProps" ], "displayName": "ModalMedia", "description": "", "props": { "children": { "defaultValue": null, "description": "The media content displayed in the modal.", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ModalMedia } from \"@vibe/core\"", "parentComponent": "Modal", "subComponents": [] }, { "filePath": "src/components/MultiStepIndicator/MultiStepIndicator.tsx", "aggregator": "core", "symbols": [ "default as MultiStepIndicator", "type MultiStepIndicatorProps" ], "displayName": "MultiStepIndicator", "description": "", "props": { "steps": { "defaultValue": { "value": "[]" }, "description": "The list of steps in the multi-step indicator.", "name": "steps", "required": false, "type": { "name": "Step[]" } }, "type": { "defaultValue": { "value": "primary" }, "description": "The visual style of the multi-step indicator.", "name": "type", "required": false, "type": { "name": "enum", "raw": "MultiStepType", "value": [ { "value": "\"primary\"" }, { "value": "\"success\"" }, { "value": "\"danger\"" }, { "value": "\"dark\"" } ] } }, "stepComponentClassName": { "defaultValue": null, "description": "Class name applied to each step component.", "name": "stepComponentClassName", "required": false, "type": { "name": "string" } }, "dividerComponentClassName": { "defaultValue": null, "description": "Class name applied to the divider between steps.", "name": "dividerComponentClassName", "required": false, "type": { "name": "string" } }, "fulfilledStepIcon": { "defaultValue": null, "description": "The icon used for fulfilled steps.", "name": "fulfilledStepIcon", "required": false, "type": { "name": "SubIcon" } }, "fulfilledStepIconType": { "defaultValue": { "value": "svg" }, "description": "The type of the fulfilled step icon.", "name": "fulfilledStepIconType", "required": false, "type": { "name": "enum", "raw": "\"svg\" | \"font\"", "value": [ { "value": "\"svg\"" }, { "value": "\"font\"" } ] } }, "isFulfilledStepDisplayNumber": { "defaultValue": { "value": "false" }, "description": "If true, displays the step number instead of the fulfilled step icon.", "name": "isFulfilledStepDisplayNumber", "required": false, "type": { "name": "boolean" } }, "onClick": { "defaultValue": null, "description": "Callback fired when a step is clicked.", "name": "onClick", "required": false, "type": { "name": "(stepNumber: number) => void" } }, "textPlacement": { "defaultValue": { "value": "horizontal" }, "description": "The placement of the step text.", "name": "textPlacement", "required": false, "type": { "name": "enum", "raw": "TextPlacement", "value": [ { "value": "\"horizontal\"" }, { "value": "\"vertical\"" } ] } }, "size": { "defaultValue": null, "description": "The size of the multi-step indicator.", "name": "size", "required": false, "type": { "name": "enum", "raw": "MultiStepSize", "value": [ { "value": "\"regular\"" }, { "value": "\"compact\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { MultiStepIndicator } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ProgressBars/ProgressBar/ProgressBar.tsx", "aggregator": "core", "symbols": [ "default as ProgressBar", "type ProgressBarProps", "ProgressBarStyle", "ProgressBarSize" ], "displayName": "ProgressBar", "description": "", "props": { "barStyle": { "defaultValue": { "value": "primary" }, "description": "Determines the visual style of the progress bar.", "name": "barStyle", "required": false, "type": { "name": "enum", "raw": "ProgressBarStyle", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"warning\"" }, { "value": "\"none\"" } ] } }, "min": { "defaultValue": { "value": "0" }, "description": "The minimum value of the progress bar.", "name": "min", "required": false, "type": { "name": "number" } }, "max": { "defaultValue": { "value": "100" }, "description": "The maximum value of the progress bar.", "name": "max", "required": false, "type": { "name": "number" } }, "value": { "defaultValue": { "value": "0" }, "description": "The current progress value.", "name": "value", "required": false, "type": { "name": "number" } }, "valueSecondary": { "defaultValue": { "value": "0" }, "description": "The secondary progress value.", "name": "valueSecondary", "required": false, "type": { "name": "number" } }, "animated": { "defaultValue": { "value": "true" }, "description": "If true, enables animation effects.", "name": "animated", "required": false, "type": { "name": "boolean" } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the progress bar.", "name": "size", "required": false, "type": { "name": "enum", "raw": "ProgressBarSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "indicateProgress": { "defaultValue": { "value": "false" }, "description": "If true, displays the progress percentage.", "name": "indicateProgress", "required": false, "type": { "name": "boolean" } }, "multi": { "defaultValue": { "value": "false" }, "description": "If true, enables multiple progress bars.\n**Note:** `value`, `valueSecondary`, and `barStyle` will not be used.", "name": "multi", "required": false, "type": { "name": "boolean" } }, "multiValues": { "defaultValue": { "value": "[]" }, "description": "An array of bar values and colors for multi-bar mode.", "name": "multiValues", "required": false, "type": { "name": "{ value?: number; color?: string; }[]" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for the progress bar.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "fullWidth": { "defaultValue": { "value": "false" }, "description": "If true, makes the progress bar span the full container width.", "name": "fullWidth", "required": false, "type": { "name": "boolean" } }, "allowExceedingMax": { "defaultValue": { "value": "false" }, "description": "If true, allows displaying percentage values higher than 100% when value exceeds max.", "name": "allowExceedingMax", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ProgressBar } from \"@vibe/core\"", "parentComponent": "ProgressBars", "subComponents": [] }, { "filePath": "src/components/RadioButton/RadioButton.tsx", "aggregator": "core", "symbols": [ "default as RadioButton", "type RadioButtonProps" ], "displayName": "RadioButton", "description": "", "props": { "labelClassName": { "defaultValue": null, "description": "Class name applied to the label text.", "name": "labelClassName", "required": false, "type": { "name": "string" } }, "radioButtonClassName": { "defaultValue": null, "description": "Class name applied to the radio button element.", "name": "radioButtonClassName", "required": false, "type": { "name": "string" } }, "text": { "defaultValue": { "value": "" }, "description": "The label text displayed next to the radio button.", "name": "text", "required": false, "type": { "name": "string" } }, "value": { "defaultValue": { "value": "" }, "description": "The value associated with the radio button.", "name": "value", "required": false, "type": { "name": "string" } }, "name": { "defaultValue": { "value": "" }, "description": "The name of the radio button group.", "name": "name", "required": false, "type": { "name": "string" } }, "autoFocus": { "defaultValue": null, "description": "If true, the radio button automatically receives focus on mount.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the radio button is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "disabledReason": { "defaultValue": null, "description": "The reason why the radio button is disabled, displayed in a tooltip.", "name": "disabledReason", "required": false, "type": { "name": "string" } }, "defaultChecked": { "defaultValue": { "value": "false" }, "description": "If true, the radio button is checked by default.", "name": "defaultChecked", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The child elements inside the radio button.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "onSelect": { "defaultValue": null, "description": "Callback fired when the radio button selection changes.", "name": "onSelect", "required": false, "type": { "name": "(event: React.ChangeEvent) => void" } }, "checked": { "defaultValue": null, "description": "If provided, controls the checked state of the radio button.", "name": "checked", "required": false, "type": { "name": "boolean" } }, "retainChildClick": { "defaultValue": { "value": "true" }, "description": "If true, clicking on children will trigger selection.", "name": "retainChildClick", "required": false, "type": { "name": "boolean" } }, "childrenTabIndex": { "defaultValue": { "value": "0" }, "description": "The tab index applied to the children.", "name": "childrenTabIndex", "required": false, "type": { "name": "number" } }, "noLabelAnimation": { "defaultValue": { "value": "false" }, "description": "If true, disables the label animation.", "name": "noLabelAnimation", "required": false, "type": { "name": "boolean" } }, "aria-label": { "defaultValue": null, "description": "ARIA label for accessibility when no text is provided.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "ID of element that describe this radio button.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { RadioButton } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Search/Search.tsx", "aggregator": "core", "symbols": [ "default as Search", "SearchProps" ], "displayName": "Search", "description": "", "props": { "searchIconName": { "defaultValue": null, "description": "The icon used for the search button.", "name": "searchIconName", "required": false, "type": { "name": "SubIcon" } }, "clearIconName": { "defaultValue": null, "description": "The icon used for the clear button.", "name": "clearIconName", "required": false, "type": { "name": "SubIcon" } }, "clearIconLabel": { "defaultValue": { "value": "Clear" }, "description": "The label for the clear button, for accessibility purposes.", "name": "clearIconLabel", "required": false, "type": { "name": "string" } }, "renderAction": { "defaultValue": null, "description": "Renders an additional action button in the search input.", "name": "renderAction", "required": false, "type": { "name": "React.ReactElement" } }, "hideRenderActionOnInput": { "defaultValue": null, "description": "If true, hides the additional action button when input has text.", "name": "hideRenderActionOnInput", "required": false, "type": { "name": "boolean" } }, "value": { "defaultValue": null, "description": "The current value of the search input.", "name": "value", "required": false, "type": { "name": "string" } }, "placeholder": { "defaultValue": null, "description": "The placeholder text displayed when the input is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The size of the search input, affecting padding and font size.", "name": "size", "required": false, "type": { "name": "enum", "raw": "InputSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "disabled": { "defaultValue": null, "description": "If true, disables the search input.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "loading": { "defaultValue": null, "description": "If true, displays a loading indicator inside the input.", "name": "loading", "required": false, "type": { "name": "boolean" } }, "autoFocus": { "defaultValue": null, "description": "If true, automatically focuses the search input on mount.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "autoComplete": { "defaultValue": { "value": "off" }, "description": "Configures the browser's autocomplete behavior.", "name": "autoComplete", "required": false, "type": { "name": "AutoFill" } }, "inputAriaLabel": { "defaultValue": null, "description": "The ARIA label for the search input.", "name": "inputAriaLabel", "required": false, "type": { "name": "React.AriaAttributes" } }, "aria-expanded": { "defaultValue": null, "description": "If true, indicates that a popup is open.", "name": "aria-expanded", "required": false, "type": { "name": "React.AriaAttributes" } }, "aria-haspopup": { "defaultValue": null, "description": "Specifies the type of popup associated with the search input.", "name": "aria-haspopup", "required": false, "type": { "name": "React.AriaAttributes" } }, "debounceRate": { "defaultValue": { "value": "400" }, "description": "The debounce rate for input value changes.", "name": "debounceRate", "required": false, "type": { "name": "number" } }, "searchResultsContainerId": { "defaultValue": null, "description": "The ID of the container where search results are displayed.", "name": "searchResultsContainerId", "required": false, "type": { "name": "string" } }, "currentAriaResultId": { "defaultValue": null, "description": "ARIA property indicating the currently active search result.", "name": "currentAriaResultId", "required": false, "type": { "name": "React.AriaAttributes" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the search input value changes.", "name": "onChange", "required": false, "type": { "name": "(value: string) => void" } }, "onBlur": { "defaultValue": null, "description": "Callback fired when the search input loses focus.", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onFocus": { "defaultValue": null, "description": "Callback fired when the search input gains focus.", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onClear": { "defaultValue": null, "description": "Callback fired when the clear button is clicked.", "name": "onClear", "required": false, "type": { "name": "() => void" } }, "onKeyDown": { "defaultValue": null, "description": "Callback fired when a key is pressed inside the input.", "name": "onKeyDown", "required": false, "type": { "name": "(event: React.KeyboardEvent) => void" } }, "showClearIcon": { "defaultValue": { "value": "true" }, "description": "If true, displays a clear button inside the search input.", "name": "showClearIcon", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Search } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Skeleton/Skeleton.tsx", "aggregator": "core", "symbols": [ "default as Skeleton", "type SkeletonProps" ], "displayName": "Skeleton", "description": "", "props": { "type": { "defaultValue": { "value": "rectangle" }, "description": "The type of skeleton.", "name": "type", "required": false, "type": { "name": "enum", "raw": "SkeletonType", "value": [ { "value": "\"circle\"" }, { "value": "\"rectangle\"" }, { "value": "\"text\"" } ] } }, "size": { "defaultValue": { "value": "custom" }, "description": "The predefined size of the skeleton.", "name": "size", "required": false, "type": { "name": "enum", "raw": "SkeletonSizeType", "value": [ { "value": "\"h1\"" }, { "value": "\"h2\"" }, { "value": "\"h3\"" }, { "value": "\"h4\"" }, { "value": "\"h5\"" }, { "value": "\"h6\"" }, { "value": "\"p\"" }, { "value": "\"small\"" }, { "value": "\"custom\"" } ] } }, "width": { "defaultValue": null, "description": "The width of the skeleton in pixels.", "name": "width", "required": false, "type": { "name": "number" } }, "height": { "defaultValue": null, "description": "The height of the skeleton in pixels.", "name": "height", "required": false, "type": { "name": "number" } }, "wrapperClassName": { "defaultValue": null, "description": "Class name applied to the wrapper element.", "name": "wrapperClassName", "required": false, "type": { "name": "string" } }, "fullWidth": { "defaultValue": { "value": "false" }, "description": "If true, the skeleton will take up the full width of its container.", "name": "fullWidth", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Skeleton } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Slider/Slider.tsx", "aggregator": "core", "symbols": [ "default as Slider", "type SliderProps", "SliderColor", "SliderLabelColor", "SliderLabelPosition", "SliderSize", "InfixKind" ], "displayName": "Slider", "description": "", "props": { "aria-label": { "defaultValue": null, "description": "Define a string that labels the current element (Slider)", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-labelledby": { "defaultValue": null, "description": "ElementId of Node that have the text needed for labeling the current element (Slider)", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "Custom `class name` to be added to the component-root-node", "name": "className", "required": false, "type": { "name": "string" } }, "color": { "defaultValue": null, "description": "Color Mode (primary/positive/negative) of the component (Slider)", "name": "color", "required": false, "type": { "name": "enum", "raw": "SliderColor", "value": [ { "value": "\"primary\"" }, { "value": "\"negative\"" }, { "value": "\"positive\"" } ] } }, "data-testid": { "defaultValue": null, "description": "Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)", "name": "data-testid", "required": false, "type": { "name": "string" } }, "defaultValue": { "defaultValue": { "value": "0" }, "description": "", "name": "defaultValue", "required": false, "type": { "name": "number | number[]" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If set to true, Component (Slider) will be disabled\n - impossible to change value of component (Slider)\n - visual changes (opacity)", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "id": { "defaultValue": null, "description": "Attribute `id` to be added to the component-root-node", "name": "id", "required": false, "type": { "name": "string" } }, "max": { "defaultValue": { "value": "100" }, "description": "Max range value of the component (Slider)", "name": "max", "required": false, "type": { "name": "number" } }, "min": { "defaultValue": { "value": "0" }, "description": "Min range value of the component (Slider)", "name": "min", "required": false, "type": { "name": "number" } }, "onChange": { "defaultValue": null, "description": "Optional onChange callback (for outer trigger or Controlled mode)\n- required in Controlled Mode", "name": "onChange", "required": false, "type": { "name": "(value: number | number[]) => void" } }, "ranged": { "defaultValue": { "value": "false" }, "description": "If true switch slider to RRange mode (two Thumbs)", "name": "ranged", "required": false, "type": { "name": "boolean" } }, "step": { "defaultValue": { "value": "1" }, "description": "The granularity with which the slider can step through values.\n(A \"discrete\" slider.) The min prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step.", "name": "step", "required": false, "type": { "name": "number" } }, "showValue": { "defaultValue": { "value": "false" }, "description": "Always show `value` instead of Tooltip", "name": "showValue", "required": false, "type": { "name": "boolean" } }, "valueLabelPosition": { "defaultValue": { "value": "top" }, "description": "Position of the `value` when `showValue` is true", "name": "valueLabelPosition", "required": false, "type": { "name": "enum", "raw": "SliderLabelPosition", "value": [ { "value": "\"top\"" }, { "value": "\"bottom\"" } ] } }, "valueLabelColor": { "defaultValue": { "value": "primary" }, "description": "Color of the `value` when `showValue` is true", "name": "valueLabelColor", "required": false, "type": { "name": "enum", "raw": "SliderLabelColor", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" } ] } }, "size": { "defaultValue": { "value": "small" }, "description": "Size small/medium/large of the component (Slider)", "name": "size", "required": false, "type": { "name": "enum", "raw": "SliderSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "value": { "defaultValue": null, "description": "Current/selected value of the range of the Component (Slider)\n - should be used in Controlled Mode only\n - in ranged mode should be an array of two numbers", "name": "value", "required": false, "type": { "name": "number | number[]" } }, "valueFormatter": { "defaultValue": { "value": "(value: number) => `${value}%`" }, "description": "Function to format the value, e.g. add %. By default, returns `${value}%`", "name": "valueFormatter", "required": false, "type": { "name": "(value: number) => string" } }, "valueText": { "defaultValue": null, "description": "Text/presentation of current/selected value\n - should be used in Controlled Mode only", "name": "valueText", "required": false, "type": { "name": "string" } }, "indicateSelection": { "defaultValue": { "value": "false" }, "description": "Show selected from Slider range value", "name": "indicateSelection", "required": false, "type": { "name": "boolean" } }, "prefix": { "defaultValue": null, "description": "Options for initial/start/prefix element, it can be one of:\n - Any Component (react component, node, text, number etc.)\n - Or it can be an object of options for Icons component (see Icon components props)\n - Or it can be an object for Label (Icon, Heading - and other components)\n - Or it can be Render Props Function witch are getting value and valueText", "name": "prefix", "required": false, "type": { "name": "string | { icon: IconType; } | ((value: number, valueText: string) => void) | ReactElement>" } }, "postfix": { "defaultValue": null, "description": "Options for postfix/end/finishing element. Same as prefix element.", "name": "postfix", "required": false, "type": { "name": "string | ReactElement> | { icon: IconType; } | ((value: number, valueText: string) => void)" } }, "selectionIndicatorWidth": { "defaultValue": { "value": "60px" }, "description": "Width of SelectionIndicator (i.e. TextField)", "name": "selectionIndicatorWidth", "required": false, "type": { "name": "string" } } }, "import": "import { Slider } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/SplitButton/SplitButton.tsx", "aggregator": "core", "symbols": [ "default as SplitButton", "type SplitButtonProps" ], "displayName": "SplitButton", "description": "", "props": { "secondaryDialogContent": { "defaultValue": null, "description": "The element or renderer that is displayed inside the dialog opened by clicking the secondary button.", "name": "secondaryDialogContent", "required": false, "type": { "name": "ReactElement> | (() => string | ReactElement>)" } }, "onSecondaryDialogDidShow": { "defaultValue": null, "description": "Callback fired when the secondary dialog is shown.", "name": "onSecondaryDialogDidShow", "required": false, "type": { "name": "() => void" } }, "onSecondaryDialogDidHide": { "defaultValue": null, "description": "Callback fired when the secondary dialog is hidden.", "name": "onSecondaryDialogDidHide", "required": false, "type": { "name": "() => void" } }, "zIndex": { "defaultValue": { "value": "null" }, "description": "The z-index applied to the secondary dialog.", "name": "zIndex", "required": false, "type": { "name": "number" } }, "secondaryDialogClassName": { "defaultValue": { "value": "" }, "description": "Class name applied to the wrapper of the secondary dialog.", "name": "secondaryDialogClassName", "required": false, "type": { "name": "string" } }, "secondaryDialogPosition": { "defaultValue": { "value": "bottom-start" }, "description": "The position of the secondary dialog.", "name": "secondaryDialogPosition", "required": false, "type": { "name": "enum", "raw": "SplitButtonSecondaryContentPositionType", "value": [ { "value": "\"bottom\"" }, { "value": "\"bottom-start\"" }, { "value": "\"bottom-end\"" } ] } }, "dialogPaddingSize": { "defaultValue": { "value": "medium" }, "description": "The padding size inside the secondary dialog.", "name": "dialogPaddingSize", "required": false, "type": { "name": "enum", "raw": "DialogSize", "value": [ { "value": "\"none\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "dialogContainerSelector": { "defaultValue": null, "description": "The CSS selector of the container where the dialog should be rendered.", "name": "dialogContainerSelector", "required": false, "type": { "name": "string" } }, "shouldCloseOnClickInsideDialog": { "defaultValue": null, "description": "If true, clicking inside the dialog will close it.", "name": "shouldCloseOnClickInsideDialog", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "Custom class names to pass to the component", "name": "className", "required": false, "type": { "name": "string" } }, "activeButtonClassName": { "defaultValue": null, "description": "", "name": "activeButtonClassName", "required": false, "type": { "name": "string" } }, "kind": { "defaultValue": { "value": "primary" }, "description": "The button's kind", "name": "kind", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "onClick": { "defaultValue": null, "description": "Callback function to run when the button is clicked", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "blurOnMouseUp": { "defaultValue": null, "description": "Blur on button click", "name": "blurOnMouseUp", "required": false, "type": { "name": "boolean" } }, "name": { "defaultValue": null, "description": "Name of the button - for form submit usages", "name": "name", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The button's size", "name": "size", "required": false, "type": { "name": "enum", "raw": "ButtonSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" }, { "value": "\"xxs\"" }, { "value": "\"xs\"" } ] } }, "color": { "defaultValue": { "value": "primary" }, "description": "The button's color", "name": "color", "required": false, "type": { "name": "enum", "raw": "ButtonColor", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"inverted\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" }, { "value": "\"brand\"" }, { "value": "\"fixed-light\"" }, { "value": "\"fixed-dark\"" } ] } }, "type": { "defaultValue": null, "description": "The button's type", "name": "type", "required": false, "type": { "name": "enum", "raw": "ButtonInputType", "value": [ { "value": "\"button\"" }, { "value": "\"submit\"" }, { "value": "\"reset\"" } ] } }, "disabled": { "defaultValue": null, "description": "Whether the button should be disabled or not", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "rightIcon": { "defaultValue": null, "description": "Icon to place on the right", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "leftIcon": { "defaultValue": null, "description": "Icon to place on the left", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "success": { "defaultValue": null, "description": "the success props are used when you have async action and wants to display a success message", "name": "success", "required": false, "type": { "name": "boolean" } }, "successIcon": { "defaultValue": null, "description": "Success icon name", "name": "successIcon", "required": false, "type": { "name": "SubIcon" } }, "successText": { "defaultValue": null, "description": "Success text", "name": "successText", "required": false, "type": { "name": "string" } }, "loading": { "defaultValue": null, "description": "loading boolean which switches the text to a loader", "name": "loading", "required": false, "type": { "name": "boolean" } }, "loaderClassName": { "defaultValue": null, "description": "className which is applied to loader container *", "name": "loaderClassName", "required": false, "type": { "name": "string" } }, "style": { "defaultValue": null, "description": "", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "active": { "defaultValue": null, "description": "displays the active state", "name": "active", "required": false, "type": { "name": "boolean" } }, "id": { "defaultValue": null, "description": "id to pass to the button", "name": "id", "required": false, "type": { "name": "string" } }, "marginRight": { "defaultValue": null, "description": "adds 8px margin to the right", "name": "marginRight", "required": false, "type": { "name": "boolean" } }, "marginLeft": { "defaultValue": null, "description": "adds 8px margin to the left", "name": "marginLeft", "required": false, "type": { "name": "boolean" } }, "aria-labelledby": { "defaultValue": null, "description": "element id to describe the button accordingly", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "aria label to provide important when providing only Icon", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-haspopup": { "defaultValue": null, "description": "aria for a button popup", "name": "aria-haspopup", "required": false, "type": { "name": "React.HTMLProps" } }, "aria-expanded": { "defaultValue": null, "description": "aria to be set if the popup is open", "name": "aria-expanded", "required": false, "type": { "name": "boolean" } }, "aria-controls": { "defaultValue": null, "description": "aria controls - receives id for the controlled region", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-hidden": { "defaultValue": null, "description": "aria to be used for screen reader to know if the button is hidden", "name": "aria-hidden", "required": false, "type": { "name": "Booleanish" } }, "aria-pressed": { "defaultValue": null, "description": "Indicates the current \"pressed\" state of toggle buttons", "name": "aria-pressed", "required": false, "type": { "name": "boolean | \"true\" | \"false\" | \"mixed\"" } }, "onFocus": { "defaultValue": null, "description": "On Button Focus callback", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onBlur": { "defaultValue": null, "description": "On Button Blur callback", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "rightFlat": { "defaultValue": null, "description": "", "name": "rightFlat", "required": false, "type": { "name": "boolean" } }, "leftFlat": { "defaultValue": null, "description": "", "name": "leftFlat", "required": false, "type": { "name": "boolean" } }, "preventClickAnimation": { "defaultValue": null, "description": "", "name": "preventClickAnimation", "required": false, "type": { "name": "boolean" } }, "noSidePadding": { "defaultValue": null, "description": "", "name": "noSidePadding", "required": false, "type": { "name": "boolean" } }, "defaultTextColorOnPrimaryColor": { "defaultValue": null, "description": "default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)", "name": "defaultTextColorOnPrimaryColor", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "insetFocus": { "defaultValue": null, "description": "Change the focus indicator from around the button to within it", "name": "insetFocus", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": null, "description": "Specifies the tab order of an element", "name": "tabIndex", "required": false, "type": { "name": "number" } } }, "import": "import { SplitButton } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/SplitButton/SplitButtonMenu/SplitButtonMenu.tsx", "aggregator": "core", "symbols": [ "default as SplitButtonMenu", "type SplitButtonMenuProps" ], "displayName": "SplitButtonMenu", "description": "", "props": { "size": { "defaultValue": null, "description": "Size of the menu.", "name": "size", "required": false, "type": { "name": "enum", "raw": "\"xxs\" | \"xs\" | \"small\" | \"medium\" | \"large\"", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "tabIndex": { "defaultValue": null, "description": "The tab index of the menu.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "aria-label": { "defaultValue": null, "description": "ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "ARIA description ID.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "focusOnMount": { "defaultValue": null, "description": "If true, the menu will automatically focus on mount.", "name": "focusOnMount", "required": false, "type": { "name": "boolean" } }, "onItemFocus": { "defaultValue": null, "description": "Callback when a menu item gains focus.", "name": "onItemFocus", "required": false, "type": { "name": "(index: number) => void" } }, "isVisible": { "defaultValue": null, "description": "Controls the visibility of the menu.", "name": "isVisible", "required": false, "type": { "name": "boolean" } }, "onClose": { "defaultValue": null, "description": "Callback triggered when the menu closes.", "name": "onClose", "required": false, "type": { "name": "(option: CloseMenuOption) => void" } }, "focusItemIndex": { "defaultValue": null, "description": "Index of the focused menu item.", "name": "focusItemIndex", "required": false, "type": { "name": "number" } }, "isSubMenu": { "defaultValue": null, "description": "If true, this menu is a submenu.", "name": "isSubMenu", "required": false, "type": { "name": "boolean" } }, "useDocumentEventListeners": { "defaultValue": null, "description": "If true, event listeners will be attached to the document.", "name": "useDocumentEventListeners", "required": false, "type": { "name": "boolean" } }, "shouldScrollMenu": { "defaultValue": null, "description": "If true, enables scrolling within the menu.", "name": "shouldScrollMenu", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The menu items.", "name": "children", "required": false, "type": { "name": "any" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { SplitButtonMenu } from \"@vibe/core\"", "parentComponent": "SplitButton", "subComponents": [] }, { "filePath": "src/components/Steps/Steps.tsx", "aggregator": "core", "symbols": [ "default as Steps", "type StepsProps", "StepsType", "StepsDotAriaCurrent", "StepsColor" ], "displayName": "Steps", "description": "", "props": { "activeStepIndex": { "defaultValue": { "value": "0" }, "description": "The index of the currently active step.", "name": "activeStepIndex", "required": false, "type": { "name": "number" } }, "onChangeActiveStep": { "defaultValue": null, "description": "Callback fired when the active step changes.", "name": "onChangeActiveStep", "required": false, "type": { "name": "(e: React.MouseEvent, stepIndex: number) => void" } }, "areNavigationButtonsHidden": { "defaultValue": { "value": "false" }, "description": "If true, hides the navigation buttons.", "name": "areNavigationButtonsHidden", "required": false, "type": { "name": "boolean" } }, "steps": { "defaultValue": { "value": "[]" }, "description": "The list of steps in the steps component.", "name": "steps", "required": false, "type": { "name": "ReactElement>[]" } }, "type": { "defaultValue": { "value": "gallery" }, "description": "The visual style of the steps component.", "name": "type", "required": false, "type": { "name": "enum", "raw": "StepsType", "value": [ { "value": "\"numbers\"" }, { "value": "\"gallery\"" } ] } }, "color": { "defaultValue": null, "description": "The color theme of the steps component.", "name": "color", "required": false, "type": { "name": "enum", "raw": "StepsColor", "value": [ { "value": "\"primary\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" } ] } }, "isContentOnTop": { "defaultValue": { "value": "false" }, "description": "If true, the content is displayed above the step navigation.", "name": "isContentOnTop", "required": false, "type": { "name": "boolean" } }, "areButtonsIconsHidden": { "defaultValue": { "value": "false" }, "description": "If true, hides the icons in the navigation buttons.", "name": "areButtonsIconsHidden", "required": false, "type": { "name": "boolean" } }, "backButtonProps": { "defaultValue": { "value": "{}" }, "description": "Props applied to the back button.", "name": "backButtonProps", "required": false, "type": { "name": "Partial" } }, "nextButtonProps": { "defaultValue": { "value": "{}" }, "description": "Props applied to the next button.", "name": "nextButtonProps", "required": false, "type": { "name": "Partial" } }, "finishButtonProps": { "defaultValue": { "value": "{}" }, "description": "Props applied to the finish button.", "name": "finishButtonProps", "required": false, "type": { "name": "Partial" } }, "onFinish": { "defaultValue": null, "description": "Callback fired when the finish button is clicked.", "name": "onFinish", "required": false, "type": { "name": "(e: any) => void" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Steps } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Table/Table/Table.tsx", "aggregator": "core", "symbols": [ "default as Table", "type TableProps", "type TableColumn", "RowSizes" ], "displayName": "Table", "description": "", "props": { "columns": { "defaultValue": null, "description": "Defines the columns of the table.", "name": "columns", "required": true, "type": { "name": "TableColumn[]" } }, "dataState": { "defaultValue": null, "description": "State of the data being displayed (loading or error).", "name": "dataState", "required": false, "type": { "name": "{ isLoading?: boolean; isError?: boolean; }" } }, "errorState": { "defaultValue": null, "description": "React element displayed when there is an error state.", "name": "errorState", "required": true, "type": { "name": "ReactElement>" } }, "emptyState": { "defaultValue": null, "description": "React element displayed when there is no data.", "name": "emptyState", "required": true, "type": { "name": "ReactElement>" } }, "style": { "defaultValue": null, "description": "Custom styles for the table.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "children": { "defaultValue": null, "description": "The child components inside the table, such as `` and ``.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement> | (ReactElement<...> | ReactElement<...>)[]" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The row size of the table.", "name": "size", "required": false, "type": { "name": "enum", "raw": "RowSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "withoutBorder": { "defaultValue": null, "description": "If true, removes the table's outer border.", "name": "withoutBorder", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Table } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Table/TableContainer/TableContainer.tsx", "aggregator": "core", "symbols": [ "default as TableContainer", "TableContainerProps" ], "displayName": "TableContainer", "description": "", "props": { "style": { "defaultValue": null, "description": "Custom styles for the table container.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "children": { "defaultValue": null, "description": "The child elements inside the table container.", "name": "children", "required": true, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableContainer } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableHeader/TableHeader.tsx", "aggregator": "core", "symbols": [ "default as TableHeader", "type TableHeaderProps" ], "displayName": "TableHeader", "description": "", "props": { "children": { "defaultValue": null, "description": "The child elements inside the table header, typically `` components.", "name": "children", "required": false, "type": { "name": "any" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableHeader } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableHeaderCell/TableHeaderCell.tsx", "aggregator": "core", "symbols": [ "default as TableHeaderCell", "type TableHeaderCellProps" ], "displayName": "TableHeaderCell", "description": "", "props": { "title": { "defaultValue": null, "description": "The title of the column, displayed inside the header cell.", "name": "title", "required": true, "type": { "name": "any" } }, "icon": { "defaultValue": null, "description": "Icon displayed next to the column title.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "infoContent": { "defaultValue": null, "description": "Tooltip content for additional information about the column.", "name": "infoContent", "required": false, "type": { "name": "string" } }, "sortState": { "defaultValue": { "value": "none" }, "description": "Current sorting state of the column.", "name": "sortState", "required": false, "type": { "name": "enum", "raw": "\"asc\" | \"desc\" | \"none\"", "value": [ { "value": "\"asc\"" }, { "value": "\"desc\"" }, { "value": "\"none\"" } ] } }, "onSortClicked": { "defaultValue": null, "description": "Callback fired when the column header is clicked to change sorting.", "name": "onSortClicked", "required": false, "type": { "name": "(direction: \"asc\" | \"desc\" | \"none\") => void" } }, "sortButtonAriaLabel": { "defaultValue": { "value": "Sort" }, "description": "ARIA label for the sort button.", "name": "sortButtonAriaLabel", "required": false, "type": { "name": "string" } }, "sticky": { "defaultValue": null, "description": "If true, the header cell remains visible while scrolling horizontally.", "name": "sticky", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableHeaderCell } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableBody/TableBody.tsx", "aggregator": "core", "symbols": [ "default as TableBody", "type TableBodyProps" ], "displayName": "TableBody", "description": "", "props": { "children": { "defaultValue": null, "description": "The child components inside the table body, such as `` elements.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[] | ReactElement<...>" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableBody } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx", "aggregator": "core", "symbols": [ "default as TableVirtualizedBody", "type TableVirtualizedBodyProps", "type TableVirtualizedRow" ], "displayName": "TableVirtualizedBody", "description": "", "props": { "items": { "defaultValue": null, "description": "The list of items to render in the virtualized table.", "name": "items", "required": true, "type": { "name": "TableVirtualizedRow[]" } }, "rowRenderer": { "defaultValue": null, "description": "Function to render a row in the table.", "name": "rowRenderer", "required": true, "type": { "name": "(item: TableVirtualizedRow) => Element" } }, "onScroll": { "defaultValue": null, "description": "Callback function triggered on scroll.", "name": "onScroll", "required": false, "type": { "name": "(horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void" } }, "columns": { "defaultValue": null, "description": "The columns configuration for the table.", "name": "columns", "required": false, "type": { "name": "TableColumn[]" } }, "headerRenderer": { "defaultValue": null, "description": "Function to render the table header.", "name": "headerRenderer", "required": false, "type": { "name": "(columns: TableColumn[]) => Element" } }, "overscanCount": { "defaultValue": { "value": "1" }, "description": "Number of rows to render above/below the visible area.", "name": "overscanCount", "required": false, "type": { "name": "number" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableVirtualizedBody } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableRow/TableRow.tsx", "aggregator": "core", "symbols": [ "default as TableRow", "type TableRowProps" ], "displayName": "TableRow", "description": "", "props": { "highlighted": { "defaultValue": null, "description": "If true, applies a highlighted style to the row.", "name": "highlighted", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The child components inside the table row, typically `` elements.", "name": "children", "required": false, "type": { "name": "any" } }, "style": { "defaultValue": null, "description": "Custom styles applied to the table row.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableRow } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableRowMenu/TableRowMenu.tsx", "aggregator": "core", "symbols": [ "default as TableRowMenu", "TableMenuProps" ], "displayName": "TableRowMenu", "description": "", "props": { "rowId": { "defaultValue": null, "description": "The ID of the row that the menu is associated with.", "name": "rowId", "required": true, "type": { "name": "string" } }, "children": { "defaultValue": null, "description": "The child elements inside the table menu.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableRowMenu } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Table/TableCell/TableCell.tsx", "aggregator": "core", "symbols": [ "default as TableCell", "type TableCellProps" ], "displayName": "TableCell", "description": "", "props": { "children": { "defaultValue": null, "description": "The content inside the table cell.", "name": "children", "required": false, "type": { "name": "React.ReactNode" } }, "sticky": { "defaultValue": null, "description": "If true, makes the cell sticky (typically used for frozen columns).", "name": "sticky", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TableCell } from \"@vibe/core\"", "parentComponent": "Table", "subComponents": [] }, { "filePath": "src/components/Tabs/Tab/Tab.tsx", "aggregator": "core", "symbols": [ "default as Tab", "type TabProps" ], "displayName": "Tab", "description": "", "props": { "tabInnerClassName": { "defaultValue": null, "description": "Class name applied to the inner tab content.", "name": "tabInnerClassName", "required": false, "type": { "name": "string" } }, "value": { "defaultValue": { "value": "0" }, "description": "The index value of the tab.", "name": "value", "required": false, "type": { "name": "number" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, disables the tab.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "active": { "defaultValue": { "value": "false" }, "description": "If true, marks the tab as active.", "name": "active", "required": false, "type": { "name": "boolean" } }, "focus": { "defaultValue": { "value": "false" }, "description": "If true, applies focus styles to the tab.", "name": "focus", "required": false, "type": { "name": "boolean" } }, "stretchedUnderline": { "defaultValue": { "value": "false" }, "description": "If true, hides the individual tab border when using stretched underline.", "name": "stretchedUnderline", "required": false, "type": { "name": "boolean" } }, "icon": { "defaultValue": null, "description": "The icon displayed in the tab.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "iconType": { "defaultValue": null, "description": "The type of icon.", "name": "iconType", "required": false, "type": { "name": "enum", "raw": "IconType", "value": [ { "value": "\"svg\"" }, { "value": "\"font\"" }, { "value": "\"src\"" } ] } }, "iconSide": { "defaultValue": { "value": "left" }, "description": "The position of the icon relative to the text.", "name": "iconSide", "required": false, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the tab is clicked.", "name": "onClick", "required": false, "type": { "name": "(value: number) => void" } }, "tooltipProps": { "defaultValue": { "value": "{} as TooltipProps" }, "description": "Props passed to the tab's tooltip.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "children": { "defaultValue": null, "description": "The content displayed inside the tab.", "name": "children", "required": false, "type": { "name": "string | ReactElement> | ReactElement>[]" } }, "tabIndex": { "defaultValue": null, "description": "Tab index for focus management.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "aria-controls": { "defaultValue": null, "description": "The id of the associated TabPanel for aria-controls attribute.", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Tab } from \"@vibe/core\"", "parentComponent": "Tabs", "subComponents": [] }, { "filePath": "src/components/Tabs/TabList/TabList.tsx", "aggregator": "core", "symbols": [ "default as TabList", "type TabListProps" ], "displayName": "TabList", "description": "", "props": { "onTabChange": { "defaultValue": null, "description": "Callback fired when the active tab changes.", "name": "onTabChange", "required": false, "type": { "name": "(tabId: number) => void" } }, "activeTabId": { "defaultValue": { "value": "0" }, "description": "The index of the currently active tab.", "name": "activeTabId", "required": false, "type": { "name": "number" } }, "tabType": { "defaultValue": { "value": "Compact" }, "description": "The type of tab style.", "name": "tabType", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The size of the tab list.", "name": "size", "required": false, "type": { "name": "string" } }, "stretchedUnderline": { "defaultValue": { "value": "false" }, "description": "If true, Sets an E2E underline under the whole tabs component.", "name": "stretchedUnderline", "required": false, "type": { "name": "boolean" } }, "tabPanelIds": { "defaultValue": { "value": "[]" }, "description": "Array of corresponding TabPanel ids for aria-controls relationship.", "name": "tabPanelIds", "required": false, "type": { "name": "string[]" } }, "children": { "defaultValue": null, "description": "The child elements representing tabs.", "name": "children", "required": false, "type": { "name": "ReactElement>[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TabList } from \"@vibe/core\"", "parentComponent": "Tabs", "subComponents": [] }, { "filePath": "src/components/Tabs/TabPanel/TabPanel.tsx", "aggregator": "core", "symbols": [ "default as TabPanel", "type TabPanelProps" ], "displayName": "TabPanel", "description": "", "props": { "children": { "defaultValue": null, "description": "The content inside the tab panel.", "name": "children", "required": false, "type": { "name": "string | ReactElement> | ReactElement>[]" } }, "index": { "defaultValue": null, "description": "The index of the tab panel.", "name": "index", "required": false, "type": { "name": "number" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TabPanel } from \"@vibe/core\"", "parentComponent": "Tabs", "subComponents": [] }, { "filePath": "src/components/Tabs/TabsContext/TabsContext.tsx", "aggregator": "core", "symbols": [ "default as TabsContext", "type TabsContextProps" ], "displayName": "TabsContext", "description": "", "props": { "activeTabId": { "defaultValue": { "value": "0" }, "description": "The index of the currently active tab.", "name": "activeTabId", "required": false, "type": { "name": "number" } }, "children": { "defaultValue": null, "description": "The child elements representing the tab list and tab panels.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TabsContext } from \"@vibe/core\"", "parentComponent": "Tabs", "subComponents": [] }, { "filePath": "src/components/Tabs/TabPanels/TabPanels.tsx", "aggregator": "core", "symbols": [ "default as TabPanels", "type TabPanelsProps", "TabPanelsAnimationDirection" ], "displayName": "TabPanels", "description": "", "props": { "activeTabId": { "defaultValue": { "value": "0" }, "description": "The index of the currently active tab panel.", "name": "activeTabId", "required": false, "type": { "name": "number" } }, "animationDirection": { "defaultValue": { "value": "rtl" }, "description": "The animation direction when switching between tab panels.", "name": "animationDirection", "required": false, "type": { "name": "enum", "raw": "TabPanelsAnimationDirection", "value": [ { "value": "\"rtl\"" }, { "value": "\"ltr\"" } ] } }, "children": { "defaultValue": null, "description": "The child elements representing tab panels.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TabPanels } from \"@vibe/core\"", "parentComponent": "Tabs", "subComponents": [] }, { "filePath": "src/components/TextArea/TextArea.tsx", "aggregator": "core", "symbols": [ "default as TextArea", "TextAreaSize", "TextAreaProps" ], "displayName": "TextArea", "description": "", "props": { "value": { "defaultValue": null, "description": "The current value of the textarea.", "name": "value", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { "value": "small" }, "description": "Determines the size of the textarea text as well as the default row count.", "name": "size", "required": false, "type": { "name": "enum", "raw": "TextAreaSize", "value": [ { "value": "\"small\"" }, { "value": "\"large\"" } ] } }, "success": { "defaultValue": null, "description": "If true, applies success styling to the textarea.", "name": "success", "required": false, "type": { "name": "boolean" } }, "error": { "defaultValue": null, "description": "If true, applies error styling to the textarea.", "name": "error", "required": false, "type": { "name": "boolean" } }, "label": { "defaultValue": null, "description": "The label associated with the textarea.", "name": "label", "required": false, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the textarea value changes.", "name": "onChange", "required": false, "type": { "name": "(event: ChangeEvent) => void" } }, "helpText": { "defaultValue": null, "description": "Help text displayed below the textarea.", "name": "helpText", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The accessibility label for the textarea.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "resize": { "defaultValue": { "value": "true" }, "description": "If true, the textarea can be resized vertically.", "name": "resize", "required": false, "type": { "name": "boolean" } }, "placeholder": { "defaultValue": null, "description": "The placeholder text displayed when the textarea is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "maxLength": { "defaultValue": null, "description": "The maximum number of characters allowed.", "name": "maxLength", "required": false, "type": { "name": "number" } }, "allowExceedingMaxLength": { "defaultValue": null, "description": "If true, allows the user to exceed the character limit set by `maxLength`.", "name": "allowExceedingMaxLength", "required": false, "type": { "name": "boolean" } }, "showCharCount": { "defaultValue": { "value": "false" }, "description": "If true, displays the character count below the textarea.", "name": "showCharCount", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": null, "description": "If true, disables the textarea.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "readOnly": { "defaultValue": null, "description": "If true, makes the textarea read-only.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } } }, "import": "import { TextArea } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/TextField/TextField.tsx", "aggregator": "core", "symbols": [ "default as TextField", "type TextFieldProps", "TextFieldType", "TextFieldFeedbackState", "TextFieldSize" ], "displayName": "TextField", "description": "", "props": { "placeholder": { "defaultValue": { "value": "" }, "description": "The placeholder text displayed when the input is empty.", "name": "placeholder", "required": false, "type": { "name": "string" } }, "autoComplete": { "defaultValue": { "value": "off" }, "description": "Configures the browser's autocomplete behavior.", "name": "autoComplete", "required": false, "type": { "name": "string" } }, "value": { "defaultValue": null, "description": "The current value of the text field.", "name": "value", "required": false, "type": { "name": "string" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the text field value changes.", "name": "onChange", "required": false, "type": { "name": "(value: string, event: any) => void" } }, "onBlur": { "defaultValue": null, "description": "Callback fired when the text field loses focus.", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onFocus": { "defaultValue": null, "description": "Callback fired when the text field gains focus.", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onKeyDown": { "defaultValue": null, "description": "Callback fired when a key is pressed inside the text field.", "name": "onKeyDown", "required": false, "type": { "name": "(event: React.KeyboardEvent) => void" } }, "onWheel": { "defaultValue": null, "description": "Callback fired when the mouse wheel is used inside the text field.", "name": "onWheel", "required": false, "type": { "name": "(event: React.WheelEvent) => void" } }, "debounceRate": { "defaultValue": { "value": "0" }, "description": "The debounce rate for input value changes.", "name": "debounceRate", "required": false, "type": { "name": "number" } }, "autoFocus": { "defaultValue": { "value": "false" }, "description": "If true, the input is automatically focused on mount.", "name": "autoFocus", "required": false, "type": { "name": "boolean" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, disables the text field.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "readonly": { "defaultValue": { "value": "false" }, "description": "If true, makes the text field read-only.", "name": "readonly", "required": false, "type": { "name": "boolean" } }, "setRef": { "defaultValue": null, "description": "A function to set a reference to the input element.", "name": "setRef", "required": false, "type": { "name": "(node: HTMLElement) => void" } }, "icon": { "defaultValue": null, "description": "The primary icon displayed inside the text field.", "name": "icon", "required": false, "type": { "name": "any" } }, "secondaryIconName": { "defaultValue": null, "description": "The secondary icon displayed inside the text field.", "name": "secondaryIconName", "required": false, "type": { "name": "any" } }, "title": { "defaultValue": { "value": "" }, "description": "The label displayed above the text field.", "name": "title", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the text field.", "name": "size", "required": false, "type": { "name": "enum", "raw": "TextFieldSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "validation": { "defaultValue": { "value": "null" }, "description": "Validation state for the text field.", "name": "validation", "required": false, "type": { "name": "{ status?: \"error\" | \"success\"; text?: any; }" } }, "wrapperClassName": { "defaultValue": { "value": "" }, "description": "Class name applied to the text field wrapper.", "name": "wrapperClassName", "required": false, "type": { "name": "string" } }, "onIconClick": { "defaultValue": null, "description": "Callback fired when the icon inside the text field is clicked.", "name": "onIconClick", "required": false, "type": { "name": "(icon: any) => void" } }, "clearOnIconClick": { "defaultValue": { "value": "false" }, "description": "If true, clears the input when the icon is clicked.", "name": "clearOnIconClick", "required": false, "type": { "name": "boolean" } }, "labelIconName": { "defaultValue": null, "description": "The icon displayed inside the label.", "name": "labelIconName", "required": false, "type": { "name": "any" } }, "showCharCount": { "defaultValue": { "value": "false" }, "description": "If true, displays the character count.", "name": "showCharCount", "required": false, "type": { "name": "boolean" } }, "inputAriaLabel": { "defaultValue": null, "description": "The ARIA label for the input field.", "name": "inputAriaLabel", "required": false, "type": { "name": "string" } }, "searchResultsContainerId": { "defaultValue": { "value": "" }, "description": "The ID of the container where search results are displayed.", "name": "searchResultsContainerId", "required": false, "type": { "name": "string" } }, "activeDescendant": { "defaultValue": { "value": "" }, "description": "The ID of the currently active search result.", "name": "activeDescendant", "required": false, "type": { "name": "string" } }, "iconLabel": { "defaultValue": null, "description": "Accessible label for the primary icon.", "name": "iconLabel", "required": false, "type": { "name": "string" } }, "secondaryIconLabel": { "defaultValue": null, "description": "Accessible label for the secondary icon.", "name": "secondaryIconLabel", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { "value": "text" }, "description": "The type of the text field.", "name": "type", "required": false, "type": { "name": "enum", "raw": "TextFieldType", "value": [ { "value": "\"number\"" }, { "value": "\"text\"" }, { "value": "\"password\"" }, { "value": "\"search\"" }, { "value": "\"date\"" }, { "value": "\"datetime-local\"" }, { "value": "\"tel\"" }, { "value": "\"url\"" }, { "value": "\"email\"" } ] } }, "maxLength": { "defaultValue": { "value": "null" }, "description": "The maximum number of characters allowed.", "name": "maxLength", "required": false, "type": { "name": "number" } }, "allowExceedingMaxLength": { "defaultValue": { "value": "false" }, "description": "If true, allows the user to exceed the character limit set by `maxLength`.", "name": "allowExceedingMaxLength", "required": false, "type": { "name": "boolean" } }, "trim": { "defaultValue": { "value": "false" }, "description": "If true, trims whitespace from the input value.", "name": "trim", "required": false, "type": { "name": "boolean" } }, "role": { "defaultValue": { "value": "" }, "description": "The ARIA role of the text field.", "name": "role", "required": false, "type": { "name": "string" } }, "required": { "defaultValue": { "value": "false" }, "description": "If true, marks the input as required.", "name": "required", "required": false, "type": { "name": "boolean" } }, "requiredErrorText": { "defaultValue": { "value": "" }, "description": "The error message displayed when a required field is left empty.", "name": "requiredErrorText", "required": false, "type": { "name": "string" } }, "loading": { "defaultValue": { "value": "false" }, "description": "If true, displays a loading indicator inside the text field.", "name": "loading", "required": false, "type": { "name": "boolean" } }, "secondaryDataTestId": { "defaultValue": null, "description": "Test ID for the secondary icon.", "name": "secondaryDataTestId", "required": false, "type": { "name": "string" } }, "tabIndex": { "defaultValue": null, "description": "The tab order of the input field.", "name": "tabIndex", "required": false, "type": { "name": "number" } }, "name": { "defaultValue": null, "description": "The name attribute for the input field.", "name": "name", "required": false, "type": { "name": "string" } }, "underline": { "defaultValue": { "value": "false" }, "description": "If true, renders only an underline style for the text field.", "name": "underline", "required": false, "type": { "name": "boolean" } }, "controlled": { "defaultValue": { "value": "false" }, "description": "If true, the component is controlled by an external state.", "name": "controlled", "required": false, "type": { "name": "boolean" } }, "iconTooltipContent": { "defaultValue": null, "description": "Tooltip content for the primary icon.", "name": "iconTooltipContent", "required": false, "type": { "name": "string" } }, "secondaryTooltipContent": { "defaultValue": null, "description": "Tooltip content for the secondary icon.", "name": "secondaryTooltipContent", "required": false, "type": { "name": "string" } }, "dir": { "defaultValue": null, "description": "The text direction of the input.", "name": "dir", "required": false, "type": { "name": "enum", "raw": "\"ltr\" | \"rtl\" | \"auto\"", "value": [ { "value": "\"ltr\"" }, { "value": "\"rtl\"" }, { "value": "\"auto\"" } ] } }, "className": { "defaultValue": { "value": "" }, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": { "value": "input" }, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TextField } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/ThemeProvider/ThemeProvider.tsx", "aggregator": "core", "symbols": [ "default as ThemeProvider", "type ThemeProviderProps", "SystemTheme", "ThemeColor" ], "displayName": "ThemeProvider", "description": "", "props": { "themeConfig": { "defaultValue": null, "description": "The theme configuration to apply. It consists of a `name` (a unique CSS class name added to the children)\nand an object of color overrides for each system theme.", "name": "themeConfig", "required": false, "type": { "name": "Theme" } }, "children": { "defaultValue": null, "description": "The children to be rendered with the applied theme.", "name": "children", "required": true, "type": { "name": "ReactElement>" } }, "themeClassSpecifier": { "defaultValue": null, "description": "A string added to the theme name selector to make it more specific, in case `themeConfig.name`\ncollides with another class name.", "name": "themeClassSpecifier", "required": false, "type": { "name": "string" } }, "systemTheme": { "defaultValue": null, "description": "The system theme to apply to the `body` element on mount,\nif there is no system theme class name on the body already.", "name": "systemTheme", "required": false, "type": { "name": "enum", "raw": "SystemTheme", "value": [ { "value": "\"light\"" }, { "value": "\"dark\"" }, { "value": "\"black\"" } ] } }, "className": { "defaultValue": null, "description": "Class name applied to the wrapping `div`.", "name": "className", "required": false, "type": { "name": "string" } } }, "import": "import { ThemeProvider } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Tipseen/Tipseen.tsx", "aggregator": "core", "symbols": [ "default as Tipseen", "type TipseenProps", "TipseenCloseButtonTheme", "TipseenColor" ], "displayName": "Tipseen", "description": "", "props": { "titleClassName": { "defaultValue": null, "description": "Class name applied to the Tipseen title.", "name": "titleClassName", "required": false, "type": { "name": "string" } }, "position": { "defaultValue": { "value": "bottom" }, "description": "The position of the Tipseen relative to the target element.", "name": "position", "required": false, "type": { "name": "enum", "raw": "TooltipPositions", "value": [ { "value": "\"top\"" }, { "value": "\"right\"" }, { "value": "\"bottom\"" }, { "value": "\"left\"" } ] } }, "animationType": { "defaultValue": { "value": "expand" }, "description": "The animation type used for showing/hiding the Tipseen.", "name": "animationType", "required": false, "type": { "name": "enum", "raw": "DialogAnimationType", "value": [ { "value": "\"opacity-and-slide\"" }, { "value": "\"expand\"" } ] } }, "hideDelay": { "defaultValue": { "value": "0" }, "description": "The delay in milliseconds before hiding the Tipseen.", "name": "hideDelay", "required": false, "type": { "name": "number" } }, "showDelay": { "defaultValue": { "value": "100" }, "description": "The delay in milliseconds before showing the Tipseen.", "name": "showDelay", "required": false, "type": { "name": "number" } }, "title": { "defaultValue": null, "description": "The title text of the Tipseen.", "name": "title", "required": false, "type": { "name": "string" } }, "hideCloseButton": { "defaultValue": null, "description": "If true, hides the close button.", "name": "hideCloseButton", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": { "value": "null" }, "description": "The child element that triggers the Tipseen.", "name": "children", "required": false, "type": { "name": "ReactElement>" } }, "containerSelector": { "defaultValue": null, "description": "The CSS selector of the container where the Tipseen should be rendered.", "name": "containerSelector", "required": false, "type": { "name": "string" } }, "hideTrigger": { "defaultValue": { "value": "[]" }, "description": "Events that trigger hiding the Tipseen.", "name": "hideTrigger", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "showTrigger": { "defaultValue": { "value": "[]" }, "description": "Events that trigger showing the Tipseen.", "name": "showTrigger", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "width": { "defaultValue": null, "description": "The width of the Tipseen.", "name": "width", "required": false, "type": { "name": "number" } }, "moveBy": { "defaultValue": null, "description": "Offset values for positioning adjustments.", "name": "moveBy", "required": false, "type": { "name": "MoveBy" } }, "hideWhenReferenceHidden": { "defaultValue": { "value": "false" }, "description": "If true, hides the Tipseen when the reference element is hidden.", "name": "hideWhenReferenceHidden", "required": false, "type": { "name": "boolean" } }, "middleware": { "defaultValue": null, "description": "Custom Floating UI middleware for positioning logic.\n@see https://floating-ui.com/docs/middleware", "name": "middleware", "required": false, "type": { "name": "{ name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; placement: Placement; strategy: Strategy; middlewareData: MiddlewareData; rects: ElementRects; platform: { ...; } & Platform; elements: Elements; }) => Promisable<...>; }[]" } }, "referenceWrapperClassName": { "defaultValue": null, "description": "Class name applied to the reference wrapper element.", "name": "referenceWrapperClassName", "required": false, "type": { "name": "string" } }, "tip": { "defaultValue": { "value": "true" }, "description": "If false, hides the arrow of the Tipseen.", "name": "tip", "required": false, "type": { "name": "boolean" } }, "tooltipArrowClassName": { "defaultValue": null, "description": "Class name applied to the Tipseen arrow.", "name": "tooltipArrowClassName", "required": false, "type": { "name": "string" } }, "closeAriaLabel": { "defaultValue": null, "description": "The aria-label for the close button.", "name": "closeAriaLabel", "required": false, "type": { "name": "string" } }, "onClose": { "defaultValue": null, "description": "Callback fired when the Tipseen is closed.", "name": "onClose", "required": false, "type": { "name": "(event?: React.MouseEvent) => void" } }, "content": { "defaultValue": null, "description": "The content displayed inside the Tipseen.", "name": "content", "required": true, "type": { "name": "ElementContent" } }, "closeButtonTheme": { "defaultValue": { "value": "light" }, "description": "The theme of the Tipseen close button.", "name": "closeButtonTheme", "required": false, "type": { "name": "enum", "raw": "TipseenCloseButtonTheme", "value": [ { "value": "\"light\"" }, { "value": "\"dark\"" }, { "value": "\"fixed-light\"" }, { "value": "\"fixed-dark\"" } ] } }, "floating": { "defaultValue": { "value": "false" }, "description": "If true, renders the Tipseen as a floating element without a reference.", "name": "floating", "required": false, "type": { "name": "boolean" } }, "color": { "defaultValue": null, "description": "The color theme of the Tipseen.", "name": "color", "required": false, "type": { "name": "enum", "raw": "TipseenColor", "value": [ { "value": "\"primary\"" }, { "value": "\"inverted\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Tipseen } from \"@vibe/core\"", "subComponents": [ "TipseenContent", "TipseenWizard" ] }, { "filePath": "src/components/Tipseen/TipseenContent.tsx", "aggregator": "core", "symbols": [ "default as TipseenContent", "type TipseenContentProps" ], "displayName": "TipseenContent", "description": "", "props": { "title": { "defaultValue": null, "description": "The title text displayed in the Tipseen content.", "name": "title", "required": false, "type": { "name": "string" } }, "titleClassName": { "defaultValue": null, "description": "Class name applied to the Tipseen title.", "name": "titleClassName", "required": false, "type": { "name": "string" } }, "hideDismiss": { "defaultValue": { "value": "true" }, "description": "If true, hides the dismiss button.", "name": "hideDismiss", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": { "value": "null" }, "description": "The content inside the Tipseen.", "name": "children", "required": false, "type": { "name": "ElementContent" } }, "hideSubmit": { "defaultValue": null, "description": "If true, hides the submit button.", "name": "hideSubmit", "required": false, "type": { "name": "boolean" } }, "submitButtonText": { "defaultValue": { "value": "Submit" }, "description": "The text displayed on the submit button.", "name": "submitButtonText", "required": false, "type": { "name": "string" } }, "submitButtonIcon": { "defaultValue": null, "description": "Icon to display in the submit button", "name": "submitButtonIcon", "required": false, "type": { "name": "SubIcon" } }, "onSubmit": { "defaultValue": null, "description": "Callback fired when the submit button is clicked.", "name": "onSubmit", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "dismissButtonText": { "defaultValue": { "value": "Dismiss" }, "description": "The text displayed on the dismiss button.", "name": "dismissButtonText", "required": false, "type": { "name": "string" } }, "onDismiss": { "defaultValue": null, "description": "Callback fired when the dismiss button is clicked.", "name": "onDismiss", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TipseenContent } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Tipseen/TipseenWizard.tsx", "aggregator": "core", "symbols": [ "default as TipseenWizard", "type TipseenWizardProps" ], "displayName": "TipseenWizard", "description": "", "props": { "title": { "defaultValue": null, "description": "The title text displayed in the Tipseen Wizard.", "name": "title", "required": false, "type": { "name": "string" } }, "titleClassName": { "defaultValue": null, "description": "Class name applied to the Tipseen title.", "name": "titleClassName", "required": false, "type": { "name": "string" } }, "onFinish": { "defaultValue": null, "description": "Callback fired when the wizard is completed.", "name": "onFinish", "required": false, "type": { "name": "(e: any) => void" } }, "activeStepIndex": { "defaultValue": null, "description": "The index of the currently active step.", "name": "activeStepIndex", "required": false, "type": { "name": "number" } }, "onChangeActiveStep": { "defaultValue": null, "description": "Callback fired when the active step changes.", "name": "onChangeActiveStep", "required": false, "type": { "name": "(e: React.MouseEvent, stepIndex: number) => void" } }, "areNavigationButtonsHidden": { "defaultValue": null, "description": "If true, hides the navigation buttons.", "name": "areNavigationButtonsHidden", "required": false, "type": { "name": "boolean" } }, "steps": { "defaultValue": null, "description": "The list of steps in the steps component.", "name": "steps", "required": false, "type": { "name": "ReactElement>[]" } }, "type": { "defaultValue": null, "description": "The visual style of the steps component.", "name": "type", "required": false, "type": { "name": "enum", "raw": "StepsType", "value": [ { "value": "\"numbers\"" }, { "value": "\"gallery\"" } ] } }, "color": { "defaultValue": null, "description": "The color theme of the steps component.", "name": "color", "required": false, "type": { "name": "enum", "raw": "StepsColor", "value": [ { "value": "\"primary\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" } ] } }, "isContentOnTop": { "defaultValue": null, "description": "If true, the content is displayed above the step navigation.", "name": "isContentOnTop", "required": false, "type": { "name": "boolean" } }, "areButtonsIconsHidden": { "defaultValue": null, "description": "If true, hides the icons in the navigation buttons.", "name": "areButtonsIconsHidden", "required": false, "type": { "name": "boolean" } }, "backButtonProps": { "defaultValue": null, "description": "Props applied to the back button.", "name": "backButtonProps", "required": false, "type": { "name": "Partial" } }, "nextButtonProps": { "defaultValue": null, "description": "Props applied to the next button.", "name": "nextButtonProps", "required": false, "type": { "name": "Partial" } }, "finishButtonProps": { "defaultValue": null, "description": "Props applied to the finish button.", "name": "finishButtonProps", "required": false, "type": { "name": "Partial" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TipseenWizard } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Tipseen/TipseenMedia/TipseenMedia.tsx", "aggregator": "core", "symbols": [ "default as TipseenMedia", "type TipseenMediaProps" ], "displayName": "TipseenMedia", "description": "", "props": { "children": { "defaultValue": null, "description": "The media content displayed inside the Tipseen.", "name": "children", "required": true, "type": { "name": "ReactNode" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TipseenMedia } from \"@vibe/core\"", "parentComponent": "Tipseen", "subComponents": [] }, { "filePath": "src/components/Toast/Toast.tsx", "aggregator": "core", "symbols": [ "default as Toast", "type ToastProps", "ToastType", "ToastActionType", "ToastAction" ], "displayName": "Toast", "description": "", "props": { "actions": { "defaultValue": null, "description": "The actions available in the toast.", "name": "actions", "required": false, "type": { "name": "ToastAction[]" } }, "open": { "defaultValue": { "value": "false" }, "description": "If true, the toast is open (visible).", "name": "open", "required": false, "type": { "name": "boolean" } }, "loading": { "defaultValue": { "value": "false" }, "description": "If true, displays a loading indicator inside the toast.", "name": "loading", "required": false, "type": { "name": "boolean" } }, "type": { "defaultValue": { "value": "normal" }, "description": "The type of toast.", "name": "type", "required": false, "type": { "name": "enum", "raw": "ToastType", "value": [ { "value": "\"normal\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"warning\"" }, { "value": "\"dark\"" } ] } }, "icon": { "defaultValue": null, "description": "The icon displayed in the toast.", "name": "icon", "required": false, "type": { "name": "any" } }, "hideIcon": { "defaultValue": { "value": "false" }, "description": "If true, hides the toast icon.", "name": "hideIcon", "required": false, "type": { "name": "boolean" } }, "action": { "defaultValue": null, "description": "The action element displayed in the toast.", "name": "action", "required": false, "type": { "name": "Element" } }, "closeable": { "defaultValue": { "value": "true" }, "description": "If false, hides the close button.", "name": "closeable", "required": false, "type": { "name": "boolean" } }, "onClose": { "defaultValue": null, "description": "Callback fired when the toast is closed.", "name": "onClose", "required": false, "type": { "name": "() => void" } }, "autoHideDuration": { "defaultValue": { "value": "null" }, "description": "The number of milliseconds before the toast automatically closes.\n(0 or null disables auto-close behavior).", "name": "autoHideDuration", "required": false, "type": { "name": "number" } }, "children": { "defaultValue": null, "description": "The content displayed inside the toast.", "name": "children", "required": false, "type": { "name": "string | ReactElement> | ReactElement>[]" } }, "closeButtonAriaLabel": { "defaultValue": { "value": "Close" }, "description": "The aria-label for the close button.", "name": "closeButtonAriaLabel", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Toast } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/Toast/ToastButton/ToastButton.tsx", "aggregator": "core", "symbols": [ "default as ToastButton", "type ToastButtonProps" ], "displayName": "ToastButton", "description": "", "props": { "className": { "defaultValue": null, "description": "Custom class names to pass to the component", "name": "className", "required": false, "type": { "name": "string" } }, "activeButtonClassName": { "defaultValue": null, "description": "", "name": "activeButtonClassName", "required": false, "type": { "name": "string" } }, "kind": { "defaultValue": null, "description": "The button's kind", "name": "kind", "required": false, "type": { "name": "enum", "raw": "ButtonType", "value": [ { "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"tertiary\"" } ] } }, "onClick": { "defaultValue": null, "description": "Callback function to run when the button is clicked", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "", "name": "onMouseDown", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "blurOnMouseUp": { "defaultValue": null, "description": "Blur on button click", "name": "blurOnMouseUp", "required": false, "type": { "name": "boolean" } }, "name": { "defaultValue": null, "description": "Name of the button - for form submit usages", "name": "name", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The button's size", "name": "size", "required": false, "type": { "name": "enum", "raw": "ButtonSize", "value": [ { "value": "\"xxs\"" }, { "value": "\"xs\"" }, { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "color": { "defaultValue": null, "description": "The button's color", "name": "color", "required": false, "type": { "name": "enum", "raw": "ButtonColor", "value": [ { "value": "\"primary\"" }, { "value": "\"positive\"" }, { "value": "\"negative\"" }, { "value": "\"inverted\"" }, { "value": "\"on-primary-color\"" }, { "value": "\"on-inverted-background\"" }, { "value": "\"brand\"" }, { "value": "\"fixed-light\"" }, { "value": "\"fixed-dark\"" } ] } }, "type": { "defaultValue": null, "description": "The button's type", "name": "type", "required": false, "type": { "name": "enum", "raw": "ButtonInputType", "value": [ { "value": "\"button\"" }, { "value": "\"submit\"" }, { "value": "\"reset\"" } ] } }, "disabled": { "defaultValue": null, "description": "Whether the button should be disabled or not", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "rightIcon": { "defaultValue": null, "description": "Icon to place on the right", "name": "rightIcon", "required": false, "type": { "name": "SubIcon" } }, "leftIcon": { "defaultValue": null, "description": "Icon to place on the left", "name": "leftIcon", "required": false, "type": { "name": "SubIcon" } }, "success": { "defaultValue": null, "description": "the success props are used when you have async action and wants to display a success message", "name": "success", "required": false, "type": { "name": "boolean" } }, "successIcon": { "defaultValue": null, "description": "Success icon name", "name": "successIcon", "required": false, "type": { "name": "SubIcon" } }, "successText": { "defaultValue": null, "description": "Success text", "name": "successText", "required": false, "type": { "name": "string" } }, "loading": { "defaultValue": null, "description": "loading boolean which switches the text to a loader", "name": "loading", "required": false, "type": { "name": "boolean" } }, "loaderClassName": { "defaultValue": null, "description": "className which is applied to loader container *", "name": "loaderClassName", "required": false, "type": { "name": "string" } }, "style": { "defaultValue": null, "description": "", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "active": { "defaultValue": null, "description": "displays the active state", "name": "active", "required": false, "type": { "name": "boolean" } }, "id": { "defaultValue": null, "description": "id to pass to the button", "name": "id", "required": false, "type": { "name": "string" } }, "marginRight": { "defaultValue": null, "description": "adds 8px margin to the right", "name": "marginRight", "required": false, "type": { "name": "boolean" } }, "marginLeft": { "defaultValue": null, "description": "adds 8px margin to the left", "name": "marginLeft", "required": false, "type": { "name": "boolean" } }, "aria-labelledby": { "defaultValue": null, "description": "element id to describe the button accordingly", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "aria label to provide important when providing only Icon", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-haspopup": { "defaultValue": null, "description": "aria for a button popup", "name": "aria-haspopup", "required": false, "type": { "name": "React.HTMLProps" } }, "aria-expanded": { "defaultValue": null, "description": "aria to be set if the popup is open", "name": "aria-expanded", "required": false, "type": { "name": "boolean" } }, "aria-controls": { "defaultValue": null, "description": "aria controls - receives id for the controlled region", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-hidden": { "defaultValue": null, "description": "aria to be used for screen reader to know if the button is hidden", "name": "aria-hidden", "required": false, "type": { "name": "Booleanish" } }, "aria-pressed": { "defaultValue": null, "description": "Indicates the current \"pressed\" state of toggle buttons", "name": "aria-pressed", "required": false, "type": { "name": "boolean | \"true\" | \"false\" | \"mixed\"" } }, "onFocus": { "defaultValue": null, "description": "On Button Focus callback", "name": "onFocus", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "onBlur": { "defaultValue": null, "description": "On Button Blur callback", "name": "onBlur", "required": false, "type": { "name": "(event: React.FocusEvent) => void" } }, "rightFlat": { "defaultValue": null, "description": "", "name": "rightFlat", "required": false, "type": { "name": "boolean" } }, "leftFlat": { "defaultValue": null, "description": "", "name": "leftFlat", "required": false, "type": { "name": "boolean" } }, "preventClickAnimation": { "defaultValue": null, "description": "", "name": "preventClickAnimation", "required": false, "type": { "name": "boolean" } }, "noSidePadding": { "defaultValue": null, "description": "", "name": "noSidePadding", "required": false, "type": { "name": "boolean" } }, "defaultTextColorOnPrimaryColor": { "defaultValue": null, "description": "default color for text color in ON_PRIMARY_COLOR kind (should be any type of css color (rbg, var, hex...)", "name": "defaultTextColorOnPrimaryColor", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "insetFocus": { "defaultValue": null, "description": "Change the focus indicator from around the button to within it", "name": "insetFocus", "required": false, "type": { "name": "boolean" } }, "tabIndex": { "defaultValue": null, "description": "Specifies the tab order of an element", "name": "tabIndex", "required": false, "type": { "name": "number" } } }, "import": "import { ToastButton } from \"@vibe/core\"", "parentComponent": "Toast", "subComponents": [] }, { "filePath": "src/components/Toast/ToastLink/ToastLink.tsx", "aggregator": "core", "symbols": [ "default as ToastLink", "type ToastLinkProps" ], "displayName": "ToastLink", "description": "", "props": { "textClassName": { "defaultValue": null, "description": "Class name applied to the link text.", "name": "textClassName", "required": false, "type": { "name": "string" } }, "href": { "defaultValue": null, "description": "The URL the link points to.", "name": "href", "required": false, "type": { "name": "string" } }, "text": { "defaultValue": null, "description": "The text content of the link.", "name": "text", "required": false, "type": { "name": "string" } }, "rel": { "defaultValue": null, "description": "Specifies the relationship between the current document and the linked resource.", "name": "rel", "required": false, "type": { "name": "string" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the link is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "target": { "defaultValue": null, "description": "Specifies where to open the linked document.", "name": "target", "required": false, "type": { "name": "enum", "raw": "LinkTarget", "value": [ { "value": "\"_blank\"" }, { "value": "\"_self\"" }, { "value": "\"_parent\"" }, { "value": "\"_top\"" } ] } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "The ID of the element that describes this link.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "aria-labelledby": { "defaultValue": null, "description": "The ID of the element labeling this link.", "name": "aria-labelledby", "required": false, "type": { "name": "string" } }, "icon": { "defaultValue": null, "description": "Icon displayed next to the link text.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "iconPosition": { "defaultValue": null, "description": "The position of the icon relative to the text.", "name": "iconPosition", "required": false, "type": { "name": "enum", "raw": "LinkIconPosition", "value": [ { "value": "\"start\"" }, { "value": "\"end\"" } ] } }, "disableNavigation": { "defaultValue": null, "description": "If true, disables navigation when the link is clicked.", "name": "disableNavigation", "required": false, "type": { "name": "boolean" } }, "inheritFontSize": { "defaultValue": null, "description": "If true, the link inherits the surrounding text's font size.", "name": "inheritFontSize", "required": false, "type": { "name": "boolean" } }, "inlineText": { "defaultValue": null, "description": "If true, the link is styled to fit within inline text content.", "name": "inlineText", "required": false, "type": { "name": "boolean" } }, "color": { "defaultValue": null, "description": "The link's color style", "name": "color", "required": false, "type": { "name": "enum", "raw": "LinkColor", "value": [ { "value": "\"primary\"" }, { "value": "\"onPrimary\"" }, { "value": "\"onInverted\"" } ] } }, "style": { "defaultValue": null, "description": "Inline style object applied to the link element.", "name": "style", "required": false, "type": { "name": "React.CSSProperties" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ToastLink } from \"@vibe/core\"", "parentComponent": "Toast", "subComponents": [] }, { "filePath": "src/components/Toggle/Toggle.tsx", "aggregator": "core", "symbols": [ "default as Toggle", "type ToggleProps" ], "displayName": "Toggle", "description": "", "props": { "toggleSelectedClassName": { "defaultValue": null, "description": "Class name applied when the toggle is selected.", "name": "toggleSelectedClassName", "required": false, "type": { "name": "string" } }, "isDefaultSelected": { "defaultValue": { "value": "true" }, "description": "If true, the toggle is selected by default.", "name": "isDefaultSelected", "required": false, "type": { "name": "boolean" } }, "isSelected": { "defaultValue": null, "description": "Controls the selected state of the toggle.", "name": "isSelected", "required": false, "type": { "name": "boolean" } }, "onChange": { "defaultValue": null, "description": "Callback fired when the toggle state changes.", "name": "onChange", "required": false, "type": { "name": "(value: boolean, event: ChangeEvent) => void" } }, "value": { "defaultValue": null, "description": "The value associated with the toggle.", "name": "value", "required": false, "type": { "name": "string" } }, "name": { "defaultValue": null, "description": "The name attribute of the toggle input.", "name": "name", "required": false, "type": { "name": "string" } }, "disabled": { "defaultValue": null, "description": "If true, disables the toggle.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "areLabelsHidden": { "defaultValue": { "value": "false" }, "description": "If true, hides the on/off labels.", "name": "areLabelsHidden", "required": false, "type": { "name": "boolean" } }, "onOverrideText": { "defaultValue": { "value": "On" }, "description": "The text displayed when the toggle is in the \"on\" position.", "name": "onOverrideText", "required": false, "type": { "name": "string" } }, "offOverrideText": { "defaultValue": { "value": "Off" }, "description": "The text displayed when the toggle is in the \"off\" position.", "name": "offOverrideText", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for accessibility.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-controls": { "defaultValue": null, "description": "The ID of the element controlled by the toggle.", "name": "aria-controls", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { "value": "medium" }, "description": "The size of the toggle.", "name": "size", "required": false, "type": { "name": "enum", "raw": "ToggleSize", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" } ] } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { Toggle } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/Tooltip/Tooltip.tsx", "aggregator": "core", "symbols": [ "default as Tooltip", "type TooltipProps", "TooltipPositions", "TooltipTheme" ], "displayName": "Tooltip", "description": "", "props": { "content": { "defaultValue": null, "description": "The content displayed inside the tooltip.", "name": "content", "required": true, "type": { "name": "ElementContent" } }, "style": { "defaultValue": null, "description": "Inline styles applied to the tooltip container.", "name": "style", "required": false, "type": { "name": "CSSProperties" } }, "arrowClassName": { "defaultValue": null, "description": "Class name applied to the tooltip arrow.", "name": "arrowClassName", "required": false, "type": { "name": "string" } }, "theme": { "defaultValue": { "value": "dark" }, "description": "The theme of the tooltip.", "name": "theme", "required": false, "type": { "name": "enum", "raw": "TooltipTheme", "value": [ { "value": "\"dark\"" }, { "value": "\"primary\"" } ] } }, "getContainer": { "defaultValue": null, "description": "Function to get the container where the tooltip should be rendered.", "name": "getContainer", "required": false, "type": { "name": "() => HTMLElement" } }, "disableDialogSlide": { "defaultValue": { "value": "true" }, "description": "If true, disables the slide animation of the tooltip.", "name": "disableDialogSlide", "required": false, "type": { "name": "boolean" } }, "withoutDialog": { "defaultValue": { "value": "false" }, "description": "If true, renders the tooltip without a dialog.", "name": "withoutDialog", "required": false, "type": { "name": "boolean" } }, "immediateShowDelay": { "defaultValue": null, "description": "Delay in milliseconds before showing the tooltip immediately.", "name": "immediateShowDelay", "required": false, "type": { "name": "number" } }, "tip": { "defaultValue": { "value": "true" }, "description": "If false, hides the arrow of the tooltip.", "name": "tip", "required": false, "type": { "name": "boolean" } }, "onTooltipHide": { "defaultValue": null, "description": "Callback fired when the tooltip is hidden.", "name": "onTooltipHide", "required": false, "type": { "name": "() => void" } }, "onTooltipShow": { "defaultValue": null, "description": "Callback fired when the tooltip is shown.", "name": "onTooltipShow", "required": false, "type": { "name": "() => void" } }, "position": { "defaultValue": { "value": "top" }, "description": "The placement of the tooltip relative to the reference element.", "name": "position", "required": false, "type": { "name": "enum", "raw": "TooltipPositions", "value": [ { "value": "\"top\"" }, { "value": "\"right\"" }, { "value": "\"bottom\"" }, { "value": "\"left\"" } ] } }, "title": { "defaultValue": null, "description": "The title of the tooltip.", "name": "title", "required": false, "type": { "name": "string" } }, "image": { "defaultValue": null, "description": "The image displayed inside the tooltip.", "name": "image", "required": false, "type": { "name": "string" } }, "icon": { "defaultValue": null, "description": "The icon displayed next to the title.", "name": "icon", "required": false, "type": { "name": "SubIcon" } }, "maxWidth": { "defaultValue": null, "description": "The maximum width of the tooltip.", "name": "maxWidth", "required": false, "type": { "name": "number" } }, "dir": { "defaultValue": null, "description": "The text direction of the tooltip: \"ltr\", \"rtl\", or \"auto\".", "name": "dir", "required": false, "type": { "name": "enum", "raw": "\"ltr\" | \"rtl\" | \"auto\"", "value": [ { "value": "\"ltr\"" }, { "value": "\"rtl\"" }, { "value": "\"auto\"" } ] } }, "onBlur": { "defaultValue": null, "description": "Event handler for blur events on the reference element.", "name": "onBlur", "required": false, "type": { "name": "(e: React.FocusEvent) => void" } }, "onKeyDown": { "defaultValue": null, "description": "Event handler for keydown events on the reference element.", "name": "onKeyDown", "required": false, "type": { "name": "(e: React.KeyboardEvent) => void" } }, "onClick": { "defaultValue": null, "description": "Event handler for click events on the reference element.", "name": "onClick", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onFocus": { "defaultValue": null, "description": "Event handler for focus events on the reference element.", "name": "onFocus", "required": false, "type": { "name": "(e: React.FocusEvent) => void" } }, "onMouseDown": { "defaultValue": null, "description": "Event handler for mousedown events on the reference element.", "name": "onMouseDown", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onMouseEnter": { "defaultValue": null, "description": "Event handler for mouseenter events on the reference element.", "name": "onMouseEnter", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onMouseLeave": { "defaultValue": null, "description": "Event handler for mouseleave events on the reference element.", "name": "onMouseLeave", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "onContextMenu": { "defaultValue": null, "description": "Event handler for contextmenu events on the reference element.", "name": "onContextMenu", "required": false, "type": { "name": "(e: React.MouseEvent) => void" } }, "referenceWrapperClassName": { "defaultValue": { "value": "" }, "description": "Class name applied to the reference wrapper element.", "name": "referenceWrapperClassName", "required": false, "type": { "name": "string" } }, "referenceWrapperElement": { "defaultValue": null, "description": "The wrapper element type to use for React components. Defaults to \"span\".", "name": "referenceWrapperElement", "required": false, "type": { "name": "enum", "raw": "\"span\" | \"div\"", "value": [ { "value": "\"span\"" }, { "value": "\"div\"" } ] } }, "middleware": { "defaultValue": null, "description": "Custom Floating UI middleware for positioning logic.\nIf you provide `offset`, `flip`, or `shift` middleware, the defaults will be skipped.\nOther middleware (like `size`, `inline`, `autoPlacement`) are added to the chain.\n@see https://floating-ui.com/docs/middleware", "name": "middleware", "required": false, "type": { "name": "{ name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; placement: Placement; strategy: Strategy; middlewareData: MiddlewareData; rects: ElementRects; platform: { ...; } & Platform; elements: Elements; }) => Promisable<...>; }[]" } }, "startingEdge": { "defaultValue": null, "description": "The starting edge of the dialog animation.", "name": "startingEdge", "required": false, "type": { "name": "enum", "raw": "DialogStartingEdge", "value": [ { "value": "\"top\"" }, { "value": "\"bottom\"" } ] } }, "moveBy": { "defaultValue": { "value": "{ main: 4, secondary: 0 }" }, "description": "Offset values for positioning adjustments.\n`main` - distance from reference element\n`secondary` - cross-axis offset (skidding)", "name": "moveBy", "required": false, "type": { "name": "{ main?: number; secondary?: number; }" } }, "showDelay": { "defaultValue": { "value": "300" }, "description": "Delay in milliseconds before showing the dialog.", "name": "showDelay", "required": false, "type": { "name": "number" } }, "hideDelay": { "defaultValue": { "value": "100" }, "description": "Delay in milliseconds before hiding the dialog.", "name": "hideDelay", "required": false, "type": { "name": "number" } }, "showTrigger": { "defaultValue": { "value": "mouseenter" }, "description": "Events that trigger showing the dialog.", "name": "showTrigger", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "hideTrigger": { "defaultValue": { "value": "mouseleave" }, "description": "Events that trigger hiding the dialog.", "name": "hideTrigger", "required": false, "type": { "name": "DialogTriggerEvent | DialogTriggerEvent[]" } }, "showOnDialogEnter": { "defaultValue": { "value": "true" }, "description": "If true, keeps the dialog open when mouse enters it.", "name": "showOnDialogEnter", "required": false, "type": { "name": "boolean" } }, "shouldShowOnMount": { "defaultValue": null, "description": "If true, shows the dialog when the component mounts.", "name": "shouldShowOnMount", "required": false, "type": { "name": "boolean" } }, "disable": { "defaultValue": null, "description": "If true, disables opening the dialog.", "name": "disable", "required": false, "type": { "name": "boolean" } }, "open": { "defaultValue": { "value": "false" }, "description": "Controls the open state of the dialog (controlled mode).", "name": "open", "required": false, "type": { "name": "boolean" } }, "isOpen": { "defaultValue": null, "description": "Controlled open state for derived state pattern.", "name": "isOpen", "required": false, "type": { "name": "boolean" } }, "showTriggerIgnoreClass": { "defaultValue": null, "description": "CSS class names that, when present on target, prevent showing the dialog.", "name": "showTriggerIgnoreClass", "required": false, "type": { "name": "string | string[]" } }, "hideTriggerIgnoreClass": { "defaultValue": null, "description": "CSS class names that, when present on target, prevent hiding the dialog.", "name": "hideTriggerIgnoreClass", "required": false, "type": { "name": "string | string[]" } }, "animationType": { "defaultValue": { "value": "expand" }, "description": "The animation type used for the dialog.", "name": "animationType", "required": false, "type": { "name": "enum", "raw": "DialogAnimationType", "value": [ { "value": "\"expand\"" }, { "value": "\"opacity-and-slide\"" } ] } }, "wrapperClassName": { "defaultValue": null, "description": "Class name applied to the dialog content wrapper.", "name": "wrapperClassName", "required": false, "type": { "name": "string" } }, "preventAnimationOnMount": { "defaultValue": null, "description": "If true, prevents animation when mounting.", "name": "preventAnimationOnMount", "required": false, "type": { "name": "boolean" } }, "containerSelector": { "defaultValue": null, "description": "CSS selector of the container where the dialog is portaled.", "name": "containerSelector", "required": false, "type": { "name": "string" } }, "tooltip": { "defaultValue": null, "description": "If true, renders with tooltip arrow styling.", "name": "tooltip", "required": false, "type": { "name": "boolean" } }, "tooltipClassName": { "defaultValue": null, "description": "Class name applied to the tooltip arrow element.", "name": "tooltipClassName", "required": false, "type": { "name": "string" } }, "onDialogDidShow": { "defaultValue": null, "description": "Callback fired when the dialog is shown.", "name": "onDialogDidShow", "required": false, "type": { "name": "(event?: any, eventName?: string) => void" } }, "onDialogDidHide": { "defaultValue": null, "description": "Callback fired when the dialog is hidden.", "name": "onDialogDidHide", "required": false, "type": { "name": "(event: any, eventName: string) => void" } }, "onClickOutside": { "defaultValue": null, "description": "Callback fired when clicking outside the dialog.", "name": "onClickOutside", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "onContentClick": { "defaultValue": null, "description": "Callback fired when clicking inside the dialog content.", "name": "onContentClick", "required": false, "type": { "name": "(event: React.MouseEvent) => void" } }, "zIndex": { "defaultValue": null, "description": "The z-index applied to the dialog.", "name": "zIndex", "required": false, "type": { "name": "number" } }, "useDerivedStateFromProps": { "defaultValue": null, "description": "If true, uses derived state from props pattern.", "name": "useDerivedStateFromProps", "required": false, "type": { "name": "boolean" } }, "hideWhenReferenceHidden": { "defaultValue": { "value": "false" }, "description": "If true, hides the dialog when the reference element scrolls out of view.", "name": "hideWhenReferenceHidden", "required": false, "type": { "name": "boolean" } }, "shouldCallbackOnMount": { "defaultValue": null, "description": "If true, fires onDialogDidShow callback on mount.", "name": "shouldCallbackOnMount", "required": false, "type": { "name": "boolean" } }, "instantShowAndHide": { "defaultValue": null, "description": "If true, shows and hides the dialog without delay.", "name": "instantShowAndHide", "required": false, "type": { "name": "boolean" } }, "getDynamicShowDelay": { "defaultValue": null, "description": "Callback to dynamically adjust show delay and animation behavior.", "name": "getDynamicShowDelay", "required": false, "type": { "name": "() => { showDelay: number; preventAnimation: boolean; }" } }, "addKeyboardHideShowTriggersByDefault": { "defaultValue": { "value": "true" }, "description": "If true, keyboard focus/blur events behave like mouse enter/leave.", "name": "addKeyboardHideShowTriggersByDefault", "required": false, "type": { "name": "boolean" } }, "disableContainerScroll": { "defaultValue": null, "description": "If true or a selector string, disables scrolling in the container when open.", "name": "disableContainerScroll", "required": false, "type": { "name": "string | boolean" } }, "observeContentResize": { "defaultValue": null, "description": "If true, automatically updates position when content resizes.", "name": "observeContentResize", "required": false, "type": { "name": "boolean" } }, "enableNestedDialogLayer": { "defaultValue": null, "description": "If true, provides a LayerProvider context for nested dialogs to render correctly.\nThis is useful when you have components that use Dialog internally (like Dropdown)\ninside another Dialog, ensuring proper z-index stacking and click-outside behavior.", "name": "enableNestedDialogLayer", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } }, "forceRenderWithoutChildren": { "defaultValue": null, "description": "If true, the tooltip will be rendered even if there are no children.", "name": "forceRenderWithoutChildren", "required": false, "type": { "name": "boolean" } }, "children": { "defaultValue": null, "description": "The children elements that the tooltip is attached to.", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } } }, "import": "import { Tooltip } from \"@vibe/tooltip\"", "subComponents": [] }, { "filePath": "src/components/TransitionView/TransitionView.tsx", "aggregator": "core", "symbols": [ "default as TransitionView", "TransitionViewProps", "TransitionViewDirection" ], "displayName": "TransitionView", "description": "", "props": { "activeStep": { "defaultValue": null, "description": "The index of the currently active step.", "name": "activeStep", "required": true, "type": { "name": "number" } }, "direction": { "defaultValue": null, "description": "The direction of the transition between steps.", "name": "direction", "required": true, "type": { "name": "enum", "raw": "SlideDirection", "value": [ { "value": "\"forward\"" }, { "value": "\"backward\"" } ] } }, "children": { "defaultValue": null, "description": "The child elements representing the steps in the transition.", "name": "children", "required": true, "type": { "name": "React.ReactNode[]" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { TransitionView } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/VirtualizedGrid/VirtualizedGrid.tsx", "aggregator": "core", "symbols": [ "default as VirtualizedGrid", "type VirtualizedGridProps", "VirtualizedGridItemType" ], "displayName": "VirtualizedGrid", "description": "", "props": { "items": { "defaultValue": { "value": "[]" }, "description": "The list of items to be rendered in the grid.", "name": "items", "required": false, "type": { "name": "VirtualizedGridItemType[]" } }, "itemRenderer": { "defaultValue": null, "description": "Function that renders each item in the grid.", "name": "itemRenderer", "required": true, "type": { "name": "(item: VirtualizedGridItemType, index: number, style: CSSProperties) => ReactElement>" } }, "getRowHeight": { "defaultValue": { "value": "() => 50" }, "description": "Function that returns the row height.", "name": "getRowHeight", "required": false, "type": { "name": "() => number" } }, "getColumnWidth": { "defaultValue": { "value": "() => 100" }, "description": "Function that returns the column width.", "name": "getColumnWidth", "required": false, "type": { "name": "() => number" } }, "getItemId": { "defaultValue": { "value": "(item: ItemType, _index: number) => item.id" }, "description": "Function that returns the unique ID of an item.", "name": "getItemId", "required": false, "type": { "name": "(item: VirtualizedGridItemType, index: number) => string" } }, "scrollToId": { "defaultValue": { "value": "null" }, "description": "The index of the item to scroll to.", "name": "scrollToId", "required": false, "type": { "name": "number" } }, "onScroll": { "defaultValue": null, "description": "Callback fired when the grid is scrolled.", "name": "onScroll", "required": false, "type": { "name": "(horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void" } }, "onScrollToFinished": { "defaultValue": null, "description": "Callback fired when scrolling has finished.", "name": "onScrollToFinished", "required": false, "type": { "name": "() => void" } }, "onItemsRendered": { "defaultValue": { "value": "null" }, "description": "Callback fired when items are rendered in the grid.", "name": "onItemsRendered", "required": false, "type": { "name": "({ firstItemId, secondItemId, lastItemId, centerItemId, firstItemOffsetEnd, currentOffsetTop }: { firstItemId: string; secondItemId: string; lastItemId: string; centerItemId: string; firstItemOffsetEnd: number; currentOffsetTop: number; }) => void" } }, "onItemsRenderedThrottleMs": { "defaultValue": { "value": "200" }, "description": "The delay (in ms) for throttling the `onItemsRendered` callback.", "name": "onItemsRenderedThrottleMs", "required": false, "type": { "name": "number" } }, "onSizeUpdate": { "defaultValue": null, "description": "Callback fired when the grid size is updated.", "name": "onSizeUpdate", "required": false, "type": { "name": "(width: number, height: number) => void" } }, "onVerticalScrollbarVisiblityChange": { "defaultValue": { "value": "null" }, "description": "Callback fired when the vertical scrollbar visibility changes.", "name": "onVerticalScrollbarVisiblityChange", "required": false, "type": { "name": "(value: boolean) => void" } }, "scrollableClassName": { "defaultValue": null, "description": "Class name applied to the scrollable container.", "name": "scrollableClassName", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { VirtualizedGrid } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/VirtualizedList/VirtualizedList.tsx", "aggregator": "core", "symbols": [ "default as VirtualizedList", "type VirtualizedListProps", "VirtualizedListItem", "VirtualizedListLayout", "VirtualizedListScrollDirection" ], "displayName": "VirtualizedList", "description": "", "props": { "scrollableClassName": { "defaultValue": null, "description": "Class name applied to the scrollable container.", "name": "scrollableClassName", "required": false, "type": { "name": "string" } }, "layout": { "defaultValue": { "value": "vertical" }, "description": "The orientation of the list.", "name": "layout", "required": false, "type": { "name": "enum", "raw": "Layout", "value": [ { "value": "\"vertical\"" }, { "value": "\"horizontal\"" } ] } }, "items": { "defaultValue": { "value": "[]" }, "description": "The list of items to be rendered.", "name": "items", "required": false, "type": { "name": "VirtualizedListItem[]" } }, "itemRenderer": { "defaultValue": { "value": "(item: VirtualizedListItem, _index: number, _style: CSSProperties) => item as ReactElement" }, "description": "Function to render each item in the list.", "name": "itemRenderer", "required": false, "type": { "name": "(item: VirtualizedListItem, index: number, style: CSSProperties) => Element | ReactElement>" } }, "getItemSize": { "defaultValue": { "value": "(item: VirtualizedListItem, _index: number) => item.height" }, "description": "Function to get the size (height/width) of each item, based on layout.", "name": "getItemSize", "required": false, "type": { "name": "(item: VirtualizedListItem, index: number) => number" } }, "getItemId": { "defaultValue": { "value": "(item: VirtualizedListItem, _index: number) => item.id" }, "description": "Function to get the unique ID of an item.", "name": "getItemId", "required": false, "type": { "name": "(item: VirtualizedListItem, index: number) => string" } }, "onScrollToFinished": { "defaultValue": null, "description": "Callback fired when the scroll animation is finished.", "name": "onScrollToFinished", "required": false, "type": { "name": "() => void" } }, "overscanCount": { "defaultValue": { "value": "0" }, "description": "Number of items to render above and below the visible portion.", "name": "overscanCount", "required": false, "type": { "name": "number" } }, "scrollDuration": { "defaultValue": { "value": "200" }, "description": "The duration of the scroll animation in milliseconds.", "name": "scrollDuration", "required": false, "type": { "name": "number" } }, "onItemsRendered": { "defaultValue": null, "description": "Callback fired when items are rendered.", "name": "onItemsRendered", "required": false, "type": { "name": "({ firstItemId, secondItemId, lastItemId, centerItemId, firstItemOffsetEnd, currentOffsetTop }: { firstItemId: string; secondItemId: string; lastItemId: string; centerItemId: string; firstItemOffsetEnd: number; currentOffsetTop: number; }) => void" } }, "onItemsRenderedThrottleMs": { "defaultValue": { "value": "200" }, "description": "The delay (in ms) for throttling the `onItemsRendered` callback.", "name": "onItemsRenderedThrottleMs", "required": false, "type": { "name": "number" } }, "onSizeUpdate": { "defaultValue": null, "description": "Callback fired when the list size changes.", "name": "onSizeUpdate", "required": false, "type": { "name": "(width: number, height: number) => void" } }, "onLayoutDirectionScrollbarVisibilityChange": { "defaultValue": { "value": "null" }, "description": "Callback fired when the vertical or horizontal scrollbar visibility changes.", "name": "onLayoutDirectionScrollbarVisibilityChange", "required": false, "type": { "name": "(value: boolean) => void" } }, "role": { "defaultValue": null, "description": "The ARIA role attribute applied to the list.", "name": "role", "required": false, "type": { "name": "string" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label for the list.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "style": { "defaultValue": null, "description": "Custom inline styles applied to the list.", "name": "style", "required": false, "type": { "name": "CSSProperties" } }, "scrollToId": { "defaultValue": null, "description": "The ID of the item to scroll to.", "name": "scrollToId", "required": false, "type": { "name": "string" } }, "virtualListRef": { "defaultValue": null, "description": "Reference to the virtualized list component.", "name": "virtualListRef", "required": false, "type": { "name": "ForwardedRef" } }, "onScroll": { "defaultValue": null, "description": "Callback fired when the list is scrolled.", "name": "onScroll", "required": false, "type": { "name": "(horizontalScrollDirection: ScrollDirection, scrollTop: number, scrollUpdateWasRequested: boolean) => void" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { VirtualizedList } from \"@vibe/core\"", "subComponents": [] }, { "filePath": "src/components/next/List/List.tsx", "aggregator": "next", "symbols": [ "default as List", "ListSize", "ListElement", "ListProps" ], "displayName": "List", "description": "", "props": { "as": { "defaultValue": { "value": "ul" }, "description": "The HTML element to render as. Defaults to \"ul\".", "name": "as", "required": false, "type": { "name": "enum", "raw": "BaseListElement", "value": [ { "value": "\"div\"" }, { "value": "\"nav\"" }, { "value": "\"ul\"" }, { "value": "\"ol\"" } ] } }, "children": { "defaultValue": null, "description": "The child elements inside the list (typically ListItem components).", "name": "children", "required": false, "type": { "name": "ReactElement> | ReactElement>[]" } }, "aria-label": { "defaultValue": null, "description": "The ARIA label describing the list. Required for accessibility when aria-describedby is not provided.", "name": "aria-label", "required": false, "type": { "name": "string" } }, "aria-describedby": { "defaultValue": null, "description": "The ID of an element that describes the list.", "name": "aria-describedby", "required": false, "type": { "name": "string" } }, "role": { "defaultValue": { "value": "listbox" }, "description": "The ARIA role of the list. Defaults to \"listbox\".", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "size": { "defaultValue": { "value": "small" }, "description": "The size of the list items.", "name": "size", "required": false, "type": { "name": "enum", "raw": "BaseItemSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "maxHeight": { "defaultValue": null, "description": "The maximum height of the list container. Enables scrolling when content exceeds this height.", "name": "maxHeight", "required": false, "type": { "name": "string | number" } }, "focusOnMount": { "defaultValue": { "value": "false" }, "description": "If true, the list will automatically focus on mount.", "name": "focusOnMount", "required": false, "type": { "name": "boolean" } }, "defaultFocusIndex": { "defaultValue": null, "description": "Index of the item that should be focused initially. Defaults to 0.", "name": "defaultFocusIndex", "required": false, "type": { "name": "number" } }, "onFocusChange": { "defaultValue": null, "description": "Callback fired when the focused item changes.", "name": "onFocusChange", "required": false, "type": { "name": "(index: number, id?: string) => void" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { List } from \"@vibe/core/next\"", "parentComponent": "next", "subComponents": [] }, { "filePath": "src/components/next/List/ListItem/ListItem.tsx", "aggregator": "next", "symbols": [ "default as ListItem", "ListItemDirection", "ListItemStartElement", "ListItemEndElement", "ListItemProps" ], "displayName": "ListItem", "description": "", "props": { "value": { "defaultValue": null, "description": "The value of the list item (used for identification). Defaults to label if not provided.", "name": "value", "required": false, "type": { "name": "string | number" } }, "selected": { "defaultValue": { "value": "false" }, "description": "If true, the list item is selected.", "name": "selected", "required": false, "type": { "name": "boolean" } }, "readOnly": { "defaultValue": { "value": "false" }, "description": "If true, the list item is read-only and cannot be edited.", "name": "readOnly", "required": false, "type": { "name": "boolean" } }, "dir": { "defaultValue": null, "description": "Determines the position of the tooltip according to the direction.", "name": "dir", "required": false, "type": { "name": "enum", "raw": "BaseItemDirection", "value": [ { "value": "\"ltr\"" }, { "value": "\"rtl\"" }, { "value": "\"auto\"" } ] } }, "role": { "defaultValue": null, "description": "The ARIA role of the list item.", "name": "role", "required": false, "type": { "name": "AriaRole" } }, "onClick": { "defaultValue": null, "description": "Callback fired when the list item is clicked.", "name": "onClick", "required": false, "type": { "name": "(event: any) => void" } }, "onHover": { "defaultValue": null, "description": "Callback fired when the list item is hovered (mouseenter or focus).", "name": "onHover", "required": false, "type": { "name": "(event: any) => void" } }, "label": { "defaultValue": null, "description": "The primary text content of the list item.", "name": "label", "required": true, "type": { "name": "string" } }, "disabled": { "defaultValue": { "value": "false" }, "description": "If true, the list item is disabled.", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "startElement": { "defaultValue": null, "description": "The start element of the list item.", "name": "startElement", "required": false, "type": { "name": "StartElement" } }, "endElement": { "defaultValue": null, "description": "The end element of the list item.", "name": "endElement", "required": false, "type": { "name": "EndElement" } }, "tooltipProps": { "defaultValue": null, "description": "Props for displaying a tooltip on the list item.", "name": "tooltipProps", "required": false, "type": { "name": "Partial" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ListItem } from \"@vibe/core/next\"", "subComponents": [] }, { "filePath": "src/components/next/List/ListTitle/ListTitle.tsx", "aggregator": "next", "symbols": [ "default as ListTitle", "ListTitleProps" ], "displayName": "ListTitle", "description": "", "props": { "children": { "defaultValue": null, "description": "The title text to display.", "name": "children", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": null, "description": "The size of the list title, inherited from the parent list context if not provided.", "name": "size", "required": false, "type": { "name": "enum", "raw": "BaseItemSizes", "value": [ { "value": "\"small\"" }, { "value": "\"medium\"" }, { "value": "\"large\"" } ] } }, "sticky": { "defaultValue": { "value": "false" }, "description": "If true, the title will stick to the top when scrolling within a list.", "name": "sticky", "required": false, "type": { "name": "boolean" } }, "className": { "defaultValue": null, "description": "A CSS class name to apply to the component.", "name": "className", "required": false, "type": { "name": "string" } }, "data-testid": { "defaultValue": null, "description": "A unique identifier for testing purposes.", "name": "data-testid", "required": false, "type": { "name": "string" } }, "id": { "defaultValue": null, "description": "An HTML id attribute for the component.", "name": "id", "required": false, "type": { "name": "string" } } }, "import": "import { ListTitle } from \"@vibe/core/next\"", "subComponents": [] } ]