@okshaun/components 0.5.8 → 1.0.1

package/dist/specs/keyframes.json

@@ -0,0 +1,137 @@
+{
+  "type": "keyframes",
+  "data": [
+    {
+      "name": "spin",
+      "functionExamples": [
+        "css({ animationName: 'spin' })",
+        "css({ animation: 'spin 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"spin\" />",
+        "<Box animation=\"spin 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "ping",
+      "functionExamples": [
+        "css({ animationName: 'ping' })",
+        "css({ animation: 'ping 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"ping\" />",
+        "<Box animation=\"ping 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "pulse",
+      "functionExamples": [
+        "css({ animationName: 'pulse' })",
+        "css({ animation: 'pulse 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"pulse\" />",
+        "<Box animation=\"pulse 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "bounce",
+      "functionExamples": [
+        "css({ animationName: 'bounce' })",
+        "css({ animation: 'bounce 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"bounce\" />",
+        "<Box animation=\"bounce 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "badgePop",
+      "functionExamples": [
+        "css({ animationName: 'badgePop' })",
+        "css({ animation: 'badgePop 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"badgePop\" />",
+        "<Box animation=\"badgePop 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "badgePopStandalone",
+      "functionExamples": [
+        "css({ animationName: 'badgePopStandalone' })",
+        "css({ animation: 'badgePopStandalone 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"badgePopStandalone\" />",
+        "<Box animation=\"badgePopStandalone 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "slideLeft",
+      "functionExamples": [
+        "css({ animationName: 'slideLeft' })",
+        "css({ animation: 'slideLeft 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"slideLeft\" />",
+        "<Box animation=\"slideLeft 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "slideRight",
+      "functionExamples": [
+        "css({ animationName: 'slideRight' })",
+        "css({ animation: 'slideRight 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"slideRight\" />",
+        "<Box animation=\"slideRight 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "modalFadeIn",
+      "functionExamples": [
+        "css({ animationName: 'modalFadeIn' })",
+        "css({ animation: 'modalFadeIn 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"modalFadeIn\" />",
+        "<Box animation=\"modalFadeIn 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "modalFadeOut",
+      "functionExamples": [
+        "css({ animationName: 'modalFadeOut' })",
+        "css({ animation: 'modalFadeOut 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"modalFadeOut\" />",
+        "<Box animation=\"modalFadeOut 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "modalScaleIn",
+      "functionExamples": [
+        "css({ animationName: 'modalScaleIn' })",
+        "css({ animation: 'modalScaleIn 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"modalScaleIn\" />",
+        "<Box animation=\"modalScaleIn 1s ease-in-out infinite\" />"
+      ]
+    },
+    {
+      "name": "modalScaleOut",
+      "functionExamples": [
+        "css({ animationName: 'modalScaleOut' })",
+        "css({ animation: 'modalScaleOut 1s ease-in-out infinite' })"
+      ],
+      "jsxExamples": [
+        "<Box animationName=\"modalScaleOut\" />",
+        "<Box animation=\"modalScaleOut 1s ease-in-out infinite\" />"
+      ]
+    }
+  ]
+}

package/dist/specs/layer-styles.json

@@ -0,0 +1,23 @@
+{
+  "type": "layer-styles",
+  "data": [
+    {
+      "name": "surface.raised",
+      "functionExamples": [
+        "css({ layerStyle: 'surface.raised' })"
+      ],
+      "jsxExamples": [
+        "<Box layerStyle=\"surface.raised\" />"
+      ]
+    },
+    {
+      "name": "surface.overlay",
+      "functionExamples": [
+        "css({ layerStyle: 'surface.overlay' })"
+      ],
+      "jsxExamples": [
+        "<Box layerStyle=\"surface.overlay\" />"
+      ]
+    }
+  ]
+}

package/dist/specs/patterns.json

@@ -0,0 +1,475 @@
+{
+  "type": "patterns",
+  "data": [
+    {
+      "name": "icon",
+      "properties": [
+        {
+          "name": "size",
+          "type": "\"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"12\" | \"14\" | \"16\" | \"20\" | \"22\" | \"24\" | \"32\" | \"40\" | \"48\" | \"56\" | \"64\" | \"72\" | \"80\" | \"88\" | \"96\" | \"104\" | \"112\" | \"120\" | \"128\" | \"136\" | \"144\" | \"152\" | \"160\" | \"168\" | \"176\" | \"184\" | \"192\" | \"200\" | \"208\" | \"216\" | \"224\" | \"232\" | \"240\" | \"248\" | \"256\" | \"264\" | \"272\" | \"280\" | \"full\" | \"half\" | \"min\" | \"max\" | \"fit\" | \"prose\" | \"auto\" | \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\""
+        }
+      ],
+      "jsx": "Icon",
+      "functionExamples": [
+        "icon({ size: \"0\" })"
+      ],
+      "jsxExamples": [
+        "<Icon size={\"0\"} />"
+      ]
+    },
+    {
+      "name": "flex",
+      "properties": [
+        {
+          "name": "align",
+          "type": "SystemProperties[\"alignItems\"]"
+        },
+        {
+          "name": "justify",
+          "type": "SystemProperties[\"justifyContent\"]"
+        },
+        {
+          "name": "direction",
+          "type": "SystemProperties[\"flexDirection\"]"
+        },
+        {
+          "name": "wrap",
+          "type": "SystemProperties[\"flexWrap\"]"
+        },
+        {
+          "name": "basis",
+          "type": "SystemProperties[\"flexBasis\"]"
+        },
+        {
+          "name": "grow",
+          "type": "SystemProperties[\"flexGrow\"]"
+        },
+        {
+          "name": "shrink",
+          "type": "SystemProperties[\"flexShrink\"]"
+        }
+      ],
+      "jsx": "Flex",
+      "functionExamples": [
+        "flex({ align: <value> })",
+        "flex({ justify: <value> })",
+        "flex({ direction: <value> })",
+        "flex({ wrap: <value> })",
+        "flex({ basis: <value> })",
+        "flex({ grow: <value> })",
+        "flex({ shrink: <value> })"
+      ],
+      "jsxExamples": [
+        "<Flex align={<value>} />",
+        "<Flex justify={<value>} />",
+        "<Flex direction={<value>} />",
+        "<Flex wrap={<value>} />",
+        "<Flex basis={<value>} />",
+        "<Flex grow={<value>} />",
+        "<Flex shrink={<value>} />"
+      ]
+    },
+    {
+      "name": "stack",
+      "properties": [
+        {
+          "name": "align",
+          "type": "SystemProperties[\"alignItems\"]"
+        },
+        {
+          "name": "justify",
+          "type": "SystemProperties[\"justifyContent\"]"
+        },
+        {
+          "name": "direction",
+          "type": "SystemProperties[\"flexDirection\"]",
+          "defaultValue": "column"
+        },
+        {
+          "name": "gap",
+          "type": "SystemProperties[\"gap\"]",
+          "defaultValue": "8px"
+        }
+      ],
+      "jsx": "Stack",
+      "functionExamples": [
+        "stack({ align: <value> })",
+        "stack({ justify: <value> })",
+        "stack({ direction: <value> })",
+        "stack({ gap: <value> })"
+      ],
+      "jsxExamples": [
+        "<Stack align={<value>} />",
+        "<Stack justify={<value>} />",
+        "<Stack direction={<value>} />",
+        "<Stack gap={<value>} />"
+      ]
+    },
+    {
+      "name": "vstack",
+      "properties": [
+        {
+          "name": "justify",
+          "type": "SystemProperties[\"justifyContent\"]"
+        },
+        {
+          "name": "gap",
+          "type": "SystemProperties[\"gap\"]",
+          "defaultValue": "8px"
+        }
+      ],
+      "jsx": "VStack",
+      "functionExamples": [
+        "vstack({ justify: <value> })",
+        "vstack({ gap: <value> })"
+      ],
+      "jsxExamples": [
+        "<VStack justify={<value>} />",
+        "<VStack gap={<value>} />"
+      ]
+    },
+    {
+      "name": "hstack",
+      "properties": [
+        {
+          "name": "justify",
+          "type": "SystemProperties[\"justifyContent\"]"
+        },
+        {
+          "name": "gap",
+          "type": "SystemProperties[\"gap\"]",
+          "defaultValue": "8px"
+        }
+      ],
+      "jsx": "HStack",
+      "functionExamples": [
+        "hstack({ justify: <value> })",
+        "hstack({ gap: <value> })"
+      ],
+      "jsxExamples": [
+        "<HStack justify={<value>} />",
+        "<HStack gap={<value>} />"
+      ]
+    },
+    {
+      "name": "spacer",
+      "properties": [
+        {
+          "name": "size",
+          "type": "ConditionalValue<Tokens[\"spacing\"]>"
+        }
+      ],
+      "jsx": "Spacer",
+      "functionExamples": [
+        "spacer({ size: \"md\" })"
+      ],
+      "jsxExamples": [
+        "<Spacer size={\"md\"} />"
+      ]
+    },
+    {
+      "name": "square",
+      "properties": [
+        {
+          "name": "size",
+          "type": "SystemProperties[\"width\"]"
+        }
+      ],
+      "jsx": "Square",
+      "functionExamples": [
+        "square({ size: <value> })"
+      ],
+      "jsxExamples": [
+        "<Square size={<value>} />"
+      ]
+    },
+    {
+      "name": "circle",
+      "properties": [
+        {
+          "name": "size",
+          "type": "SystemProperties[\"width\"]"
+        }
+      ],
+      "jsx": "Circle",
+      "functionExamples": [
+        "circle({ size: <value> })"
+      ],
+      "jsxExamples": [
+        "<Circle size={<value>} />"
+      ]
+    },
+    {
+      "name": "center",
+      "properties": [
+        {
+          "name": "inline",
+          "type": "ConditionalValue<boolean>"
+        }
+      ],
+      "jsx": "Center",
+      "functionExamples": [
+        "center({ inline: true })"
+      ],
+      "jsxExamples": [
+        "<Center inline={true} />"
+      ]
+    },
+    {
+      "name": "linkOverlay",
+      "properties": [],
+      "jsx": "LinkOverlay",
+      "functionExamples": [
+        "linkOverlay()"
+      ],
+      "jsxExamples": [
+        "<LinkOverlay />"
+      ]
+    },
+    {
+      "name": "aspectRatio",
+      "properties": [
+        {
+          "name": "ratio",
+          "type": "ConditionalValue<number>"
+        }
+      ],
+      "jsx": "AspectRatio",
+      "functionExamples": [
+        "aspectRatio({ ratio: 4 })"
+      ],
+      "jsxExamples": [
+        "<AspectRatio ratio={4} />"
+      ]
+    },
+    {
+      "name": "grid",
+      "properties": [
+        {
+          "name": "gap",
+          "type": "SystemProperties[\"gap\"]"
+        },
+        {
+          "name": "columnGap",
+          "type": "SystemProperties[\"gap\"]"
+        },
+        {
+          "name": "rowGap",
+          "type": "SystemProperties[\"gap\"]"
+        },
+        {
+          "name": "columns",
+          "type": "ConditionalValue<number>"
+        },
+        {
+          "name": "minChildWidth",
+          "type": "ConditionalValue<Tokens[\"sizes\"] | Properties[\"width\"]>"
+        }
+      ],
+      "jsx": "Grid",
+      "functionExamples": [
+        "grid({ gap: <value> })",
+        "grid({ columnGap: <value> })",
+        "grid({ rowGap: <value> })",
+        "grid({ columns: 4 })",
+        "grid({ minChildWidth: \"md\" })"
+      ],
+      "jsxExamples": [
+        "<Grid gap={<value>} />",
+        "<Grid columnGap={<value>} />",
+        "<Grid rowGap={<value>} />",
+        "<Grid columns={4} />",
+        "<Grid minChildWidth={\"md\"} />"
+      ]
+    },
+    {
+      "name": "gridItem",
+      "properties": [
+        {
+          "name": "colSpan",
+          "type": "ConditionalValue<number>"
+        },
+        {
+          "name": "rowSpan",
+          "type": "ConditionalValue<number>"
+        },
+        {
+          "name": "colStart",
+          "type": "ConditionalValue<number>"
+        },
+        {
+          "name": "rowStart",
+          "type": "ConditionalValue<number>"
+        },
+        {
+          "name": "colEnd",
+          "type": "ConditionalValue<number>"
+        },
+        {
+          "name": "rowEnd",
+          "type": "ConditionalValue<number>"
+        }
+      ],
+      "jsx": "GridItem",
+      "functionExamples": [
+        "gridItem({ colSpan: 4 })",
+        "gridItem({ rowSpan: 4 })",
+        "gridItem({ colStart: 4 })",
+        "gridItem({ rowStart: 4 })",
+        "gridItem({ colEnd: 4 })",
+        "gridItem({ rowEnd: 4 })"
+      ],
+      "jsxExamples": [
+        "<GridItem colSpan={4} />",
+        "<GridItem rowSpan={4} />",
+        "<GridItem colStart={4} />",
+        "<GridItem rowStart={4} />",
+        "<GridItem colEnd={4} />",
+        "<GridItem rowEnd={4} />"
+      ]
+    },
+    {
+      "name": "wrap",
+      "properties": [
+        {
+          "name": "gap",
+          "type": "SystemProperties[\"gap\"]"
+        },
+        {
+          "name": "rowGap",
+          "type": "SystemProperties[\"gap\"]"
+        },
+        {
+          "name": "columnGap",
+          "type": "SystemProperties[\"gap\"]"
+        },
+        {
+          "name": "align",
+          "type": "SystemProperties[\"alignItems\"]"
+        },
+        {
+          "name": "justify",
+          "type": "SystemProperties[\"justifyContent\"]"
+        }
+      ],
+      "jsx": "Wrap",
+      "functionExamples": [
+        "wrap({ gap: <value> })",
+        "wrap({ rowGap: <value> })",
+        "wrap({ columnGap: <value> })",
+        "wrap({ align: <value> })",
+        "wrap({ justify: <value> })"
+      ],
+      "jsxExamples": [
+        "<Wrap gap={<value>} />",
+        "<Wrap rowGap={<value>} />",
+        "<Wrap columnGap={<value>} />",
+        "<Wrap align={<value>} />",
+        "<Wrap justify={<value>} />"
+      ]
+    },
+    {
+      "name": "container",
+      "properties": [],
+      "jsx": "Container",
+      "functionExamples": [
+        "container()"
+      ],
+      "jsxExamples": [
+        "<Container />"
+      ]
+    },
+    {
+      "name": "float",
+      "properties": [
+        {
+          "name": "offsetX",
+          "type": "ConditionalValue<Tokens[\"spacing\"] | Properties[\"left\"]>"
+        },
+        {
+          "name": "offsetY",
+          "type": "ConditionalValue<Tokens[\"spacing\"] | Properties[\"top\"]>"
+        },
+        {
+          "name": "offset",
+          "type": "ConditionalValue<Tokens[\"spacing\"] | Properties[\"top\"]>"
+        },
+        {
+          "name": "placement",
+          "type": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\" | \"bottom-center\" | \"top-center\" | \"middle-center\" | \"middle-end\" | \"middle-start\""
+        }
+      ],
+      "jsx": "Float",
+      "functionExamples": [
+        "float({ offsetX: \"md\" })",
+        "float({ offsetY: \"md\" })",
+        "float({ offset: \"md\" })",
+        "float({ placement: \"bottom-end\" })"
+      ],
+      "jsxExamples": [
+        "<Float offsetX={\"md\"} />",
+        "<Float offsetY={\"md\"} />",
+        "<Float offset={\"md\"} />",
+        "<Float placement={\"bottom-end\"} />"
+      ]
+    },
+    {
+      "name": "bleed",
+      "properties": [
+        {
+          "name": "inline",
+          "type": "SystemProperties[\"marginInline\"]",
+          "defaultValue": "0"
+        },
+        {
+          "name": "block",
+          "type": "SystemProperties[\"marginBlock\"]",
+          "defaultValue": "0"
+        }
+      ],
+      "jsx": "Bleed",
+      "functionExamples": [
+        "bleed({ inline: <value> })",
+        "bleed({ block: <value> })"
+      ],
+      "jsxExamples": [
+        "<Bleed inline={<value>} />",
+        "<Bleed block={<value>} />"
+      ]
+    },
+    {
+      "name": "visuallyHidden",
+      "properties": [],
+      "jsx": "VisuallyHidden",
+      "functionExamples": [
+        "visuallyHidden()"
+      ],
+      "jsxExamples": [
+        "<VisuallyHidden />"
+      ]
+    },
+    {
+      "name": "cq",
+      "properties": [
+        {
+          "name": "name",
+          "type": "ConditionalValue<Tokens[\"containerNames\"] | Properties[\"containerName\"]>"
+        },
+        {
+          "name": "type",
+          "type": "SystemProperties[\"containerType\"]",
+          "defaultValue": "inline-size"
+        }
+      ],
+      "jsx": "Cq",
+      "functionExamples": [
+        "cq({ name: \"md\" })",
+        "cq({ type: <value> })"
+      ],
+      "jsxExamples": [
+        "<Cq name={\"md\"} />",
+        "<Cq type={<value>} />"
+      ]
+    }
+  ]
+}