@zonos/elements 1.0.16

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -0,0 +1,176 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStore } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isColorVariable } from "../../utils/isColorVariable";
+export class ZonosShippingRichRadio {
+  constructor() {
+    this.handleRichRadioSelect = (item) => {
+      var _a;
+      this.selectedItem = item;
+      (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
+    };
+    this.getRadioItemStyleVariables = () => {
+      const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;
+      const secondaryColor = isColorVariable(usedColor)
+        ? `var(--amino-${usedColor})`
+        : usedColor;
+      return {
+        '--border-radius': getBorderRadius(this.borderStyle),
+        '--selected-border-color': secondaryColor || 'unset',
+      };
+    };
+    this.items = undefined;
+    this.borderColor = undefined;
+    this.borderStyle = undefined;
+    this.theme = undefined;
+    this.selectedItem = null;
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: this.getRadioItemStyleVariables() }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+      var _a;
+      const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
+      return (h("div", { "aria-hidden": "true", class: classes([
+          'zonos--shipping-rich-radio-item',
+          selected && 'selected',
+        ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+    })));
+  }
+  static get is() { return "zonos-shipping-rich-radio"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-shipping-rich-radio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-shipping-rich-radio.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ShippingRichRadioItem[]",
+          "resolved": "ShippingRichRadioItem[]",
+          "references": {
+            "ShippingRichRadioItem": {
+              "location": "local",
+              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
+              "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of items to display"
+        }
+      },
+      "borderColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color | (string & { _placeholder?: never })",
+          "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::Color"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Override border color of the radio item"
+        },
+        "attribute": "border-color",
+        "reflect": false
+      },
+      "borderStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiStyle",
+          "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+          "references": {
+            "ElementsUiStyle": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::ElementsUiStyle"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Override border color of the radio item"
+        },
+        "attribute": "border-style",
+        "reflect": false
+      },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiTheme",
+          "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+          "references": {
+            "ElementsUiTheme": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::ElementsUiTheme"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the radio item"
+        },
+        "attribute": "theme",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedItem": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "radioSelected",
+        "name": "radioSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when an item is selected"
+        },
+        "complexType": {
+          "original": "ShippingRichRadioItem",
+          "resolved": "{ caption?: string | undefined; label: string; price: string; sublabel?: string | undefined; value: string | number; }",
+          "references": {
+            "ShippingRichRadioItem": {
+              "location": "local",
+              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
+              "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
+            }
+          }
+        }
+      }];
+  }
+}
+//# sourceMappingURL=zonos-shipping-rich-radio.js.map

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-shipping-rich-radio.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,KAAK,EACL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAgBvE,MAAM,OAAO,sBAAsB;;IA+BzB,0BAAqB,GAAG,CAAC,IAA2B,EAAE,EAAE;;MAC9D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;MACzB,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC,CAAC;IAEM,+BAA0B,GAAG,GAAG,EAAE;MACxC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,IAAI,UAAU,CAAC,UAAU,CAAC,cAAc,CAAC;MAC3E,MAAM,cAAc,GAAG,eAAe,CAAC,SAAS,CAAC;QAC/C,CAAC,CAAC,eAAe,SAAS,GAAG;QAC7B,CAAC,CAAC,SAAS,CAAC;MAEd,OAAO;QACL,iBAAiB,EAAE,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;QACpD,yBAAyB,EAAE,cAAc,IAAI,OAAO;OACrD,CAAC;IACJ,CAAC,CAAC;;;;;wBAtBoD,IAAI;;EAwB1D,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAC,4CAA4C,gBACtC,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,IAEvC,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE;;MACtB,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,MAAK,IAAI,CAAC,KAAK,CAAC;MACzD,OAAO,CACL,0BACc,MAAM,EAClB,KAAK,EAAE,OAAO,CAAC;UACb,iCAAiC;UACjC,QAAQ,IAAI,UAAU;SACvB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;QAE/C,aACE,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAC,4BAA4B,EACjC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;QACF,WAAK,KAAK,EAAC,sBAAsB;UAC/B,WAAK,KAAK,EAAC,wBAAwB;YACjC,kBAAY,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAc;YACjD,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAClC,WAAK,KAAK,EAAC,mBAAmB;cAC3B,IAAI,CAAC,QAAQ,IAAI,CAChB,kBAAY,KAAK,EAAC,UAAU,IACzB,IAAI,CAAC,QAAQ,CACH,CACd;cACA,IAAI,CAAC,OAAO,IAAI,CACf,kBAAY,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAc,CACzD,CACG,CACP,CACG;UACN,kBAAY,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAc,CACtD,CACF,CACP,CAAC;IACJ,CAAC,CAAC,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type { Color, ElementsUiStyle, ElementsUiTheme } from 'src/types';\n\nexport type ShippingRichRadioItem = {\n  caption?: string;\n  label: string;\n  price: string;\n  sublabel?: string;\n  value: string | number;\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-shipping-rich-radio.scss',\n  tag: 'zonos-shipping-rich-radio',\n})\nexport class ZonosShippingRichRadio {\n  /**\n   * List of items to display\n   */\n  @Prop() items!: ShippingRichRadioItem[];\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Theme of the radio item\n   */\n  @Prop() theme?: ElementsUiTheme;\n  /**\n   * Selected item\n   * @default {null|firstItem}\n   */\n  @State() selectedItem: ShippingRichRadioItem | null = null;\n\n  /**\n   * Event emitted when an item is selected\n   */\n  @Event() radioSelected?: EventEmitter<ShippingRichRadioItem>;\n\n  private handleRichRadioSelect = (item: ShippingRichRadioItem) => {\n    this.selectedItem = item;\n    this.radioSelected?.emit(item);\n  };\n\n  private getRadioItemStyleVariables = () => {\n    const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;\n    const secondaryColor = isColorVariable(usedColor)\n      ? `var(--amino-${usedColor})`\n      : usedColor;\n\n    return {\n      '--border-radius': getBorderRadius(this.borderStyle),\n      '--selected-border-color': secondaryColor || 'unset',\n    };\n  };\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--shipping-rich-radio zonos--elements\"\n        data-theme={this.theme}\n        style={this.getRadioItemStyleVariables()}\n      >\n        {this.items?.map(item => {\n          const selected = this.selectedItem?.value === item.value;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={classes([\n                'zonos--shipping-rich-radio-item',\n                selected && 'selected',\n              ])}\n              onClick={() => this.handleRichRadioSelect(item)}\n            >\n              <input\n                checked={selected}\n                class=\"zonos--shipping-rich-radio-input\"\n                name=\"zonos--shipping-rich-radio\"\n                type=\"radio\"\n                value={item.value}\n              />\n              <div class=\"zonos--shipping-info\">\n                <div class=\"zonos--shipping-detail\">\n                  <zonos-text type=\"label\">{item.label}</zonos-text>\n                  {(item.sublabel || item.caption) && (\n                    <div class=\"zonos--sub-detail\">\n                      {item.sublabel && (\n                        <zonos-text color=\"gray-800\">\n                          {item.sublabel}\n                        </zonos-text>\n                      )}\n                      {item.caption && (\n                        <zonos-text color=\"gray-400\">{item.caption}</zonos-text>\n                      )}\n                    </div>\n                  )}\n                </div>\n                <zonos-text type=\"semiBoldLabel\">{item.price}</zonos-text>\n              </div>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-spinner/zonos-spinner.css

@@ -0,0 +1,104 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  position: relative;
+  overflow: hidden;
+  width: var(--size);
+  height: var(--size);
+  display: inline-flex;
+}
+:host svg {
+  width: var(--size);
+  height: var(--size);
+  stroke: var(--amino-blue-600);
+  animation: rotate 2s linear infinite;
+}
+:host circle.track {
+  stroke: var(--amino-gray-200);
+}
+:host.black {
+  stroke: var(--amino-spinner-stroke-black);
+}
+:host.black circle.track {
+  stroke: var(--amino-spinner-track-black);
+}
+:host.white {
+  stroke: var(--amino-spinner-stroke-white);
+}
+:host.white circle.track {
+  stroke: var(--amino-spinner-track-white);
+}
+:host.info {
+  stroke: var(--amino-blue-600);
+}
+:host.info circle.track {
+  stroke: var(--amino-blue-100);
+}
+:host.success {
+  stroke: var(--amino-green-600);
+}
+:host.success circle.track {
+  stroke: var(--amino-green-100);
+}
+:host.danger {
+  stroke: var(--amino-red-600);
+}
+:host.danger circle.track {
+  stroke: var(--amino-red-100);
+}
+:host.warning {
+  stroke: var(--amino-orange-600);
+}
+:host.warning circle.track {
+  stroke: var(--amino-orange-100);
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+:host circle:not(.track) {
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}

package/dist/collection/components/common/zonos-spinner/zonos-spinner.js

@@ -0,0 +1,78 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+export class ZonosSpinner {
+  constructor() {
+    this.size = 32;
+    this.color = undefined;
+  }
+  render() {
+    if (!this.el.shadowRoot) {
+      return null;
+    }
+    return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
+        '--size': `${this.size}px`,
+      } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
+  }
+  static get is() { return "zonos-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "32"
+            }],
+          "text": "The size of the spinner"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "32"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SpinnerColor",
+          "resolved": "\"black\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
+          "references": {
+            "SpinnerColor": {
+              "location": "local",
+              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-spinner/zonos-spinner.tsx",
+              "id": "src/components/common/zonos-spinner/zonos-spinner.tsx::SpinnerColor"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Color of the spinner"
+        },
+        "attribute": "color",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=zonos-spinner.js.map

package/dist/collection/components/common/zonos-spinner/zonos-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-spinner.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-spinner/zonos-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAgBvD,MAAM,OAAO,YAAY;;gBAKA,EAAE;;;EASzB,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACvB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC/C,KAAK,EAAE;QACL,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;OAC3B;MAED,WAAK,OAAO,EAAC,WAAW;QACtB,cACE,KAAK,EAAC,OAAO,EACb,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,IAAI,kBACO,GAAG,GAChB;QACF,cACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,IAAI,kBACO,GAAG,GAChB,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type SpinnerColor =\n  | 'primary'\n  | 'info'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'black'\n  | 'white';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-spinner.scss',\n  tag: 'zonos-spinner',\n})\nexport class ZonosSpinner {\n  /**\n   * The size of the spinner\n   * @default 32\n   */\n  @Prop() size: number = 32;\n\n  /**\n   * Color of the spinner\n   */\n  @Prop() color?: SpinnerColor;\n\n  @Element() el!: HTMLZonosSpinnerElement;\n\n  render() {\n    if (!this.el.shadowRoot) {\n      return null;\n    }\n\n    return (\n      <Host\n        class={classes(['zonos--elements', this.color])}\n        style={{\n          '--size': `${this.size}px`,\n        }}\n      >\n        <svg viewBox=\"0 0 50 50\">\n          <circle\n            class=\"track\"\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            fill=\"none\"\n            id=\"loading-spinner-circle\"\n            r=\"20\"\n            stroke-width=\"5\"\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-text/zonos-text.css

@@ -0,0 +1,80 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  color: var(--color);
+}
+
+:host(.zonos--text-size-3xl) > *, :host(.zonos--text-size-3xl) {
+  font-size: var(--amino-font-size-3xl);
+}
+
+:host(.zonos--text-size-2xl) > *, :host(.zonos--text-size-2xl) {
+  font-size: var(--amino-font-size-2xl);
+}
+
+:host(.zonos--text-size-xl) > *, :host(.zonos--text-size-xl) {
+  font-size: var(--amino-font-size-xl);
+}
+
+:host(.zonos--text-size-l) > *, :host(.zonos--text-size-l) {
+  font-size: var(--amino-font-size-l);
+}
+
+:host(.zonos--text-size-base) > *, :host(.zonos--text-size-base) {
+  font-size: var(--amino-font-size-base);
+}
+
+:host(.zonos--text-size-s) > *, :host(.zonos--text-size-s) {
+  font-size: var(--amino-font-size-s);
+}
+
+:host(.zonos--text-size-xs) > *, :host(.zonos--text-size-xs) {
+  font-size: var(--amino-font-size-xs);
+}
+
+:host(.zonos--text-weight-900) > *, :host(.zonos--text-weight-900) {
+  font-weight: 900;
+}
+
+:host(.zonos--text-weight-700) > *, :host(.zonos--text-weight-700) {
+  font-weight: 700;
+}
+
+:host(.zonos--text-weight-600) > *, :host(.zonos--text-weight-600) {
+  font-weight: 600;
+}
+
+:host(.zonos--text-weight-500) > *, :host(.zonos--text-weight-500) {
+  font-weight: 500;
+}
+
+:host(.zonos--text-weight-400) > *, :host(.zonos--text-weight-400) {
+  font-weight: 400;
+}

package/dist/collection/components/common/zonos-text/zonos-text.js

@@ -0,0 +1,199 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+import { textOptions, } from "../../../types/styles/Text";
+export class ZonosText {
+  constructor() {
+    this.class = '';
+    this.color = 'gray-1200';
+    this.size = undefined;
+    this.type = 'body';
+    this.weight = undefined;
+    this.content = undefined;
+    this.ready = false;
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.ready = true;
+    }, 100);
+  }
+  render() {
+    const { size: defaultSize, tag: defaultTag, weight: defaultWeight, } = textOptions.body;
+    const { size, tag, weight } = textOptions[this.type];
+    const textSize = this.size || size || defaultSize;
+    const textWeight = this.weight || weight || defaultWeight;
+    const textTag = tag || defaultTag;
+    const renderText = () => {
+      switch (textTag) {
+        case 'h2':
+          return (h("h2", null, h("slot", null)));
+        case 'h3':
+          return (h("h3", null, h("slot", null)));
+        case 'h4':
+          return (h("h4", null, h("slot", null)));
+        case 'h5':
+          return (h("h5", null, h("slot", null)));
+        case 'span':
+        default:
+          return (h("span", null, h("slot", null)));
+      }
+    };
+    return (h(Host, { class: classes([
+        `zonos--text-size-${textSize}`,
+        `zonos--text-weight-${textWeight}`,
+        this.class,
+      ]), style: {
+        '--color': this.color ? `var(--amino-${this.color})` : '',
+      } }, renderText()));
+  }
+  static get is() { return "zonos-text"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-text.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-text.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "css class for the component"
+        },
+        "attribute": "class",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"blue-100\" | \"blue-200\" | \"blue-300\" | \"blue-400\" | \"blue-500\" | \"blue-600\" | \"blue-700\" | \"blue-800\" | \"blue-900\" | \"blue-1000\" | \"cyan-100\" | \"cyan-200\" | \"cyan-300\" | \"cyan-400\" | \"cyan-500\" | \"cyan-600\" | \"cyan-700\" | \"cyan-800\" | \"cyan-900\" | \"cyan-1000\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-1000\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-1000\" | \"purple-100\" | \"purple-200\" | \"purple-300\" | \"purple-400\" | \"purple-500\" | \"purple-600\" | \"purple-700\" | \"purple-800\" | \"purple-900\" | \"purple-1000\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-1000\" | \"gray-100\" | \"gray-200\" | \"gray-300\" | \"gray-400\" | \"gray-500\" | \"gray-600\" | \"gray-700\" | \"gray-800\" | \"gray-900\" | \"gray-1000\" | \"glass-100\" | \"glass-200\" | \"glass-300\" | \"glass-400\" | \"glass-500\" | \"glass-600\" | \"glass-700\" | \"glass-800\" | \"glass-900\" | \"glass-1000\" | \"gray-0\" | \"gray-50\" | \"glass-0\" | \"glass-50\" | \"gray-1100\" | \"gray-1200\" | \"glass-1100\" | \"glass-1200\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "src/types/styles/Color",
+              "id": "src/types/styles/Color.ts::Color"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon element to display"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'gray-1200'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Size",
+          "resolved": "\"2xl\" | \"3xl\" | \"base\" | \"l\" | \"s\" | \"xl\" | \"xs\" | undefined",
+          "references": {
+            "Size": {
+              "location": "import",
+              "path": "src/types/styles/Text",
+              "id": "src/types/styles/Text.ts::Size"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the text"
+        },
+        "attribute": "size",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Type",
+          "resolved": "\"body\" | \"boldLabel\" | \"boldSubheader\" | \"caption\" | \"descriptionHeader\" | \"header\" | \"hintText\" | \"label\" | \"pageHeader\" | \"secondaryPageHeader\" | \"semiBoldLabel\" | \"semiBoldSubheader\" | \"smallHeader\" | \"subheader\" | \"title\"",
+          "references": {
+            "Type": {
+              "location": "import",
+              "path": "src/types/styles/Text",
+              "id": "src/types/styles/Text.ts::Type"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of the text to display"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'body'"
+      },
+      "weight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "FontWeight",
+          "resolved": "400 | 500 | 600 | 700 | 800 | 900 | undefined",
+          "references": {
+            "FontWeight": {
+              "location": "import",
+              "path": "src/types/styles/Text",
+              "id": "src/types/styles/Text.ts::FontWeight"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The weight of the text"
+        },
+        "attribute": "weight",
+        "reflect": false
+      },
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The tag to use for the text"
+        },
+        "attribute": "content",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "ready": {}
+    };
+  }
+}
+//# sourceMappingURL=zonos-text.js.map

package/dist/collection/components/common/zonos-text/zonos-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-text.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-text/zonos-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAIL,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAO/B,MAAM,OAAO,SAAS;;iBAII,EAAE;iBAIH,WAAW;;gBAUb,MAAM;;;iBAeD,KAAK;;EAE/B,kBAAkB;IAChB,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,IAAI,EAAE,WAAW,EACjB,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,aAAa,GACtB,GAAG,WAAW,CAAC,IAAI,CAAC;IACrB,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,WAAW,CAAC;IAClD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC;IAC1D,MAAM,OAAO,GAAG,GAAG,IAAI,UAAU,CAAC;IAElC,MAAM,UAAU,GAAG,GAAG,EAAE;MACtB,QAAQ,OAAO,EAAE;QACf,KAAK,IAAI;UACP,OAAO,CACL;YACE,eAAa,CACV,CACN,CAAC;QACJ,KAAK,IAAI;UACP,OAAO,CACL;YACE,eAAa,CACV,CACN,CAAC;QACJ,KAAK,IAAI;UACP,OAAO,CACL;YACE,eAAa,CACV,CACN,CAAC;QACJ,KAAK,IAAI;UACP,OAAO,CACL;YACE,eAAa,CACV,CACN,CAAC;QACJ,KAAK,MAAM,CAAC;QACZ;UACE,OAAO,CACL;YACE,eAAa,CACR,CACR,CAAC;OACL;IACH,CAAC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC;QACb,oBAAoB,QAAQ,EAAE;QAC9B,sBAAsB,UAAU,EAAE;QAClC,IAAI,CAAC,KAAK;OACX,CAAC,EACF,KAAK,EAAE;QACL,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;OAC1D,IAEA,UAAU,EAAE,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color } from 'src/types/styles/Color';\nimport {\n  type FontWeight,\n  type Size,\n  type Type,\n  textOptions,\n} from 'src/types/styles/Text';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-text.scss',\n  tag: 'zonos-text',\n})\nexport class ZonosText {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n  /**\n   * The icon element to display\n   */\n  @Prop() color: Color = 'gray-1200';\n\n  /**\n   * The size of the text\n   */\n  @Prop() size?: Size;\n\n  /**\n   * Type of the text to display\n   */\n  @Prop() type: Type = 'body';\n\n  /**\n   * The weight of the text\n   */\n  @Prop() weight?: FontWeight;\n\n  /**\n   * The tag to use for the text\n   */\n  @Prop() content?: string;\n\n  /**\n   * Whether or not the component is ready\n   */\n  @State() ready: boolean = false;\n\n  componentDidRender() {\n    setTimeout(() => {\n      this.ready = true;\n    }, 100);\n  }\n\n  render() {\n    const {\n      size: defaultSize,\n      tag: defaultTag,\n      weight: defaultWeight,\n    } = textOptions.body;\n    const { size, tag, weight } = textOptions[this.type];\n\n    const textSize = this.size || size || defaultSize;\n    const textWeight = this.weight || weight || defaultWeight;\n    const textTag = tag || defaultTag;\n\n    const renderText = () => {\n      switch (textTag) {\n        case 'h2':\n          return (\n            <h2>\n              <slot></slot>\n            </h2>\n          );\n        case 'h3':\n          return (\n            <h3>\n              <slot></slot>\n            </h3>\n          );\n        case 'h4':\n          return (\n            <h4>\n              <slot></slot>\n            </h4>\n          );\n        case 'h5':\n          return (\n            <h5>\n              <slot></slot>\n            </h5>\n          );\n        case 'span':\n        default:\n          return (\n            <span>\n              <slot></slot>\n            </span>\n          );\n      }\n    };\n\n    return (\n      <Host\n        class={classes([\n          `zonos--text-size-${textSize}`,\n          `zonos--text-weight-${textWeight}`,\n          this.class,\n        ])}\n        style={{\n          '--color': this.color ? `var(--amino-${this.color})` : '',\n        }}\n      >\n        {renderText()}\n      </Host>\n    );\n  }\n}\n"]}