`\n`ordered` -> Deprecated and moved to OrderedList",
"name": "variant",
"parent": {
"fileName": "src/components/List/List.tsx",
"name": "ListProps"
},
"declarations": [
{
"fileName": "src/components/List/List.tsx",
"name": "ListProps"
}
],
"required": false,
"type": {
"name": "\"unordered\" | \"ordered\" | \"none\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "OrderedList",
"name": "OrderedList",
"last_updated_by": "System",
"description": "Ordered Lists are used to display list items in an ordered way.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "orderedlist",
"languages": {
"javascriptreact": "\n Blade \n Buffy \n Morbius \n ;\n",
"html": "\n Blade \n Buffy \n Morbius \n \n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n Blade \n Buffy \n Morbius \n \n",
"react": "\n Blade \n Buffy \n Morbius \n ;\n",
"docs": "Render an ordered list by default.",
"screenshot": "./dsp/assets/OrderedList.png"
},
{
"title": "Colors",
"html": "\n Blade \n Buffy \n Morbius \n \n",
"react": "\n Blade \n Buffy \n Morbius \n ;\n",
"docs": "OrderedLists can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/OrderedListColors.png"
}
],
"ext_com_draculaui_props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI color for the Ordered List.",
"name": "color",
"parent": {
"fileName": "src/components/OrderedList/OrderedList.tsx",
"name": "OrderedListProps"
},
"declarations": [
{
"fileName": "src/components/OrderedList/OrderedList.tsx",
"name": "OrderedListProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Ordered Lists are used to display list items in an ordered way.",
"displayName": "OrderedList",
"methods": [],
"props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI color for the Ordered List.",
"name": "color",
"parent": {
"fileName": "src/components/OrderedList/OrderedList.tsx",
"name": "OrderedListProps"
},
"declarations": [
{
"fileName": "src/components/OrderedList/OrderedList.tsx",
"name": "OrderedListProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "Paragraph",
"name": "Paragraph",
"last_updated_by": "System",
"description": "Paragraph is a semantic component used for blocks of text with\nsemantic meaning.\n\nParagraph accepts all the same customization options as Text.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "paragraph",
"languages": {
"javascriptreact": "\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions of\n subsequent vampire fantasy. The novel tells the story of Dracula's attempt\n to move from Transylvania to England so that he may find new blood and spread\n the undead curse, and of the battle between Dracula and Professor Abraham Van\n Helsing.\n ;\n",
"html": "\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions of\n subsequent vampire fantasy. The novel tells the story of Dracula's attempt to\n move from Transylvania to England so that he may find new blood and spread the\n undead curse, and of the battle between Dracula and Professor Abraham Van\n Helsing.\n
\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions of\n subsequent vampire fantasy. The novel tells the story of Dracula's attempt to\n move from Transylvania to England so that he may find new blood and spread the\n undead curse, and of the battle between Dracula and Professor Abraham Van\n Helsing.\n
\n",
"react": "\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions of\n subsequent vampire fantasy. The novel tells the story of Dracula's attempt\n to move from Transylvania to England so that he may find new blood and spread\n the undead curse, and of the battle between Dracula and Professor Abraham Van\n Helsing.\n ;\n",
"docs": "Show a paragraph within an interface.",
"screenshot": "./dsp/assets/Paragraph.png"
},
{
"title": "Colors",
"html": "\n",
"react": "\n cyan \n green \n ;\n",
"docs": "Paragraphs can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/ParagraphColors.png"
},
{
"title": "Align",
"html": "\n
\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n
\n
\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n
\n
\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n
\n
\n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n
\n
\n \n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n \n \n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n \n \n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n \n \n Dracula is an 1897 Gothic horror novel by Irish author Bram Stoker. It\n introduced the character of Count Dracula and established many conventions\n of subsequent vampire fantasy. The novel tells the story of Dracula's\n attempt to move from Transylvania to England so that he may find new blood\n and spread the undead curse, and of the battle between Dracula and Professor\n Abraham Van Helsing.\n \n ;\n",
"docs": "Paragraphs can be customized with different alignments.",
"screenshot": "./dsp/assets/ParagraphAlign.png"
},
{
"title": "Weights",
"html": "\n
normal
\n
\n semibold\n
\n
bold
\n
\n normal \n semibold \n bold \n ;\n",
"docs": "Paragraphs can be defined in different font weights.",
"screenshot": "./dsp/assets/ParagraphWeights.png"
},
{
"title": "Sizes",
"html": "\n",
"react": "\n xs \n sm \n md \n lg \n ;\n",
"docs": "Paragraphs can be customized to use several different sizes.",
"screenshot": "./dsp/assets/ParagraphSizes.png"
},
{
"title": "Line Height",
"html": "\n
xs
\n
\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n
\n
sm
\n
\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n
\n
md
\n
\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n
\n
lg
\n
\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n
\n
xl
\n
\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n
\n
\n xs \n \n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n \n sm \n \n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n \n md \n \n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n \n lg \n \n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n \n xl \n \n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De\n carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel\n maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi\n mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi\n dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket\n bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater,\n suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum\n defunctis go lum cerebro.\n \n ;\n",
"docs": "Paragraphs can be controlled with different line heights.",
"screenshot": "./dsp/assets/ParagraphLine Height.png"
}
],
"ext_com_draculaui_props": {
"align": {
"defaultValue": null,
"description": "Controls the alignment of text.",
"name": "align",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"left\" | \"center\" | \"right\" | \"justify\" | undefined"
}
},
"size": {
"defaultValue": null,
"description": "Controls the size of the text based on pre-configured Dracula UI sizes.",
"name": "size",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | undefined"
}
},
"weight": {
"defaultValue": null,
"description": "Controls the weight of the text.",
"name": "weight",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"normal\" | \"semibold\" | \"bold\" | undefined"
}
},
"lineHeight": {
"defaultValue": null,
"description": "Controls the line height of a text.",
"name": "lineHeight",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"xl\" | undefined"
}
},
"color": {
"defaultValue": null,
"description": "Controls the color of the text",
"name": "color",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"as": {
"defaultValue": null,
"description": "The HTML element to be used",
"name": "as",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"p\" | \"a\" | \"span\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Paragraph is a semantic component used for blocks of text with\nsemantic meaning.\n\nParagraph accepts all the same customization options as Text.",
"displayName": "Paragraph",
"methods": [],
"props": {
"align": {
"defaultValue": null,
"description": "Controls the alignment of text.",
"name": "align",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"left\" | \"center\" | \"right\" | \"justify\" | undefined"
}
},
"size": {
"defaultValue": null,
"description": "Controls the size of the text based on pre-configured Dracula UI sizes.",
"name": "size",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | undefined"
}
},
"weight": {
"defaultValue": null,
"description": "Controls the weight of the text.",
"name": "weight",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"normal\" | \"semibold\" | \"bold\" | undefined"
}
},
"lineHeight": {
"defaultValue": null,
"description": "Controls the line height of a text.",
"name": "lineHeight",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"xl\" | undefined"
}
},
"color": {
"defaultValue": null,
"description": "Controls the color of the text",
"name": "color",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"as": {
"defaultValue": null,
"description": "The HTML element to be used",
"name": "as",
"parent": {
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "dracula-ui/src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"p\" | \"a\" | \"span\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "Radio",
"name": "Radio",
"last_updated_by": "System",
"description": "Radio is a styled HTML Input of type radio.\n\nThere are no behavior changes applied to the native HTML tag other\nthan light styling done via CSS in order to keep Radios accessible.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "radio",
"languages": {
"javascriptreact": "\n \n Likes Garlic\n \n ;\n",
"html": "\n Likes Garlic \n
\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n Likes Garlic \n
\n",
"react": "\n \n Likes Garlic\n \n ;\n",
"docs": "Radio buttons let a user select only one of a limited number of choices.",
"screenshot": "./dsp/assets/Radio.png"
},
{
"title": "Colors",
"html": "\n
\n Radio \n
\n
\n Radio \n
\n
\n Radio \n
\n
\n Radio \n
\n
\n Radio \n
\n
\n Radio \n
\n
\n Radio \n
\n
\n Radio \n
\n
\n \n \n Radio\n \n \n \n \n Radio\n \n \n \n \n Radio\n \n \n \n \n Radio\n \n \n \n \n Radio\n \n \n \n \n Radio\n \n \n \n \n Radio\n \n \n \n \n Radio\n \n \n ;\n",
"docs": "Radio can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/RadioColors.png"
},
{
"title": "Disabled",
"html": "\n
\n Vampire \n
\n
\n Human \n
\n
\n \n \n Vampire\n \n \n \n \n Human\n \n \n ;\n",
"docs": "A radio select is unusable and un-clickable.",
"screenshot": "./dsp/assets/RadioDisabled.png"
}
],
"ext_com_draculaui_props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI theme color for the radio button.",
"name": "color",
"parent": {
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
},
"declarations": [
{
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
}
],
"required": true,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\""
}
},
"name": {
"defaultValue": null,
"description": "The name of the radio. Mirrors the name HTML attribute.",
"name": "name",
"parent": {
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
},
"declarations": [
{
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
}
],
"required": false,
"type": {
"name": "string | undefined"
}
},
"disabled": {
"defaultValue": null,
"description": "A disabled radio is unusable and un-clickable.",
"name": "disabled",
"parent": {
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
},
"declarations": [
{
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
}
],
"required": false,
"type": {
"name": "boolean | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Radio is a styled HTML Input of type radio.\n\nThere are no behavior changes applied to the native HTML tag other\nthan light styling done via CSS in order to keep Radios accessible.",
"displayName": "Radio",
"methods": [],
"props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI theme color for the radio button.",
"name": "color",
"parent": {
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
},
"declarations": [
{
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
}
],
"required": true,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\""
}
},
"name": {
"defaultValue": null,
"description": "The name of the radio. Mirrors the name HTML attribute.",
"name": "name",
"parent": {
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
},
"declarations": [
{
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
}
],
"required": false,
"type": {
"name": "string | undefined"
}
},
"disabled": {
"defaultValue": null,
"description": "A disabled radio is unusable and un-clickable.",
"name": "disabled",
"parent": {
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
},
"declarations": [
{
"fileName": "src/components/Radio/Radio.tsx",
"name": "RadioProps"
}
],
"required": false,
"type": {
"name": "boolean | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "Select",
"name": "Select",
"last_updated_by": "System",
"description": "Select is a styled HTML Select element.\n\nThere are no behavior changes applied to the native HTML tag other\nthan light styling done via CSS, and small SVG component in order to keep Selects accessible.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "select",
"languages": {
"javascriptreact": "\n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n ;\n",
"html": "\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n ;\n",
"docs": "Select different items from a list.",
"screenshot": "./dsp/assets/Select.png"
},
{
"title": "Sizes",
"html": "\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n \n \n
\n
\n
\n \n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n
\n Select option \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n
\n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n \n Select option\n \n Blade \n Buffy \n Lincoln \n Morbius \n Van Helsing \n \n
\n
\n \n Padding \n \n ;\n",
"html": "\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n",
"react": "\n \n Padding \n \n ;\n",
"docs": "",
"screenshot": "./dsp/assets/Spacing.png"
},
{
"title": "Padding",
"html": "\n
\n
\n
\n
\n \n mixing all styles\n
\n \n \n \n padding sm \n \n \n \n \n padding y sm \n \n \n \n \n padding x sm \n \n \n \n \n mixing all styles \n \n \n ;\n",
"docs": "",
"screenshot": "./dsp/assets/SpacingPadding.png"
},
{
"title": "Margin",
"html": "\n
\n
\n
\n
\n \n mixing all styles\n
\n \n \n \n margin sm \n \n \n \n \n margin y sm \n \n \n \n \n margin x sm \n \n \n \n \n mixing all styles \n \n \n ;\n",
"docs": "",
"screenshot": "./dsp/assets/SpacingMargin.png"
}
],
"ext_com_draculaui_props": {}
},
{
"class": "component",
"type": "page",
"id": "Switch",
"name": "Switch",
"last_updated_by": "System",
"description": "Switch is an abstraction pattern that represents toggles.\n\nUse the Switch component as an alternative for Checkboxes or Radios\nwhen options are binary.\n\nSwitches are implemented as Checkboxes under the hood,\nand work normally with forms.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "switch",
"languages": {
"javascriptreact": "\n \n Has reflection\n \n ;\n",
"html": "\n Has reflection \n
\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n Has reflection \n
\n",
"react": "\n \n Has reflection\n \n ;\n",
"docs": "Render a toggle component using checkbox under the hood.",
"screenshot": "./dsp/assets/Switch.png"
},
{
"title": "Colors",
"html": "\n
\n Switch \n
\n
\n Switch \n
\n
\n Switch \n
\n
\n Switch \n
\n
\n Switch \n
\n
\n Switch \n
\n
\n Switch \n
\n
\n Switch \n
\n
\n \n \n Switch\n \n \n \n \n Switch\n \n \n \n \n Switch\n \n \n \n \n Switch\n \n \n \n \n Switch\n \n \n \n \n Switch\n \n \n \n \n Switch\n \n \n \n \n Switch\n \n \n ;\n",
"docs": "Switches can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/SwitchColors.png"
},
{
"title": "Disabled",
"html": "\n
\n Vampire \n
\n
\n Human \n
\n
\n \n \n Vampire\n \n \n \n \n Human\n \n \n ;\n",
"docs": "A disabled switch is unusable and un-clickable.",
"screenshot": "./dsp/assets/SwitchDisabled.png"
}
],
"ext_com_draculaui_props": {
"name": {
"defaultValue": null,
"description": "The name of the form element.",
"name": "name",
"parent": {
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
},
"declarations": [
{
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
}
],
"required": false,
"type": {
"name": "string | undefined"
}
},
"color": {
"defaultValue": null,
"description": "The Dracula UI theme color to be applied to the Switch.",
"name": "color",
"parent": {
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
},
"declarations": [
{
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
}
],
"required": true,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\""
}
},
"disabled": {
"defaultValue": null,
"description": "A disabled switch is unusable and un-clickable.",
"name": "disabled",
"parent": {
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
},
"declarations": [
{
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
}
],
"required": false,
"type": {
"name": "boolean | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Switch is an abstraction pattern that represents toggles.\n\nUse the Switch component as an alternative for Checkboxes or Radios\nwhen options are binary.\n\nSwitches are implemented as Checkboxes under the hood,\nand work normally with forms.",
"displayName": "Switch",
"methods": [],
"props": {
"name": {
"defaultValue": null,
"description": "The name of the form element.",
"name": "name",
"parent": {
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
},
"declarations": [
{
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
}
],
"required": false,
"type": {
"name": "string | undefined"
}
},
"color": {
"defaultValue": null,
"description": "The Dracula UI theme color to be applied to the Switch.",
"name": "color",
"parent": {
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
},
"declarations": [
{
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
}
],
"required": true,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\""
}
},
"disabled": {
"defaultValue": null,
"description": "A disabled switch is unusable and un-clickable.",
"name": "disabled",
"parent": {
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
},
"declarations": [
{
"fileName": "src/components/Switch/Switch.tsx",
"name": "SwitchProps"
}
],
"required": false,
"type": {
"name": "boolean | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "Table",
"name": "Table",
"last_updated_by": "System",
"description": "Tables are used to display data in a tabular fashion.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "table",
"languages": {
"javascriptreact": "\n \n \n Name \n Age \n \n Bio\n \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the\n "stupidest" people were spared and the village never\n recovered, leaving its citizens badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell "bat!" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy\n and his current familiar Guillermo have also shared his home. He works\n in an office and frequently feeds off his co-workers by boring them with\n inane conversations. Outside of work hours, Colin gains energy by\n aggravating his roommates and trolling people online.\n \n \n \n
;\n",
"html": "\n \n \n Name \n Age \n Bio \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the \"stupidest\"\n people were spared and the village never recovered, leaving its citizens\n badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell \"bat!\" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy and\n his current familiar Guillermo have also shared his home. He works in an\n office and frequently feeds off his co-workers by boring them with inane\n conversations. Outside of work hours, Colin gains energy by aggravating\n his roommates and trolling people online.\n \n \n \n
\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n \n \n Name \n Age \n Bio \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the \"stupidest\"\n people were spared and the village never recovered, leaving its citizens\n badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell \"bat!\" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy and\n his current familiar Guillermo have also shared his home. He works in an\n office and frequently feeds off his co-workers by boring them with inane\n conversations. Outside of work hours, Colin gains energy by aggravating\n his roommates and trolling people online.\n \n \n \n
\n",
"react": "\n \n \n Name \n Age \n \n Bio\n \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the\n "stupidest" people were spared and the village never\n recovered, leaving its citizens badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell "bat!" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy\n and his current familiar Guillermo have also shared his home. He works\n in an office and frequently feeds off his co-workers by boring them with\n inane conversations. Outside of work hours, Colin gains energy by\n aggravating his roommates and trolling people online.\n \n \n \n
;\n",
"docs": "Presented in a two-dimensional table comprised of rows and columns.",
"screenshot": "./dsp/assets/Table.png"
},
{
"title": "Variants",
"html": "\n \n \n Name \n Age \n Bio \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the \"stupidest\"\n people were spared and the village never recovered, leaving its citizens\n badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell \"bat!\" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy and\n his current familiar Guillermo have also shared his home. He works in an\n office and frequently feeds off his co-workers by boring them with inane\n conversations. Outside of work hours, Colin gains energy by aggravating\n his roommates and trolling people online.\n \n \n \n
\n",
"react": "\n \n \n Name \n Age \n \n Bio\n \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the\n "stupidest" people were spared and the village never\n recovered, leaving its citizens badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell "bat!" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy\n and his current familiar Guillermo have also shared his home. He works\n in an office and frequently feeds off his co-workers by boring them with\n inane conversations. Outside of work hours, Colin gains energy by\n aggravating his roommates and trolling people online.\n \n \n \n
;\n",
"docs": "Table has a unique variation called `stripped` which changes the background color of each even row.",
"screenshot": "./dsp/assets/TableVariants.png"
},
{
"title": "Colors",
"html": "\n \n \n Name \n Age \n Bio \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the \"stupidest\"\n people were spared and the village never recovered, leaving its citizens\n badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell \"bat!\" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy and\n his current familiar Guillermo have also shared his home. He works in an\n office and frequently feeds off his co-workers by boring them with inane\n conversations. Outside of work hours, Colin gains energy by aggravating\n his roommates and trolling people online.\n \n \n \n
\n",
"react": "\n \n \n Name \n Age \n \n Bio\n \n \n \n \n \n Nandor \n 758 years \n \n Nandor was born in 1262 in the country of Al Quolanudar, now based in\n southern Iran. He is a former soldier of the Ottoman Empire; during this\n time he pillaged many villages without discrimination and twice turned\n the Euphrates “red with blood”. One village, a utopia that he burned to\n the ground, would later become the birthplace of Nadja, his future\n vampire roommate. Nadja would not realise this until the 21st century.\n \n \n \n Nadja \n 512 years \n \n Nadja was very disadvantaged during her human life. Her village, located\n on a “beautiful” island with a high snake population, was once a utopia,\n but was burned to the ground by the army of an unknown warrior (who\n would eventually turn out to be her future roommate Nandor the\n Relentless) around 200 years before she was born. Only the\n "stupidest" people were spared and the village never\n recovered, leaving its citizens badly affected by famine and poverty.\n \n \n \n Laszlo \n 329 years \n \n As a human, Laszlo was the most handsome man in a village affected by\n leprosy and plague, though he also contracted leprosy himself. One\n night, the vampire Nadja flew into his window and seduced him, before\n transforming into a hideous creature, biting him and turning him into a\n vampire. As a vampire, Laszlo gained powerful hypnosis abilities and the\n unique ability to control and communicate with animals. Like most\n vampires, he could transform into a bat, but for some reason he prefers\n to yell "bat!" each time before doing so.\n \n \n \n Colin \n 103 years \n \n As an energy vampire, Colin Robinson’s origin is unclear. According to\n his roommate Laszlo, Colin “came with the house” they reside in. He has\n lived in the Staten Island residence with fellow vampires Laszlo, Nadja\n and Nandor since the 1970s at least. Nandor's former familiar Benjy\n and his current familiar Guillermo have also shared his home. He works\n in an office and frequently feeds off his co-workers by boring them with\n inane conversations. Outside of work hours, Colin gains energy by\n aggravating his roommates and trolling people online.\n \n \n \n
;\n",
"docs": "Table can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/TableColors.png"
}
],
"ext_com_draculaui_props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI color for the Table.",
"name": "color",
"parent": {
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
},
"declarations": [
{
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"variant": {
"defaultValue": null,
"description": "The variation to be used for the Table element.\n`normal` -> Regular Table component without background colors.\n`striped` -> Changes the background color of each even row.",
"name": "variant",
"parent": {
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
},
"declarations": [
{
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
}
],
"required": false,
"type": {
"name": "\"normal\" | \"striped\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Tables are used to display data in a tabular fashion.",
"displayName": "Table",
"methods": [],
"props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI color for the Table.",
"name": "color",
"parent": {
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
},
"declarations": [
{
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"variant": {
"defaultValue": null,
"description": "The variation to be used for the Table element.\n`normal` -> Regular Table component without background colors.\n`striped` -> Changes the background color of each even row.",
"name": "variant",
"parent": {
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
},
"declarations": [
{
"fileName": "src/components/Table/Table.tsx",
"name": "TableProps"
}
],
"required": false,
"type": {
"name": "\"normal\" | \"striped\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "Tabs",
"name": "Tabs",
"last_updated_by": "System",
"description": "Tabs are horizontal navigation elements used to display\ncontent within the same page.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "tabs",
"languages": {
"javascriptreact": "\n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n ;\n",
"html": "\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "\n",
"react": "\n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n ;\n",
"docs": "Display different content based on the Tabs behavior.",
"screenshot": "./dsp/assets/Tabs.png"
},
{
"title": "Colors",
"html": "\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n \n \n \n \n Item One\n \n \n \n \n Item Two\n \n \n \n \n Item Three\n \n \n \n \n ;\n",
"docs": "Tabs can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/TabsColors.png"
}
],
"ext_com_draculaui_props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI color for the Tabs.",
"name": "color",
"parent": {
"fileName": "src/components/Tabs/Tabs.tsx",
"name": "TabsProps"
},
"declarations": [
{
"fileName": "src/components/Tabs/Tabs.tsx",
"name": "TabsProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Tabs are horizontal navigation elements used to display\ncontent within the same page.",
"displayName": "Tabs",
"methods": [],
"props": {
"color": {
"defaultValue": null,
"description": "The Dracula UI color for the Tabs.",
"name": "color",
"parent": {
"fileName": "src/components/Tabs/Tabs.tsx",
"name": "TabsProps"
},
"declarations": [
{
"fileName": "src/components/Tabs/Tabs.tsx",
"name": "TabsProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"auto\" | undefined"
}
}
}
}
},
{
"class": "component",
"type": "page",
"id": "Text",
"name": "Text",
"last_updated_by": "System",
"description": "Text is the base component for any sort of text.\n\nConsumers of this component can control, the color, size,\nweight, and spacing of Text.\n\nUse this component for generic, and non-hierarchical text that is\nto be displayed on a page, or as part of other complex components\nor UI patterns.",
"related_entity_ids": [],
"tags": [
"component"
],
"snippets": {
"trigger": "text",
"languages": {
"javascriptreact": "The quick vampire jumps over the lazy human ;\n",
"html": "The quick vampire jumps over the lazy human\n"
}
},
"ext_com_draculaui_variations": [
{
"title": "Usage",
"html": "The quick vampire jumps over the lazy human\n",
"react": "The quick vampire jumps over the lazy human ;\n",
"docs": "Show inline text within an interface.",
"screenshot": "./dsp/assets/Text.png"
},
{
"title": "Colors",
"html": "\n
\n cyan \n
\n
\n green \n
\n
\n \n cyan \n \n \n green \n \n ;\n",
"docs": "Text can be customized to use any of the Dracula UI theme colors.",
"screenshot": "./dsp/assets/TextColors.png"
},
{
"title": "Align",
"html": "\n
\n The quick vampire jumps over the lazy human\n
\n
\n The quick vampire jumps over the lazy human\n
\n
\n The quick vampire jumps over the lazy human\n
\n
\n \n The quick vampire jumps over the lazy human\n \n \n The quick vampire jumps over the lazy human\n \n \n The quick vampire jumps over the lazy human\n \n ;\n",
"docs": "Text can be customized with different alignments.",
"screenshot": "./dsp/assets/TextAlign.png"
},
{
"title": "Weights",
"html": "\n
\n normal \n
\n
\n semibold\n
\n
\n bold\n
\n
\n \n normal \n \n \n semibold \n \n \n bold \n \n ;\n",
"docs": "Text can be defined in different font weights.",
"screenshot": "./dsp/assets/TextWeights.png"
},
{
"title": "Sizes",
"html": "\n
\n xs\n
\n
\n sm\n
\n
\n md \n
\n
\n lg\n
\n
\n \n xs \n \n \n sm \n \n \n md \n \n \n lg \n \n ;\n",
"docs": "Text can be customized to use several different sizes.",
"screenshot": "./dsp/assets/TextSizes.png"
}
],
"ext_com_draculaui_props": {
"align": {
"defaultValue": null,
"description": "Controls the alignment of text.",
"name": "align",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"left\" | \"center\" | \"right\" | \"justify\" | undefined"
}
},
"size": {
"defaultValue": null,
"description": "Controls the size of the text based on pre-configured Dracula UI sizes.",
"name": "size",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | undefined"
}
},
"weight": {
"defaultValue": null,
"description": "Controls the weight of the text.",
"name": "weight",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"normal\" | \"semibold\" | \"bold\" | undefined"
}
},
"lineHeight": {
"defaultValue": null,
"description": "Controls the line height of a text.",
"name": "lineHeight",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"xl\" | undefined"
}
},
"color": {
"defaultValue": null,
"description": "Controls the color of the text",
"name": "color",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"as": {
"defaultValue": null,
"description": "The HTML element to be used",
"name": "as",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"a\" | \"span\" | \"p\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
}
},
"ext_com_draculaui_docgen": {
"tags": {},
"description": "Text is the base component for any sort of text.\n\nConsumers of this component can control, the color, size,\nweight, and spacing of Text.\n\nUse this component for generic, and non-hierarchical text that is\nto be displayed on a page, or as part of other complex components\nor UI patterns.",
"displayName": "Text",
"methods": [],
"props": {
"align": {
"defaultValue": null,
"description": "Controls the alignment of text.",
"name": "align",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"left\" | \"center\" | \"right\" | \"justify\" | undefined"
}
},
"size": {
"defaultValue": null,
"description": "Controls the size of the text based on pre-configured Dracula UI sizes.",
"name": "size",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | undefined"
}
},
"weight": {
"defaultValue": null,
"description": "Controls the weight of the text.",
"name": "weight",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"normal\" | \"semibold\" | \"bold\" | undefined"
}
},
"lineHeight": {
"defaultValue": null,
"description": "Controls the line height of a text.",
"name": "lineHeight",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"xl\" | undefined"
}
},
"color": {
"defaultValue": null,
"description": "Controls the color of the text",
"name": "color",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"purpleCyan\" | \"yellowPink\" | \"cyanGreen\" | \"pinkPurple\" | \"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | \"black\" | \"blackSecondary\" | \"blackLight\" | undefined"
}
},
"as": {
"defaultValue": null,
"description": "The HTML element to be used",
"name": "as",
"parent": {
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
},
"declarations": [
{
"fileName": "src/components/Text/Text.tsx",
"name": "TextProps"
}
],
"required": false,
"type": {
"name": "\"a\" | \"span\" | \"p\" | undefined"
}
},
"p": {
"defaultValue": null,
"description": "",
"name": "p",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"py": {
"defaultValue": null,
"description": "",
"name": "py",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"px": {
"defaultValue": null,
"description": "",
"name": "px",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pt": {
"defaultValue": null,
"description": "",
"name": "pt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pb": {
"defaultValue": null,
"description": "",
"name": "pb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pl": {
"defaultValue": null,
"description": "",
"name": "pl",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"pr": {
"defaultValue": null,
"description": "",
"name": "pr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | undefined"
}
},
"m": {
"defaultValue": null,
"description": "",
"name": "m",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"my": {
"defaultValue": null,
"description": "",
"name": "my",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mx": {
"defaultValue": null,
"description": "",
"name": "mx",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mt": {
"defaultValue": null,
"description": "",
"name": "mt",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mb": {
"defaultValue": null,
"description": "",
"name": "mb",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"ml": {
"defaultValue": null,
"description": "",
"name": "ml",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
},
"mr": {
"defaultValue": null,
"description": "",
"name": "mr",
"declarations": [
{
"fileName": "dracula-ui/src/base/spacing.ts",
"name": "TypeLiteral"
}
],
"required": false,
"type": {
"name": "\"md\" | \"lg\" | \"sm\" | \"xs\" | \"none\" | \"xxs\" | \"auto\" | undefined"
}
}
}
}
}
]
}