@okshaun/components 0.5.8 → 1.0.1

package/dist/specs/recipes.json

@@ -0,0 +1,907 @@
+{
+  "type": "recipes",
+  "data": [
+    {
+      "name": "box",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "box()"
+      ],
+      "jsxExamples": [
+        "<Box />"
+      ]
+    },
+    {
+      "name": "breadcrumbs",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "breadcrumbs()"
+      ],
+      "jsxExamples": [
+        "<Breadcrumbs />"
+      ]
+    },
+    {
+      "name": "card",
+      "description": "",
+      "variants": {
+        "variant": [
+          "default",
+          "flat",
+          "sunken",
+          "ghost",
+          "overlay"
+        ],
+        "interactive": [
+          "true",
+          "false"
+        ]
+      },
+      "defaultVariants": {
+        "variant": "default",
+        "interactive": false
+      },
+      "functionExamples": [
+        "card({ variant: 'default' })",
+        "card({ interactive: true })",
+        "card({ variant: 'default', interactive: true })"
+      ],
+      "jsxExamples": [
+        "<Card variant=\"default\" />",
+        "<Card interactive={true} />",
+        "<Card variant=\"default\" interactive={true} />"
+      ]
+    },
+    {
+      "name": "checkboxInput",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "checkboxInput()"
+      ],
+      "jsxExamples": [
+        "<CheckboxInput />"
+      ]
+    },
+    {
+      "name": "code",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "code()"
+      ],
+      "jsxExamples": [
+        "<Code />"
+      ]
+    },
+    {
+      "name": "divider",
+      "description": "",
+      "variants": {
+        "direction": [
+          "horizontal",
+          "vertical"
+        ],
+        "weight": [
+          "thin",
+          "medium",
+          "thick",
+          "thicker"
+        ]
+      },
+      "defaultVariants": {
+        "direction": "horizontal",
+        "weight": "thin"
+      },
+      "functionExamples": [
+        "divider({ direction: 'horizontal' })",
+        "divider({ weight: 'thin' })",
+        "divider({ direction: 'horizontal', weight: 'thin' })"
+      ],
+      "jsxExamples": [
+        "<Divider direction=\"horizontal\" />",
+        "<Divider weight=\"thin\" />",
+        "<Divider direction=\"horizontal\" weight=\"thin\" />"
+      ]
+    },
+    {
+      "name": "heading",
+      "description": "",
+      "variants": {
+        "level": [
+          "h1",
+          "h2",
+          "h3",
+          "h4"
+        ],
+        "allcaps": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "level": "h2"
+      },
+      "functionExamples": [
+        "heading({ level: 'h1' })",
+        "heading({ allcaps: true })",
+        "heading({ level: 'h1', allcaps: true })"
+      ],
+      "jsxExamples": [
+        "<Heading level=\"h1\" />",
+        "<Heading allcaps={true} />",
+        "<Heading level=\"h1\" allcaps={true} />"
+      ]
+    },
+    {
+      "name": "label",
+      "description": "",
+      "variants": {
+        "family": [
+          "heading",
+          "body",
+          "sans",
+          "serif",
+          "mono",
+          "inherit"
+        ],
+        "bold": [
+          "true"
+        ],
+        "italic": [
+          "true"
+        ],
+        "underline": [
+          "true"
+        ],
+        "truncate": [
+          "true"
+        ],
+        "allcaps": [
+          "true"
+        ],
+        "size": [
+          "12",
+          "14",
+          "16",
+          "20",
+          "24",
+          "32",
+          "40",
+          "48",
+          "64",
+          "72",
+          "80",
+          "96"
+        ],
+        "weight": [
+          "light",
+          "normal",
+          "medium",
+          "bold",
+          "black"
+        ],
+        "_disabled": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "family": "sans"
+      },
+      "functionExamples": [
+        "label({ family: 'heading' })",
+        "label({ bold: true })",
+        "label({ italic: true })",
+        "label({ underline: true })",
+        "label({ truncate: true })",
+        "label({ allcaps: true })",
+        "label({ size: '12' })",
+        "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 })"
+      ],
+      "jsxExamples": [
+        "<Label family=\"heading\" />",
+        "<Label bold={true} />",
+        "<Label italic={true} />",
+        "<Label underline={true} />",
+        "<Label truncate={true} />",
+        "<Label allcaps={true} />",
+        "<Label size=\"12\" />",
+        "<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} />"
+      ]
+    },
+    {
+      "name": "link",
+      "description": "",
+      "variants": {
+        "family": [
+          "heading",
+          "body",
+          "sans",
+          "serif",
+          "mono",
+          "inherit"
+        ],
+        "bold": [
+          "true"
+        ],
+        "italic": [
+          "true"
+        ],
+        "underline": [
+          "true"
+        ],
+        "truncate": [
+          "true"
+        ],
+        "allcaps": [
+          "true"
+        ],
+        "size": [
+          "12",
+          "14",
+          "16",
+          "20",
+          "24",
+          "32",
+          "40",
+          "48",
+          "64",
+          "72",
+          "80",
+          "96"
+        ],
+        "weight": [
+          "light",
+          "normal",
+          "medium",
+          "bold",
+          "black"
+        ],
+        "_disabled": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "family": "inherit"
+      },
+      "functionExamples": [
+        "link({ family: 'heading' })",
+        "link({ bold: true })",
+        "link({ italic: true })",
+        "link({ underline: true })",
+        "link({ truncate: true })",
+        "link({ allcaps: true })",
+        "link({ size: '12' })",
+        "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 })"
+      ],
+      "jsxExamples": [
+        "<Link family=\"heading\" />",
+        "<Link bold={true} />",
+        "<Link italic={true} />",
+        "<Link underline={true} />",
+        "<Link truncate={true} />",
+        "<Link allcaps={true} />",
+        "<Link size=\"12\" />",
+        "<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} />"
+      ]
+    },
+    {
+      "name": "pre",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "pre()"
+      ],
+      "jsxExamples": [
+        "<Pre />"
+      ]
+    },
+    {
+      "name": "radioInput",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "radioInput()"
+      ],
+      "jsxExamples": [
+        "<RadioInput />"
+      ]
+    },
+    {
+      "name": "spinner",
+      "description": "",
+      "variants": {
+        "size": [
+          "xs",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "inverse": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "spinner({ size: 'xs' })",
+        "spinner({ inverse: true })",
+        "spinner({ size: 'xs', inverse: true })"
+      ],
+      "jsxExamples": [
+        "<Spinner size=\"xs\" />",
+        "<Spinner inverse={true} />",
+        "<Spinner size=\"xs\" inverse={true} />"
+      ]
+    },
+    {
+      "name": "tag",
+      "description": "",
+      "variants": {
+        "appearance": [
+          "default",
+          "bold"
+        ],
+        "hue": [
+          "gray",
+          "red",
+          "orange",
+          "yellow",
+          "lime",
+          "green",
+          "teal",
+          "blue",
+          "indigo",
+          "purple",
+          "magenta",
+          "tan"
+        ],
+        "iconPosition": [
+          "left",
+          "right"
+        ],
+        "hasIcon": [
+          "true",
+          "false"
+        ]
+      },
+      "defaultVariants": {
+        "appearance": "default",
+        "hue": "gray",
+        "iconPosition": "left",
+        "hasIcon": false
+      },
+      "functionExamples": [
+        "tag({ appearance: 'default' })",
+        "tag({ hue: 'gray' })",
+        "tag({ iconPosition: 'left' })",
+        "tag({ hasIcon: true })",
+        "tag({ appearance: 'default', hue: 'gray', iconPosition: 'left', hasIcon: true })"
+      ],
+      "jsxExamples": [
+        "<Tag appearance=\"default\" />",
+        "<Tag hue=\"gray\" />",
+        "<Tag iconPosition=\"left\" />",
+        "<Tag hasIcon={true} />",
+        "<Tag appearance=\"default\" hue=\"gray\" iconPosition=\"left\" hasIcon={true} />"
+      ]
+    },
+    {
+      "name": "text",
+      "description": "",
+      "variants": {
+        "family": [
+          "heading",
+          "body",
+          "sans",
+          "serif",
+          "mono",
+          "inherit"
+        ],
+        "bold": [
+          "true"
+        ],
+        "italic": [
+          "true"
+        ],
+        "underline": [
+          "true"
+        ],
+        "truncate": [
+          "true"
+        ],
+        "allcaps": [
+          "true"
+        ],
+        "size": [
+          "12",
+          "14",
+          "16",
+          "20",
+          "24",
+          "32",
+          "40",
+          "48",
+          "64",
+          "72",
+          "80",
+          "96"
+        ],
+        "weight": [
+          "light",
+          "normal",
+          "medium",
+          "bold",
+          "black"
+        ]
+      },
+      "defaultVariants": {
+        "family": "inherit"
+      },
+      "functionExamples": [
+        "text({ family: 'heading' })",
+        "text({ bold: true })",
+        "text({ italic: true })",
+        "text({ underline: true })",
+        "text({ truncate: true })",
+        "text({ allcaps: true })",
+        "text({ size: '12' })",
+        "text({ weight: 'light' })",
+        "text({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allcaps: true, size: '12', weight: 'light' })"
+      ],
+      "jsxExamples": [
+        "<Text family=\"heading\" />",
+        "<Text bold={true} />",
+        "<Text italic={true} />",
+        "<Text underline={true} />",
+        "<Text truncate={true} />",
+        "<Text allcaps={true} />",
+        "<Text size=\"12\" />",
+        "<Text weight=\"light\" />",
+        "<Text family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allcaps={true} size=\"12\" weight=\"light\" />"
+      ]
+    },
+    {
+      "name": "textarea",
+      "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"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "textinput({ size: 'md' })",
+        "textinput({ autoSize: false })",
+        "textinput({ size: 'md', autoSize: false })"
+      ],
+      "jsxExamples": [
+        "<Textinput size=\"md\" />",
+        "<Textinput autoSize={false} />",
+        "<Textinput size=\"md\" autoSize={false} />"
+      ]
+    },
+    {
+      "name": "themeSwitcher",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "themeSwitcher()"
+      ],
+      "jsxExamples": [
+        "<ThemeSwitcher />"
+      ]
+    },
+    {
+      "name": "toggleInput",
+      "description": "",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "toggleInput()"
+      ],
+      "jsxExamples": [
+        "<ToggleInput />"
+      ]
+    },
+    {
+      "name": "badge",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "standalone": [
+          "true",
+          "false"
+        ],
+        "dot": [
+          "true",
+          "false"
+        ],
+        "variant": [
+          "neutral",
+          "subtle",
+          "inverted",
+          "subtle-inverted",
+          "success",
+          "danger",
+          "warning",
+          "info"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md",
+        "variant": "danger"
+      },
+      "functionExamples": [
+        "badge({ size: 'sm' })",
+        "badge({ standalone: true })",
+        "badge({ dot: true })",
+        "badge({ variant: 'neutral' })",
+        "badge({ size: 'sm', standalone: true, dot: true, variant: 'neutral' })"
+      ],
+      "jsxExamples": [
+        "<Badge size=\"sm\" />",
+        "<Badge standalone={true} />",
+        "<Badge dot={true} />",
+        "<Badge variant=\"neutral\" />",
+        "<Badge size=\"sm\" standalone={true} dot={true} variant=\"neutral\" />"
+      ]
+    },
+    {
+      "name": "button",
+      "variants": {
+        "variant": [
+          "default",
+          "primary",
+          "subtle",
+          "hollow"
+        ],
+        "size": [
+          "md",
+          "xl",
+          "lg",
+          "sm"
+        ],
+        "iconBefore": [
+          "true"
+        ],
+        "iconAfter": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "variant": "default",
+        "size": "md"
+      },
+      "functionExamples": [
+        "button({ variant: 'default' })",
+        "button({ size: 'md' })",
+        "button({ iconBefore: true })",
+        "button({ iconAfter: true })",
+        "button({ variant: 'default', size: 'md', iconBefore: true, iconAfter: true })"
+      ],
+      "jsxExamples": [
+        "<Button variant=\"default\" />",
+        "<Button size=\"md\" />",
+        "<Button iconBefore={true} />",
+        "<Button iconAfter={true} />",
+        "<Button variant=\"default\" size=\"md\" iconBefore={true} iconAfter={true} />"
+      ]
+    },
+    {
+      "name": "iconButton",
+      "variants": {
+        "variant": [
+          "default",
+          "primary",
+          "subtle",
+          "hollow"
+        ],
+        "size": [
+          "md",
+          "sm",
+          "lg",
+          "xl"
+        ]
+      },
+      "defaultVariants": {
+        "variant": "default",
+        "size": "md"
+      },
+      "functionExamples": [
+        "iconButton({ variant: 'default' })",
+        "iconButton({ size: 'md' })",
+        "iconButton({ variant: 'default', size: 'md' })"
+      ],
+      "jsxExamples": [
+        "<IconButton variant=\"default\" />",
+        "<IconButton size=\"md\" />",
+        "<IconButton variant=\"default\" size=\"md\" />"
+      ]
+    },
+    {
+      "name": "checkbox",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "checkbox()"
+      ],
+      "jsxExamples": [
+        "<Checkbox />"
+      ]
+    },
+    {
+      "name": "radio",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "radio()"
+      ],
+      "jsxExamples": [
+        "<Radio />"
+      ]
+    },
+    {
+      "name": "tooltip",
+      "variants": {
+        "position": [
+          "top",
+          "bottom",
+          "left",
+          "right",
+          "top-start",
+          "bottom-start",
+          "left-start",
+          "right-start",
+          "top-end",
+          "bottom-end",
+          "left-end",
+          "right-end"
+        ],
+        "caret": [
+          "true",
+          "false"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "defaultVariants": {
+        "position": "bottom",
+        "caret": true,
+        "size": "md"
+      },
+      "functionExamples": [
+        "tooltip({ position: 'top' })",
+        "tooltip({ caret: true })",
+        "tooltip({ size: 'sm' })",
+        "tooltip({ position: 'top', caret: true, size: 'sm' })"
+      ],
+      "jsxExamples": [
+        "<Tooltip position=\"top\" />",
+        "<Tooltip caret={true} />",
+        "<Tooltip size=\"sm\" />",
+        "<Tooltip position=\"top\" caret={true} size=\"sm\" />"
+      ]
+    },
+    {
+      "name": "menu",
+      "variants": {
+        "packing": [
+          "default",
+          "compact",
+          "comfortable"
+        ],
+        "indicatorPosition": [
+          "left",
+          "right"
+        ]
+      },
+      "defaultVariants": {
+        "packing": "default",
+        "indicatorPosition": "left"
+      },
+      "functionExamples": [
+        "menu({ packing: 'default' })",
+        "menu({ indicatorPosition: 'left' })",
+        "menu({ packing: 'default', indicatorPosition: 'left' })"
+      ],
+      "jsxExamples": [
+        "<Menu packing=\"default\" />",
+        "<Menu indicatorPosition=\"left\" />",
+        "<Menu packing=\"default\" indicatorPosition=\"left\" />"
+      ]
+    },
+    {
+      "name": "select",
+      "variants": {
+        "size": [
+          "md",
+          "xl",
+          "lg",
+          "sm"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "select({ size: 'md' })"
+      ],
+      "jsxExamples": [
+        "<Select size=\"md\" />"
+      ]
+    },
+    {
+      "name": "toggle",
+      "variants": {},
+      "defaultVariants": {},
+      "functionExamples": [
+        "toggle()"
+      ],
+      "jsxExamples": [
+        "<Toggle />"
+      ]
+    },
+    {
+      "name": "chip",
+      "variants": {
+        "size": [
+          "md",
+          "sm",
+          "lg"
+        ],
+        "before": [
+          "true"
+        ],
+        "after": [
+          "true"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "chip({ size: 'md' })",
+        "chip({ before: true })",
+        "chip({ after: true })",
+        "chip({ size: 'md', before: true, after: true })"
+      ],
+      "jsxExamples": [
+        "<Chip size=\"md\" />",
+        "<Chip before={true} />",
+        "<Chip after={true} />",
+        "<Chip size=\"md\" before={true} after={true} />"
+      ]
+    },
+    {
+      "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": "modal",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "defaultVariants": {
+        "size": "md"
+      },
+      "functionExamples": [
+        "modal({ size: 'sm' })"
+      ],
+      "jsxExamples": [
+        "<Modal size=\"sm\" />"
+      ]
+    },
+    {
+      "name": "formField",
+      "variants": {
+        "layout": [
+          "default",
+          "inline"
+        ]
+      },
+      "defaultVariants": {
+        "layout": "default"
+      },
+      "functionExamples": [
+        "formField({ layout: 'default' })"
+      ],
+      "jsxExamples": [
+        "<FormField layout=\"default\" />"
+      ]
+    }
+  ]
+}