@okshaun/components 1.0.1 → 2.0.0

package/dist/specs/recipes.json

@@ -13,18 +13,6 @@
         "<Box />"
       ]
     },
-    {
-      "name": "breadcrumbs",
-      "description": "",
-      "variants": {},
-      "defaultVariants": {},
-      "functionExamples": [
-        "breadcrumbs()"
-      ],
-      "jsxExamples": [
-        "<Breadcrumbs />"
-      ]
-    },
     {
       "name": "card",
       "description": "",
@@ -42,8 +30,7 @@
         ]
       },
       "defaultVariants": {
-        "variant": "default",
-        "interactive": false
+        "variant": "default"
       },
       "functionExamples": [
         "card({ variant: 'default' })",
@@ -120,7 +107,7 @@
           "h3",
           "h4"
         ],
-        "allcaps": [
+        "allCaps": [
           "true"
         ]
       },
@@ -129,13 +116,37 @@
       },
       "functionExamples": [
         "heading({ level: 'h1' })",
-        "heading({ allcaps: true })",
-        "heading({ level: 'h1', allcaps: true })"
+        "heading({ allCaps: true })",
+        "heading({ level: 'h1', allCaps: true })"
       ],
       "jsxExamples": [
         "<Heading level=\"h1\" />",
-        "<Heading allcaps={true} />",
-        "<Heading level=\"h1\" allcaps={true} />"
+        "<Heading allCaps={true} />",
+        "<Heading level=\"h1\" allCaps={true} />"
+      ]
+    },
+    {
+      "name": "highlightText",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "highlightText()"
+      ],
+      "jsxExamples": [
+        "<HighlightText />"
+      ]
+    },
+    {
+      "name": "icon",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "icon()"
+      ],
+      "jsxExamples": [
+        "<Icon />"
       ]
     },
     {
@@ -162,10 +173,11 @@
         "truncate": [
           "true"
         ],
-        "allcaps": [
+        "allCaps": [
           "true"
         ],
         "size": [
+          "10",
           "12",
           "14",
           "16",
@@ -199,11 +211,11 @@
         "label({ italic: true })",
         "label({ underline: true })",
         "label({ truncate: true })",
-        "label({ allcaps: true })",
-        "label({ size: '12' })",
+        "label({ allCaps: true })",
+        "label({ size: '10' })",
         "label({ weight: 'light' })",
         "label({ _disabled: true })",
-        "label({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allcaps: true, size: '12', weight: 'light', _disabled: true })"
+        "label({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
       ],
       "jsxExamples": [
         "<Label family=\"heading\" />",
@@ -211,11 +223,11 @@
         "<Label italic={true} />",
         "<Label underline={true} />",
         "<Label truncate={true} />",
-        "<Label allcaps={true} />",
-        "<Label size=\"12\" />",
+        "<Label allCaps={true} />",
+        "<Label size=\"10\" />",
         "<Label weight=\"light\" />",
         "<Label _disabled={true} />",
-        "<Label family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allcaps={true} size=\"12\" weight=\"light\" _disabled={true} />"
+        "<Label family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
       ]
     },
     {
@@ -242,10 +254,11 @@
         "truncate": [
           "true"
         ],
-        "allcaps": [
+        "allCaps": [
           "true"
         ],
         "size": [
+          "10",
           "12",
           "14",
           "16",
@@ -270,20 +283,18 @@
           "true"
         ]
       },
-      "defaultVariants": {
-        "family": "inherit"
-      },
+      "defaultVariants": {},
       "functionExamples": [
         "link({ family: 'heading' })",
         "link({ bold: true })",
         "link({ italic: true })",
         "link({ underline: true })",
         "link({ truncate: true })",
-        "link({ allcaps: true })",
-        "link({ size: '12' })",
+        "link({ allCaps: true })",
+        "link({ size: '10' })",
         "link({ weight: 'light' })",
         "link({ _disabled: true })",
-        "link({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allcaps: true, size: '12', weight: 'light', _disabled: true })"
+        "link({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
       ],
       "jsxExamples": [
         "<Link family=\"heading\" />",
@@ -291,70 +302,54 @@
         "<Link italic={true} />",
         "<Link underline={true} />",
         "<Link truncate={true} />",
-        "<Link allcaps={true} />",
-        "<Link size=\"12\" />",
+        "<Link allCaps={true} />",
+        "<Link size=\"10\" />",
         "<Link weight=\"light\" />",
         "<Link _disabled={true} />",
-        "<Link family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allcaps={true} size=\"12\" weight=\"light\" _disabled={true} />"
+        "<Link family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
       ]
     },
     {
-      "name": "pre",
+      "name": "list",
       "description": "",
       "variants": {},
       "defaultVariants": {},
       "functionExamples": [
-        "pre()"
+        "list()"
       ],
       "jsxExamples": [
-        "<Pre />"
+        "<List />"
       ]
     },
     {
-      "name": "radioInput",
+      "name": "pre",
       "description": "",
       "variants": {},
       "defaultVariants": {},
       "functionExamples": [
-        "radioInput()"
+        "pre()"
       ],
       "jsxExamples": [
-        "<RadioInput />"
+        "<Pre />"
       ]
     },
     {
-      "name": "spinner",
+      "name": "radioInput",
       "description": "",
-      "variants": {
-        "size": [
-          "xs",
-          "sm",
-          "md",
-          "lg"
-        ],
-        "inverse": [
-          "true"
-        ]
-      },
-      "defaultVariants": {
-        "size": "md"
-      },
+      "variants": {},
+      "defaultVariants": {},
       "functionExamples": [
-        "spinner({ size: 'xs' })",
-        "spinner({ inverse: true })",
-        "spinner({ size: 'xs', inverse: true })"
+        "radioInput()"
       ],
       "jsxExamples": [
-        "<Spinner size=\"xs\" />",
-        "<Spinner inverse={true} />",
-        "<Spinner size=\"xs\" inverse={true} />"
+        "<RadioInput />"
       ]
     },
     {
       "name": "tag",
       "description": "",
       "variants": {
-        "appearance": [
+        "variant": [
           "default",
           "bold"
         ],
@@ -372,9 +367,13 @@
           "magenta",
           "tan"
         ],
-        "iconPosition": [
-          "left",
-          "right"
+        "iconBefore": [
+          "true",
+          "false"
+        ],
+        "iconAfter": [
+          "true",
+          "false"
         ],
         "hasIcon": [
           "true",
@@ -382,24 +381,24 @@
         ]
       },
       "defaultVariants": {
-        "appearance": "default",
-        "hue": "gray",
-        "iconPosition": "left",
-        "hasIcon": false
+        "variant": "default",
+        "hue": "gray"
       },
       "functionExamples": [
-        "tag({ appearance: 'default' })",
+        "tag({ variant: 'default' })",
         "tag({ hue: 'gray' })",
-        "tag({ iconPosition: 'left' })",
+        "tag({ iconBefore: true })",
+        "tag({ iconAfter: true })",
         "tag({ hasIcon: true })",
-        "tag({ appearance: 'default', hue: 'gray', iconPosition: 'left', hasIcon: true })"
+        "tag({ variant: 'default', hue: 'gray', iconBefore: true, iconAfter: true, hasIcon: true })"
       ],
       "jsxExamples": [
-        "<Tag appearance=\"default\" />",
+        "<Tag variant=\"default\" />",
         "<Tag hue=\"gray\" />",
-        "<Tag iconPosition=\"left\" />",
+        "<Tag iconBefore={true} />",
+        "<Tag iconAfter={true} />",
         "<Tag hasIcon={true} />",
-        "<Tag appearance=\"default\" hue=\"gray\" iconPosition=\"left\" hasIcon={true} />"
+        "<Tag variant=\"default\" hue=\"gray\" iconBefore={true} iconAfter={true} hasIcon={true} />"
       ]
     },
     {
@@ -426,10 +425,11 @@
         "truncate": [
           "true"
         ],
-        "allcaps": [
+        "allCaps": [
           "true"
         ],
         "size": [
+          "10",
           "12",
           "14",
           "16",
@@ -451,19 +451,17 @@
           "black"
         ]
       },
-      "defaultVariants": {
-        "family": "inherit"
-      },
+      "defaultVariants": {},
       "functionExamples": [
         "text({ family: 'heading' })",
         "text({ bold: true })",
         "text({ italic: true })",
         "text({ underline: true })",
         "text({ truncate: true })",
-        "text({ allcaps: true })",
-        "text({ size: '12' })",
+        "text({ allCaps: true })",
+        "text({ size: '10' })",
         "text({ weight: 'light' })",
-        "text({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allcaps: true, size: '12', weight: 'light' })"
+        "text({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
       ],
       "jsxExamples": [
         "<Text family=\"heading\" />",
@@ -471,10 +469,10 @@
         "<Text italic={true} />",
         "<Text underline={true} />",
         "<Text truncate={true} />",
-        "<Text allcaps={true} />",
-        "<Text size=\"12\" />",
+        "<Text allCaps={true} />",
+        "<Text size=\"10\" />",
         "<Text weight=\"light\" />",
-        "<Text family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allcaps={true} size=\"12\" weight=\"light\" />"
+        "<Text family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
       ]
     },
     {
@@ -482,42 +480,12 @@
       "description": "",
       "variants": {
         "size": [
-          "md",
           "sm",
-          "lg",
-          "xl"
-        ],
-        "autoSize": [
-          "false",
-          "true"
-        ]
-      },
-      "defaultVariants": {
-        "size": "md"
-      },
-      "functionExamples": [
-        "textarea({ size: 'md' })",
-        "textarea({ autoSize: false })",
-        "textarea({ size: 'md', autoSize: false })"
-      ],
-      "jsxExamples": [
-        "<Textarea size=\"md\" />",
-        "<Textarea autoSize={false} />",
-        "<Textarea size=\"md\" autoSize={false} />"
-      ]
-    },
-    {
-      "name": "textinput",
-      "description": "",
-      "variants": {
-        "size": [
           "md",
-          "sm",
           "lg",
           "xl"
         ],
         "autoSize": [
-          "false",
           "true"
         ]
       },
@@ -525,14 +493,14 @@
         "size": "md"
       },
       "functionExamples": [
-        "textinput({ size: 'md' })",
-        "textinput({ autoSize: false })",
-        "textinput({ size: 'md', autoSize: false })"
+        "textarea({ size: 'sm' })",
+        "textarea({ autoSize: true })",
+        "textarea({ size: 'sm', autoSize: true })"
       ],
       "jsxExamples": [
-        "<Textinput size=\"md\" />",
-        "<Textinput autoSize={false} />",
-        "<Textinput size=\"md\" autoSize={false} />"
+        "<Textarea size=\"sm\" />",
+        "<Textarea autoSize={true} />",
+        "<Textarea size=\"sm\" autoSize={true} />"
       ]
     },
     {
@@ -559,6 +527,38 @@
         "<ToggleInput />"
       ]
     },
+    {
+      "name": "avatar",
+      "variants": {
+        "size": [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl",
+          "2xl"
+        ],
+        "shape": [
+          "circle",
+          "square",
+          "hexagon"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md",
+        "shape": "circle"
+      },
+      "functionExamples": [
+        "avatar({ size: 'xs' })",
+        "avatar({ shape: 'circle' })",
+        "avatar({ size: 'xs', shape: 'circle' })"
+      ],
+      "jsxExamples": [
+        "<Avatar size=\"xs\" />",
+        "<Avatar shape=\"circle\" />",
+        "<Avatar size=\"xs\" shape=\"circle\" />"
+      ]
+    },
     {
       "name": "badge",
       "variants": {
@@ -578,11 +578,11 @@
         "variant": [
           "neutral",
           "subtle",
-          "inverted",
-          "subtle-inverted",
+          "bold",
+          "inverse",
           "success",
-          "danger",
           "warning",
+          "danger",
           "info"
         ]
       },
@@ -605,20 +605,34 @@
         "<Badge size=\"sm\" standalone={true} dot={true} variant=\"neutral\" />"
       ]
     },
+    {
+      "name": "breadcrumbs",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "breadcrumbs()"
+      ],
+      "jsxExamples": [
+        "<Breadcrumbs />"
+      ]
+    },
     {
       "name": "button",
       "variants": {
         "variant": [
           "default",
           "primary",
-          "subtle",
-          "hollow"
+          "hollow",
+          "ghost",
+          "danger",
+          "selected",
+          "selectedBold"
         ],
         "size": [
+          "sm",
           "md",
-          "xl",
           "lg",
-          "sm"
+          "xl"
         ],
         "iconBefore": [
           "true"
@@ -633,188 +647,312 @@
       },
       "functionExamples": [
         "button({ variant: 'default' })",
-        "button({ size: 'md' })",
+        "button({ size: 'sm' })",
         "button({ iconBefore: true })",
         "button({ iconAfter: true })",
-        "button({ variant: 'default', size: 'md', iconBefore: true, iconAfter: true })"
+        "button({ variant: 'default', size: 'sm', iconBefore: true, iconAfter: true })"
       ],
       "jsxExamples": [
         "<Button variant=\"default\" />",
-        "<Button size=\"md\" />",
+        "<Button size=\"sm\" />",
         "<Button iconBefore={true} />",
         "<Button iconAfter={true} />",
-        "<Button variant=\"default\" size=\"md\" iconBefore={true} iconAfter={true} />"
+        "<Button variant=\"default\" size=\"sm\" iconBefore={true} iconAfter={true} />"
       ]
     },
     {
-      "name": "iconButton",
+      "name": "checkbox",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "checkbox()"
+      ],
+      "jsxExamples": [
+        "<Checkbox />"
+      ]
+    },
+    {
+      "name": "chip",
       "variants": {
-        "variant": [
-          "default",
-          "primary",
-          "subtle",
-          "hollow"
+        "size": [
+          "sm",
+          "md",
+          "lg"
         ],
+        "before": [
+          "true"
+        ],
+        "after": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "chip({ size: 'sm' })",
+        "chip({ before: true })",
+        "chip({ after: true })",
+        "chip({ size: 'sm', before: true, after: true })"
+      ],
+      "jsxExamples": [
+        "<Chip size=\"sm\" />",
+        "<Chip before={true} />",
+        "<Chip after={true} />",
+        "<Chip size=\"sm\" before={true} after={true} />"
+      ]
+    },
+    {
+      "name": "datePicker",
+      "variants": {
         "size": [
+          "sm",
           "md",
+          "lg"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "datePicker({ size: 'sm' })"
+      ],
+      "jsxExamples": [
+        "<DatePicker size=\"sm\" />"
+      ]
+    },
+    {
+      "name": "formField",
+      "variants": {
+        "layout": [
+          "default",
+          "inline"
+        ],
+        "size": [
           "sm",
+          "md",
           "lg",
           "xl"
         ]
       },
       "defaultVariants": {
-        "variant": "default",
+        "layout": "default",
         "size": "md"
       },
       "functionExamples": [
-        "iconButton({ variant: 'default' })",
-        "iconButton({ size: 'md' })",
-        "iconButton({ variant: 'default', size: 'md' })"
+        "formField({ layout: 'default' })",
+        "formField({ size: 'sm' })",
+        "formField({ layout: 'default', size: 'sm' })"
       ],
       "jsxExamples": [
-        "<IconButton variant=\"default\" />",
-        "<IconButton size=\"md\" />",
-        "<IconButton variant=\"default\" size=\"md\" />"
+        "<FormField layout=\"default\" />",
+        "<FormField size=\"sm\" />",
+        "<FormField layout=\"default\" size=\"sm\" />"
       ]
     },
     {
-      "name": "checkbox",
-      "variants": {},
-      "defaultVariants": {},
+      "name": "iconButton",
+      "variants": {
+        "variant": [
+          "default",
+          "primary",
+          "hollow",
+          "ghost",
+          "danger",
+          "selected",
+          "selectedBold"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ]
+      },
+      "defaultVariants": {
+        "variant": "default",
+        "size": "md"
+      },
       "functionExamples": [
-        "checkbox()"
+        "iconButton({ variant: 'default' })",
+        "iconButton({ size: 'sm' })",
+        "iconButton({ variant: 'default', size: 'sm' })"
       ],
       "jsxExamples": [
-        "<Checkbox />"
+        "<IconButton variant=\"default\" />",
+        "<IconButton size=\"sm\" />",
+        "<IconButton variant=\"default\" size=\"sm\" />"
       ]
     },
     {
-      "name": "radio",
-      "variants": {},
-      "defaultVariants": {},
+      "name": "listItemGroup",
+      "variants": {
+        "density": [
+          "compact",
+          "comfortable",
+          "spacious"
+        ]
+      },
+      "defaultVariants": {
+        "density": "compact"
+      },
       "functionExamples": [
-        "radio()"
+        "listItemGroup({ density: 'compact' })"
       ],
       "jsxExamples": [
-        "<Radio />"
+        "<ListItemGroup density=\"compact\" />"
       ]
     },
     {
-      "name": "tooltip",
+      "name": "listItem",
       "variants": {
-        "position": [
-          "top",
-          "bottom",
-          "left",
-          "right",
-          "top-start",
-          "bottom-start",
-          "left-start",
-          "right-start",
-          "top-end",
-          "bottom-end",
-          "left-end",
-          "right-end"
-        ],
-        "caret": [
+        "variant": [
+          "default",
+          "checkbox",
+          "toggle",
+          "divider"
+        ],
+        "density": [
+          "compact",
+          "comfortable",
+          "spacious"
+        ],
+        "selected": [
           "true",
           "false"
         ],
-        "size": [
-          "sm",
-          "md",
-          "lg"
+        "iconBefore": [
+          "true",
+          "false"
+        ],
+        "iconAfter": [
+          "true",
+          "false"
         ]
       },
       "defaultVariants": {
-        "position": "bottom",
-        "caret": true,
-        "size": "md"
+        "variant": "default",
+        "density": "compact",
+        "selected": false
       },
       "functionExamples": [
-        "tooltip({ position: 'top' })",
-        "tooltip({ caret: true })",
-        "tooltip({ size: 'sm' })",
-        "tooltip({ position: 'top', caret: true, size: 'sm' })"
+        "listItem({ variant: 'default' })",
+        "listItem({ density: 'compact' })",
+        "listItem({ selected: true })",
+        "listItem({ iconBefore: true })",
+        "listItem({ iconAfter: true })",
+        "listItem({ variant: 'default', density: 'compact', selected: true, iconBefore: true, iconAfter: true })"
       ],
       "jsxExamples": [
-        "<Tooltip position=\"top\" />",
-        "<Tooltip caret={true} />",
-        "<Tooltip size=\"sm\" />",
-        "<Tooltip position=\"top\" caret={true} size=\"sm\" />"
+        "<ListItem variant=\"default\" />",
+        "<ListItem density=\"compact\" />",
+        "<ListItem selected={true} />",
+        "<ListItem iconBefore={true} />",
+        "<ListItem iconAfter={true} />",
+        "<ListItem variant=\"default\" density=\"compact\" selected={true} iconBefore={true} iconAfter={true} />"
       ]
     },
     {
       "name": "menu",
       "variants": {
-        "packing": [
-          "default",
+        "density": [
           "compact",
-          "comfortable"
+          "comfortable",
+          "spacious"
         ],
-        "indicatorPosition": [
-          "left",
-          "right"
+        "panel": [
+          "true"
         ]
       },
       "defaultVariants": {
-        "packing": "default",
-        "indicatorPosition": "left"
+        "density": "compact"
       },
       "functionExamples": [
-        "menu({ packing: 'default' })",
-        "menu({ indicatorPosition: 'left' })",
-        "menu({ packing: 'default', indicatorPosition: 'left' })"
+        "menu({ density: 'compact' })",
+        "menu({ panel: true })",
+        "menu({ density: 'compact', panel: true })"
       ],
       "jsxExamples": [
-        "<Menu packing=\"default\" />",
-        "<Menu indicatorPosition=\"left\" />",
-        "<Menu packing=\"default\" indicatorPosition=\"left\" />"
+        "<Menu density=\"compact\" />",
+        "<Menu panel={true} />",
+        "<Menu density=\"compact\" panel={true} />"
       ]
     },
     {
-      "name": "select",
+      "name": "modal",
       "variants": {
         "size": [
+          "sm",
           "md",
-          "xl",
           "lg",
-          "sm"
+          "xl",
+          "full",
+          "mobile"
+        ],
+        "variant": [
+          "default",
+          "confirmation"
         ]
       },
       "defaultVariants": {
+        "variant": "default",
         "size": "md"
       },
       "functionExamples": [
-        "select({ size: 'md' })"
+        "modal({ size: 'sm' })",
+        "modal({ variant: 'default' })",
+        "modal({ size: 'sm', variant: 'default' })"
       ],
       "jsxExamples": [
-        "<Select size=\"md\" />"
+        "<Modal size=\"sm\" />",
+        "<Modal variant=\"default\" />",
+        "<Modal size=\"sm\" variant=\"default\" />"
       ]
     },
     {
-      "name": "toggle",
+      "name": "radio",
       "variants": {},
       "defaultVariants": {},
       "functionExamples": [
-        "toggle()"
+        "radio()"
       ],
       "jsxExamples": [
-        "<Toggle />"
+        "<Radio />"
       ]
     },
     {
-      "name": "chip",
+      "name": "select",
       "variants": {
         "size": [
           "md",
+          "xl",
+          "lg",
+          "sm"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "select({ size: 'md' })"
+      ],
+      "jsxExamples": [
+        "<Select size=\"md\" />"
+      ]
+    },
+    {
+      "name": "spinner",
+      "variants": {
+        "size": [
+          "xs",
           "sm",
+          "md",
           "lg"
         ],
-        "before": [
+        "inverse": [
           "true"
         ],
-        "after": [
+        "centered": [
           "true"
         ]
       },
@@ -822,52 +960,57 @@
         "size": "md"
       },
       "functionExamples": [
-        "chip({ size: 'md' })",
-        "chip({ before: true })",
-        "chip({ after: true })",
-        "chip({ size: 'md', before: true, after: true })"
+        "spinner({ size: 'xs' })",
+        "spinner({ inverse: true })",
+        "spinner({ centered: true })",
+        "spinner({ size: 'xs', inverse: true, centered: true })"
       ],
       "jsxExamples": [
-        "<Chip size=\"md\" />",
-        "<Chip before={true} />",
-        "<Chip after={true} />",
-        "<Chip size=\"md\" before={true} after={true} />"
+        "<Spinner size=\"xs\" />",
+        "<Spinner inverse={true} />",
+        "<Spinner centered={true} />",
+        "<Spinner size=\"xs\" inverse={true} centered={true} />"
       ]
     },
     {
-      "name": "avatar",
+      "name": "textInput",
       "variants": {
         "size": [
-          "xs",
           "sm",
           "md",
           "lg",
-          "xl",
-          "2xl"
+          "xl"
         ],
-        "shape": [
-          "circle",
-          "square",
-          "hexagon"
+        "iconBefore": [
+          "true"
+        ],
+        "iconAfter": [
+          "true"
+        ],
+        "autoSize": [
+          "true"
         ]
       },
       "defaultVariants": {
-        "size": "md",
-        "shape": "circle"
+        "size": "md"
       },
       "functionExamples": [
-        "avatar({ size: 'xs' })",
-        "avatar({ shape: 'circle' })",
-        "avatar({ size: 'xs', shape: 'circle' })"
+        "textInput({ size: 'sm' })",
+        "textInput({ iconBefore: true })",
+        "textInput({ iconAfter: true })",
+        "textInput({ autoSize: true })",
+        "textInput({ size: 'sm', iconBefore: true, iconAfter: true, autoSize: true })"
       ],
       "jsxExamples": [
-        "<Avatar size=\"xs\" />",
-        "<Avatar shape=\"circle\" />",
-        "<Avatar size=\"xs\" shape=\"circle\" />"
+        "<TextInput size=\"sm\" />",
+        "<TextInput iconBefore={true} />",
+        "<TextInput iconAfter={true} />",
+        "<TextInput autoSize={true} />",
+        "<TextInput size=\"sm\" iconBefore={true} iconAfter={true} autoSize={true} />"
       ]
     },
     {
-      "name": "modal",
+      "name": "timePicker",
       "variants": {
         "size": [
           "sm",
@@ -879,28 +1022,49 @@
         "size": "md"
       },
       "functionExamples": [
-        "modal({ size: 'sm' })"
+        "timePicker({ size: 'sm' })"
       ],
       "jsxExamples": [
-        "<Modal size=\"sm\" />"
+        "<TimePicker size=\"sm\" />"
       ]
     },
     {
-      "name": "formField",
+      "name": "toggle",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "toggle()"
+      ],
+      "jsxExamples": [
+        "<Toggle />"
+      ]
+    },
+    {
+      "name": "tooltip",
       "variants": {
-        "layout": [
-          "default",
-          "inline"
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "hasTitle": [
+          "true",
+          "false"
         ]
       },
       "defaultVariants": {
-        "layout": "default"
+        "size": "md",
+        "hasTitle": false
       },
       "functionExamples": [
-        "formField({ layout: 'default' })"
+        "tooltip({ size: 'sm' })",
+        "tooltip({ hasTitle: true })",
+        "tooltip({ size: 'sm', hasTitle: true })"
       ],
       "jsxExamples": [
-        "<FormField layout=\"default\" />"
+        "<Tooltip size=\"sm\" />",
+        "<Tooltip hasTitle={true} />",
+        "<Tooltip size=\"sm\" hasTitle={true} />"
       ]
     }
   ]