{ "version": "0.68.0", "generatedAt": "2026-06-26T11:12:51.835Z", "components": [ { "name": "Accordion", "description": "Accordion component for progressive disclosure of content.\n\nThree variants:\n- `primary` — lightweight row, 40px height, base font.\n- `secondary` — compact row, 24px height, small muted text.\n- `section` — bordered panel with title, optional `AccordionActions` and content area.\n\nCompose with `AccordionItem`, `AccordionTrigger`, `AccordionActions`, and `AccordionContent`.", "importPath": "@wallarm-org/design-system/Accordion", "props": [ { "name": "variant", "type": "AccordionVariant | undefined", "required": false, "description": "Visual variant of the accordion", "defaultValue": "primary" }, { "name": "multiple", "type": "boolean | undefined", "required": false, "description": "Whether multiple items can be expanded at the same time", "defaultValue": "false" }, { "name": "collapsible", "type": "boolean | undefined", "required": false, "description": "Whether an expanded item can be collapsed (when `multiple` is false)", "defaultValue": "true" }, { "name": "value", "type": "string[] | undefined", "required": false, "description": "Controlled expanded item values" }, { "name": "defaultValue", "type": "string[] | undefined", "required": false, "description": "Initial expanded item values for uncontrolled usage" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Disable all interaction" } ], "variants": [ { "name": "variant", "options": [ "primary", "secondary", "section" ], "defaultValue": "primary" } ], "subComponents": [ { "name": "AccordionActions", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AccordionContent", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] }, { "name": "AccordionItem", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "value", "type": "string", "required": true, "description": "The value of the accordion item." }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Whether the accordion item is disabled." }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] }, { "name": "AccordionTrigger", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] } ], "examples": [ { "name": "Primary", "code": "args => (\n
\n \n \n Title\n \n {sampleText}\n \n \n \n Title\n \n {sampleText}\n \n \n \n
\n)" }, { "name": "Secondary", "code": "args => (\n
\n \n \n Title\n \n {sampleText}\n \n \n \n Title\n \n {sampleText}\n \n \n \n
\n)" }, { "name": "Section", "code": "args => (\n
\n \n \n \n Title 2\n \n \n {sampleText}\n \n \n \n \n Title 2\n \n \n {sampleText}\n \n \n \n
\n)" }, { "name": "SectionWithActions", "code": "args => (\n
\n \n \n \n Title 2\n \n \n \n \n \n \n {sampleText}\n \n \n \n \n Title 2\n \n \n \n \n \n \n {sampleText}\n \n \n \n
\n)" }, { "name": "LongTitlePrimary", "code": "args => (\n
\n \n \n {longTitleText}\n \n {sampleText}\n \n \n \n
\n)" }, { "name": "LongTitleSecondary", "code": "args => (\n
\n \n \n {longTitleText}\n \n {sampleText}\n \n \n \n
\n)" }, { "name": "Multiple", "code": "args => (\n
\n \n \n Section A\n \n {sampleText}\n \n \n \n Section B\n \n {sampleText}\n \n \n \n Section C\n \n {sampleText}\n \n \n \n
\n)" }, { "name": "Disabled", "code": "args => (\n
\n \n \n Available\n \n {sampleText}\n \n \n \n Disabled item\n \n {sampleText}\n \n \n \n
\n)" } ] }, { "name": "Alert", "description": "Alert component for displaying important messages to users.\n\nSupports 5 color variants: primary (neutral), destructive, info, warning, and success.\nUse compound components: AlertIcon, AlertContent, AlertClose, AlertControls, AlertActions.", "importPath": "@wallarm-org/design-system/Alert", "props": [ { "name": "color", "type": "AlertColor | undefined", "required": false, "description": "Color variant of the alert", "defaultValue": "primary" }, { "name": "minWidth", "type": "number | undefined", "required": false, "description": "Minimum width in pixels (default: 256)", "defaultValue": "ALERT_MIN_WIDTH" }, { "name": "maxWidth", "type": "number | undefined", "required": false, "description": "Maximum width in pixels (default: 980)", "defaultValue": "ALERT_MAX_WIDTH" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [ { "name": "color", "options": [ "primary", "destructive", "info", "warning", "success" ], "defaultValue": "primary" } ], "subComponents": [ { "name": "AlertClose", "props": [ { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] }, { "name": "AlertContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AlertControls", "props": [ { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AlertDescription", "props": [ { "name": "lineClamp", "type": "number | undefined", "required": false, "description": "Maximum number of lines before truncation (default: 4). Set to 0 to disable truncation." }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AlertIcon", "props": [ { "name": "icon", "type": "ReactNode", "required": false, "description": "Override the default icon for the variant" }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AlertTitle", "props": [ { "name": "lineClamp", "type": "number | undefined", "required": false, "description": "Maximum number of lines before truncation (default: 4). Set to 0 to disable truncation." }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "AllColors", "code": "() => (\n
\n \n \n \n Primary Alert\n This is a neutral alert for general information.\n \n \n\n \n \n \n Destructive Alert\n This alert indicates an error or dangerous action.\n \n \n\n \n \n \n Info Alert\n This alert provides informational content to the user.\n \n \n\n \n \n \n Warning Alert\n This alert warns the user about potential issues.\n \n \n\n \n \n \n Success Alert\n This alert confirms a successful action or operation.\n \n \n
\n)" }, { "name": "TitleOnly", "code": "() => {\n return (\n
\n \n \n \n Alert with title only\n \n \n\n \n \n \n Information message without description\n \n \n
\n );\n}" }, { "name": "WithCloseButton", "code": "() => {\n const [showInfo, setShowInfo] = useState(true);\n const [showWarning, setShowWarning] = useState(true);\n\n return (\n
\n {showInfo && (\n \n \n \n Dismissable Alert\n This alert can be closed by clicking the X button.\n \n setShowInfo(false)} />\n \n )}\n\n {showWarning && (\n \n \n \n Warning with close\n \n setShowWarning(false)} />\n \n )}\n
\n );\n}" }, { "name": "WithControls", "code": "() => {\n return (\n
\n \n \n \n Alert with Two Action Buttons\n \n This alert has two action buttons on the right side without a close button.\n \n \n \n \n \n \n \n\n \n \n \n Alert with Actions and Close\n This alert has action buttons and a close button.\n \n \n \n \n \n \n\n \n \n \n Critical Error\n An error occurred that requires your attention.\n \n \n \n \n \n \n
\n );\n}" }, { "name": "WithBottomActions", "code": "() => {\n return (\n
\n \n \n \n Alert with Bottom Actions\n \n This alert has action buttons at the bottom of the content area.\n \n \n \n \n \n \n \n \n\n \n \n \n Destructive Alert with Actions\n \n This error requires immediate action. Please review and take necessary steps.\n \n \n \n \n \n \n \n
\n );\n}" }, { "name": "MinMaxWidth", "code": "() => {\n return (\n
\n
\n

\n Default min width (256px) - Short content\n

\n \n \n \n Short\n \n \n
\n\n
\n

Default max width (980px) - Long content

\n \n \n \n \n This is a very long alert title that demonstrates the maximum width behavior of the\n component\n \n \n This is an extended description that shows how the alert handles longer content. The\n alert should respect its maximum width of 980px and the text should wrap appropriately\n within the available space.\n \n \n \n \n
\n\n
\n

Custom maxWidth={500}

\n \n \n \n \n This is a very long alert title that demonstrates the custom maximum width behavior\n \n \n This alert has a custom maxWidth of 500px set via prop.\n \n \n \n \n
\n
\n );\n}" }, { "name": "MaxLines", "code": "() => {\n const longTitle =\n 'This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed.';\n const longDescription =\n 'This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible.';\n\n return (\n
\n
\n

Default (4 lines max)

\n \n \n \n {longTitle}\n {longDescription}\n \n \n
\n\n
\n

Custom (2 lines max)

\n \n \n \n {longTitle}\n {longDescription}\n \n \n
\n\n
\n

No truncation

\n \n \n \n {longTitle}\n {longDescription}\n \n \n
\n
\n );\n}" }, { "name": "WithCode", "code": "() => (\n
\n \n \n \n Message goes here\n Description goes here\n
\n \n Optional code output\n \n
\n \n \n\n \n \n \n Syntax Error in Configuration\n An error occurred while parsing the configuration file.\n\n
\n \n Error: Unexpected token at line 42, column 15\n \n
\n \n \n \n
\n)" } ] }, { "name": "AnimatedBackground", "importPath": "@wallarm-org/design-system/AnimatedBackground", "props": [ { "name": "variant", "type": "\"pixel\" | undefined", "required": false, "defaultValue": "pixel" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [], "subComponents": [ { "name": "BlurBackground", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "PixelBackground", "props": [ { "name": "game", "type": "boolean | undefined", "required": false }, { "name": "excludeCardSize", "type": "{ width: number; height: number; } | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Pixel", "code": "() => (\n \n)" }, { "name": "PixelWithCard", "code": "() => (\n \n \n \n Sign In\n \n \n

\n Decorative background renders behind interactive content.\n

\n \n \n \n)" }, { "name": "Blur", "code": "() => (\n \n)" }, { "name": "BlurWithCard", "code": "() => (\n \n \n \n Wally Chat\n \n \n

\n Liquid gradient background renders behind chat content.\n

\n \n \n \n)" } ] }, { "name": "AppShell", "importPath": "@wallarm-org/design-system/AppShell", "props": [ { "name": "reveal", "type": "boolean | undefined", "required": false }, { "name": "expandFrom", "type": "AppShellExpandFrom | undefined", "required": false }, { "name": "appeared", "type": "boolean | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [], "subComponents": [ { "name": "AppShellHeader", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AppShellRail", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AppShellRemote", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Basic", "code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [loading, setLoading] = useState(true);\n const [sidebarMode, setSidebarMode] = useState('adaptive');\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n return (\n \n \n \n \n \n \n\n \n {loading ? (\n <>\n \n \n \n\n \n \n \n \n \n \n Wallarm updates\n \n\n \n \n ) : (\n \n )}\n \n \n \n\n \n \n \n navigateToProduct('home')}\n />\n \n\n \n\n {loading ? : }\n \n\n \n \n \n\n \n
\n \n
\n\n \n \n \n );\n}" }, { "name": "RevealFlow", "code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [splashDone, setSplashDone] = useState(false);\n const [sidebarMode, setSidebarMode] = useState('adaptive');\n const [revealKey, setRevealKey] = useState(0);\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n useEffect(() => {\n if (splashDone) return;\n const timer = setTimeout(() => setSplashDone(true), 2000);\n return () => clearTimeout(timer);\n }, [splashDone]);\n\n const handleReplay = () => {\n setSplashDone(false);\n setRevealKey(k => k + 1);\n };\n\n if (!splashDone) {\n return (\n
\n \n
\n );\n }\n\n return (\n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n navigateToProduct('home')}\n />\n \n\n \n\n \n \n\n \n \n \n\n \n
\n \n
\n\n \n \n \n );\n}" }, { "name": "LoginFlow", "code": "() => {\n const pathname = useLocationPathname();\n const activeProduct = deriveProduct(pathname);\n\n const [splashVisible, setSplashVisible] = useState(true);\n const [showShell, setShowShell] = useState(false);\n const [revealed, setRevealed] = useState(false);\n const [flowKey, setFlowKey] = useState(0);\n const [sidebarMode, setSidebarMode] = useState('adaptive');\n const { theme, setTheme } = useTheme();\n const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n useEffect(() => {\n if (!splashVisible) return;\n const timer = setTimeout(() => setSplashVisible(false), 2000);\n return () => clearTimeout(timer);\n }, [splashVisible]);\n\n const handleSignIn = () => {\n setShowShell(true);\n };\n\n const handleReplay = () => {\n setShowShell(false);\n setRevealed(false);\n setSplashVisible(true);\n setFlowKey(k => k + 1);\n };\n\n return (\n \n {!revealed && (\n \n )}\n\n {!showShell && (\n
\n \n
\n Sign In\n
\n \n \n
\n \n
\n \n
\n )}\n\n {showShell && (\n
\n setRevealed(true)}>\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n navigateToProduct('home')}\n />\n\n \n\n \n \n \n \n \n\n \n
\n \n
\n \n \n \n
\n )}\n \n );\n}" } ] }, { "name": "Attribute", "importPath": "@wallarm-org/design-system/Attribute", "props": [ { "name": "loading", "type": "boolean | undefined", "required": false, "description": "Show skeleton placeholders instead of children", "defaultValue": "false" }, { "name": "isEmpty", "type": "boolean | undefined", "required": false, "description": "When true, `AttributeValue` renders the em-dash placeholder instead of its\nchildren, and any `AttributeEmptyDescription` inside the tree renders\n(it returns `null` otherwise). Ignored while `loading` is true (skeleton\nwins).", "defaultValue": "false" }, { "name": "orientation", "type": "AttributeOrientation | undefined", "required": false, "description": "Layout direction of the label and value.\n- `vertical` (default): label above value\n- `horizontal`: label on the left, value on the right", "defaultValue": "vertical" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [], "subComponents": [ { "name": "AttributeActions", "props": [ { "name": "open", "type": "boolean | undefined", "required": false }, { "name": "defaultOpen", "type": "boolean | undefined", "required": false }, { "name": "modal", "type": "boolean | undefined", "required": false }, { "name": "anchorPoint", "type": "{ x: number; y: number; } | undefined", "required": false, "description": "Virtual anchor point for positioning without a trigger element" }, { "name": "positioning", "type": "PositioningOptions | undefined", "required": false, "description": "Override default positioning config" }, { "name": "highlightedValue", "type": "string | null | undefined", "required": false, "description": "Programmatically control which item is highlighted" }, { "name": "closeOnSelect", "type": "boolean | undefined", "required": false, "description": "Whether selecting an item closes the menu (default true)" } ] }, { "name": "AttributeActionsContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AttributeActionsItem", "props": [ { "name": "inset", "type": "boolean | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "value", "type": "string | undefined", "required": false, "description": "Explicit value for programmatic highlighting via highlightedValue" }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "variant", "type": "{ default: string; brand: string; destructive: string; }", "required": false } ] }, { "name": "AttributeActionsTarget", "props": [ { "name": "disableNestedInteractive", "type": "boolean | undefined", "required": false, "description": "When true, descendants are rendered `inert` — they cannot be clicked,\nfocused, or read by assistive tech as actionable. Any interaction with the\ntarget (mouse or keyboard) opens the AttributeActions dropdown.\n\nDefault `false` — descendants keep their own behavior; clicking them does\nnot open the dropdown. The dropdown opens only when the surrounding target\narea is clicked.", "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AttributeEmptyDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AttributeLabel", "props": [ { "name": "width", "type": "number | undefined", "required": false, "description": "Width of the label cell in horizontal orientation, in pixels.\nDefaults to MIN_LABEL_WIDTH. Clamped to [MIN_LABEL_WIDTH, MAX_LABEL_WIDTH].\nIgnored in vertical orientation.", "defaultValue": "MIN_LABEL_WIDTH" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AttributeLabelDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AttributeLabelInfo", "props": [ { "name": "dir", "type": "string | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "AttributeValue", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Default", "code": "() => (\n
\n \n Request ID\n \n abc-123-def-456\n \n \n
\n)" }, { "name": "WithDescription", "code": "() => (\n
\n \n \n Created at\n \n The time when the request was first received\n \n \n \n April 9, 2026, 14:32\n \n \n
\n)" }, { "name": "WithInfo", "code": "() => (\n
\n \n \n Request ID\n Unique identifier assigned to each incoming request\n \n \n abc-123-def-456\n \n \n\n \n \n Unique identifier assigned to each incoming request\n Request ID\n \n \n abc-123-def-456\n \n \n
\n)" }, { "name": "WithLink", "code": "() => (\n
\n \n \n Source\n \n View docs\n \n \n \n API Gateway\n \n \n
\n)" }, { "name": "Empty", "code": "() => (\n
\n \n \n Region\n Manual composition\n \n \n \n\n \n Region\n \n This text is replaced by the em-dash placeholder\n \n \n\n \n \n Owner\n Not yet assigned\n \n \n \n\n \n \n SSO provider\n \n Not connected —{' '}\n \n set up integration\n \n \n \n \n \n
\n)", "description": "All empty-state variants in vertical orientation:\n 1. Manual composition — `AttributeLabelDescription` always visible, value\n composed by the consumer (no `isEmpty` flag).\n 2. `isEmpty` alone — value becomes em-dash, `AttributeValue` children are\n ignored, label stays bare.\n 3. `isEmpty` + `` — description renders only\n while `isEmpty` is true; outside that state it returns null.\n 4. Same as (3), with `ReactNode` content (text + link) inside the\n description." }, { "name": "Loading", "code": "() => (\n
\n \n Created at\n \n \n \n Status\n \n \n
\n)" }, { "name": "Composition", "code": "() => (\n
\n \n Status\n \n \n Blocked\n \n \n \n\n \n First seen\n \n \n \n \n\n \n Attack type\n \n {item}}\n overflowRenderer={renderOverflowPopover}\n />\n \n \n\n \n Sessions\n \n 3 sessions\n \n \n\n \n Users\n \n {item}}\n overflowRenderer={renderOverflowPopover}\n />\n \n \n\n \n IPs\n \n \n \n \n 142.198.167.52\n Azure\n \n \n \n 34.74.73.20\n AWS\n \n \n \n 34.74.73.20\n GCP\n \n \n \n 10.0.0.1\n \n \n \n 192.168.1.1\n \n \n \n \n\n \n Source IP\n \n \n \n 142.198.167.52\n Azure\n \n \n \n\n \n Created at\n \n \n \n \n\n \n Documentation\n \n \n View full report\n \n \n \n\n \n Payload (inline)\n \n \n \n \n\n \n Payload (code)\n \n {'{ \"action\": \"login\", \"user_id\": 42 }'}\n \n \n
\n)" }, { "name": "WithActions", "code": "() => (\n
\n \n Status\n \n \n \n \n Blocked\n \n \n {renderActionsItems()}\n \n \n \n\n \n First seen\n \n \n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Attack type\n \n \n \n {item}}\n overflowRenderer={renderOverflowPopover}\n />\n \n {renderActionsItems()}\n \n \n \n\n \n Sessions\n \n \n \n 3 sessions\n \n {renderActionsItems()}\n \n \n \n\n \n Users\n \n \n \n {item}}\n overflowRenderer={renderOverflowPopover}\n />\n \n {renderActionsItems()}\n \n \n \n\n \n IPs\n \n \n \n \n \n \n 142.198.167.52\n Azure\n \n \n \n 34.74.73.20\n AWS\n \n \n \n 34.74.73.20\n GCP\n \n \n \n 10.0.0.1\n \n \n \n 192.168.1.1\n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Source IP\n \n \n \n \n \n 142.198.167.52\n Azure\n \n \n {renderActionsItems()}\n \n \n \n\n \n Created at\n \n \n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Documentation\n \n \n \n \n View full report\n \n \n {renderActionsItems()}\n \n \n \n\n \n Payload (inline)\n \n \n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Payload (code)\n \n \n \n {'{ \"action\": \"login\", \"user_id\": 42 }'}\n \n {renderActionsItems()}\n \n \n \n
\n)" }, { "name": "Horizontal", "code": "() => (\n
\n \n Status\n \n \n Blocked\n \n \n \n
\n)" }, { "name": "HorizontalTruncation", "code": "() => (\n
\n \n Short\n \n Fits in 256px label cell\n \n \n \n \n This label text is much longer than 256 pixels and must be truncated\n \n \n Value\n \n \n \n Users\n \n \n artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com\n \n \n \n
\n)" }, { "name": "HorizontalComposition", "code": "() => (\n
\n \n Status\n \n \n Blocked\n \n \n \n\n \n First seen\n \n \n \n \n\n \n Attack type\n \n {item}}\n overflowRenderer={renderOverflowPopover}\n />\n \n \n\n \n Last seen\n \n \n \n \n\n \n Sessions\n \n 3 sessions\n \n \n\n \n Users\n \n {item}}\n overflowRenderer={renderOverflowPopover}\n />\n \n \n\n
\n \n IPs\n \n \n \n \n 142.198.167.52\n Azure\n \n \n \n 34.74.73.20\n AWS\n \n \n \n 34.74.73.20\n GCP\n \n \n \n \n
\n
\n)" }, { "name": "HorizontalLoading", "code": "() => (\n
\n \n Created at\n \n \n \n Status\n \n \n
\n)" }, { "name": "HorizontalEmpty", "code": "() => (\n
\n \n \n Region\n Manual composition\n \n \n \n\n \n Region\n \n This text is replaced by the em-dash placeholder\n \n \n\n \n \n Owner\n Not yet assigned\n \n \n \n\n \n \n SSO provider\n \n Not connected —{' '}\n \n set up integration\n \n \n \n \n \n
\n)", "description": "All empty-state variants in horizontal orientation. Same four cases as\n`Empty`, just with `orientation='horizontal'` and `AttributeLabel width=160`\nto leave room for descriptions (DS clamp: 100..256px)." }, { "name": "HorizontalWithActions", "code": "() => (\n
{renderActionsAttributes(false)}
\n)" }, { "name": "HorizontalWithActionsMenuOnly", "code": "() => (\n
{renderActionsAttributes(true)}
\n)" } ] }, { "name": "Badge", "importPath": "@wallarm-org/design-system/Badge", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false, "defaultValue": "slate" }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"text\" | \"none\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "variant", "type": "{ default: string; dotted: string; }", "required": false, "defaultValue": "default" }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false, "defaultValue": "medium" }, { "name": "isIconOnly", "type": "{ true: string; }", "required": false }, { "name": "type", "type": "{ solid: string; secondary: string; outline: string; text: string; 'text-color': string; }", "required": false, "defaultValue": "solid" }, { "name": "muted", "type": "{ true: string; false: string; }", "required": false, "defaultValue": "false" }, { "name": "textVariant", "type": "{ default: string; code: string; }", "required": false, "defaultValue": "default" }, { "name": "isClickable", "type": "{ true: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" } ], "variants": [ { "name": "variant", "options": [ "default", "dotted" ], "defaultValue": "default" }, { "name": "size", "options": [ "small", "medium", "large" ] }, { "name": "isIconOnly", "options": [ "true" ] }, { "name": "type", "options": [ "solid", "secondary", "outline", "text", "text-color" ] }, { "name": "color", "options": [] }, { "name": "muted", "options": [ "true", "false" ] }, { "name": "textVariant", "options": [ "default", "code" ] }, { "name": "isClickable", "options": [ "true" ] } ], "subComponents": [], "examples": [ { "name": "Basic", "code": "({ ...args }) => Badge" }, { "name": "Dotted", "code": "({ ...args }) => (\n \n Badge\n \n)" }, { "name": "Sizes", "code": "({ ...args }) => (\n \n \n Small\n \n \n Medium\n \n \n Large\n \n \n)" }, { "name": "Types", "code": "({ ...args }) => (\n \n \n Solid\n \n \n Secondary\n \n \n Outline\n \n \n Text\n \n \n Text Color\n \n \n)" }, { "name": "TextVariants", "code": "({ ...args }) => (\n \n \n Default Text\n \n \n Code Text\n \n \n)" }, { "name": "WithIconsLeft", "code": "({ ...args }) => (\n \n \n \n Success\n \n \n \n Error\n \n \n \n Info\n \n \n \n Verified\n \n \n \n Complete\n \n \n)" }, { "name": "WithIconsRight", "code": "({ ...args }) => (\n \n \n Success\n \n \n \n Error\n \n \n \n Info\n \n \n \n Verified\n \n \n \n Complete\n \n \n \n)" }, { "name": "IconsOnly", "code": "({ ...args }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "MutedVariants", "code": "() => (\n \n \n \n {Object.keys(BadgeTypeEnum).map(type => (\n \n ))}\n \n \n \n {badgeColorsMuted.map(color => (\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n ))}\n \n
\n {type}\n
\n {isMutedSupported(type, color) ? (\n \n {capitalize(color)}\n \n ) : null}\n
\n)" }, { "name": "ColorVariants", "code": "() => (\n \n \n \n {Object.keys(BadgeTypeEnum).map(type => (\n \n ))}\n \n \n \n {Object.entries(BadgeColorEnum).map(([label, color]) => (\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n ))}\n \n
\n {type}\n
\n \n {label}\n \n
\n)" }, { "name": "ContentVariants", "code": "() => (\n \n \n \n {Object.keys(BadgeTypeEnum).map(type => (\n \n ))}\n \n \n \n {Object.entries(BadgeColorEnum).map(([label, color]) => (\n \n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n {badgeColorsMuted.includes(color) && (\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n )}\n \n ))}\n \n
\n {type}\n
\n \n {label}\n \n
\n \n {label}\n\n \n \n
\n \n \n {label}\n \n
\n \n \n {label}\n \n \n
\n \n {label}\n \n
\n \n {label}\n \n \n
\n \n {label}\n \n \n
\n \n \n \n
\n {isMutedSupported(type, color) ? (\n \n {capitalize(color)}\n \n ) : null}\n
\n)" } ] }, { "name": "Banner", "description": "Banner displays a prominent, full-width message at the top of the page\n(above the header) to communicate system-wide status, announcements,\nwarnings, errors, or promotional messages to all users.\n\nBanners persist until dismissed by the user or until the state that caused\nthem is resolved.\n\nSupports 5 variants: primary (dark/neutral), secondary, destructive, info,\nand warning. Compose with: BannerIcon, BannerContent, BannerTitle,\nBannerDescription, BannerLink, BannerControls, BannerClose.", "importPath": "@wallarm-org/design-system/Banner", "props": [ { "name": "variant", "type": "BannerVariant | undefined", "required": false, "description": "Visual variant of the banner", "defaultValue": "primary" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [ { "name": "variant", "options": [ "primary", "secondary", "destructive", "info", "warning" ], "defaultValue": "primary" } ], "subComponents": [ { "name": "BannerClose", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BannerContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BannerControls", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BannerDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BannerIcon", "props": [ { "name": "icon", "type": "ReactNode", "required": false, "description": "Override the default icon for the variant." }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BannerLink", "props": [ { "name": "disabled", "type": "{ true: string; }", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "weight", "type": "{ regular: string; medium: string; }", "required": false, "defaultValue": "regular" }, { "name": "download", "type": "any", "required": false }, { "name": "href", "type": "string | undefined", "required": false }, { "name": "hrefLang", "type": "string | undefined", "required": false }, { "name": "media", "type": "string | undefined", "required": false }, { "name": "ping", "type": "string | undefined", "required": false }, { "name": "target", "type": "HTMLAttributeAnchorTarget | undefined", "required": false }, { "name": "referrerPolicy", "type": "HTMLAttributeReferrerPolicy | undefined", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false } ] }, { "name": "BannerTitle", "props": [ { "name": "action", "type": "ReactNode", "required": false, "description": "Optional inline action rendered next to the title (e.g. a BannerLink).\nSits on the same row and wraps below on narrow viewports." }, { "name": "lineClamp", "type": "number | undefined", "required": false, "description": "Maximum number of lines before the message is truncated (default: 1).\nThe design budget is 2 lines; 1 line is preferred.", "defaultValue": "1" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Default", "code": "({\n variant,\n customIcon,\n description,\n inlineAction,\n actions,\n closable,\n title,\n text,\n}) => (\n \n : undefined}\n />\n \n Action : undefined}>\n {title}\n \n {description && {text}}\n \n {(actions || closable) && (\n \n {actions && (\n \n )}\n {closable && }\n \n )}\n \n)", "description": "Interactive preview — toggle the controls below to compose the banner.\nBannerIcon shows the default icon on destructive, info, and warning; enable\n\"customIcon\" to override it (and to add an icon to primary/secondary)." }, { "name": "AllColors", "code": "() => (\n
\n \n \n Message goes here\n \n \n\n \n \n Message goes here\n \n \n\n \n \n \n Message goes here\n \n \n\n \n \n \n Message goes here\n \n \n\n \n \n \n Message goes here\n \n \n
\n)", "description": "primary and secondary have no icon by default; destructive, info, and warning\neach render their own default icon." }, { "name": "WithDescription", "code": "() => (\n \n \n \n Credential Stuffing Detection\n \n Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher.\n \n \n \n)" }, { "name": "WithInlineLink", "code": "() => (\n \n \n \n Learn more}>\n You have exceeded the monthly quota for your company\n \n \n \n)" }, { "name": "LongText", "code": "() => (\n \n \n \n Banner will render at most two lines before truncating the text. Banners address system-wide\n conditions, not individual user actions. The voice should be institutional and factual, even\n when the situation is urgent. Every word must earn its place within the 2-line budget, but\n one line is more preferred.\n \n \n \n \n \n \n)", "description": "Long messages wrap and clamp to a maximum of two lines, then truncate with an\nellipsis. A tooltip reveals the full text on hover. One line is preferred." }, { "name": "CustomIcon", "code": "() => (\n \n } />\n \n View plans}>\n New features are now available on the Pro plan\n \n \n \n \n \n \n)", "description": "Override the default variant icon (or add one to primary/secondary) by\npassing the `icon` prop to BannerIcon." }, { "name": "WithActions", "code": "() => (\n \n \n \n Your subscription has expired\n \n \n \n \n \n \n)" }, { "name": "Closable", "code": "() => {\n const [open, setOpen] = useState(true);\n\n if (!open) {\n return (\n
\n \n
\n );\n }\n\n return (\n \n \n A new version of the dashboard is available\n \n \n setOpen(false)} />\n \n \n );\n}" } ] }, { "name": "Breadcrumbs", "description": "Breadcrumbs component for showing navigation hierarchy.\n\nUsed to show the user's location within a website or application and allow\neasy navigation back to parent pages.", "importPath": "@wallarm-org/design-system/Breadcrumbs", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [], "subComponents": [ { "name": "BreadcrumbsEllipsis", "props": [ { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BreadcrumbsItem", "props": [ { "name": "href", "type": "string | undefined", "required": false, "description": "If provided, renders as a link instead of button" }, { "name": "isCurrent", "type": "boolean | undefined", "required": false, "description": "@internal - Whether this is the current/active page (set automatically by parent)", "defaultValue": "false" } ] }, { "name": "BreadcrumbsScopeSwitcher", "props": [ { "name": "value", "type": "string", "required": true }, { "name": "items", "type": "ScopeSwitcherItem[]", "required": true }, { "name": "isCurrent", "type": "boolean | undefined", "required": false, "description": "@internal - set automatically by parent", "defaultValue": "false" } ] }, { "name": "BreadcrumbsSeparator", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Basic", "code": "args => {\n return (\n
\n \n Home\n Products\n Current Page\n \n
\n );\n}" }, { "name": "SingleItem", "code": "args => {\n return (\n
\n \n Current Page\n \n
\n );\n}" }, { "name": "WithIcons", "code": "args => {\n return (\n
\n \n \n \n Home\n \n \n \n Category\n \n \n Subcategory\n \n \n alert('Current page clicked')}>\n \n Current Page\n \n \n \n
\n );\n}" }, { "name": "WithInteractiveItems", "code": "args => {\n return (\n
\n \n Home\n alert('Category dropdown clicked')}>\n \n Category\n \n \n Current Page\n \n
\n );\n}" }, { "name": "IconsOnly", "code": "args => {\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n alert('Current page clicked')}>\n \n \n \n
\n );\n}" }, { "name": "WithTruncation", "code": "args => {\n const [showAll, setShowAll] = useState(false);\n\n return (\n
\n \n Home\n Level 1\n {!showAll ? (\n \n \n setShowAll(true)} />\n \n WIP\n \n ) : (\n [\n \n Level 2\n ,\n \n Level 3\n ,\n ]\n )}\n Penultimate\n Current Page\n \n
\n );\n}" }, { "name": "LongBreadcrumbs", "code": "args => {\n return (\n
\n \n Home\n Products & Services\n Technology Category\n Software Development\n Web Development Tools\n alert('Current page clicked')}>\n Frontend Frameworks and Libraries\n \n \n
\n );\n}" } ] }, { "name": "BulkBar", "importPath": "@wallarm-org/design-system/BulkBar", "props": [], "variants": [], "subComponents": [ { "name": "BulkBarSummary", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "BulkBarSummaryClear", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] }, { "name": "BulkBarSummaryCount", "props": [ { "name": "count", "type": "number | undefined", "required": false, "description": "Renders the default \"{count} selected\" label." }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "color", "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; 'tertiary-alt': string; danger: string; inherit: string; }", "required": false, "defaultValue": "primary-alt" }, { "name": "size", "type": "{ xs: string; sm: string; md: string; lg: string; xl: string; }", "required": false, "defaultValue": "sm" }, { "name": "weight", "type": "{ light: string; regular: string; medium: string; bold: string; }", "required": false, "defaultValue": "medium" } ] }, { "name": "BulkBarSummarySelectAll", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] } ], "examples": [] }, { "name": "Button", "importPath": "@wallarm-org/design-system/Button", "props": [ { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false, "defaultValue": "large" }, { "name": "loading", "type": "{ true: string; }", "required": false, "defaultValue": "false" }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "color", "type": "{ brand: string; neutral: string; 'neutral-alt': string; destructive: string; }", "required": false, "defaultValue": "brand" }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false, "defaultValue": "primary" } ], "variants": [ { "name": "variant", "options": [ "primary", "outline", "ghost", "secondary" ] }, { "name": "color", "options": [ "brand", "neutral", "neutral-alt", "destructive" ] } ], "subComponents": [], "examples": [ { "name": "Basic", "code": "({ ...args }) => {\n return (\n \n );\n}" }, { "name": "Variants", "code": "({ ...args }) => (\n \n Brand\n\n \n \n\n \n\n \n \n\n Neutral\n\n \n \n\n \n\n \n \n\n Neutral Alt\n\n \n \n\n \n\n \n \n\n Destructive\n\n \n \n\n \n\n \n\n \n \n \n)" }, { "name": "Sizes", "code": "({ ...args }) => (\n \n \n \n \n \n)" }, { "name": "Disabled", "code": "({ ...args }) => (\n \n Brand\n\n \n \n\n \n\n \n \n\n Neutral\n\n \n \n\n \n\n \n \n\n Neutral Alt\n\n \n \n\n \n\n \n \n\n Destructive\n\n \n \n\n \n\n \n\n \n \n \n)" }, { "name": "Loading", "code": "({ ...args }) => (\n \n Brand\n\n \n \n\n \n\n \n \n\n Neutral\n\n \n \n\n \n\n \n \n\n Neutral Alt\n\n \n \n\n \n\n \n \n\n Destructive\n\n \n \n\n \n\n \n\n \n \n \n)" }, { "name": "Icons", "code": "({ ...args }) => (\n \n \n\n \n\n \n \n)" }, { "name": "Badge", "code": "({ ...args }) => (\n \n)" }, { "name": "IconOnly", "code": "({ ...args }) => (\n \n \n\n \n\n \n \n)" }, { "name": "LinkAsButton", "code": "({ ...args }) => (\n \n)" }, { "name": "FullWidth", "code": "({ ...args }) => (\n
\n \n
\n)" } ] }, { "name": "ButtonBase", "importPath": "@wallarm-org/design-system/ButtonBase", "props": [ { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false, "defaultValue": "large" }, { "name": "loading", "type": "{ true: string; }", "required": false, "defaultValue": "false" }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false, "defaultValue": "false" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "as", "type": "C | undefined", "required": false, "defaultValue": "button" } ], "variants": [ { "name": "size", "options": [ "small", "medium", "large" ] }, { "name": "iconOnly", "options": [ "true", "false" ] }, { "name": "loading", "options": [ "true" ] }, { "name": "hasNonTextEnd", "options": [ "true", "false" ] }, { "name": "fullWidth", "options": [ "true", "false" ] } ], "subComponents": [], "examples": [] }, { "name": "Calendar", "description": "Get full month range (1st to last day)", "importPath": "@wallarm-org/design-system/Calendar", "props": [ { "name": "type", "type": "CalendarType | undefined", "required": false, "description": "Calendar type: 'single' for one month, 'range' for two months (date range selection)", "defaultValue": "single" }, { "name": "showTime", "type": "boolean | undefined", "required": false, "description": "Show time selection (affects input placeholder text)", "defaultValue": "false" }, { "name": "showKeyboardHints", "type": "boolean | undefined", "required": false, "description": "Show keyboard shortcut hints in presets and footer", "defaultValue": "true" }, { "name": "value", "type": "DateValue[] | undefined", "required": false, "description": "Controlled value - array of selected dates" }, { "name": "defaultValue", "type": "DateValue[] | undefined", "required": false, "description": "Default value for uncontrolled mode" }, { "name": "minDate", "type": "DateValue | undefined", "required": false, "description": "Minimum selectable date" }, { "name": "maxDate", "type": "DateValue | undefined", "required": false, "description": "Maximum selectable date" }, { "name": "isDateUnavailable", "type": "((date: DateValue) => boolean) | undefined", "required": false, "description": "Function to determine if a specific date should be unavailable/disabled.\nDateValue has year, month (1-12), and day properties.\nTo get day of week, use: new Date(date.year, date.month - 1, date.day).getDay()\nwhere Sunday = 0, Saturday = 6." }, { "name": "disallowDisabledDatesInRange", "type": "boolean | undefined", "required": false, "description": "When true, prevents selecting a range that contains any unavailable dates.\nRequires controlled mode (value + onChange props) to work properly.", "defaultValue": "false" }, { "name": "open", "type": "boolean | undefined", "required": false, "description": "Controlled open state of the calendar popover" }, { "name": "defaultOpen", "type": "boolean | undefined", "required": false, "description": "Default open state for uncontrolled mode" }, { "name": "closeOnSelect", "type": "boolean | undefined", "required": false, "description": "Whether to close calendar on date selection. Default: true", "defaultValue": "true" }, { "name": "readonly", "type": "boolean | undefined", "required": false, "description": "Whether calendar is readonly (display only, no date selection allowed). Default: false", "defaultValue": "false" }, { "name": "focusedValue", "type": "DateValue | undefined", "required": false, "description": "Controlled focused date — navigates the calendar view to this date" } ], "variants": [], "subComponents": [ { "name": "CalendarApplyButton", "props": [ { "name": "as", "type": "C | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CalendarBody", "props": [] }, { "name": "CalendarContent", "props": [] }, { "name": "CalendarFooter", "props": [] }, { "name": "CalendarFooterControls", "props": [] }, { "name": "CalendarGrids", "props": [] }, { "name": "CalendarInputHeader", "props": [] }, { "name": "CalendarKeyboardHints", "props": [] }, { "name": "CalendarPresetItem", "props": [ { "name": "label", "type": "string", "required": true, "description": "Display label for the preset" }, { "name": "value", "type": "PresetValue", "required": true, "description": "Preset value - dates array or named preset string" }, { "name": "shortcut", "type": "string | undefined", "required": false, "description": "Keyboard shortcut key" }, { "name": "showShortcut", "type": "boolean | undefined", "required": false, "description": "Whether to display the shortcut badge", "defaultValue": "true" }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CalendarPresets", "props": [ { "name": "presets", "type": "PresetConfig[] | undefined", "required": false, "description": "Array of preset configurations. Defaults to DEFAULT_SINGLE_PRESETS or DEFAULT_RANGE_PRESETS based on calendar type" }, { "name": "showShortcuts", "type": "boolean | undefined", "required": false, "description": "Whether to show keyboard shortcuts next to presets", "defaultValue": "true" } ] }, { "name": "CalendarResetButton", "props": [ { "name": "as", "type": "C | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CalendarTrigger", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Additional props passed to the trigger wrapper", "defaultValue": "true" }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Single", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "Range", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "RangeWithPresets", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "RangeWithInput", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "RangeWithFooter", "code": "() => {\n const [value, setValue] = useState([]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n setValue([])} />\n \n \n \n \n \n \n );\n}" }, { "name": "RangeFullFeatured", "code": "() => {\n const [value, setValue] = useState([]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n setValue([])} />\n \n \n \n \n \n \n );\n}" }, { "name": "SingleWithInput", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "SingleWithDateTime", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)", "description": "Single calendar with a date **and time** input header. Pass `showTime` on\n`Calendar` to upgrade the header `DateInput` to minute granularity with a\ntime dropdown — pick a day in the grid, then a time from the dropdown." }, { "name": "SingleWithPresets", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "RangeWithDisabledDates", "code": "() => (\n {\n const dayOfWeek = new Date(date.year, date.month - 1, date.day).getDay();\n return dayOfWeek === 0 || dayOfWeek === 6;\n }}\n >\n \n \n \n \n \n \n \n \n \n)", "description": "Range calendar with disabled weekends" }, { "name": "RangeDisallowDisabled", "code": "() => {\n const [value, setValue] = useState([]);\n\n const isWeekend = (date: DateValue) => {\n const dayOfWeek = new Date(date.year, date.month - 1, date.day).getDay();\n return dayOfWeek === 0 || dayOfWeek === 6;\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}", "description": "Range selection cannot span disabled dates (controlled mode required)" }, { "name": "RangeControlled", "code": "() => {\n const [value, setValue] = useState([]);\n const [open, setOpen] = useState(false);\n\n const getButtonLabel = () => {\n if (!value || value.length === 0 || !value[0]) return 'Select date range';\n if (value.length === 1 || !value[1]) return value[0].toString();\n return `${value[0].toString()} - ${value[1].toString()}`;\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n setValue([])} />\n setOpen(false)} />\n \n \n \n \n \n );\n}" }, { "name": "SingleCustomPresets", "code": "() => {\n const now = today(getLocalTimeZone()) as unknown as DateValue;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}", "description": "Custom preset items" }, { "name": "RangeReadonly", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n)", "description": "Readonly range calendar displaying a pre-selected range" }, { "name": "RangeReadonlyWithPresets", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)", "description": "Readonly range calendar with presets (presets are disabled)" }, { "name": "SingleReadonly", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n)", "description": "Readonly single calendar" } ] }, { "name": "Card", "importPath": "@wallarm-org/design-system/Card", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "color", "type": "{ primary: string; secondary: string; }", "required": false, "defaultValue": "primary" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [ { "name": "color", "options": [ "primary", "secondary" ], "defaultValue": "primary" }, { "name": "interactive", "options": [ "true", "false" ], "defaultValue": "false" }, { "name": "disabled", "options": [ "true", "false" ], "defaultValue": "false" } ], "subComponents": [ { "name": "CardContent", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CardFooter", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CardHeader", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CardTitle", "props": [ { "name": "icon", "type": "ReactNode", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Basic", "code": "({ ...args }) => (\n console.log('Card clicked')} {...args}>\n \n Card title\n \n Badge\n \n \n Card description\n \n console.log('Card`s button clicked')}\n >\n Button\n \n \n \n)" }, { "name": "Variants", "code": "() => (\n \n \n \n \n Primary card\n \n Badge\n \n \n This is a primary card variant\n \n \n \n \n\n \n \n Secondary card\n \n Badge\n \n \n This is a secondary card variant\n \n \n \n \n \n\n \n console.log('Primary card clicked')}>\n \n Primary card\n \n Badge\n \n \n This is a primary card variant with onClick event\n \n \n \n \n\n console.log('Secondary card clicked')}>\n \n Secondary card\n \n Badge\n \n \n This is a secondary card variant with onClick event\n \n \n \n \n \n\n \n console.log('Primary card clicked')}>\n \n Primary card\n \n Badge\n \n \n This is a disabled primary card variant\n \n \n \n \n\n console.log('Secondary card clicked')}>\n \n Secondary card\n \n Badge\n \n \n This is a disabled secondary card variant\n \n \n \n \n \n \n)" }, { "name": "VariousContent", "code": "() => (\n \n \n \n \n Card title\n \n Badge\n \n \n \n Card description Very long! Even if it goes to the second line, it won't break anything.\n It works perfectly! Can you see? Amazing yeah?\n \n \n \n \n \n\n \n \n Card title\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n Card title\n \n Badge\n \n \n \n \n Label\n \n Input description\n \n \n \n \n \n \n\n \n \n \n }>Card title\n \n Card description.\n \n\n \n \n }>Card title\n \n \n \n \n)" } ] }, { "name": "Checkbox", "importPath": "@wallarm-org/design-system/Checkbox", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "htmlFor", "type": "string | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "id", "type": "string", "required": false, "description": "The unique identifier of the machine." }, { "name": "form", "type": "string | undefined", "required": false, "description": "The id of the form that the checkbox belongs to." }, { "name": "defaultChecked", "type": "CheckedState | undefined", "required": false, "description": "The initial checked state of the checkbox when rendered.\nUse when you don't need to control the checked state of the checkbox." }, { "name": "ids", "type": "Partial<{ root: string; hiddenInput: string; control: string; label: string; }> | undefined", "required": false, "description": "The ids of the elements in the checkbox. Useful for composition." }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Whether the checkbox is disabled" }, { "name": "invalid", "type": "boolean | undefined", "required": false, "description": "Whether the checkbox is invalid" }, { "name": "required", "type": "boolean | undefined", "required": false, "description": "Whether the checkbox is required" }, { "name": "checked", "type": "CheckedState | undefined", "required": false, "description": "The controlled checked state of the checkbox" }, { "name": "readOnly", "type": "boolean | undefined", "required": false, "description": "Whether the checkbox is read-only" }, { "name": "name", "type": "string | undefined", "required": false, "description": "The name of the input field in a checkbox.\nUseful for form submission." }, { "name": "value", "type": "string | undefined", "required": false, "description": "The value of checkbox input. Useful for form submission." }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ], "variants": [], "subComponents": [ { "name": "CheckboxDescription", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CheckboxGroup", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string[] | undefined", "required": false, "description": "The initial value of `value` when uncontrolled" }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "If `true`, the checkbox group is disabled" }, { "name": "invalid", "type": "boolean | undefined", "required": false, "description": "If `true`, the checkbox group is invalid" }, { "name": "readOnly", "type": "boolean | undefined", "required": false, "description": "If `true`, the checkbox group is read-only" }, { "name": "name", "type": "string | undefined", "required": false, "description": "The name of the input fields in the checkbox group\n(Useful for form submission)." }, { "name": "value", "type": "string[] | undefined", "required": false, "description": "The controlled value of the checkbox group" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." }, { "name": "variant", "type": "{ default: string; card: string; }", "required": false, "defaultValue": "default" } ] }, { "name": "CheckboxLabel", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] } ], "examples": [ { "name": "Basic", "code": "() => (\n \n \n Accept terms and conditions\n \n)" }, { "name": "Checked", "code": "() => (\n \n \n Accept terms and conditions\n \n)" }, { "name": "Indeterminate", "code": "() => (\n \n \n Accept terms and conditions\n \n)" }, { "name": "Disabled", "code": "() => (\n \n \n \n Accept terms and conditions\n \n\n \n \n Accept terms and conditions\n \n\n \n \n Accept terms and conditions\n \n \n)" }, { "name": "WithDescription", "code": "() => (\n \n \n \n Accept terms and conditions\n \n \n \n \n Additional information\n \n \n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n)" }, { "name": "Group", "code": "() => (\n \n \n \n React\n \n\n \n \n Solid\n \n\n \n \n Vue\n \n\n \n \n Svelte\n \n \n)" }, { "name": "Card", "code": "() => (\n \n \n \n React\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n\n \n \n \n Solid\n \n \n \n \n Additional information\n \n \n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n\n \n \n Vue\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n\n \n \n Svelte\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n\n \n \n Angular\n \n By clicking this checkbox, you agree to the terms and conditions.\n \n \n \n)" }, { "name": "FormField", "code": "() => (\n \n \n \n Label{' '}\n \n \n \n \n Additional information\n \n \n\n This is an input description.\n\n \n \n \n React\n \n\n \n \n Solid\n \n\n \n \n Vue\n \n\n \n \n Svelte\n \n \n \n\n \n \n Label\n \n \n \n \n Additional information\n \n \n\n This is an input description.\n\n \n \n \n React\n \n\n \n \n Solid\n \n\n \n \n Vue\n \n\n \n \n Svelte\n \n \n \n \n)" } ] }, { "name": "Checkmark", "importPath": "@wallarm-org/design-system/Checkmark", "props": [], "variants": [], "subComponents": [], "examples": [] }, { "name": "Code", "importPath": "@wallarm-org/design-system/Code", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false, "defaultValue": "primary" }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "size", "type": "{ xs: string; s: string; m: string; l: string; }", "required": false, "defaultValue": "l" }, { "name": "weight", "type": "{ light: string; regular: string; medium: string; bold: string; }", "required": false, "defaultValue": "regular" }, { "name": "italic", "type": "{ true: string; false: string; }", "required": false, "defaultValue": "false" }, { "name": "truncate", "type": "{ true: string; }", "required": false, "defaultValue": "false" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "lineClamp", "type": "number | undefined", "required": false } ], "variants": [ { "name": "size", "options": [ "xs", "s", "m", "l" ] }, { "name": "weight", "options": [ "light", "regular", "medium", "bold" ] }, { "name": "color", "options": [ "primary", "secondary", "destructive" ] }, { "name": "italic", "options": [ "true", "false" ], "defaultValue": "false" }, { "name": "truncate", "options": [ "true" ] } ], "subComponents": [], "examples": [ { "name": "Basic", "code": "({ ...args }) => (\n const example = 'code'\n)" }, { "name": "Sizes", "code": "({ ...args }) => (\n \n \n console.log('Extra small code text');\n \n \n console.log('Small code text');\n \n \n console.log('Medium code text');\n \n \n console.log('Large code text');\n \n \n)" }, { "name": "Weights", "code": "({ ...args }) => (\n \n \n const light = 'Light weight code';\n \n \n const regular = 'Regular weight code';\n \n \n const medium = 'Medium weight code';\n \n \n const bold = 'Bold weight code';\n \n \n)" }, { "name": "Colors", "code": "({ ...args }) => (\n \n \n const light = 'Primary color code';\n \n \n const regular = 'Secondary color code';\n \n \n)" }, { "name": "Multiline", "code": "({ ...args }) => (\n \n {`function example() {\n const message = 'Hello, World!';\n console.log(message);\n return message;\n}`}\n \n)" }, { "name": "Italic", "code": "({ ...args }) => (\n \n \n {'// Italic small code comment'}\n \n \n {'// Italic medium code comment'}\n \n \n {'// Italic large code comment'}\n \n \n {'// Bold italic small'}\n \n \n {'// Bold italic medium'}\n \n \n {'// Bold italic large'}\n \n \n)" }, { "name": "AsChild", "code": "({ ...args }) => (\n \n {''}\n \n)" } ] }, { "name": "CodeSnippet", "description": "Code block with syntax highlighting, actions, line numbers, folding, and maxLines collapse.", "importPath": "@wallarm-org/design-system/CodeSnippet", "props": [], "variants": [], "subComponents": [ { "name": "CodeSnippetActions", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetAdapterProvider", "props": [ { "name": "adapter", "type": "AdapterInput", "required": true, "description": "Syntax adapter or a loader function that returns a Promise of the adapter.\nUsing a loader function enables code splitting - the adapter bundle will\nonly be loaded when the component mounts." } ] }, { "name": "CodeSnippetCode", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "nativeScroll", "type": "boolean | undefined", "required": false, "description": "Use native browser scroll instead of ScrollArea.", "defaultValue": "false" } ] }, { "name": "CodeSnippetCopyButton", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetFullscreenButton", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetHeader", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetLineNumbers", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetRoot", "props": [ { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "size", "type": "{ sm: string; md: string; lg: string; }", "required": false, "defaultValue": "sm" }, { "name": "code", "type": "string", "required": true, "description": "The code string to display" }, { "name": "language", "type": "TLanguage | undefined", "required": false, "description": "Programming language for syntax highlighting", "defaultValue": "text' as TLanguage" }, { "name": "lines", "type": "Record | undefined", "required": false, "description": "Per-line configuration (color, prefix) keyed by line number", "defaultValue": "EMPTY_LINES" }, { "name": "startingLineNumber", "type": "number | undefined", "required": false, "description": "Starting line number (default: 1)", "defaultValue": "1" }, { "name": "wrapLines", "type": "boolean | undefined", "required": false, "description": "Enable line wrapping" }, { "name": "maxLines", "type": "number | undefined", "required": false, "description": "Max lines before collapsing.\nRoot auto-renders the default show-more button unless a direct\n`CodeSnippetShowMoreButton` child is provided for button-level props.", "defaultValue": "0" }, { "name": "folds", "type": "FoldRegion[] | undefined", "required": false, "description": "Foldable regions that can be collapsed/expanded" } ] }, { "name": "CodeSnippetShowMoreButton", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetTab", "props": [ { "name": "value", "type": "string", "required": true }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetTabs", "props": [ { "name": "value", "type": "string | undefined", "required": false }, { "name": "defaultValue", "type": "string | undefined", "required": false } ] }, { "name": "CodeSnippetTitle", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "CodeSnippetWrapButton", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "variant", "type": "{ outline: string; ghost: string; }", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "active", "type": "{ true: string; false: string; }", "required": false } ] }, { "name": "InlineCodeSnippet", "props": [ { "name": "code", "type": "string", "required": true, "description": "The code content to display" }, { "name": "size", "type": "\"inherit\" | \"sm\" | \"md\" | \"lg\" | undefined", "required": false, "description": "Size variant", "defaultValue": "inherit" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Render as the React element passed via `children` instead of the default ``. The `code` prop becomes the cloned element's content.", "defaultValue": "false" }, { "name": "copyable", "type": "boolean | undefined", "required": false, "description": "Enable click to copy functionality (default: true)", "defaultValue": "true" }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "FoldButton", "props": [ { "name": "form", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Default", "code": "() => (\n \n \n \n \n \n)", "description": "Basic code snippet with plain text rendering." }, { "name": "WithLineNumbers", "code": "() => (\n \n \n \n \n \n \n)", "description": "Code snippet with line numbers displayed." }, { "name": "Sizes", "code": "() => (\n \n \n sm\n \n \n \n \n \n \n\n \n md (default)\n \n \n \n \n \n \n\n \n lg\n \n \n \n \n \n \n \n)", "description": "Different size variants: sm, md (default), lg." }, { "name": "LineAnnotations", "code": "() => {\n const httpCode = `Host: inventory.example.com\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)\nAppleWebKit/537.36\nAccept: application/json, text/plain, */*\nAccept-Language: en-US,en;q=0.9\nConnection: keep-alive\nCache-Control: no-cache`;\n\n return (\n \n \n \n \n Tooltip\n \n ),\n },\n 5: {\n color: 'warning',\n prefix: (\n \n \n \n \n Tooltip\n \n ),\n },\n 7: {\n color: 'info',\n prefix: (\n \n \n \n \n Tooltip\n \n ),\n },\n }}\n >\n \n \n \n \n \n );\n}", "description": "Line annotations with different colors.\nEach line can have a color (danger, warning, info, success, brand, ai, neutral)\nand an optional prefix (text, icon, etc.)." }, { "name": "LineColors", "code": "() => {\n const colorsCode = `Line 1: Default (no color)\nLine 2: Danger color\nLine 3: Warning color\nLine 4: Info color\nLine 5: Success color\nLine 6: Brand color\nLine 7: AI color\nLine 8: Neutral color`;\n\n return (\n \n \n \n \n \n \n );\n}", "description": "All available line colors." }, { "name": "LineRanges", "code": "() => {\n const httpCode = `GET /api/v2/users HTTP/1.1\nHost: inventory.example.com\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)\nAccept: application/json, text/plain, */*\nAccept-Language: en-US,en;q=0.9\nConnection: keep-alive\nX-Forwarded-For: 192.168.1.100\nCache-Control: no-cache`;\n\n return (\n \n \n \n \n \n \n );\n}", "description": "Highlight specific character ranges within lines with colored bold text.\nRanges define start (inclusive) and end (exclusive) character indices.\nWhen ranges are present, the whole-line text color is suppressed;\nonly the specified ranges get colored + bold text.\nThe line background/border from `color` still applies." }, { "name": "TextStyles", "code": "() => {\n const stylesCode = `Line 1: Default (regular)\nLine 2: Medium weight\nLine 3: Italic style\nLine 4: Danger with italic override\nLine 5: Neutral (default italic)\nLine 6: Custom className\nLine 7: Custom inline style`;\n\n return (\n \n \n \n \n \n \n );\n}", "description": "Text styles for lines: regular, medium, italic.\nEach color has a default text style, but it can be overridden." }, { "name": "LineWithPrefix", "code": "() => {\n const diffCode = `const greeting = \"Hello\";\nconsole.log(\"old message\");\nconsole.log(\"new message\");\nconsole.log(\"another new line\");\n\nexport default greeting;`;\n\n return (\n \n \n \n \n \n \n );\n}", "description": "Lines with prefix content (text, symbols)." }, { "name": "LineWrapping", "code": "() => {\n const longCode = `const veryLongVariableName = \"This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width\";\nconsole.log(veryLongVariableName);`;\n\n const httpCode = `GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1\nHost: api.wallarm.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0\nContent-Type: application/json\nAccept: application/json\n\n{\n \"filter\": { \"status\": \"active\", \"role\": \"admin\" }\n}`;\n\n return (\n \n \n Without wrapping\n
\n \n \n \n \n \n \n
\n \n\n \n With wrapping\n
\n \n \n \n \n \n \n
\n \n \n \n Without wrapping with annotations\n \n
\n \n \n \n \n \n \n
\n \n \n Wrapping with annotations\n
\n \n \n \n \n \n \n
\n \n \n Folds without wrapping\n
\n \n \n \n \n \n \n
\n \n \n Folds with wrapping\n
\n \n \n \n \n \n \n
\n \n \n );\n}", "description": "Line wrapping enabled for long lines.\nIncludes examples with annotations and folds in wrap mode." }, { "name": "WithBothScrolls", "code": "() => (\n
\n },\n 3: { color: 'info' },\n 13: { color: 'danger', prefix: },\n 20: { color: 'success', prefix: '+' },\n }}\n style={{ height: '280px' }}\n >\n \n \n \n \n \n
\n)", "description": "Code snippet with both vertical and horizontal scrolling.\nThe container is constrained to show scrollbars." }, { "name": "CustomStartingLine", "code": "() => (\n \n \n \n \n \n \n)", "description": "Custom starting line number." }, { "name": "JSONWithShiki", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "JSON code with Shiki syntax highlighting.\nShiki provides VS Code-quality highlighting (~200KB+ with WASM)." }, { "name": "TypescriptWithPrism", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "Typescript code with Prism syntax highlighting.\nPrism is lightweight (~15KB) and good for most use cases." }, { "name": "BashWithPrism", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "Bash code with Prism syntax highlighting.\nPrism is lightweight (~15KB) and good for most use cases." }, { "name": "HTMLWithHighlightJs", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "HTML code with highlight.js syntax highlighting.\nhighlight.js is well-established (~30KB) with good language support." }, { "name": "HTTPRequestWithPrism", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "HTTP request with Prism syntax highlighting.\nHighlights HTTP method, URL, version, header names and values." }, { "name": "HTTPResponseWithShiki", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "HTTP response with Shiki syntax highlighting.\nHighlights status line, headers, and embedded JSON body." }, { "name": "WithHeader", "code": "() => (\n \n \n install.sh\n \n \n \n \n \n)", "description": "Header with a simple title." }, { "name": "WithTabsAndActions", "code": "() => {\n const [tab, setTab] = useState('npm');\n const code = packageManagerCodes[tab] ?? '';\n\n return (\n
\n \n \n \n npm\n pnpm\n yarn\n bun\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}", "description": "Header with tabs for switching between package managers and a copy action.\nMatches Figma node 3099:5956.\n\nThe tab indicator sits directly on the header's bottom border —\nthe tab list itself has **no** border of its own." }, { "name": "WithFloatingActions", "code": "() => (\n
\n \n \n \n \n \n \n \n \n \n \n
\n)", "description": "Floating actions without a header.\nActions are positioned absolute at the top-right corner of the code snippet.\nMatches Figma node 3092:13248." }, { "name": "ShowMore", "code": "() => (\n
\n
\n

\n 12 lines, maxLines=7 — 5 hidden, button shown\n

\n \n \n \n \n \n
\n
\n

\n 9 lines, maxLines=7 — 2 hidden, below threshold, no button\n

\n \n \n \n \n \n
\n
\n

\n Explicit CodeSnippetShowMoreButton for per-button analytics\n

\n \n \n \n \n \n \n
\n
\n)", "description": "Show more / show less with threshold behavior.\nFirst snippet (12 lines, maxLines=7) shows the button (5 hidden).\nSecond snippet (9 lines, maxLines=7) hides only 2 lines — below\nthe threshold of 3, so all lines are shown without the button.\nThird snippet provides an explicit CodeSnippetShowMoreButton for\nper-button analytics; root does not auto-render a second button." }, { "name": "HTTPRequestWithFolding", "code": "() => (\n \n \n \n \n \n \n)", "description": "HTTP Request with foldable headers and body using `getHttpFolds`." }, { "name": "HTTPResponseWithFolding", "code": "() => (\n \n \n \n \n \n \n)", "description": "HTTP Response with foldable headers and body using `getHttpFolds`." }, { "name": "WithFoldingExpanded", "code": "() => (\n \n \n \n \n \n \n)", "description": "Folds combined with line highlights — colors and decorations\non folded lines are hidden when collapsed, visible when expanded." }, { "name": "WithFoldingAndShowMore", "code": "() => (\n \n \n \n \n \n \n \n \n)", "description": "Folds combined with maxLines (ShowMore) and a custom startingLineNumber.\nFold line numbers are absolute — `getHttpFolds` accepts `startingLineNumber`\nto offset them automatically." } ] }, { "name": "Country", "importPath": "@wallarm-org/design-system/Country", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "size", "type": "{ small: string; medium: string; }", "required": false, "defaultValue": "small" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "code", "type": "\"AF\" | \"AX\" | \"AL\" | \"DZ\" | \"AS\" | \"AD\" | \"AO\" | \"AI\" | \"AG\" | \"AR\" | \"AM\" | \"AW\" | \"AU\" | \"AT\" | \"AZ\" | \"BS\" | \"BH\" | \"BD\" | \"BB\" | \"BY\" | \"BE\" | \"BZ\" | \"BJ\" | \"BM\" | \"BT\" | \"BO\" | \"BQ\" | \"BA\" | \"BW\" | \"BV\" | \"BR\" | \"IO\" | \"BN\" | \"BG\" | \"BF\" | \"BI\" | \"CV\" | \"KH\" | \"CM\" | \"CA\" | \"KY\" | \"CF\" | \"TD\" | \"CL\" | \"CN\" | \"CX\" | \"CC\" | \"CO\" | \"KM\" | \"CG\" | \"CD\" | \"CK\" | \"CR\" | \"CI\" | \"HR\" | \"CU\" | \"CW\" | \"CY\" | \"CZ\" | \"DK\" | \"DJ\" | \"DM\" | \"DO\" | \"DNO\" | \"EC\" | \"EG\" | \"SV\" | \"GQ\" | \"ER\" | \"EE\" | \"ET\" | \"FK\" | \"FO\" | \"FJ\" | \"FI\" | \"FR\" | \"GF\" | \"PF\" | \"TF\" | \"GA\" | \"GM\" | \"GE\" | \"DE\" | \"GH\" | \"GI\" | \"GR\" | \"GL\" | \"GD\" | \"GP\" | \"GU\" | \"GT\" | \"GG\" | \"GN\" | \"GW\" | \"GY\" | \"HT\" | \"HM\" | \"VA\" | \"HN\" | \"HK\" | \"HU\" | \"IS\" | \"IN\" | \"ID\" | \"IR\" | \"IQ\" | \"IE\" | \"IM\" | \"IL\" | \"IT\" | \"JM\" | \"JP\" | \"JE\" | \"JO\" | \"KZ\" | \"KE\" | \"KI\" | \"KP\" | \"KR\" | \"KW\" | \"KG\" | \"LA\" | \"LV\" | \"LB\" | \"LS\" | \"LR\" | \"LY\" | \"LI\" | \"LT\" | \"LHO\" | \"LU\" | \"MO\" | \"MK\" | \"MG\" | \"MW\" | \"MY\" | \"MV\" | \"ML\" | \"MT\" | \"MH\" | \"MQ\" | \"MR\" | \"MU\" | \"YT\" | \"MX\" | \"FM\" | \"MD\" | \"MC\" | \"MN\" | \"ME\" | \"MS\" | \"MA\" | \"MZ\" | \"MM\" | \"NA\" | \"NR\" | \"NP\" | \"NL\" | \"NC\" | \"NZ\" | \"NI\" | \"NE\" | \"NG\" | \"NU\" | \"NF\" | \"MP\" | \"NO\" | \"OM\" | \"PK\" | \"PW\" | \"PS\" | \"PA\" | \"PG\" | \"PY\" | \"PE\" | \"PH\" | \"PN\" | \"PL\" | \"PT\" | \"PR\" | \"QA\" | \"ROC\" | \"RE\" | \"RO\" | \"RU\" | \"RW\" | \"BL\" | \"SH\" | \"KN\" | \"LC\" | \"MF\" | \"PM\" | \"VC\" | \"WS\" | \"SM\" | \"ST\" | \"SA\" | \"SN\" | \"RS\" | \"SC\" | \"SL\" | \"SG\" | \"SX\" | \"SK\" | \"SI\" | \"SB\" | \"SO\" | \"ZA\" | \"GS\" | \"SS\" | \"ES\" | \"LK\" | \"SD\" | \"SR\" | \"SJ\" | \"SZ\" | \"SE\" | \"CH\" | \"SY\" | \"TW\" | \"TJ\" | \"TZ\" | \"TH\" | \"TL\" | \"TG\" | \"TK\" | \"TO\" | \"TT\" | \"TN\" | \"TR\" | \"TM\" | \"TC\" | \"TV\" | \"UG\" | \"UA\" | \"AE\" | \"GB\" | \"US\" | \"UY\" | \"UZ\" | \"VU\" | \"VE\" | \"VN\" | \"VG\" | \"VI\" | \"WF\" | \"EH\" | \"YE\" | \"ZM\" | \"ZW\"", "required": true } ], "variants": [ { "name": "size", "options": [ "small", "medium" ] } ], "subComponents": [ { "name": "CountryFlag", "props": [ { "name": "slot", "type": "string | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "crossOrigin", "type": "CrossOrigin", "required": false }, { "name": "decoding", "type": "\"auto\" | \"async\" | \"sync\" | undefined", "required": false }, { "name": "fetchPriority", "type": "\"auto\" | \"high\" | \"low\" | undefined", "required": false }, { "name": "height", "type": "string | number | undefined", "required": false }, { "name": "loading", "type": "\"eager\" | \"lazy\" | undefined", "required": false }, { "name": "referrerPolicy", "type": "HTMLAttributeReferrerPolicy | undefined", "required": false }, { "name": "sizes", "type": "string | undefined", "required": false }, { "name": "srcSet", "type": "string | undefined", "required": false }, { "name": "useMap", "type": "string | undefined", "required": false }, { "name": "width", "type": "string | number | undefined", "required": false } ] }, { "name": "CountryName", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Basic", "code": "args => (\n \n \n \n \n)" }, { "name": "Sizes", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "FlagOnly", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "NameOnly", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n)" }, { "name": "Examples", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" } ] }, { "name": "DateFormatProvider", "description": "Application-level provider for temporal display format.\n\nMount once near the root — DateInput, DateRangeInput, TimeInput, and\nCalendar all pick up the chosen `order` and `hourCycle` via\n`useDateFormat`. If no provider is mounted, DS defaults to `day-first`\norder and locale-driven hour cycle.", "importPath": "@wallarm-org/design-system/DateFormatProvider", "props": [ { "name": "order", "type": "DateOrder", "required": true, "description": "Order in which date segments render across every DS temporal input and\nthe calendar. Set once at the app root." }, { "name": "hourCycle", "type": "12 | 24 | undefined", "required": false, "description": "Hour cycle applied to every DS temporal input with time segments and\nevery time dropdown. `12` (AM/PM) or `24`. When omitted, the browser\nlocale decides. Can be overridden per-input via the `hourCycle` prop." } ], "variants": [], "subComponents": [], "examples": [] }, { "name": "DateInput", "importPath": "@wallarm-org/design-system/DateInput", "props": [ { "name": "showIcon", "type": "boolean | undefined", "required": false, "description": "Whether to show the leading icon. Default: true.", "defaultValue": "true" }, { "name": "error", "type": "boolean | undefined", "required": false, "description": "Whether the input has an error state. Sets `aria-invalid` and error styling.", "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Whether the input is disabled. Prevents user interaction.", "defaultValue": "false" }, { "name": "readOnly", "type": "boolean | undefined", "required": false, "description": "Whether the input is read-only. Segments are focusable but not editable.", "defaultValue": "false" }, { "name": "placeholder", "type": "string | undefined", "required": false, "description": "Placeholder shown when no value is selected." }, { "name": "size", "type": "TemporalInputSize | undefined", "required": false, "description": "Visual size. Default: 'default' (36px).", "defaultValue": "default" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "value", "type": "DateValue | null | undefined", "required": false }, { "name": "defaultValue", "type": "DateValue | null | undefined", "required": false }, { "name": "minValue", "type": "DateValue | undefined", "required": false }, { "name": "maxValue", "type": "DateValue | undefined", "required": false }, { "name": "placeholderValue", "type": "DateValue | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "isRequired", "type": "boolean | undefined", "required": false, "description": "Marks the field as required in assistive tech and HTML form validation." }, { "name": "granularity", "type": "\"day\" | undefined", "required": false, "defaultValue": "day" }, { "name": "showTimeDropdown", "type": "undefined", "required": false }, { "name": "timeStep", "type": "undefined", "required": false, "defaultValue": "30" } ], "variants": [], "subComponents": [], "examples": [ { "name": "Basic", "code": "({ ...args }) => {\n return ;\n}" }, { "name": "WithIcon", "code": "() => (\n \n \n \n Without icon\n \n \n \n \n \n With icon\n \n \n \n \n)" }, { "name": "States", "code": "() => (\n \n \n \n Default\n \n \n \n \n \n \n Disabled\n \n \n \n \n \n \n Error\n \n \n \n \n \n)" }, { "name": "Sizes", "code": "() => (\n \n \n \n \n Default (36px)\n \n \n \n \n \n Medium (32px)\n \n \n \n \n \n Small (24px)\n \n \n \n \n \n \n \n Default filled\n \n \n \n \n \n Medium filled\n \n \n \n \n \n Small filled\n \n \n \n \n \n)" }, { "name": "Filled", "code": "() => (\n \n \n \n Date\n \n \n \n \n \n \n Date + time (24h)\n \n \n \n \n \n \n \n Date + time (12h)\n \n \n \n \n \n \n Without icon\n \n \n \n \n)" }, { "name": "Granularity", "code": "() => (\n \n \n \n \n 12-hour format\n \n \n \n \n \n \n \n \n \n \n 24-hour format\n \n \n \n \n \n \n \n \n)" }, { "name": "WithFieldComponents", "code": "() => {\n // With `granularity='day'` the runtime value is always a CalendarDate —\n // onChange gets cast on the way in so app state stays narrowly typed.\n const [value, setValue] = useState(null);\n const [errorValue, setErrorValue] = useState(today(getLocalTimeZone()));\n\n const handleSetNow = () => {\n setValue(today(getLocalTimeZone()));\n };\n\n return (\n \n \n \n Label\n Set now\n \n setValue(v as CalendarDate | null)}\n />\n This is an input description.\n \n\n \n Label\n setErrorValue(v as CalendarDate | null)}\n />\n An error message.\n \n \n );\n}" }, { "name": "DateOrderComparison", "code": "() => (\n \n \n \n \n Day first — DD MMM YYYY\n \n \n \n \n \n \n \n \n \n Month first — MMM DD YYYY\n \n \n \n \n \n \n \n)", "description": "Demonstrates both segment orders side by side. Each column wraps its\nDateInputs in a scoped `DateFormatProvider` — in real apps the provider\nis mounted once near the root and the whole tree picks up a single order." }, { "name": "HourCycleByContext", "code": "() => (\n \n \n \n \n 12-hour (AM/PM)\n \n \n \n \n \n \n \n \n 24-hour\n \n \n \n \n \n \n)", "description": "Demonstrates `hourCycle` picked up from `DateFormatProvider`, not passed\nper input. Left column wraps in `hourCycle={12}`, right in `hourCycle={24}`;\nno `hourCycle` prop on the individual DateInputs." }, { "name": "ReadOnly", "code": "() => (\n \n \n \n Date\n \n \n \n \n \n Date + time\n \n \n \n \n)", "description": "`readOnly` shows a value but removes every edit affordance — typing is\nignored (react-aria), and the clear \"×\" is not rendered at all so users\ncan't wipe the value." } ] }, { "name": "DateRangeInput", "description": "Date range input with start and end date fields sharing a single border.\nSupports date-only and date+time granularity via `granularity`.\nBuilt on React-Aria's date range picker for keyboard/a11y behavior.\n\nFor custom layouts around the start/end fields, use the compound API:\n`DateRangeProvider` + `DateRangeStartValue` / `DateRangeSeparator` /\n`DateRangeEndValue` + `useDateRangeContext`.\n\nPair with `` + `` for error messaging — this component\ndoes not render error text itself.", "importPath": "@wallarm-org/design-system/DateRangeInput", "props": [ { "name": "showIcon", "type": "boolean | undefined", "required": false, "description": "Whether to show the leading icon. Default: true." }, { "name": "error", "type": "boolean | undefined", "required": false, "description": "Whether the input has an error state. Sets `aria-invalid` and error styling." }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Whether the input is disabled. Prevents user interaction." }, { "name": "readOnly", "type": "boolean | undefined", "required": false, "description": "Whether the input is read-only. Segments are focusable but not editable." }, { "name": "placeholder", "type": "string | undefined", "required": false, "description": "Placeholder shown when no value is selected." }, { "name": "size", "type": "TemporalInputSize | undefined", "required": false, "description": "Visual size. Default: 'default' (36px)." }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "value", "type": "complex", "required": false, "description": "Controlled value — range with start and end dates." }, { "name": "defaultValue", "type": "complex", "required": false, "description": "Default value for uncontrolled mode." }, { "name": "granularity", "type": "\"day\" | undefined", "required": false }, { "name": "showTimeDropdown", "type": "undefined", "required": false }, { "name": "timeStep", "type": "undefined", "required": false } ], "variants": [], "subComponents": [ { "name": "DateRangeEndValue", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "DateRangeStartValue", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Basic", "code": "args => {\n return ;\n}" }, { "name": "WithIcon", "code": "() => (\n \n \n \n Without icon\n \n \n \n \n \n With icon\n \n \n \n \n)" }, { "name": "States", "code": "() => (\n \n \n \n Default\n \n \n \n \n \n \n Disabled\n \n \n \n \n \n \n Error\n \n \n \n \n \n)" }, { "name": "Sizes", "code": "() => (\n \n \n \n \n Default (36px)\n \n \n \n \n \n Medium (32px)\n \n \n \n \n \n Small (24px)\n \n \n \n \n \n \n \n Default filled\n \n \n \n \n \n Medium filled\n \n \n \n \n \n Small filled\n \n \n \n \n \n)" }, { "name": "Filled", "code": "() => (\n \n \n \n Date range\n \n \n \n \n \n \n Date + time range (24h)\n \n \n \n \n \n \n Without icon\n \n \n \n \n)" }, { "name": "Granularity", "code": "() => (\n \n \n \n \n 12-hour format\n \n \n \n \n \n \n \n \n \n \n 24-hour format\n \n \n \n \n \n \n \n \n)" }, { "name": "DateOrderComparison", "code": "() => (\n \n \n \n \n Day first — DD MMM YYYY\n \n \n \n \n \n \n \n \n \n Month first — MMM DD YYYY\n \n \n \n \n \n \n \n)", "description": "Demonstrates both segment orders side by side. Each column wraps its\nDateRangeInputs in a scoped `DateFormatProvider` — in real apps the\nprovider is mounted once near the root and the whole tree picks up a\nsingle order." }, { "name": "HourCycleByContext", "code": "() => (\n \n \n \n \n 12-hour (AM/PM)\n \n \n \n \n \n \n \n 24-hour\n \n \n \n \n \n)", "description": "Demonstrates `hourCycle` picked up from `DateFormatProvider`, not passed\nper input. No `hourCycle` prop on the individual DateRangeInputs." }, { "name": "ReadOnly", "code": "() => (\n \n \n \n Date range\n \n \n \n \n \n Date + time range\n \n \n \n \n)", "description": "`readOnly` shows a value but removes every edit affordance — typing is\nignored (react-aria), and the trailing clear \"×\" is not rendered at all." } ] }, { "name": "Dialog", "importPath": "@wallarm-org/design-system/Dialog", "props": [], "variants": [], "subComponents": [], "examples": [ { "name": "Basic", "code": "() => {\n return (\n \n \n \n \n\n \n \n Dialog Title\n \n\n \n \n \n \n \n );\n}", "description": "Basic uncontrolled dialog" }, { "name": "WithFooter", "code": "() => {\n return (\n \n \n \n \n\n \n \n Dialog's title\n \n\n \n \n \n\n \n \n \n \n \n \n \n \n );\n}", "description": "Minimal example" }, { "name": "WithFooterLeftActions", "code": "() => (\n \n \n \n \n \n \n Footer with Left Actions\n \n\n \n \n \n\n \n \n \n \n Remember choice\n \n \n\n \n \n \n \n \n \n \n)", "description": "With footer left actions" }, { "name": "Sizes", "code": "() => (\n \n \n \n \n \n \n \n Small Dialog ({DIALOG_SIZES.small}px)\n \n\n \n \n \n \n \n\n \n \n \n \n \n \n Medium Dialog ({DIALOG_SIZES.medium}px)\n \n\n \n \n \n \n \n\n \n \n \n \n \n \n Large Dialog ({DIALOG_SIZES.large}px)\n \n\n \n \n \n \n \n \n)", "description": "Dialog with different sizes - Small" }, { "name": "CustomSizes", "code": "() => {\n return (\n \n \n \n \n \n\n \n \n 50% Width Dialog\n \n\n \n
\n

This dialog takes 50% of the viewport width.

\n
\n \n \n \n\n \n \n \n \n\n \n \n 1000px Width Dialog\n \n\n \n
\n

This dialog has a fixed width of 1000px.

\n
\n \n \n \n \n );\n}", "description": "Custom width with percentage" }, { "name": "Scrollable", "code": "() => {\n return (\n \n \n \n \n\n \n \n Scrollable Content\n \n\n \n
\n {Array.from({ length: 20 }).map((_, i) => (\n \n ))}\n
\n \n\n \n \n \n \n \n \n \n \n );\n}", "description": "Dialog with scrollable content" }, { "name": "Controlled", "code": "() => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n \n\n \n \n \n Controlled Dialog\n \n\n \n
\n

This dialog is controlled externally.

\n \n
\n \n\n \n \n \n \n \n \n \n \n \n );\n}", "description": "Controlled dialog with external state" }, { "name": "NoClosableOnEsc", "code": "() => {\n return (\n \n \n \n \n\n \n \n Dialog Title\n \n\n \n \n \n \n \n );\n}", "description": "No closable on ESC" }, { "name": "NoOverlay", "code": "() => {\n return (\n \n \n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n been the industry's standard dummy text ever since the 1500s, when an unknown printer took a\n galley of type and scrambled it to make a type specimen book. It has survived not only five\n centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\n It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum\n passages, and more recently with desktop publishing software like Aldus PageMaker including\n versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will\n be distracted by the readable content of a page when looking at its layout. The point of\n using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed\n to using 'Content here, content here', making it look like readable English. Many desktop\n publishing packages and web page editors now use Lorem Ipsum as their default model text,\n and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various\n versions have evolved over the years, sometimes by accident, sometimes on purpose (injected\n humour and the like).\n \n\n \n \n \n \n\n \n \n No Overlay\n \n\n \n
\n

This dialog has no overlay backdrop.

\n
\n \n \n \n\n \n Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text.\n It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years\n old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up\n one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going\n through the cites of the word in classical literature, discovered the undoubtable source.\n Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The\n Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the\n theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem\n ipsum dolor sit amet..\", comes from a line in section 1.10.32. The standard chunk of Lorem\n Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and\n 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact\n original form, accompanied by English versions from the 1914 translation by H. Rackham.\n \n \n );\n}", "description": "Without overlay" }, { "name": "WithNested", "code": "() => {\n return (\n \n \n \n \n\n \n \n [Level 1] Main Dialog\n\n {/* Level 2 dialog */}\n \n \n \n \n\n \n \n [Level 2] Detail View\n {/* Level 3 dialog */}\n \n \n \n \n\n \n \n [Level 3] Deep Nested\n \n\n \n \n Level 3! Unlimited nesting works.\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n This is Level 2 dialog. Main dialog is pushed back.\n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n This is Level 1 dialog. Click above to open nested dialogs:\n\n \n \n \n\n \n \n \n \n \n \n \n \n );\n}", "description": "Nested dialogs with push-back effect" }, { "name": "WithTabs", "code": "() => {\n const [activeTab, setActiveTab] = useState('tab1');\n\n return (\n \n \n \n \n\n \n \n \n Tabbed Content\n \n\n \n General\n Settings\n Advanced\n \n\n \n
\n \n

General Settings

\n \n \n \n

Configuration

\n \n \n \n

Advanced Options

\n \n \n
\n \n \n\n \n \n \n \n \n \n \n \n );\n}", "description": "With tabs" } ] }, { "name": "Drawer", "importPath": "@wallarm-org/design-system/Drawer", "props": [ { "name": "open", "type": "boolean | undefined", "required": false, "description": "Controlled open state" }, { "name": "closeOnEscape", "type": "boolean | undefined", "required": false, "description": "Whether ESC key closes the drawer (default: true)", "defaultValue": "true" }, { "name": "closeOnOutsideClick", "type": "boolean | undefined", "required": false, "description": "Whether clicking outside closes the drawer (default: true)", "defaultValue": "true" }, { "name": "overlay", "type": "boolean | undefined", "required": false, "description": "Overlay visibility (default: true)", "defaultValue": "true" }, { "name": "modal", "type": "boolean | undefined", "required": false, "description": "Whether the drawer is modal — blocks interaction with the rest of the page (default: true)", "defaultValue": "true" }, { "name": "width", "type": "string | number | undefined", "required": false, "description": "Width - number for pixels, string for percentage (e.g., \"50%\")" }, { "name": "minWidth", "type": "number | undefined", "required": false, "description": "Minimum width in pixels" }, { "name": "maxWidth", "type": "number | undefined", "required": false, "description": "Maximum width in pixels" } ], "variants": [ { "name": "isResizing", "options": [ "true" ] } ], "subComponents": [ { "name": "DrawerBody", "props": [] }, { "name": "DrawerClose", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Render as child component", "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "DrawerContent", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false } ] }, { "name": "DrawerFooter", "props": [] }, { "name": "DrawerFooterControls", "props": [ { "name": "placement", "type": "{ left: string; right: string; }", "required": false, "defaultValue": "right" } ] }, { "name": "DrawerHeader", "props": [] }, { "name": "DrawerPositioner", "props": [ { "name": "isResizing", "type": "boolean", "required": true } ] }, { "name": "DrawerTitle", "props": [] }, { "name": "DrawerTrigger", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Render as child component", "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"submit\" | \"reset\" | \"button\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "Basic", "code": "() => {\n return (\n \n \n \n \n\n \n \n Drawer Title\n \n\n \n \n \n \n \n );\n}", "description": "Basic uncontrolled drawer" }, { "name": "WithFooter", "code": "() => {\n return (\n \n \n \n \n\n \n \n Drawer's title\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}", "description": "Minimal example" }, { "name": "WithFooterLeftActions", "code": "() => (\n \n \n \n \n \n \n Footer with Left Actions\n \n\n \n \n \n\n \n \n \n \n Remember choice\n \n \n\n \n \n \n \n \n \n \n)", "description": "With footer left actions" }, { "name": "Sizes", "code": "() => (\n \n \n \n \n \n \n \n Small Drawer ({DRAWER_SIZES.small}px)\n \n\n \n \n \n \n \n\n \n \n \n \n \n \n Medium Drawer ({DRAWER_SIZES.medium}px)\n \n\n \n \n \n \n \n\n \n \n \n \n \n \n Large Drawer ({DRAWER_SIZES.large}px)\n \n\n \n \n \n \n \n \n)", "description": "Drawer with different sizes - Small" }, { "name": "CustomSizes", "code": "() => {\n return (\n \n \n \n \n \n\n \n \n 50% Width Drawer\n \n\n \n
\n

This drawer takes 50% of the viewport width.

\n
\n \n \n \n\n \n \n \n \n\n \n \n 1000px Width Drawer\n \n\n \n
\n

This drawer has a fixed width of 1000px.

\n
\n \n \n \n \n );\n}", "description": "Custom width with percentage" }, { "name": "Resizable", "code": "() => {\n return (\n \n \n \n \n \n\n \n \n \n Resizable Drawer\n \n\n \n
\n

Drag the left edge to resize this drawer.

\n \n
\n \n \n \n\n \n \n \n \n\n \n \n \n Resizable Drawer with \"900px\" width\n \n\n \n
\n

Width is set as \"900px\" string. Drag the left edge to resize.

\n \n
\n \n \n \n\n \n \n \n \n\n \n \n \n Resizable Drawer with 50% width\n \n\n \n
\n

\n Width is set as \"50%\". Drag the left edge to resize - it will convert to pixels.\n

\n \n
\n \n \n \n \n );\n}", "description": "Resizable drawer" }, { "name": "ResizableWithOverflowList", "code": "() => {\n const [open, setOpen] = useState(true);\n\n return (\n \n \n \n \n \n \n \n Resizable Drawer with OverflowList\n \n \n

Drag the left edge — the tag list reflows live.

\n \n Attack types\n \n {item}}\n overflowRenderer={renderDrawerOverflow}\n />\n \n \n \n \n \n );\n}", "description": "Resizable drawer with an OverflowList — drag the left edge to reflow tags." }, { "name": "Scrollable", "code": "() => {\n return (\n \n \n \n \n\n \n \n Scrollable Content\n \n\n \n
\n {Array.from({ length: 20 }).map((_, i) => (\n \n ))}\n
\n \n\n \n \n \n \n \n \n \n \n );\n}", "description": "Drawer with scrollable content" }, { "name": "Controlled", "code": "() => {\n const [open, setOpen] = useState(false);\n\n return (\n <>\n \n\n \n \n \n Controlled Drawer\n \n\n \n
\n

This drawer is controlled externally.

\n \n
\n \n\n \n \n \n \n \n \n \n \n \n );\n}", "description": "Controlled drawer with external state" }, { "name": "NoClosableOnEsc", "code": "() => {\n return (\n \n \n \n \n\n \n \n Drawer Title\n \n\n \n \n \n \n \n );\n}", "description": "No closable on ESC" }, { "name": "NoOverlay", "code": "() => {\n return (\n \n \n \n \n\n \n \n No Overlay\n \n\n \n
\n

This drawer has no overlay backdrop.

\n
\n \n \n \n );\n}", "description": "Without overlay" }, { "name": "WithNested", "code": "() => {\n return (\n \n \n \n \n\n \n \n [Level 1] Main Drawer\n\n {/* Level 2 drawer */}\n \n \n \n \n\n \n \n [Level 2] Detail View\n {/* Level 3 drawer */}\n \n \n \n \n\n \n \n [Level 3] Deep Nested\n \n\n \n \n Level 3! Unlimited nesting works.\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n This is Level 2 drawer. Main drawer is pushed back. You can go deeper:\n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n This is Level 1 drawer. Click below to open nested drawers:\n\n \n \n \n\n \n \n \n \n \n \n \n \n );\n}", "description": "Nested drawers with push-back effect" }, { "name": "WithTabs", "code": "() => {\n const [activeTab, setActiveTab] = useState('tab1');\n\n return (\n \n \n \n \n\n \n \n \n Tabbed Content\n \n\n \n General\n Settings\n Advanced\n \n\n \n
\n \n

General Settings

\n \n \n \n

Configuration

\n \n \n \n

Advanced Options

\n \n \n
\n \n\n \n \n \n \n \n \n \n \n \n );\n}", "description": "With tabs" } ] }, { "name": "DropdownMenu", "importPath": "@wallarm-org/design-system/DropdownMenu", "props": [], "variants": [ { "name": "variant", "options": [ "default", "brand", "destructive" ] }, { "name": "inset", "options": [ "true" ] } ], "subComponents": [ { "name": "DropdownMenuCheckboxItem", "props": [ { "name": "checked", "type": "boolean", "required": true }, { "name": "value", "type": "string | undefined", "required": false, "description": "Optional — auto-generated via useId() if omitted" }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "closeOnSelect", "type": "boolean | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "variant", "type": "{ default: string; brand: string; destructive: string; }", "required": false, "defaultValue": "default" }, { "name": "inset", "type": "{ true: string; }", "required": false } ] }, { "name": "DropdownMenuContextTrigger", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] }, { "name": "DropdownMenuItem", "props": [ { "name": "inset", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "value", "type": "string | undefined", "required": false, "description": "Explicit value for programmatic highlighting via highlightedValue" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "variant", "type": "{ default: string; brand: string; destructive: string; }", "required": false, "defaultValue": "default" } ] }, { "name": "DropdownMenuRadioGroup", "props": [ { "name": "value", "type": "string | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "DropdownMenuRadioItem", "props": [ { "name": "value", "type": "string", "required": true, "description": "Required — identifies this radio within the group" }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "closeOnSelect", "type": "boolean | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "variant", "type": "{ default: string; brand: string; destructive: string; }", "required": false, "defaultValue": "default" }, { "name": "inset", "type": "{ true: string; }", "required": false } ] }, { "name": "DropdownMenuTrigger", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "form", "type": "string | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "formAction", "type": "string | ((formData: FormData) => void | Promise) | undefined", "required": false }, { "name": "formEncType", "type": "string | undefined", "required": false }, { "name": "formMethod", "type": "string | undefined", "required": false }, { "name": "formNoValidate", "type": "boolean | undefined", "required": false }, { "name": "formTarget", "type": "string | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] }, { "name": "DropdownMenuTriggerItem", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "inset", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "variant", "type": "{ default: string; brand: string; destructive: string; }", "required": false, "defaultValue": "default" } ] } ], "examples": [ { "name": "Basic", "code": "() => (\n \n \n \n \n \n My Account\n \n \n Profile\n \n \n ⌘\n P\n \n \n \n \n Billing\n \n \n ⌘\n B\n \n \n \n \n Settings\n \n \n ⌘\n S\n \n \n \n \n Keyboard shortcuts super\n \n \n ⌘\n K\n \n \n \n \n\n \n\n \n Team\n \n Invite users\n \n Email\n Message\n \n More...\n \n \n \n New Team\n \n \n ⌘\n T\n \n \n \n \n\n \n\n GitHub\n Support\n API\n \n \n Log out\n \n \n ⌘\n Q\n \n \n \n \n \n)" }, { "name": "Context", "code": "() => (\n \n \n
\n Right click here\n
\n \n \n My Account\n \n \n Profile\n \n \n ⌘\n P\n \n \n \n \n Billing\n \n \n ⌘\n B\n \n \n \n \n Settings\n \n \n ⌘\n S\n \n \n \n \n Keyboard shortcuts super\n \n \n ⌘\n K\n \n \n \n \n\n \n\n \n Team\n \n Invite users\n \n Email\n Message\n \n More...\n \n \n \n New Team\n \n \n ⌘\n T\n \n \n \n \n\n \n\n GitHub\n Support\n API\n \n \n Log out\n \n \n ⌘\n Q\n \n \n \n \n \n)" }, { "name": "WithDescriptions", "code": "() => (\n \n \n \n \n \n \n \n Bar-volume chart\n Description\n \n \n \n \n Canvas\n Description\n \n \n \n \n Attacks heat-map\n Description\n \n \n \n ⌘\n Q\n \n \n \n \n\n \n \n Request custom widget\n \n \n \n)" }, { "name": "WithIcons", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n Bar-volume chart\n \n \n \n \n \n \n \n Canvas\n \n \n \n \n \n \n Attacks heat-map\n \n \n ⌘\n Q\n \n \n \n \n\n \n \n Request custom widget\n \n \n \n)" }, { "name": "WithFooter", "code": "() => (\n \n \n \n \n \n Profile\n Billing\n Settings\n Notifications\n Integrations\n Security\n API Keys\n Webhooks\n Audit Log\n Team Members\n Permissions\n Usage\n \n \n \n ↑\n ↓\n \n to navigate\n \n \n \n ↵\n \n to select\n \n \n \n \n)" }, { "name": "WithDescriptionAndIcons", "code": "() => (\n \n \n \n \n \n \n \n \n \n \n Bar-volume chart\n Description\n \n \n \n \n \n \n \n Canvas\n Description\n \n \n \n \n \n \n \n Attacks heat-map\n Description\n \n \n \n ⌘\n Q\n \n \n \n \n\n \n \n Request custom widget\n \n \n \n)" }, { "name": "WithCheckboxItems", "code": "() => {\n const [bold, setBold] = useState(true);\n const [italic, setItalic] = useState(false);\n const [underline, setUnderline] = useState(true);\n\n return (\n \n \n \n \n \n Text style\n \n Bold\n \n \n Italic\n \n \n Underline\n \n \n Strikethrough\n \n \n \n );\n}" }, { "name": "WithRadioGroup", "code": "() => {\n const [view, setView] = useState('list');\n\n const handleViewChange = (details: { value: string }) => {\n setView(details.value);\n };\n\n return (\n \n \n \n \n \n View mode\n \n List\n Grid\n \n Compact\n \n \n \n \n );\n}" }, { "name": "WithMixedSelectionItems", "code": "() => {\n const [bold, setBold] = useState(true);\n const [italic, setItalic] = useState(false);\n const [view, setView] = useState('list');\n\n const handleViewChange = (details: { value: string }) => {\n setView(details.value);\n };\n\n return (\n \n \n \n \n \n Text style\n \n Bold\n \n \n Italic\n \n\n \n\n View mode\n \n List\n Grid\n \n\n \n\n Reset to defaults\n \n \n );\n}" } ] }, { "name": "EmptyState", "importPath": "@wallarm-org/design-system/EmptyState", "props": [ { "name": "type", "type": "\"collection-empty\" | \"no-results\" | undefined", "required": false, "defaultValue": "collection-empty" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ], "variants": [ { "name": "type", "options": [ "collection-empty", "no-results" ], "defaultValue": "collection-empty" } ], "subComponents": [ { "name": "EmptyStateActions", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "EmptyStateDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "EmptyStateIllustration", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "EmptyStateLink", "props": [ { "name": "download", "type": "any", "required": false }, { "name": "href", "type": "string | undefined", "required": false }, { "name": "hrefLang", "type": "string | undefined", "required": false }, { "name": "media", "type": "string | undefined", "required": false }, { "name": "ping", "type": "string | undefined", "required": false }, { "name": "target", "type": "HTMLAttributeAnchorTarget | undefined", "required": false }, { "name": "type", "type": "string | undefined", "required": false }, { "name": "referrerPolicy", "type": "HTMLAttributeReferrerPolicy | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" }, { "name": "size", "type": "{ xs: string; sm: string; md: string; lg: string; xl: string; }", "required": false, "defaultValue": "md" }, { "name": "weight", "type": "{ regular: string; medium: string; }", "required": false }, { "name": "disabled", "type": "{ true: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false } ] }, { "name": "EmptyStateMessage", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] }, { "name": "EmptyStateTitle", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "suppressContentEditableWarning", "type": "boolean | undefined", "required": false }, { "name": "suppressHydrationWarning", "type": "boolean | undefined", "required": false }, { "name": "accessKey", "type": "string | undefined", "required": false }, { "name": "autoCapitalize", "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "contentEditable", "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined", "required": false }, { "name": "contextMenu", "type": "string | undefined", "required": false }, { "name": "dir", "type": "string | undefined", "required": false }, { "name": "draggable", "type": "Booleanish | undefined", "required": false }, { "name": "enterKeyHint", "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined", "required": false }, { "name": "hidden", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "lang", "type": "string | undefined", "required": false }, { "name": "nonce", "type": "string | undefined", "required": false }, { "name": "slot", "type": "string | undefined", "required": false }, { "name": "spellCheck", "type": "Booleanish | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "translate", "type": "\"yes\" | \"no\" | undefined", "required": false }, { "name": "radioGroup", "type": "string | undefined", "required": false }, { "name": "role", "type": "AriaRole | undefined", "required": false }, { "name": "about", "type": "string | undefined", "required": false }, { "name": "content", "type": "string | undefined", "required": false }, { "name": "datatype", "type": "string | undefined", "required": false }, { "name": "inlist", "type": "any", "required": false }, { "name": "prefix", "type": "string | undefined", "required": false }, { "name": "property", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "resource", "type": "string | undefined", "required": false }, { "name": "rev", "type": "string | undefined", "required": false }, { "name": "typeof", "type": "string | undefined", "required": false }, { "name": "vocab", "type": "string | undefined", "required": false }, { "name": "autoCorrect", "type": "string | undefined", "required": false }, { "name": "autoSave", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false }, { "name": "itemProp", "type": "string | undefined", "required": false }, { "name": "itemScope", "type": "boolean | undefined", "required": false }, { "name": "itemType", "type": "string | undefined", "required": false }, { "name": "itemID", "type": "string | undefined", "required": false }, { "name": "itemRef", "type": "string | undefined", "required": false }, { "name": "results", "type": "number | undefined", "required": false }, { "name": "security", "type": "string | undefined", "required": false }, { "name": "unselectable", "type": "\"off\" | \"on\" | undefined", "required": false }, { "name": "popover", "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined", "required": false }, { "name": "popoverTargetAction", "type": "\"toggle\" | \"show\" | \"hide\" | undefined", "required": false }, { "name": "popoverTarget", "type": "string | undefined", "required": false }, { "name": "inert", "type": "boolean | undefined", "required": false, "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert" }, { "name": "inputMode", "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined", "required": false, "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" }, { "name": "is", "type": "string | undefined", "required": false, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, { "name": "exportparts", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}" }, { "name": "part", "type": "string | undefined", "required": false, "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}" } ] } ], "examples": [ { "name": "CollectionEmpty", "code": "args => (\n \n \n \n \n \n Title text goes here\n \n Description text explains what happened and what the user can do next.\n
\n One to two sentences maximum.\n \n \n \n \n \n \n Link\n \n)" }, { "name": "NoResults", "code": "args => (\n \n \n \n \n \n No attacks found\n Try to apply different filter or reset it.\n \n \n \n \n \n)" }, { "name": "Minimal", "code": "args => (\n \n \n Nothing here\n This collection is empty.\n \n \n)" }, { "name": "NoResultsExamples", "code": "() => (\n \n {/* In a chart card */}\n \n \n Bar chart\n \n \n \n \n No data found for selected period\n \n \n \n \n\n {/* In a select dropdown */}\n \n \n Label\n \n \n \n \n)" } ] }, { "name": "Field", "importPath": "@wallarm-org/design-system/Field", "props": [], "variants": [ { "name": "orientation", "options": [ "vertical", "horizontal", "responsive" ], "defaultValue": "vertical" } ], "subComponents": [], "examples": [ { "name": "Basic", "code": "() => {\n const monthsCollection = createListCollection({\n items: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],\n });\n\n const yearsCollection = createListCollection({\n items: ['2025', '2026', '2027', '2028', '2029'],\n });\n\n return (\n
\n
\n \n
\n Payment Method\n\n All transactions are secure and encrypted\n\n \n \n Name on Card\n \n \n \n Card Number\n \n Enter your 16-digit card number\n \n\n \n \n Month\n \n \n\n \n Year\n\n \n \n\n \n CVV\n \n \n \n\n \n Amount\n \n \n \n
\n\n \n\n
\n Billing Address\n\n \n The billing address associated with your payment method\n \n\n \n \n \n \n Same as shipping address\n \n \n \n
\n\n \n\n
\n Subscription Plan\n\n \n Yearly and lifetime plans offer significant savings.\n \n\n \n \n \n \n Monthly ($9.99/month)\n \n \n \n Yearly ($99.99/year)\n \n \n \n Lifetime ($299.99)\n \n \n \n
\n\n \n\n
\n \n \n \n \n Notice when delivered\n \n \n \n
\n\n
\n \n \n Comments\n