docs: generate documentation for UI components (#5849)

* added tool to generate spec files for React components

* use typedoc for missing descriptions and types

* improvements and fixes

* improvements

* added doc comments for half of the components

* add custom resolver + more doc comments

* added all tsdocs

* general improvements

* add specs to UI docs

* added github action

* remove unnecessary api route

* Added readme for react-docs-generator

* remove comment

* Update packages/design-system/ui/src/components/currency-input/currency-input.tsx

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

* remove description of aria fields + add generate script

---------

Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>
This commit is contained in:
Shahed NasserandKasper Fabricius Kristensen authored and GitHub committed 2023-12-13 16:02:41 +02:00
1 parent edc49bfe1d
commit 245e5c9a69
288 files changed
+6029 -1447

No files matched your search

+69
View File
@@ -0,0 +1,69 @@
{
"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": "\"base\" \\| \"large\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
+108
View File
@@ -0,0 +1,108 @@
{
"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": "\"base\" \\| \"large\" \\| \"small\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"small\""
}
]
},
"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"
]
}
+88
View File
@@ -0,0 +1,88 @@
{
"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\" \\| \"secondary\" \\| \"transparent\" \\| \"danger\"",
"elements": [
{
"name": "literal",
"value": "\"primary\""
},
{
"name": "literal",
"value": "\"secondary\""
},
{
"name": "literal",
"value": "\"transparent\""
},
{
"name": "literal",
"value": "\"danger\""
}
]
},
"required": false
},
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The button's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
@@ -0,0 +1,40 @@
{
"description": "This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.",
"methods": [],
"displayName": "Calendar",
"props": {
"mode": {
"defaultValue": {
"value": "\"single\"",
"computed": false
},
"description": "The calendar's mode.",
"tsType": {
"name": "union",
"raw": "\"single\" \\| \"range\"",
"elements": [
{
"name": "literal",
"value": "\"single\""
},
{
"name": "literal",
"value": "\"range\""
}
]
},
"required": false
},
"showOutsideDays": {
"defaultValue": {
"value": "true",
"computed": false
},
"description": "Whether to show days of previous and next months.",
"tsType": {
"name": "boolean"
},
"required": false
}
}
}
@@ -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": "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": {}
}
+25
View File
@@ -0,0 +1,25 @@
{
"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."
},
"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,47 @@
{
"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": "\"base\" \\| \"small\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"small\""
}
]
},
"required": false
}
},
"composes": [
"Omit",
"VariantProps"
]
}
@@ -0,0 +1,36 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.Display",
"props": {
"placeholder": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Placeholder of the date picker's input."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The size of the date picker's input.",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.Flyout",
"props": {}
}
@@ -0,0 +1,64 @@
{
"description": "",
"methods": [],
"displayName": "DatePicker.PresetContainer",
"props": {
"presets": {
"required": true,
"tsType": {
"name": "union",
"raw": "TPreset[] | TPreset[]",
"elements": [
{
"name": "Array",
"elements": [
{
"name": "TPreset"
}
],
"raw": "TPreset[]"
},
{
"name": "Array",
"elements": [
{
"name": "TPreset"
}
],
"raw": "TPreset[]"
}
]
},
"description": "Selectable preset configurations."
},
"onSelect": {
"required": true,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(value: TValue) => void",
"signature": {
"arguments": [
{
"type": {
"name": "TValue"
},
"name": "value"
}
],
"return": {
"name": "void"
}
}
},
"description": "A function that handles the event when a preset is selected."
},
"currentValue": {
"required": false,
"tsType": {
"name": "TValue"
},
"description": "The currently selected preset."
}
}
}
@@ -0,0 +1,313 @@
{
"description": "This component is based on the [Calendar](https://docs.medusajs.com/ui/components/calendar)\ncomponent and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).",
"methods": [],
"displayName": "DatePicker",
"props": {
"fromYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to start showing the dates from."
},
"toYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to show dates to."
},
"fromMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to start showing dates from."
},
"toMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to show dates to."
},
"fromDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to start showing dates from."
},
"toDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to show dates to."
},
"fromDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates from."
},
"toDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates to."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The class name to apply on the date picker."
},
"disabled": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is disabled."
},
"required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is required."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The date picker's size."
},
"showTimePicker": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a time picker along with the date picker."
},
"mode": {
"defaultValue": {
"value": "\"single\"",
"computed": false
},
"description": "The date picker's mode.",
"tsType": {
"name": "union",
"raw": "\"single\" \\| \"range\"",
"elements": [
{
"name": "literal",
"value": "\"single\""
},
{
"name": "literal",
"value": "\"range\""
}
]
},
"required": false
},
"defaultValue": {
"description": "The date selected by default.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date \\| DateRange",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "DateRange",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "Date \\| undefined"
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date"
},
"description": "The range's end date."
}
]
}
}
],
"raw": "DateRange"
}
]
}
},
"onChange": {
"description": "A function to handle the change in the selected date.",
"required": false,
"tsType": {
"name": "union",
"raw": "(date: undefined \\| Date) => void \\| (dateRange: undefined \\| DateRange) => void",
"elements": [
{
"name": "signature",
"type": "function",
"raw": "(date: undefined \\| Date) => void",
"signature": {
"arguments": [
{
"name": "date",
"type": {
"name": "undefined \\| Date"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
},
{
"name": "signature",
"type": "function",
"raw": "(dateRange: undefined \\| DateRange) => void",
"signature": {
"arguments": [
{
"name": "dateRange",
"type": {
"name": "undefined \\| DateRange"
},
"rest": false
}
],
"return": {
"name": "void"
}
}
}
]
}
},
"presets": {
"description": "Provide selectable preset configurations.",
"required": false,
"tsType": {
"name": "union",
"raw": "DatePreset[] \\| DateRangePreset[]",
"elements": [
{
"name": "Array",
"elements": [
{
"name": "DatePreset",
"elements": [
{
"name": "Date"
},
{
"name": "string"
}
],
"raw": "DatePreset"
}
],
"raw": "DatePreset[]"
},
{
"name": "Array",
"elements": [
{
"name": "DateRangePreset",
"elements": [
{
"name": "DateRange"
},
{
"name": "string"
}
],
"raw": "DateRangePreset"
}
],
"raw": "DateRangePreset[]"
}
]
}
},
"value": {
"description": "The selected date.",
"required": false,
"tsType": {
"name": "union",
"raw": "Date \\| DateRange",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "DateRange",
"elements": [
{
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "Date \\| undefined"
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date"
},
"description": "The range's end date."
}
]
}
}
],
"raw": "DateRange"
}
]
}
}
}
}
+6
View File
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Day",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Body",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Close",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Content",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Description",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Footer",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Header",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Overlay",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Portal",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Title",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Drawer.Trigger",
"props": {}
}
+6
View File
@@ -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,6 @@
{
"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": {}
}
@@ -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,6 @@
{
"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": {}
}
@@ -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 based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Body",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "FocusModal.Content",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "FocusModal.Header",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "FocusModal.Overlay",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "FocusModal.Portal",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"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": "\"h2\" \\| \"h3\" \\| \"h1\"",
"elements": [
{
"name": "literal",
"value": "\"h2\""
},
{
"name": "literal",
"value": "\"h3\""
},
{
"name": "literal",
"value": "\"h1\""
}
]
},
"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,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,80 @@
{
"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": "\"base\" \\| \"large\" \\| \"xlarge\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"xlarge\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
+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": "\"base\" \\| \"small\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"small\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps",
"Omit"
]
}
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `kbd` element and supports all of its props",
"methods": [],
"displayName": "Kbd",
"props": {}
}
+62
View File
@@ -0,0 +1,62 @@
{
"description": "This component is based on the [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) primitive.",
"methods": [],
"displayName": "Label",
"props": {
"size": {
"defaultValue": {
"value": "\"base\"",
"computed": false
},
"description": "The label's size.",
"tsType": {
"name": "union",
"raw": "\"base\" \\| \"large\" \\| \"small\" \\| \"xsmall\"",
"elements": [
{
"name": "literal",
"value": "\"base\""
},
{
"name": "literal",
"value": "\"large\""
},
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"xsmall\""
}
]
},
"required": false
},
"weight": {
"defaultValue": {
"value": "\"regular\"",
"computed": false
},
"description": "The label's font weight.",
"tsType": {
"name": "union",
"raw": "\"regular\" \\| \"plus\"",
"elements": [
{
"name": "literal",
"value": "\"regular\""
},
{
"name": "literal",
"value": "\"plus\""
}
]
},
"required": false
}
},
"composes": [
"VariantProps"
]
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Anchor",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Close",
"props": {}
}
@@ -0,0 +1,82 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Content",
"props": {
"sideOffset": {
"defaultValue": {
"value": "8",
"computed": false
},
"description": "The distance in pixels from the anchor.",
"tsType": {
"name": "number"
},
"required": false
},
"side": {
"defaultValue": {
"value": "\"bottom\"",
"computed": false
},
"description": "The preferred side of the anchor to render against when open.\nWill be reversed when collisions occur and `avoidCollisions` is enabled.",
"tsType": {
"name": "union",
"raw": "\"top\" \\| \"right\" \\| \"bottom\" \\| \"left\"",
"elements": [
{
"name": "literal",
"value": "\"top\""
},
{
"name": "literal",
"value": "\"right\""
},
{
"name": "literal",
"value": "\"bottom\""
},
{
"name": "literal",
"value": "\"left\""
}
]
},
"required": false
},
"align": {
"defaultValue": {
"value": "\"start\"",
"computed": false
},
"description": "The preferred alignment against the anchor. May change when collisions occur.",
"tsType": {
"name": "union",
"raw": "\"center\" \\| \"start\" \\| \"end\"",
"elements": [
{
"name": "literal",
"value": "\"center\""
},
{
"name": "literal",
"value": "\"start\""
},
{
"name": "literal",
"value": "\"end\""
}
]
},
"required": false
},
"forceMount": {
"description": "Used to force mounting when more control is needed. Useful when\ncontrolling animation with React animation libraries.",
"required": false,
"tsType": {
"name": "literal",
"value": "true"
}
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Seperator",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Popover.Trigger",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover) primitves.",
"methods": [],
"displayName": "Popover",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "ProgressAccordion.Content",
"props": {}
}
@@ -0,0 +1,33 @@
{
"description": "",
"methods": [],
"displayName": "ProgressAccordion.Header",
"props": {
"status": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "The current status.",
"defaultValue": {
"value": "\"not-started\"",
"computed": false
}
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "ProgressAccordion.Item",
"props": {}
}
@@ -0,0 +1,29 @@
{
"description": "",
"methods": [],
"displayName": "ProgressAccordion.ProgressIndicator",
"props": {
"status": {
"required": true,
"tsType": {
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "The current status."
}
}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.",
"methods": [],
"displayName": "ProgressAccordion",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "ProgressTabs.Content",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "ProgressTabs.List",
"props": {}
}
@@ -0,0 +1,32 @@
{
"description": "",
"methods": [],
"displayName": "ProgressTabs.ProgressIndicator",
"props": {
"status": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"not-started\" \\| \"in-progress\" \\| \"completed\"",
"elements": [
{
"name": "literal",
"value": "\"not-started\""
},
{
"name": "literal",
"value": "\"in-progress\""
},
{
"name": "literal",
"value": "\"completed\""
}
]
},
"description": "The current status."
}
},
"composes": [
"Omit"
]
}
@@ -0,0 +1,9 @@
{
"description": "",
"methods": [],
"displayName": "ProgressTabs.Trigger",
"props": {},
"composes": [
"Omit"
]
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.",
"methods": [],
"displayName": "ProgressTabs",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Action",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Cancel",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Content",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Description",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Prompt.Footer",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the `div` element and supports all of its props",
"methods": [],
"displayName": "Prompt.Header",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Overlay",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Portal",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Title",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Prompt.Trigger",
"props": {}
}
+6
View File
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Alert Dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog) primitives.",
"methods": [],
"displayName": "Prompt",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "RadioGroup.ChoiceBox",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "RadioGroup.Indicator",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "RadioGroup.Item",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "This component is based on the [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) primitives.",
"methods": [],
"displayName": "RadioGroup",
"props": {}
}
@@ -0,0 +1,272 @@
{
"description": "",
"methods": [],
"displayName": "RangeDatePicker",
"props": {
"fromYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to start showing the dates from."
},
"toYear": {
"required": false,
"tsType": {
"name": "number"
},
"description": "The year to show dates to."
},
"fromMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to start showing dates from."
},
"toMonth": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The month to show dates to."
},
"fromDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to start showing dates from."
},
"toDay": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The day to show dates to."
},
"fromDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates from."
},
"toDate": {
"required": false,
"tsType": {
"name": "Date"
},
"description": "The date to show dates to."
},
"className": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The class name to apply on the date picker."
},
"disabled": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is disabled."
},
"required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether the date picker's input is required."
},
"size": {
"required": false,
"tsType": {
"name": "union",
"raw": "\"small\" | \"base\"",
"elements": [
{
"name": "literal",
"value": "\"small\""
},
{
"name": "literal",
"value": "\"base\""
}
]
},
"description": "The date picker's size.",
"defaultValue": {
"value": "\"base\"",
"computed": false
}
},
"showTimePicker": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": "Whether to show a time picker along with the date picker."
},
"id": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-invalid": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": ""
},
"aria-label": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-labelledby": {
"required": false,
"tsType": {
"name": "string"
},
"description": ""
},
"aria-required": {
"required": false,
"tsType": {
"name": "boolean"
},
"description": ""
},
"presets": {
"required": false,
"tsType": {
"name": "Array",
"elements": [
{
"name": "DateRangePreset"
}
],
"raw": "DateRangePreset[]"
},
"description": "Provide selectable preset configurations."
},
"defaultValue": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "union",
"raw": "Date \\| undefined",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "undefined"
}
]
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date",
"elements": [],
"raw": "Date"
},
"description": "The range's end date."
}
]
}
},
"description": "The date range selected by default."
},
"value": {
"required": false,
"tsType": {
"name": "signature",
"type": "object",
"raw": "&#123; from: Date \\| undefined ; to?: Date &#125;",
"signature": {
"properties": [
{
"key": "from",
"value": {
"name": "union",
"raw": "Date \\| undefined",
"elements": [
{
"name": "Date",
"elements": [],
"raw": "Date"
},
{
"name": "undefined"
}
]
},
"description": "The range's start date."
},
{
"key": "to",
"value": {
"name": "Date",
"elements": [],
"raw": "Date"
},
"description": "The range's end date."
}
]
}
},
"description": "The selected date range."
},
"onChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(dateRange: DateRange | undefined) => void",
"signature": {
"arguments": [
{
"type": {
"name": "union",
"raw": "DateRange | undefined",
"elements": [
{
"name": "DateRange"
},
{
"name": "undefined"
}
]
},
"name": "dateRange"
}
],
"return": {
"name": "void"
}
}
},
"description": "A function to handle the change in the selected date range."
}
}
}
@@ -0,0 +1,50 @@
{
"description": "",
"methods": [],
"displayName": "RenderPrompt",
"props": {
"title": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The prompt's title."
},
"description": {
"required": true,
"tsType": {
"name": "string"
},
"description": "The prompt's description."
},
"verificationText": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The text the user has to input in order to confirm the action."
},
"cancelText": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The label for the Cancel button.",
"defaultValue": {
"value": "\"Cancel\"",
"computed": false
}
},
"confirmText": {
"required": false,
"tsType": {
"name": "string"
},
"description": "Label for the Confirm button.",
"defaultValue": {
"value": "\"Confirm\"",
"computed": false
}
}
}
}
@@ -0,0 +1,6 @@
{
"description": "",
"methods": [],
"displayName": "Select.Content",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "Groups multiple items together.",
"methods": [],
"displayName": "Select.Group",
"props": {}
}
@@ -0,0 +1,6 @@
{
"description": "An item in the select. It's based on [Radix UI Select Item](https://www.radix-ui.com/primitives/docs/components/select#item)\nand accepts its props.",
"methods": [],
"displayName": "Select.Item",
"props": {}
}
Loaded 100 of 288 files, more files were not shown because too many files have changed in this diff. Show more