docs: migrate UI docs (#13245)

* docs: create a new UI docs project (#13233)

* docs: create a new UI docs project

* fix installation errors

* docs: migrate UI docs content to new project (#13241)

* Fix content

* added examples for some components

* finish adding examples

* lint fix

* fix build errors

* delete empty files

* path fixes + refactor

* fix build error
This commit is contained in:
Shahed Nasser
2025-08-20 11:42:25 +03:00
committed by GitHub
parent 5b7a041246
commit d1a1135328
748 changed files with 13079 additions and 7319 deletions
+48
View File
@@ -0,0 +1,48 @@
{
"description": "This component is based on the div element and supports all of its props",
"methods": [],
"displayName": "Alert",
"props": {
"variant": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"error\" | \"success\" | \"warning\" | \"info\"",
"elements": [
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"success\""
},
{
"name": "literal",
"value": "\"warning\""
},
{
"name": "literal",
"value": "\"info\""
}
]
},
"description": "The variant of the alert",
"defaultValue": {
"value": "\"info\"",
"computed": false
}
},
"dismissible": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the alert is dismissible",
"defaultValue": {
"value": "false",
"computed": false
}
}
}
}
@@ -0,0 +1,85 @@
{
"description": "This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.",
"methods": [],
"displayName": "Avatar",
"props": {
"src": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The URL of the image used in the Avatar."
},
"fallback": {
"required": true,
"tsType": {
"name": "string"
},
"description": "Text to show in the avatar if the URL provided in `src` can't be opened."
},
"variant": {
"defaultValue": {
"value": "\"rounded\"",
"computed": false
},
"description": "The style of the avatar.",
"tsType": {
"name": "union",
"raw": "\"squared\" \\| \"rounded\"",
"elements": [
{
"name": "literal",
"value": "\"squared\""
},
{
"name": "literal",
"value": "\"rounded\""
}
]
},
"required": false
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The size of the avatar's border radius.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
+116
View File
@@ -0,0 +1,116 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Badge",
"props": {
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `span` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
},
"rounded": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The style of the badge's border radius.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"full\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"full\""
}
]
},
"required": false
},
"color": {
"defaultValue": {
"value": "\"grey\"",
"computed": false
},
"description": "The badge's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
@@ -0,0 +1,92 @@
{
"description": "This component is based on the `button` element and supports all of its props",
"methods": [],
"displayName": "Button",
"props": {
"isLoading": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a loading spinner.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `button` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"variant": {
"defaultValue": {
"value": "\"primary\"",
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"transparent\" \\| \"secondary\" \\| \"danger\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"transparent\""
},
{
"name": "literal",
"value": "\"secondary\""
},
{
"name": "literal",
"value": "\"danger\""
}
]
},
"required": false
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
@@ -0,0 +1,108 @@
{
"description": "Calendar component used to select a date.\nIts props are based on [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#calendar-1).",
"methods": [],
"displayName": "Calendar",
"props": {
"autoFocus": {
"description": "Whether to automatically focus the calendar when it mounts.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"defaultFocusedValue": {
"description": "The date that is focused when the calendar first mounts (uncountrolled).",
"required": false,
"tsType": {
"name": "DateValue",
"elements": [],
"raw": "DateValue"
}
},
"errorMessage": {
"description": "An error message to display when the selected value is invalid.",
"required": false,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"focusedValue": {
"description": "Controls the currently focused date within the calendar.",
"required": false,
"tsType": {
"name": "DateValue",
"elements": [],
"raw": "DateValue"
}
},
"isDisabled": {
"description": "Whether the calendar is disabled.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isInvalid": {
"description": "Whether the current selection is invalid according to application logic.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isReadOnly": {
"description": "Whether the calendar value is immutable.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"onFocusChange": {
"description": "Handler that is called when the focused date changes.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(date: CalendarDate) => void",
"signature": {
"arguments": [
{
"name": "date",
"type": {
"name": "CalendarDate",
"elements": [],
"raw": "CalendarDate"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"pageBehavior": {
"description": "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
"required": false,
"tsType": {
"name": "PageBehavior",
"elements": [],
"raw": "PageBehavior"
}
},
"validationState": {
"description": "Whether the current selection is valid or invalid according to application logic.",
"required": false,
"tsType": {
"name": "ValidationState",
"elements": [],
"raw": "ValidationState"
}
}
},
"composes": [
"Omit"
]
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "CalendarButton",
"props": {}
}
@@ -0,0 +1,21 @@
{
"description": "",
"methods": [],
"displayName": "CalendarCell",
"props": {
"date": {
"required": true,
"tsType": {
"name": "CalendarDate"
},
"description": ""
},
"state": {
"required": true,
"tsType": {
"name": "CalendarState"
},
"description": ""
}
}
}
@@ -0,0 +1,17 @@
{
"description": "",
"methods": [],
"displayName": "CalendarGrid",
"props": {
"state": {
"required": true,
"tsType": {
"name": "CalendarState"
},
"description": ""
}
},
"composes": [
"AriaCalendarGridProps"
]
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.",
"methods": [],
"displayName": "Checkbox",
"props": {}
}
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `code` element and supports all of its props",
"methods": [],
"displayName": "Code",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock.Body",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock.Header.Meta",
"props": {}
}
@@ -0,0 +1,18 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock.Header",
"props": {
"hideLabels": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to hide the code snippets' labels.",
"defaultValue": {
"value": "false",
"computed": false
}
}
}
}
@@ -0,0 +1,66 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "CodeBlock",
"props": {
"snippets": {
"required": true,
"tsType": {
"name": "Array",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The label of the code snippet's tab.\n */\n label: string\n /**\n * The language of the code snippet. For example, `tsx`.\n */\n language: string\n /**\n * The code snippet.\n */\n code: string\n /**\n * Whether to hide the line numbers shown as the side of the code snippet.\n */\n hideLineNumbers?: boolean\n /**\n * Whether to hide the copy button.\n */\n hideCopy?: boolean\n}",
"signature": {
"properties": [
{
"key": "label",
"value": {
"name": "string",
"required": true
},
"description": "The label of the code snippet's tab."
},
{
"key": "language",
"value": {
"name": "string",
"required": true
},
"description": "The language of the code snippet. For example, `tsx`."
},
{
"key": "code",
"value": {
"name": "string",
"required": true
},
"description": "The code snippet."
},
{
"key": "hideLineNumbers",
"value": {
"name": "boolean",
"required": false
},
"description": "Whether to hide the line numbers shown as the side of the code snippet."
},
{
"key": "hideCopy",
"value": {
"name": "boolean",
"required": false
},
"description": "Whether to hide the copy button."
}
]
}
}
],
"raw": "CodeSnippet[]"
},
"description": "The code snippets."
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Command.Copy",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the div element and supports all of its props",
"methods": [],
"displayName": "Command",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "The bar component of the command bar. This component is used to display the commands.",
"methods": [],
"displayName": "CommandBar.Bar",
"props": {}
}
@@ -0,0 +1,54 @@
{
"description": "The command component of the command bar. This component is used to display a command, as well as registering the keyboad shortcut.",
"methods": [],
"displayName": "CommandBar.Command",
"props": {
"action": {
"required": true,
"tsType": {
"name": "signature",
"type": "function",
"raw": "() => void | Promise<void>",
"signature": {
"arguments": [],
"return": {
"name": "union",
"raw": "void | Promise<void>",
"elements": [
{
"name": "void"
},
{
"name": "Promise",
"elements": [
{
"name": "void"
}
],
"raw": "Promise<void>"
}
]
}
}
},
"description": "The function to execute when the command is triggered."
},
"label": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The command's label."
},
"shortcut": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The command's shortcut"
}
},
"composes": [
"Omit"
]
}
@@ -0,0 +1,6 @@
{
"description": "The seperator component of the command bar. This component is used to display a seperator between commands.",
"methods": [],
"displayName": "CommandBar.Seperator",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "The value component of the command bar. This component is used to display a value,\nsuch as the number of selected items which the commands will act on.",
"methods": [],
"displayName": "CommandBar.Value",
"props": {}
}
@@ -0,0 +1,62 @@
{
"description": "The root component of the command bar. This component manages the state of the command bar.",
"methods": [],
"displayName": "CommandBar",
"props": {
"open": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to open (show) the command bar.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"onOpenChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(open: boolean) => void",
"signature": {
"arguments": [
{
"type": {
"name": "boolean"
},
"name": "open"
}
],
"return": {
"name": "void"
}
}
},
"description": "Specify a function to handle the change of `open`'s value."
},
"defaultOpen": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the command bar is open by default.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"disableAutoFocus": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to disable focusing automatically on the command bar when it's opened.",
"defaultValue": {
"value": "true",
"computed": false
}
}
}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Container",
"props": {}
}
+50
View File
@@ -0,0 +1,50 @@
{
"description": "This component is based on the `button` element and supports all of its props",
"methods": [],
"displayName": "Copy",
"props": {
"content": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The content to copy."
},
"variant": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"mini\" | \"default\" | null",
"elements": [
{
"name": "literal",
"value": "\"mini\""
},
{
"name": "literal",
"value": "\"default\""
},
{
"name": "null"
}
]
},
"description": "The variant of the copy button.",
"defaultValue": {
"value": "\"default\"",
"computed": false
}
},
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `button` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
}
}
}
@@ -0,0 +1,264 @@
{
"description": "This component is based on the input element and supports all of its props",
"methods": [],
"displayName": "CurrencyInput",
"props": {
"symbol": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The symbol to show in the input."
},
"code": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The currency code to show in the input."
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
},
"allowDecimals": {
"description": "Allow decimals\n\nDefault = true",
"required": false,
"tsType": {
"name": "boolean"
}
},
"allowNegativeValue": {
"description": "Allow user to enter negative value\n\nDefault = true",
"required": false,
"tsType": {
"name": "boolean"
}
},
"className": {
"description": "Class names",
"required": false,
"tsType": {
"name": "string"
}
},
"customInput": {
"description": "Custom component\n\nDefault = <input/>",
"required": false,
"tsType": {
"name": "ElementType",
"elements": [],
"raw": "ElementType"
}
},
"decimalScale": {
"description": "Specify decimal scale for padding/trimming\n\nExample:\n 1.5 -> 1.50\n 1.234 -> 1.23",
"required": false,
"tsType": {
"name": "number"
}
},
"decimalSeparator": {
"description": "Separator between integer part and fractional part of value.\n\nThis cannot be a number",
"required": false,
"tsType": {
"name": "string"
}
},
"decimalsLimit": {
"description": "Limit length of decimals allowed\n\nDefault = 2",
"required": false,
"tsType": {
"name": "number"
}
},
"defaultValue": {
"description": "Default value if not passing in value via props",
"required": false,
"tsType": {
"name": "union",
"raw": "string \\| number",
"elements": [
{
"name": "string"
},
{
"name": "number"
}
]
}
},
"disableAbbreviations": {
"description": "Disable abbreviations (m, k, b)\n\nDefault = false",
"required": false,
"tsType": {
"name": "boolean"
}
},
"disabled": {
"description": "Disabled\n\nDefault = false",
"required": false,
"tsType": {
"name": "boolean"
}
},
"disableGroupSeparators": {
"description": "Disable auto adding separator between values eg. 1000 -> 1,000\n\nDefault = false",
"required": false,
"tsType": {
"name": "boolean"
}
},
"fixedDecimalLength": {
"description": "Value will always have the specified length of decimals\n\nExample:\n 123 -> 1.23\n\nNote: This formatting only happens onBlur",
"required": false,
"tsType": {
"name": "number"
}
},
"formatValueOnBlur": {
"description": "When set to false, the formatValueOnBlur flag disables the application of the __onValueChange__ function\nspecifically on blur events. If disabled or set to false, the onValueChange will not trigger on blur.\nDefault = true",
"required": false,
"tsType": {
"name": "boolean"
}
},
"groupSeparator": {
"description": "Separator between thousand, million and billion\n\nThis cannot be a number",
"required": false,
"tsType": {
"name": "string"
}
},
"id": {
"description": "Component id",
"required": false,
"tsType": {
"name": "string"
}
},
"intlConfig": {
"description": "International locale config, examples:\n { locale: 'ja-JP', currency: 'JPY' }\n { locale: 'en-IN', currency: 'INR' }\n\nAny prefix, groupSeparator or decimalSeparator options passed in\nwill override Intl Locale config",
"required": false,
"tsType": {
"name": "IntlConfig",
"elements": [],
"raw": "IntlConfig"
}
},
"maxLength": {
"description": "Maximum characters the user can enter",
"required": false,
"tsType": {
"name": "number"
}
},
"onValueChange": {
"description": "Handle change in value",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: undefined \\| string, name?: string, values?: CurrencyInputOnChangeValues) => void",
"signature": {
"arguments": [
{
"name": "value",
"type": {
"name": "union",
"raw": "undefined \\| string",
"elements": [
{
"name": "undefined"
},
{
"name": "string"
}
]
},
"rest": false
},
{
"name": "name",
"type": {
"name": "string"
},
"rest": false
},
{
"name": "values",
"type": {
"name": "CurrencyInputOnChangeValues",
"elements": [],
"raw": "CurrencyInputOnChangeValues"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"placeholder": {
"description": "Placeholder if there is no value",
"required": false,
"tsType": {
"name": "string"
}
},
"step": {
"description": "Incremental value change on arrow down and arrow up key press",
"required": false,
"tsType": {
"name": "number"
}
},
"transformRawValue": {
"description": "Transform the raw value form the input before parsing",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(rawValue: string) => string",
"signature": {
"arguments": [
{
"name": "rawValue",
"type": {
"name": "string"
},
"rest": false
}
],
"return": {
"name": "string"
}
}
}
}
},
"composes": [
"Omit",
"VariantProps"
]
}
@@ -0,0 +1,23 @@
{
"description": "",
"methods": [],
"displayName": "DataTable.ActionCell",
"props": {
"ctx": {
"required": true,
"tsType": {
"name": "CellContext",
"elements": [
{
"name": "TData"
},
{
"name": "unknown"
}
],
"raw": "CellContext<TData, unknown>"
},
"description": ""
}
}
}
@@ -0,0 +1,23 @@
{
"description": "This component adds a command bar to the data table, which is used\nto show commands that can be executed on the selected rows.",
"methods": [],
"displayName": "DataTable.CommandBar",
"props": {
"selectedLabel": {
"required": false,
"tsType": {
"name": "union",
"raw": "((count: number) => string) | string",
"elements": [
{
"name": "unknown"
},
{
"name": "string"
}
]
},
"description": "The label to show when items are selected. If a function is passed, \nit will be called with the count of selected items."
}
}
}
@@ -0,0 +1,21 @@
{
"description": "",
"methods": [],
"displayName": "DataTable.Filter",
"props": {
"id": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
},
"filter": {
"required": true,
"tsType": {
"name": "unknown"
},
"description": ""
}
}
}
@@ -0,0 +1,18 @@
{
"description": "",
"methods": [],
"displayName": "DataTable.FilterBar",
"props": {
"clearAllFiltersLabel": {
"required": false,
"tsType": {
"name": "string"
},
"description": "",
"defaultValue": {
"value": "\"Clear all\"",
"computed": false
}
}
}
}
@@ -0,0 +1,14 @@
{
"description": "This component adds a filter menu to the data table, allowing users\nto filter the table's data.",
"methods": [],
"displayName": "DataTable.FilterMenu",
"props": {
"tooltip": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The tooltip to show when hovering over the filter menu."
}
}
}
@@ -0,0 +1,15 @@
{
"description": "This component adds a pagination component and functionality to the data table.",
"methods": [],
"displayName": "DataTable.Pagination",
"props": {
"translations": {
"required": false,
"tsType": {
"name": "ReactComponentProps[\"translations\"]",
"raw": "React.ComponentProps<typeof Table.Pagination>[\"translations\"]"
},
"description": "The translations for strings in the pagination component."
}
}
}
@@ -0,0 +1,28 @@
{
"description": "This component adds a search input to the data table, allowing users\nto search through the table's data.",
"methods": [],
"displayName": "DataTable.Search",
"props": {
"autoFocus": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "If true, the search input will be focused on mount."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Additional classes to pass to the search input."
},
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The placeholder text to show in the search input."
}
}
}
@@ -0,0 +1,23 @@
{
"description": "",
"methods": [],
"displayName": "DataTable.SelectCell",
"props": {
"ctx": {
"required": true,
"tsType": {
"name": "DataTableCellContext",
"elements": [
{
"name": "TData"
},
{
"name": "unknown"
}
],
"raw": "DataTableCellContext<TData, unknown>"
},
"description": ""
}
}
}
@@ -0,0 +1,24 @@
{
"description": "",
"methods": [],
"displayName": "DataTable.SortingIcon",
"props": {
"direction": {
"required": true,
"tsType": {
"name": "union",
"raw": "DataTableSortDirection | false",
"elements": [
{
"name": "DataTableSortDirection"
},
{
"name": "literal",
"value": "false"
}
]
},
"description": ""
}
}
}
@@ -0,0 +1,14 @@
{
"description": "This component adds a sorting menu to the data table, allowing users\nto sort the table's data.",
"methods": [],
"displayName": "DataTable.SortingMenu",
"props": {
"tooltip": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The tooltip to show when hovering over the sorting menu."
}
}
}
@@ -0,0 +1,98 @@
{
"description": "This component renders the table in a data table, supporting advanced features.",
"methods": [],
"displayName": "DataTable.Table",
"props": {
"emptyState": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The empty state to display when the table is filtered, but no rows are found.\n */\n filtered?: DataTableEmptyStateContent\n /**\n * The empty state to display when the table is empty.\n */\n empty?: DataTableEmptyStateContent\n}",
"signature": {
"properties": [
{
"key": "filtered",
"value": {
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The heading to display in the empty state.\n */\n heading?: string\n /**\n * The description to display in the empty state.\n */\n description?: string\n /**\n * A custom component to display in the empty state, if provided it will override the heading and description.\n */\n custom?: React.ReactNode\n}",
"signature": {
"properties": [
{
"key": "heading",
"value": {
"name": "string",
"required": false
},
"description": "The heading to display in the empty state."
},
{
"key": "description",
"value": {
"name": "string",
"required": false
},
"description": "The description to display in the empty state."
},
{
"key": "custom",
"value": {
"name": "ReactReactNode",
"raw": "React.ReactNode",
"required": false
},
"description": "A custom component to display in the empty state, if provided it will override the heading and description."
}
]
},
"required": false
},
"description": "The empty state to display when the table is filtered, but no rows are found."
},
{
"key": "empty",
"value": {
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The heading to display in the empty state.\n */\n heading?: string\n /**\n * The description to display in the empty state.\n */\n description?: string\n /**\n * A custom component to display in the empty state, if provided it will override the heading and description.\n */\n custom?: React.ReactNode\n}",
"signature": {
"properties": [
{
"key": "heading",
"value": {
"name": "string",
"required": false
},
"description": "The heading to display in the empty state."
},
{
"key": "description",
"value": {
"name": "string",
"required": false
},
"description": "The description to display in the empty state."
},
{
"key": "custom",
"value": {
"name": "ReactReactNode",
"raw": "React.ReactNode",
"required": false
},
"description": "A custom component to display in the empty state, if provided it will override the heading and description."
}
]
},
"required": false
},
"description": "The empty state to display when the table is empty."
}
]
}
},
"description": "The empty state to display when the table is empty."
}
}
}
@@ -0,0 +1,35 @@
{
"description": "This component creates a data table with filters, pagination, sorting, and more.\nIt's built on top of the `Table` component while expanding its functionality.\nThe `DataTable` is useful to create tables similar to those in the Medusa Admin dashboard.",
"methods": [],
"displayName": "DataTable",
"props": {
"instance": {
"required": true,
"tsType": {
"name": "UseDataTableReturn",
"elements": [
{
"name": "TData"
}
],
"raw": "UseDataTableReturn<TData>"
},
"description": "The instance returned by the `useDataTable` hook."
},
"children": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "The children of the component."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Additional classes to pass to the wrapper `div` of the component."
}
}
}
@@ -0,0 +1,28 @@
{
"description": "",
"methods": [],
"displayName": "DataTableContextProvider",
"props": {
"instance": {
"required": true,
"tsType": {
"name": "UseDataTableReturn",
"elements": [
{
"name": "TData"
}
],
"raw": "UseDataTableReturn<TData>"
},
"description": ""
},
"children": {
"required": true,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": ""
}
}
}
@@ -0,0 +1,105 @@
{
"description": "",
"methods": [],
"displayName": "DataTableEmptyStateDisplay",
"props": {
"state": {
"required": true,
"tsType": {
"name": "DataTableEmptyState"
},
"description": ""
},
"props": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The empty state to display when the table is filtered, but no rows are found.\n */\n filtered?: DataTableEmptyStateContent\n /**\n * The empty state to display when the table is empty.\n */\n empty?: DataTableEmptyStateContent\n}",
"signature": {
"properties": [
{
"key": "filtered",
"value": {
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The heading to display in the empty state.\n */\n heading?: string\n /**\n * The description to display in the empty state.\n */\n description?: string\n /**\n * A custom component to display in the empty state, if provided it will override the heading and description.\n */\n custom?: React.ReactNode\n}",
"signature": {
"properties": [
{
"key": "heading",
"value": {
"name": "string",
"required": false
},
"description": "The heading to display in the empty state."
},
{
"key": "description",
"value": {
"name": "string",
"required": false
},
"description": "The description to display in the empty state."
},
{
"key": "custom",
"value": {
"name": "ReactReactNode",
"raw": "React.ReactNode",
"required": false
},
"description": "A custom component to display in the empty state, if provided it will override the heading and description."
}
]
},
"required": false
},
"description": "The empty state to display when the table is filtered, but no rows are found."
},
{
"key": "empty",
"value": {
"name": "signature",
"type": "object",
"raw": "{\n /**\n * The heading to display in the empty state.\n */\n heading?: string\n /**\n * The description to display in the empty state.\n */\n description?: string\n /**\n * A custom component to display in the empty state, if provided it will override the heading and description.\n */\n custom?: React.ReactNode\n}",
"signature": {
"properties": [
{
"key": "heading",
"value": {
"name": "string",
"required": false
},
"description": "The heading to display in the empty state."
},
{
"key": "description",
"value": {
"name": "string",
"required": false
},
"description": "The description to display in the empty state."
},
{
"key": "custom",
"value": {
"name": "ReactReactNode",
"raw": "React.ReactNode",
"required": false
},
"description": "A custom component to display in the empty state, if provided it will override the heading and description."
}
]
},
"required": false
},
"description": "The empty state to display when the table is empty."
}
]
}
},
"description": ""
}
}
}
@@ -0,0 +1,14 @@
{
"description": "",
"methods": [],
"displayName": "DataTableFilterBarSkeleton",
"props": {
"filterCount": {
"required": true,
"tsType": {
"name": "number"
},
"description": ""
}
}
}
@@ -0,0 +1,135 @@
{
"description": "",
"methods": [],
"displayName": "DataTableFilterDateContent",
"props": {
"id": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
},
"filter": {
"required": true,
"tsType": {
"name": "unknown"
},
"description": ""
},
"options": {
"required": true,
"tsType": {
"name": "Array",
"elements": [
{
"name": "DataTableFilterOption",
"elements": [
{
"name": "DataTableDateComparisonOperator"
}
],
"raw": "DataTableFilterOption<DataTableDateComparisonOperator>"
}
],
"raw": "DataTableFilterOption<DataTableDateComparisonOperator>[]"
},
"description": ""
},
"isCustom": {
"required": true,
"tsType": {
"name": "boolean"
},
"description": ""
},
"setIsCustom": {
"required": true,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(isCustom: boolean) => void",
"signature": {
"arguments": [
{
"type": {
"name": "boolean"
},
"name": "isCustom"
}
],
"return": {
"name": "void"
}
}
},
"description": ""
},
"format": {
"defaultValue": {
"value": "\"date\"",
"computed": false
},
"description": "",
"tsType": {
"name": "union",
"raw": "\"date\" \\| \"date-time\"",
"elements": [
{
"name": "literal",
"value": "\"date\""
},
{
"name": "literal",
"value": "\"date-time\""
}
]
},
"required": false
},
"rangeOptionLabel": {
"defaultValue": {
"value": "\"Custom\"",
"computed": false
},
"description": "",
"tsType": {
"name": "string"
},
"required": false
},
"rangeOptionStartLabel": {
"defaultValue": {
"value": "\"Starting\"",
"computed": false
},
"description": "",
"tsType": {
"name": "string"
},
"required": false
},
"rangeOptionEndLabel": {
"defaultValue": {
"value": "\"Ending\"",
"computed": false
},
"description": "",
"tsType": {
"name": "string"
},
"required": false
},
"disableRangeOption": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "",
"tsType": {
"name": "boolean"
},
"required": false
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DataTableFilterMenuSkeleton",
"props": {}
}
@@ -0,0 +1,40 @@
{
"description": "",
"methods": [],
"displayName": "DataTableFilterRadioContent",
"props": {
"id": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
},
"filter": {
"required": true,
"tsType": {
"name": "unknown"
},
"description": ""
},
"options": {
"required": true,
"tsType": {
"name": "Array",
"elements": [
{
"name": "DataTableFilterOption",
"elements": [
{
"name": "string"
}
],
"raw": "DataTableFilterOption<string>"
}
],
"raw": "DataTableFilterOption<string>[]"
},
"description": ""
}
}
}
@@ -0,0 +1,50 @@
{
"description": "",
"methods": [],
"displayName": "DataTableFilterSelectContent",
"props": {
"id": {
"required": true,
"tsType": {
"name": "string"
},
"description": ""
},
"filter": {
"required": false,
"tsType": {
"name": "Array",
"elements": [
{
"name": "string"
}
],
"raw": "string[]"
},
"description": "",
"defaultValue": {
"value": "[]",
"computed": false
}
},
"options": {
"required": true,
"tsType": {
"name": "Array",
"elements": [
{
"name": "DataTableFilterOption",
"elements": [
{
"name": "string"
}
],
"raw": "DataTableFilterOption<string>"
}
],
"raw": "DataTableFilterOption<string>[]"
},
"description": ""
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DataTablePaginationSkeleton",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DataTableSearchSkeleton",
"props": {}
}
@@ -0,0 +1,23 @@
{
"description": "",
"methods": [],
"displayName": "DataTableSelectHeader",
"props": {
"ctx": {
"required": true,
"tsType": {
"name": "DataTableHeaderContext",
"elements": [
{
"name": "TData"
},
{
"name": "unknown"
}
],
"raw": "DataTableHeaderContext<TData, unknown>"
},
"description": ""
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DataTableSortingMenuSkeleton",
"props": {}
}
@@ -0,0 +1,18 @@
{
"description": "",
"methods": [],
"displayName": "DataTableTableSkeleton",
"props": {
"pageSize": {
"required": false,
"tsType": {
"name": "number"
},
"description": "",
"defaultValue": {
"value": "10",
"computed": false
}
}
}
}
@@ -0,0 +1,29 @@
{
"description": "Toolbar shown for the data table.",
"methods": [],
"displayName": "DataTableToolbar",
"props": {
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Additional classes to pass to the wrapper `div` of the component."
},
"children": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "The children to show in the toolbar."
},
"translations": {
"required": false,
"tsType": {
"name": "DataTableToolbarTranslations"
},
"description": "The translations of strings in the toolbar."
}
}
}
@@ -0,0 +1,422 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker",
"props": {
"aria-describedby": {
"description": "Identifies the element (or elements) that describes the object.",
"required": false,
"tsType": {
"name": "string"
}
},
"aria-details": {
"description": "Identifies the element (or elements) that provide a detailed, extended description for the object.",
"required": false,
"tsType": {
"name": "string"
}
},
"aria-label": {
"description": "Defines a string value that labels the current element.",
"required": false,
"tsType": {
"name": "string"
}
},
"aria-labelledby": {
"description": "Identifies the element (or elements) that labels the current element.",
"required": false,
"tsType": {
"name": "string"
}
},
"autoFocus": {
"description": "Whether the element should receive focus on render.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"defaultOpen": {
"description": "Whether the overlay is open by default (uncontrolled).",
"required": false,
"tsType": {
"name": "boolean"
}
},
"description": {
"description": "A description for the field. Provides a hint such as specific requirements for what to choose.",
"required": false,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"errorMessage": {
"description": "An error message for the field.",
"required": false,
"tsType": {
"name": "union",
"raw": "ReactNode \\| (v: ValidationResult) => ReactNode",
"elements": [
{
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
},
{
"name": "signature",
"type": "function",
"raw": "(v: ValidationResult) => ReactNode",
"signature": {
"arguments": [
{
"name": "v",
"type": {
"name": "ValidationResult"
},
"rest": false
}
],
"return": {
"name": "ReactNode"
}
}
}
]
}
},
"hideTimeZone": {
"description": "Whether to hide the time zone abbreviation.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"hourCycle": {
"description": "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.",
"required": false,
"tsType": {
"name": "union",
"raw": "12 \\| 24",
"elements": [
{
"name": "literal",
"value": "12"
},
{
"name": "literal",
"value": "24"
}
]
}
},
"id": {
"description": "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).",
"required": false,
"tsType": {
"name": "string"
}
},
"isDisabled": {
"description": "Whether the input is disabled.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isInvalid": {
"description": "Whether the input value is invalid.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isOpen": {
"description": "Whether the overlay is open by default (controlled).",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isReadOnly": {
"description": "Whether the input can be selected but not changed by the user.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"isRequired": {
"description": "Whether user input is required on the input before form submission.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"label": {
"description": "The content to display as the label.",
"required": false,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"name": {
"description": "The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).",
"required": false,
"tsType": {
"name": "string"
}
},
"onBlur": {
"description": "Handler that is called when the element loses focus.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: FocusEvent&#60;Element, Element&#62;) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "FocusEvent",
"elements": [],
"raw": "FocusEvent&#60;Element, Element&#62;"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onFocus": {
"description": "Handler that is called when the element receives focus.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: FocusEvent&#60;Element, Element&#62;) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "FocusEvent",
"elements": [],
"raw": "FocusEvent&#60;Element, Element&#62;"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onFocusChange": {
"description": "Handler that is called when the element's focus status changes.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(isFocused: boolean) => void",
"signature": {
"arguments": [
{
"name": "isFocused",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onKeyDown": {
"description": "Handler that is called when a key is pressed.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: KeyboardEvent) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "KeyboardEvent",
"elements": [],
"raw": "KeyboardEvent"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onKeyUp": {
"description": "Handler that is called when a key is released.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(e: KeyboardEvent) => void",
"signature": {
"arguments": [
{
"name": "e",
"type": {
"name": "KeyboardEvent",
"elements": [],
"raw": "KeyboardEvent"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"onOpenChange": {
"description": "Handler that is called when the overlay's open state changes.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(isOpen: boolean) => void",
"signature": {
"arguments": [
{
"name": "isOpen",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
},
"pageBehavior": {
"description": "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
"required": false,
"tsType": {
"name": "PageBehavior",
"elements": [],
"raw": "PageBehavior"
}
},
"placeholderValue": {
"description": "A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.",
"required": false,
"tsType": {
"name": "union",
"raw": "CalendarDate \\| CalendarDateTime",
"elements": [
{
"name": "CalendarDate",
"elements": [],
"raw": "CalendarDate"
},
{
"name": "CalendarDateTime",
"elements": [],
"raw": "CalendarDateTime"
}
]
}
},
"shouldForceLeadingZeros": {
"description": "Whether to always show leading zeros in the month, day, and hour fields.\nBy default, this is determined by the user's locale.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"validate": {
"description": "A function that returns an error message if a given value is invalid.\nValidation errors are displayed to the user when the form is submitted\nif `validationBehavior=\"native\"`. For realtime validation, use the `isInvalid`\nprop instead.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: CalendarDate \\| CalendarDateTime) => undefined \\| null \\| true \\| ValidationError",
"signature": {
"arguments": [
{
"name": "value",
"type": {
"name": "union",
"raw": "CalendarDate \\| CalendarDateTime",
"elements": [
{
"name": "CalendarDate"
},
{
"name": "CalendarDateTime"
}
]
},
"rest": false
}
],
"return": {
"name": "union",
"raw": "undefined \\| null \\| true \\| ValidationError",
"elements": [
{
"name": "undefined"
},
{
"name": "null"
},
{
"name": "true"
},
{
"name": "ValidationError"
}
]
}
}
}
},
"validationBehavior": {
"description": "Whether to use native HTML form validation to prevent form submission\nwhen the value is missing or invalid, or mark the field as required\nor invalid via ARIA.",
"required": false,
"tsType": {
"name": "union",
"raw": "\"aria\" \\| \"native\"",
"elements": [
{
"name": "literal",
"value": "\"aria\""
},
{
"name": "literal",
"value": "\"native\""
}
]
}
}
}
}
@@ -0,0 +1,15 @@
{
"description": "",
"methods": [],
"displayName": "DatePickerButton",
"props": {
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -0,0 +1,15 @@
{
"description": "",
"methods": [],
"displayName": "DatePickerClearButton",
"props": {
"type": {
"defaultValue": {
"value": "\"button\"",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -0,0 +1,32 @@
{
"description": "",
"methods": [],
"displayName": "DatePickerField",
"props": {
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"base\" | \"small\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"small\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
}
},
"composes": [
"AriaDatePickerProps"
]
}
@@ -0,0 +1,21 @@
{
"description": "",
"methods": [],
"displayName": "DateSegment",
"props": {
"segment": {
"required": true,
"tsType": {
"name": "Segment"
},
"description": ""
},
"state": {
"required": true,
"tsType": {
"name": "DateFieldState"
},
"description": ""
}
}
}
@@ -0,0 +1,29 @@
{
"description": "",
"methods": [],
"displayName": "DefaultEmptyStateContent",
"props": {
"heading": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The heading to display in the empty state."
},
"description": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The description to display in the empty state."
},
"custom": {
"required": false,
"tsType": {
"name": "ReactReactNode",
"raw": "React.ReactNode"
},
"description": "A custom component to display in the empty state, if provided it will override the heading and description."
}
}
}
@@ -0,0 +1,54 @@
{
"description": "",
"methods": [],
"displayName": "Divider",
"props": {
"orientation": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"horizontal\" | \"vertical\"",
"elements": [
{
"name": "literal",
"value": "\"horizontal\""
},
{
"name": "literal",
"value": "\"vertical\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"horizontal\"",
"computed": false
}
},
"variant": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"dashed\" | \"solid\"",
"elements": [
{
"name": "literal",
"value": "\"dashed\""
},
{
"name": "literal",
"value": "\"solid\""
}
]
},
"description": "",
"defaultValue": {
"value": "\"solid\"",
"computed": false
}
}
},
"composes": [
"Omit"
]
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to wrap the body content of the drawer.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Drawer.Body",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the close button for the drawer.\nIt accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.",
"methods": [],
"displayName": "Drawer.Close",
"props": {}
}
@@ -0,0 +1,33 @@
{
"description": "This component wraps the content of the drawer.\nIt accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.",
"methods": [],
"displayName": "Drawer.Content",
"props": {
"overlayProps": {
"required": false,
"tsType": {
"name": "ReactComponentPropsWithoutRef",
"raw": "React.ComponentPropsWithoutRef<typeof DrawerOverlay>",
"elements": [
{
"name": "DrawerOverlay"
}
]
},
"description": "Props for the overlay component.\nIt accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component."
},
"portalProps": {
"required": false,
"tsType": {
"name": "ReactComponentPropsWithoutRef",
"raw": "React.ComponentPropsWithoutRef<typeof DrawerPortal>",
"elements": [
{
"name": "DrawerPortal"
}
]
},
"description": "Props for the portal component that wraps the drawer content.\nIt accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component."
}
}
}
@@ -0,0 +1,6 @@
{
"description": "This component adds accessible description to the drawer.\nIt accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.",
"methods": [],
"displayName": "Drawer.Description",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to wrap the footer content of the drawer.\nThis component is based on the `div` element and supports all of its props.",
"methods": [],
"displayName": "Drawer.Footer",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to wrap the header content of the drawer.\nThis component is based on the `div` element and supports all of its props.",
"methods": [],
"displayName": "Drawer.Header",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the overlay for the drawer.\nIt accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.",
"methods": [],
"displayName": "Drawer.Overlay",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "The `Drawer.Content` component uses this component to wrap the drawer content.\nIt accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.",
"methods": [],
"displayName": "Drawer.Portal",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component adds an accessible title to the drawer.\nIt accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.",
"methods": [],
"displayName": "Drawer.Title",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the trigger button that opens the drawer.\nIt accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.",
"methods": [],
"displayName": "Drawer.Trigger",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.",
"methods": [],
"displayName": "Drawer",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu CheckboxItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem) primitive.",
"methods": [],
"displayName": "DropdownMenu.CheckboxItem",
"props": {}
}
@@ -0,0 +1,31 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.",
"methods": [],
"displayName": "DropdownMenu.Content",
"props": {
"sideOffset": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
},
"collisionPadding": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
},
"align": {
"defaultValue": {
"value": "\"center\"",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.",
"methods": [],
"displayName": "DropdownMenu.Group",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `span` element and supports all of its props",
"methods": [],
"displayName": "DropdownMenu.Hint",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) primitive.",
"methods": [],
"displayName": "DropdownMenu.Item",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Label](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label) primitive.",
"methods": [],
"displayName": "DropdownMenu.Label",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.",
"methods": [],
"displayName": "DropdownMenu.RadioGroup",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu RadioItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem) primitive.",
"methods": [],
"displayName": "DropdownMenu.RadioItem",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Separator](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator) primitive.",
"methods": [],
"displayName": "DropdownMenu.Separator",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `span` element and supports all of its props",
"methods": [],
"displayName": "DropdownMenu.Shortcut",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.",
"methods": [],
"displayName": "DropdownMenu.SubMenu",
"props": {}
}
@@ -0,0 +1,15 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.",
"methods": [],
"displayName": "DropdownMenu.SubMenuContent",
"props": {
"collisionPadding": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "",
"required": false
}
}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu SubTrigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger) primitive.",
"methods": [],
"displayName": "DropdownMenu.SubMenuTrigger",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.",
"methods": [],
"displayName": "DropdownMenu.Trigger",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.",
"methods": [],
"displayName": "DropdownMenu",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to wrap the body content of the modal.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Body",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the close button for the modal.\nIt accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.",
"methods": [],
"displayName": "FocusModal.Close",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component wraps the content of the modal.\nIt accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.",
"methods": [],
"displayName": "FocusModal.Content",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component adds accessible description to the modal.\nIt accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.",
"methods": [],
"displayName": "FocusModal.Description",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to wrap the footer content of the modal.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Footer",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to wrap the header content of the modal.\nThis component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Header",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the overlay for the modal.\nIt accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.",
"methods": [],
"displayName": "FocusModal.Overlay",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "The `FocusModal.Content` component uses this component to wrap the modal content.\nIt accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.",
"methods": [],
"displayName": "FocusModal.Portal",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component adds an accessible title to the modal.\nIt accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.",
"methods": [],
"displayName": "FocusModal.Title",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is used to create the trigger button that opens the modal.\nIt accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.",
"methods": [],
"displayName": "FocusModal.Trigger",
"props": {}
}
@@ -0,0 +1,44 @@
{
"description": "This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.",
"methods": [],
"displayName": "FocusModal",
"props": {
"defaultOpen": {
"description": "Whether the modal is opened by default.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"open": {
"description": "Whether the modal is opened.",
"required": false,
"tsType": {
"name": "boolean"
}
},
"onOpenChange": {
"description": "A function to handle when the modal is opened or closed.",
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(open: boolean) => void",
"signature": {
"arguments": [
{
"name": "open",
"type": {
"name": "boolean"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
}
}
}
@@ -0,0 +1,36 @@
{
"description": "This component is based on the heading element (`h1`, `h2`, etc...) depeneding on the specified level\nand supports all of its props",
"methods": [],
"displayName": "Heading",
"props": {
"level": {
"defaultValue": {
"value": "\"h1\"",
"computed": false
},
"description": "The heading level which specifies which heading element is used.",
"tsType": {
"name": "union",
"raw": "\"h1\" \\| \"h2\" \\| \"h3\"",
"elements": [
{
"name": "literal",
"value": "\"h1\""
},
{
"name": "literal",
"value": "\"h2\""
},
{
"name": "literal",
"value": "\"h3\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
+32
View File
@@ -0,0 +1,32 @@
{
"description": "",
"methods": [],
"displayName": "Hint",
"props": {
"variant": {
"defaultValue": {
"value": "\"info\"",
"computed": false
},
"description": "The hint's style.",
"tsType": {
"name": "union",
"raw": "\"error\" \\| \"info\"",
"elements": [
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"info\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
@@ -0,0 +1,26 @@
{
"description": "",
"methods": [],
"displayName": "I18nProvider",
"composes": [
"Props"
],
"props": {
"children": {
"description": "Contents that should have the locale applied.",
"required": true,
"tsType": {
"name": "ReactNode",
"elements": [],
"raw": "ReactNode"
}
},
"locale": {
"description": "The locale to apply to the children.",
"required": false,
"tsType": {
"name": "string"
}
}
}
}
@@ -0,0 +1,82 @@
{
"description": "This component is based on the `span` element and supports all of its props",
"methods": [],
"displayName": "IconBadge",
"props": {
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `span` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"color": {
"defaultValue": {
"value": "\"grey\"",
"computed": false
},
"description": "The badge's color.",
"tsType": {
"name": "union",
"raw": "\"green\" \\| \"red\" \\| \"blue\" \\| \"orange\" \\| \"grey\" \\| \"purple\"",
"elements": [
{
"name": "literal",
"value": "\"green\""
},
{
"name": "literal",
"value": "\"red\""
},
{
"name": "literal",
"value": "\"blue\""
},
{
"name": "literal",
"value": "\"orange\""
},
{
"name": "literal",
"value": "\"grey\""
},
{
"name": "literal",
"value": "\"purple\""
}
]
},
"required": false
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The badge's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
@@ -0,0 +1,92 @@
{
"description": "This component is based on the `button` element and supports all of its props",
"methods": [],
"displayName": "IconButton",
"props": {
"asChild": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to remove the wrapper `button` element and use the\npassed child element instead.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"isLoading": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a loading spinner.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"variant": {
"defaultValue": {
"value": "\"primary\"",
"computed": false
},
"description": "The button's style.",
"tsType": {
"name": "union",
"raw": "\"primary\" \\| \"transparent\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"transparent\""
}
]
},
"required": false
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"2xsmall\" \\| \"xsmall\" \\| \"small\" \\| \"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"2xsmall\""
},
{
"name": "literal",
"value": "\"xsmall\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
@@ -0,0 +1,44 @@
{
"description": "This component is based on the `div` element and supports all of its props.",
"methods": [],
"displayName": "InlineTip",
"props": {
"label": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The label to display in the tip."
},
"variant": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"info\" | \"warning\" | \"error\" | \"success\"",
"elements": [
{
"name": "literal",
"value": "\"info\""
},
{
"name": "literal",
"value": "\"warning\""
},
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"success\""
}
]
},
"description": "The variant of the tip.",
"defaultValue": {
"value": "\"info\"",
"computed": false
}
}
}
}
+33
View File
@@ -0,0 +1,33 @@
{
"description": "This component is based on the `input` element and supports all of its props",
"methods": [],
"displayName": "Input",
"props": {
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The input's size.",
"tsType": {
"name": "union",
"raw": "\"small\" \\| \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps",
"Omit"
]
}

Some files were not shown because too many files have changed in this diff Show More