@commercetools/nimbus 0.0.2 → 0.0.3

package/src/docs/layout.mdx

@@ -1,301 +0,0 @@
----
-id: Style Props-Layout
-title: Layout
-description:
-  JSX style props to control the width, height, and spacing of elements
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Layout
-tags:
-  - document
----
-
-# Layout
-
-JSX style props to control the width, height, and spacing of elements
-
-## Aspect Ratio
-
-Use the `aspectRatio` prop to set the desired aspect ratio of an element.
-
-```jsx
-// raw value
-<Box aspectRatio="1.2" />
-
-// token
-<Box aspectRatio="square" />
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `aspectRatio` | `aspect-ratio` | `aspectRatios` |
-
-## Break
-
-### Break After
-
-Use the `breakAfter` prop to set how page, column, or region breaks should
-behave after an element.
-
-```jsx
-<Box columns="2">
-  <Box>Item 1</Box>
-  <Box breakAfter="page">Item 2</Box>
-</Box>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `breakAfter` | `break-after` | -              |
-
-### Break Before
-
-Use the `breakBefore` prop to set how page, column, or region breaks should
-behave before an element.
-
-```jsx
-<Box columns="2">
-  <Box>Item 1</Box>
-  <Box breakBefore="page">Item 2</Box>
-</Box>
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `breakBefore` | `break-before` | -              |
-
-### Break Inside
-
-Use the `breakInside` prop to set how page, column, or region breaks should
-behave inside an element.
-
-```jsx
-<Box columns="2">
-  <Box>Item 1</Box>
-  <Box breakInside="avoid">Item 2</Box>
-</Box>
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `breakInside` | `break-inside` | -              |
-
-## Box Decoration Break
-
-Use the `boxDecorationBreak` prop to set how box decorations should behave when
-the box breaks across multiple lines, columns, or pages.
-
-```jsx /boxDecorationBreak/
-<Box bgImage="linear-gradient(red, blue)" boxDecorationBreak="clone">
-  Chakra is <br /> great!
-</Box>
-```
-
-| Prop                 | CSS Property           | Token Category |
-| -------------------- | ---------------------- | -------------- |
-| `boxDecorationBreak` | `box-decoration-break` | -              |
-
-## Box Sizing
-
-Use the `boxSizing` prop to set the box sizing of an element.
-
-```jsx /boxSizing/
-<Box boxSizing="border-box" padding="4" width="8" height="8" />
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `boxSizing` | `box-sizing` | -              |
-
-## Columns
-
-Use the `columns` prop to set the number of columns for an element.
-
-```jsx
-<Box columns={2} />
-```
-
-| Prop      | CSS Property | Token Category |
-| --------- | ------------ | -------------- |
-| `columns` | `columns`    | -              |
-
-## Float
-
-Use the `float` prop to set the float of an element.
-
-```jsx /float/
-<Box>
-  <Text>As much mud in the streets...</Text>
-  <Box float="left">Float me</Box>
-</Box>
-```
-
-| Prop    | CSS Property | Token Category |
-| ------- | ------------ | -------------- |
-| `float` | `float`      | -              |
-
-## Clear
-
-Use the `clear` prop to set whether an element must be moved below (cleared)
-floating elements that precede it.
-
-```jsx
-<Box>
-  <Box float="left">Left</Box>
-  <Box float="right">Right</Box>
-  <Box clear="none">
-    As much mud in the streets as if the waters had but newly retired from the
-    face of the earth, and it would not be wonderful to meet a Megalosaurus,
-    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
-  </Box>
-</Box>
-```
-
-| Prop    | CSS Property | Token Category |
-| ------- | ------------ | -------------- |
-| `clear` | `clear`      | -              |
-
-## Isolation
-
-Use the `isolation` prop to set whether an element should explicitly create a
-new stacking context.
-
-```jsx
-<Box isolation="isolate">
-  <Box bg="red.500" width="10" height="10" />
-</Box>
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `isolation` | `isolation`  | -              |
-
-## Object Fit
-
-Use the `objectFit` prop to set how an image or video should be resized to fit
-its container.
-
-```jsx
-<Image src="..." objectFit="cover" width="10" height="10" />
-```
-
-| Prop        | CSS Property | Token Category |
-| ----------- | ------------ | -------------- |
-| `objectFit` | `object-fit` | -              |
-
-## Object Position
-
-Use the `objectPosition` prop to set how an element should be positioned within
-its container.
-
-```jsx
-<Image src="..." objectPosition="center" width="10" height="10" />
-```
-
-| Prop             | CSS Property      | Token Category |
-| ---------------- | ----------------- | -------------- |
-| `objectPosition` | `object-position` | -              |
-
-## Overflow
-
-Use the `overflow` prop to control how content that exceeds an element's
-dimensions is handled. This property determines whether to clip the content, add
-scrollbars, or display the overflow content.
-
-```jsx
-<Box overflow="hidden" maxHeight="120px" />
-<Box overflow="auto" maxHeight="120px" />
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `overflow` | `overflow`   | -              |
-
-## Overscroll Behavior
-
-Use the `overscrollBehavior` prop to control what the browser does when reaching
-the boundary of a scrolling area.
-
-```jsx
-<Box maxHeight="120px" overscrollBehavior="contain" />
-```
-
-| Prop                 | CSS Property          | Token Category |
-| -------------------- | --------------------- | -------------- |
-| `overscrollBehavior` | `overscroll-behavior` | -              |
-
-## Position
-
-Use the `position` utilities to set the position of an element.
-
-```jsx
-<Box position="absolute" />
-<Box pos="absolute" /> // shorthand
-```
-
-| Prop       | CSS Property | Token Category |
-| ---------- | ------------ | -------------- |
-| `position` | `position`   | -              |
-
-## Top / Right / Bottom / Left
-
-Use the `top`, `right`, `bottom` and `left` utilities to set the position of an
-element.
-
-```jsx
-<Box position="absolute" top="0" left="0" />
-
-// using spacing tokens
-<Box position="absolute" top="4" />
-
-// using hardcoded values
-<Box position="absolute" top="100px" />
-```
-
-Use the logical equivalents of `inset{Start|End}` utilities to set the position
-of an element based on the writing mode.
-
-```jsx
-<Box position="absolute" insetStart="0" />
-```
-
-| Prop                                      | CSS Property         | Token Category |
-| ----------------------------------------- | -------------------- | -------------- |
-| `top`                                     | `top`                | `spacing`      |
-| `right`                                   | `right`              | `spacing`      |
-| `bottom`                                  | `bottom`             | `spacing`      |
-| `left`                                    | `left`               | `spacing`      |
-| `start`, `insetStart`, `insetInlineStart` | `inset-inline-start` | `spacing`      |
-| `end` , `insetEnd`, `insetInlineEnd`      | `inset-inline-end`   | `spacing`      |
-| `insetX`, `insetInline`                   | `inset-inline`       | `spacing`      |
-| `insetY`, `insetBlock`                    | `inset-inline`       | `spacing`      |
-
-## Visibility
-
-Use the `visibility` prop to control the visibility of an element.
-
-```jsx
-<Box visibility="hidden" />
-```
-
-| Prop         | CSS Property | Token Category |
-| ------------ | ------------ | -------------- |
-| `visibility` | `visibility` | -              |
-
-## Z-Index
-
-Use the `zIndex` prop to set the z-index of an element.
-
-```jsx
-// using hardcoded values
-<Box zIndex="1" />
-
-// using token
-<Box zIndex="overlay" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `zIndex` | `z-index`    | `zIndices`     |

package/src/docs/list.mdx

@@ -1,82 +0,0 @@
----
-id: Style Props-List
-title: List
-description: JSX style props for customizing list styles.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - List
-tags:
-  - document
----
-
-# List
-
-JSX style props for customizing list styles.
-
-## List Style Type
-
-Use the `listStyleType` property to set the type of the list marker.
-
-```jsx
-<Box as="ul" listStyleType="circle">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</Box>
-```
-
-| Prop            | CSS Property      | Token Category |
-| --------------- | ----------------- | -------------- |
-| `listStyleType` | `list-style-type` | -              |
-
-## List Style Position
-
-Use the `listStylePosition` property to set the position of the list marker.
-
-```jsx
-<Box as="ul" listStylePosition="inside">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</Box>
-```
-
-| Prop                | CSS Property          | Token Category |
-| ------------------- | --------------------- | -------------- |
-| `listStylePosition` | `list-style-position` | -              |
-
-## List Style Image
-
-Use the `listStyleImage` property to set the image of the list marker.
-
-```jsx
-<Box as="ul" listStyleImage="url(...)">
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</Box>
-```
-
-| Prop             | CSS Property       | Token Category |
-| ---------------- | ------------------ | -------------- |
-| `listStyleImage` | `list-style-image` | `assets`       |
-
-## Markers
-
-Use the `_marker` property to set the marker of a list item.
-
-```jsx /_marker/
-<ul>
-  <Box as="li" _marker={{ color: "red" }}>
-    Item 1
-  </Box>
-  <Box as="li" _marker={{ color: "blue" }}>
-    Item 2
-  </Box>
-  <Box as="li" _marker={{ color: "green" }}>
-    Item 3
-  </Box>
-</ul>
-```

package/src/docs/markdown.mdx

@@ -1,234 +0,0 @@
----
-id: Markdown
-title: Markdown
-description: a page with many mdx & markdown features
-documentState: InitialDraft
-order: 999
-menu:
-  - Playground
-  - Markdown
-tags:
-  - playground
-  - markdown
-  - mdx
----
-
-# Markdown / MDX Stress Test
-
-This is a page to stress test markdown & mdx syntax usages to see if everything
-renders without issues.
-
-## Basic Markdown
-
-BAsic markdown is supported.
-
-### Headings
-
-See the bold Text above? This is a heading. Not gonna demonstrate them, they are
-used everwhere on a page, but this is what you'd use in markdown or mdx files to
-write one:
-
-```markdown
-# H1 Most important
-
-## H2 Heading
-
-### H3 Heading
-
-#### H4 Heading
-
-##### H5 Heading
-
-###### H6 Least important
-```
-
-### Emphasizing Text
-
-#### Italic Text
-
-_Italic text_ is done with underscores `_String to highlight_`
-
-#### Bold Text
-
-**Bold text** is done with double asterisks `**String to highlight**`
-
-#### Bold + Italic Text
-
-**_Bold + Italic text_** is done with tripple asterisks
-`***String to highlight***`
-
-### Code
-
-Code can be displayed inline or in a code-block, use single backticks for
-inline-code or tripple backticks for code blocks.
-
-Look at this: `export const App = () => <div>App</div>` this was inline code.
-
-And here is a code-block:
-
-```jsx
-export const App = () => {
-  return (
-    <div>
-      <p>App</p>
-    </div>
-  );
-};
-```
-
-### Blockquote
-
-This is how a regular blockquote looks. There are more variants of blockquotes
-but they are belonging to the Github flavored Markdown though.
-
-> Sugar plum shortbread dragée chocolate bar lollipop. Bonbon soufflé cupcake
-> cotton candy bear claw muffin tiramisu
-
-### Links
-
-Link look pretty basic [tiramisu croissant gummies](http://www.asdasdsd.com)
-
-### Images
-
-Images work as well.
-
-```markdown
-![alt text](https://picsum.photos/seed/2/640/480 "Image title")
-```
-
-![alt text](https://picsum.photos/seed/2/640/480 "Random office pic")
-
-### Lists
-
-#### Ordered List
-
-Simple list:
-
-1. First item
-2. Second item
-3. Third item
-4. Fourth item
-
----
-
-1. First item
-2. Second item
-3. Third item
-   1. Indented item
-   2. Indented item
-4. Fourth item
-
----
-
-#### Unordered Lists
-
-Simple list:
-
-- First item
-- Second item
-- Third item
-- Fourth item
-
-List with a sublist:
-
-- First item
-- Second item
-- Third item
-  - Indented item
-  - Indented item
-- Fourth item
-
-## Github flavored Markdown
-
-### Tables
-
-| **Product Name**                  | **Category**     | **Price** | **Discount** | **Stock** | **Ratings**     | **Brand**  | **Color**   | **Shipping**      | **In Stock** |
-| --------------------------------- | ---------------- | --------- | ------------ | --------- | --------------- | ---------- | ----------- | ----------------- | ------------ |
-| **Wireless Bluetooth Headphones** | Electronics      | $79.99    | 10% off      | 124       | ⭐⭐⭐⭐☆ (4.5) | SoundWave  | Black       | Free Shipping     | Yes          |
-| **Leather Sofa Set**              | Furniture        | $999.00   | 15% off      | 15        | ⭐⭐⭐⭐⭐ (5)  | HomeLux    | Brown       | Free Shipping     | No           |
-| **Smartphone 6 Pro**              | Electronics      | $699.00   | 5% off       | 57        | ⭐⭐⭐⭐⭐ (5)  | TechSmart  | Blue        | Free Shipping     | Yes          |
-| **Gaming Laptop 15"**             | Electronics      | $1,499.00 | 20% off      | 32        | ⭐⭐⭐⭐☆ (4.2) | GamerX     | Gray        | Free Shipping     | Yes          |
-| **Organic Green Tea**             | Food & Beverages | $15.99    | No Discount  | 302       | ⭐⭐⭐⭐☆ (4.4) | PureLeaf   | Green       | Standard Shipping | Yes          |
-| **Men’s Running Shoes**           | Apparel          | $79.99    | 30% off      | 85        | ⭐⭐⭐⭐☆ (4.6) | FitStep    | Red         | Free Shipping     | Yes          |
-| **Stainless Steel Watch**         | Accessories      | $249.00   | 10% off      | 67        | ⭐⭐⭐⭐⭐ (5)  | TimeMaster | Silver      | Free Shipping     | No           |
-| **Coffee Maker 12 Cup**           | Kitchen          | $89.99    | No Discount  | 121       | ⭐⭐⭐⭐⭐ (5)  | BrewMaster | Black       | Standard Shipping | Yes          |
-| **Children’s Toy Set**            | Toys & Games     | $24.99    | 15% off      | 205       | ⭐⭐⭐⭐☆ (4.3) | FunTime    | Multi-color | Free Shipping     | Yes          |
-
-### Footnotes
-
-- Super cheap, buy now [^1]
-
-[^1]: It's actually expensive.
-
-### Strikethrough
-
-~one~ or ~~two~~ tildes.
-
-### Tasklist
-
-- [ ] to do
-- [x] done
-
-### Highlighted blockquotes
-
-> [!NOTE]  
-> Highlights information that users should take into account, even when
-> skimming.
-
-> [!IMPORTANT]  
-> Crucial information necessary for users to succeed.
-
-> [!WARNING]  
-> Critical content demanding immediate user attention due to potential risks.
-
-> [!CAUTION]  
-> Negative potential consequences of an action.
-
-> [!TIP]  
-> Optional information to help a user be more successful. Maybe with more text
-
-## Blockquotes
-
-### Simple case
-
-> Sugar plum shortbread dragée chocolate bar lollipop. Bonbon soufflé cupcake
-> cotton candy bear claw muffin tiramisu chocolate cake icing. Cake marshmallow
-> tart pastry caramels tootsie roll. Gummi bears liquorice tiramisu toffee tart.
-
-### With cite
-
-> Sugar plum shortbread dragée chocolate bar lollipop. Bonbon soufflé cupcake
-> cotton candy bear claw muffin tiramisu chocolate cake icing. Cake marshmallow
-> tart pastry caramels tootsie roll. Gummi bears liquorice tiramisu toffee tart.
->
-> - Dorothy from wizard of oz
-
-### Two paragraphs in a blockquote
-
-> Dorothy followed her through many of the beautiful rooms in her castle.
->
-> The Witch bade her clean the pots and kettles and sweep the floor and keep the
-> fire fed with wood.
-
-### Nested blockquote
-
-> Dorothy followed her through many of the beautiful rooms in her castle.
->
-> > The Witch bade her clean the pots and kettles and sweep the floor and keep
-> > the fire fed with wood.
-
-### Blockquotes with Other Elements
-
-> #### The quarterly results look great!
->
-> - Revenue was off the chart.
-> - Profits were higher than ever.
->
-> ---
->
-> Kinda fancy looking, right?
-
-### Keyboard Combinations
-
-To enable fruitcake mode, press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> +
-<kbd>Space</kbd>.

package/src/docs/media.mdx

@@ -1,22 +0,0 @@
----
-id: Media
-title: Media
-description: Components for displaying media content.
-documentState: InitialDraft
-order: 3
-menu:
-  - Components
-  - Media
-tags:
-  - media
-icon: Image
----
-
-# Media
-
-Components for displaying media content.
-
-- **Images**: e.g., Avatar, Image, Carousel.
-- **Videos**: e.g., VideoPlayer, VideoThumbnail.
-- **Icons**: e.g., Icon, IconButton.
-- **Audio**: e.g., AudioPlayer.

package/src/docs/naivgation.mdx

@@ -1,22 +0,0 @@
----
-id: Components-Naivgation
-title: Navigation
-description: Components for moving through an application.
-documentState: InitialDraft
-order: 2
-menu:
-  - Components
-  - Navigation
-tags:
-  - document
-icon: Explore
----
-
-# Navigation
-
-Components for moving through an application.
-
-- **Menus**: e.g., Dropdown, ContextMenu.
-- **Navigation Bars**: e.g., Navbar, Sidebar, Breadcrumbs.
-- **Tabs & Accordions**: e.g., TabPanel, Accordion.
-- **Pagination**: e.g., Paginator, InfiniteScroller.

package/src/docs/playground.mdx

@@ -1,16 +0,0 @@
----
-id: Playground
-title: Playground
-description: collection of pages with an explorative character
-documentState: InitialDraft
-order: 999
-menu:
-  - Playground
-tags:
-  - playground
-  - exploring
----
-
-# Playground
-
-This is the place to try out things.

package/src/docs/rfcs-component-structure-rfcs.mdx

@@ -1,17 +0,0 @@
----
-id: Component Structure-RFCs
-title: RFCs
-description: Requests for feedback
-documentState: InitialDraft
-documentAudiences:
-  - Maintainer
-order: 1.5
-menu:
-  - RFCs
-tags:
-  - document
----
-
-# RFCs
-
-Requests for comments. Just create a document and work on it.