@kubex/zinc 0.0.2 → 1.0.0

package/docs/pages/components/split-button.md

@@ -0,0 +1,32 @@
+---
+meta:
+  title: Split Button
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-split-button href="#something" color="primary" caption="Hello World">
+  <zn-menu slot="menu">
+    <zn-menu-item href="#somewhere">Somewhere</zn-menu-item>
+  </zn-menu>
+</zn-split-button>
+```
+
+## Examples
+
+### As a form Submit with different values
+
+```html:preview
+
+<zn-split-button type="submit" name="button" value="send-on-close" caption="Send and Close">
+  <zn-menu slot="menu">
+    <zn-menu-item value="send">Send</zn-menu-item>
+  </zn-menu>
+</zn-split-button>
+```
+
+### Second Example
+
+TODO

package/docs/pages/components/split-pane.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Split Pane
+  description:
+layout: component
+---
+
+```html:preview
+<zn-split-pane></zn-split-pane>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/stat.md

@@ -0,0 +1,24 @@
+---
+meta:
+  title: Stats Tile
+  description:
+layout: component
+---
+
+Simple Example.
+
+```html:preview
+<zn-stat caption="Something" description="Another Thing" amount="100" previous="10" currency="$" show-delta show-chart></zn-stat>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/status-indicator.md

@@ -0,0 +1,13 @@
+---
+meta:
+  title: Status Indicator
+  description:
+layout: component
+---
+
+```html:preview
+<zn-status-indicator type="info"></zn-status-indicator>
+<zn-status-indicator type="success"></zn-status-indicator>
+<zn-status-indicator type="warning"></zn-status-indicator>
+<zn-status-indicator type="error"></zn-status-indicator>
+```

package/docs/pages/components/stepper.md

@@ -0,0 +1,20 @@
+---
+meta:
+  title: Stepper
+  description:
+layout: component
+---
+
+```html:preview
+<zn-stepper caption="Caption here" label="Label here" steps="3" value="2" show-progress></zn-stepper>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/docs/pages/components/style.md

@@ -0,0 +1,106 @@
+---
+meta:
+  title: Style
+  description:
+layout: component
+---
+
+## Examples
+
+### Colours
+
+```html:preview
+<zn-style>
+  <p>Default Style</p>
+</zn-style>
+<zn-style color="blue">
+  <p>Blue Color</p>
+</zn-style>
+<zn-style color="indigo">
+  <p>Indigo Color</p>
+</zn-style>
+<zn-style info>
+  <p>Info Style</p>
+</zn-style>
+<zn-style error>
+  <p>Error Style</p>
+</zn-style>
+<zn-style success>
+  <p>Success Style</p>
+</zn-style>
+<zn-style warning>
+  <p>Warning Style</p>
+</zn-style>
+<zn-style primary>
+  <p>Primary Style</p>
+</zn-style>
+<zn-style accent>
+  <p>Accent Style</p>
+</zn-style>
+```
+
+### Padding
+
+```html:preview
+<zn-style border pad=l>Left Padding</zn-style>
+<zn-style border pad=r>Right Padding</zn-style>
+<zn-style border pad=t>Top Padding</zn-style>
+<zn-style border pad=b>Bottom Padding</zn-style>
+<zn-style border pad=x>X Padding</zn-style>
+<zn-style border pad=y>Y Padding</zn-style>
+<zn-style border pad=tl>Top Left Padding</zn-style>
+<zn-style border pad=trbl>Top Right Bottom Left Padding</zn-style>
+<zn-style border pad=bx>X Bottom Padding</zn-style>
+<zn-style border pad=xy>XY Padding</zn-style>
+<zn-style border pad=a>ALL Padding</zn-style>
+```
+
+### Margin
+
+```html:preview
+<style>
+.style-bg{
+  background-color: #f0f0f0;
+  margin: 5px;
+  display: inline-block;
+}
+</style>
+<div class="style-bg"><zn-style border margin=l>Left Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=r>Right Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=t>Top Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=b>Bottom Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=x>X Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=y>Y Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=tl>Top Left Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=trbl>Top Right Bottom Left Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=bx>X Bottom Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=xy>XY Margin</zn-style></div>
+<div class="style-bg"><zn-style border margin=a>ALL Margin</zn-style></div>
+```
+
+### Auto Margin
+
+```html:preview
+<style>
+.style-abg{
+  background-color: #f0f0f0;
+  margin: 5px;
+  width: 400px;
+  height: 200px;
+  display: flex;
+}
+</style>
+<div class="style-abg"><zn-style border a-margin=a>Auto Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=l>Left Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=r>Right Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=t>Top Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=b>Bottom Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=x>X Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=y>Y Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=tl>Top Left Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=trbl>Top Right Bottom Left Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=bx>X Bottom Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=xy>XY Margin</zn-style></div>
+<div class="style-abg"><zn-style border a-margin=a>ALL Margin</zn-style></div>
+```
+

package/docs/pages/components/table.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Table
+  description:
+layout: component
+---
+
+```html:preview
+<zn-table></zn-table>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/tabs.md

@@ -0,0 +1,57 @@
+---
+meta:
+  title: Tabs
+  description:
+layout: component
+---
+
+```html:preview
+
+<zn-tabs caption="Example Panel" flush>
+  <zn-navbar slot="top">
+    <li tab>Customer</li>
+    <li tab="something-else">Something Else</li>
+  </zn-navbar>
+
+  <zn-sp id="" no-gap divide>
+    <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
+    <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
+  </zn-sp>
+
+  <zn-sp id="something-else" no-gap divide>
+    <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
+    <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
+  </zn-sp>
+</zn-tabs>
+```
+
+## Examples
+
+### Without a Caption
+
+
+```html:preview
+
+<zn-tabs flush>
+  <zn-navbar slot="top">
+    <li tab>Customer</li>
+    <li tab="something-else">Something Else</li>
+  </zn-navbar>
+
+  <zn-sp id="" no-gap divide>
+    <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
+    <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
+  </zn-sp>
+
+  <zn-sp id="something-else" no-gap divide>
+    <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
+    <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
+  </zn-sp>
+</zn-tabs>
+```
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/textarea.md

@@ -0,0 +1,120 @@
+---
+meta:
+  title: Textarea
+  description: Textareas collect data from the user and allow multiple lines of text.
+layout: component
+unusedProperties: |
+  - Sizes `small`, `large`
+---
+
+## Examples
+
+### Basic Textarea with Label
+
+Use the `label` attribute to give the textarea an accessible label.
+
+```html:preview
+<zn-textarea label="Month in review"></zn-textarea>
+```
+
+:::tip
+This component works with standard `<form>` elements. Please refer to the section
+on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
+:::
+
+### Help Text
+
+Add descriptive help text to a textarea with the `help-text` attribute. For help text that contains HTML, use the
+`help-text` slot instead.
+
+```html:preview
+<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies."> </zn-textarea>
+<br />
+<zn-textarea label="Month in review">
+  <div slot="help-text">Tell us the highlights. Be sure to include details about any financial performance <strong>anomalies</strong>.</div>
+</zn-textarea>
+```
+
+### Label with Tooltip
+
+Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label.
+
+:::tip
+**Usage:** Use the **label tooltip** to provide helpful but non-essential instructions or examples to guide people when
+filling in the textarea. Use **help text** to communicate instructions or requirements for filling in the textarea
+without errors.
+:::
+
+```html:preview
+<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies." label-tooltip="There is no required format for this commentary. However, we suggest covering the following topics: 1) Revenue, 2) COGS, 3) Gross profit, and 4) Operating expenses."></zn-textarea>
+```
+
+### Label with Context Note
+
+Use the `context-note` attribute to add text that provides additional context or reference. For text that contains HTML,
+use the `context-note` slot. **Note:** On small screens the context note will wrap below the label if there isn't enough
+room next to the label.
+
+:::tip
+**Usage:** Use a **context note** to provide secondary contextual data, especially dynamic data, that would help people
+when filling in the textarea. Use **help text** to communicate instructions or requirements for filling in the textarea
+without errors.
+:::
+
+```html:preview
+<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies." context-note="Data synced 1 hr ago"></zn-textarea>
+```
+
+### Rows
+
+Use the `rows` attribute to change the number of text rows that the textarea shows before the text starts to overflow
+and the textarea scrolls.
+
+```html:preview
+<zn-textarea label="Textarea with 2 rows" rows="2"></zn-textarea>
+<br />
+<zn-textarea label="Textarea with 4 rows (Default)" rows="4"></zn-textarea>
+<br />
+<zn-textarea label="Textarea with 6 rows" rows="6"></zn-textarea>
+```
+
+### Placeholders
+
+Use the `placeholder` attribute to add a placeholder.
+
+```html:preview
+<zn-textarea placeholder="Type something"></zn-textarea>
+```
+
+### Sizes
+
+Use the `size` attribute to change a textarea's size.
+
+```html:preview
+<zn-textarea placeholder="Small" size="small"></zn-textarea>
+<br />
+<zn-textarea placeholder="Medium" size="medium"></zn-textarea>
+<br />
+<zn-textarea placeholder="Large" size="large"></zn-textarea>
+```
+
+### Prevent Resizing
+
+By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.
+
+```html:preview
+<zn-textarea label="Textarea with no resizing" resize="none"></zn-textarea>
+```
+
+### Expand with Content
+
+Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.
+
+:::warning
+**Note:** If using `ts_form_for`, note that the default `resize` option is already set to `auto`. To match the
+`zn-textarea` default of `vertical`, set `resize: "vertical"` in `input_html` (see code example below).
+:::
+
+```html:preview
+<zn-textarea label="Expanding textarea" resize="auto" value="Someone’s sitting in the shade today because someone planted a tree a long time ago. ... Keep typing to see the textarea expand..." rows="2"></zn-textarea>
+```

package/docs/pages/components/tile-property.md

@@ -0,0 +1,29 @@
+---
+meta:
+  title: List Tile Property
+  description:
+layout: component
+---
+
+```html:preview
+<zn-tile-property caption="Business Relations">
+  Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds 
+</zn-tile-property>
+```
+
+
+## Examples
+
+### With Icons
+
+
+```html:preview
+<div class="flex">
+  <zn-tile-property caption="Revision" icon="commit">
+    b61fa1
+  </zn-tile-property>
+  <zn-tile-property caption="Build Number" icon="handyman">
+    122332
+  </zn-tile-property>
+</div>
+```

package/docs/pages/components/tile.md

@@ -0,0 +1,51 @@
+---
+meta:
+  title: List Tile
+  description:
+layout: component
+---
+
+```html:preview
+<zn-tile caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+  <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+  <zn-tile-property slot="properties" caption="Co-Founder / CEO Relations">Last seen 2h ago</zn-tile-property>
+</zn-tile>
+
+<zn-tile caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+  <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+  <div slot="actions"><zn-button href="#">Action</zn-button></div>
+</zn-tile>
+```
+
+## Examples
+
+### List
+
+```html:preview
+<zn-sp divide no-gap>
+  <zn-tile caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+    <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+    <zn-tile-property slot="properties" caption="Co-Founder / CEO">
+      Last seen 2h ago
+    </zn-tile-property>
+  </zn-tile>
+  <zn-tile caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+    <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+    <zn-tile-property slot="properties" caption="Co-Founder / CEO">
+      Last seen 2h ago
+    </zn-tile-property>
+  </zn-tile>
+  <zn-tile caption="Leslie Alexander" description="Leslie.alexander@example.com" href="https://google.com">
+    <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
+    <zn-tile-property slot="properties" caption="Co-Founder / CEO">
+      Last seen 2h ago
+    </zn-tile-property>
+  </zn-tile>
+</zn-sp>
+```
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/timer.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Timer
+  description:
+layout: component
+---
+
+```html:preview
+<zn-timer timestamp="1743070352"></zn-timer>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+

package/docs/pages/components/toggle.md

@@ -0,0 +1,22 @@
+---
+meta:
+  title: Toggle
+  description:
+layout: component
+---
+
+```html:preview
+<zn-toggle on-text="On" off-text="off" label="Renew?"></zn-toggle>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+