@zonos/elements 1.0.16

package/dist/cjs/zonos-notification.cjs.entry.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const classes = require('./classes-b7918f56.js');
+
+const zonosNotificationCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";
+
+const ZonosNotification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.class = '';
+    this.notificationArray = [];
+  }
+  /**
+   * Show a notification
+   */
+  async showNotification(notification) {
+    // random generate id
+    const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+    const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+    this.notificationArray = [...this.notificationArray, notificationItem];
+    setTimeout(() => {
+      this.updateTransitionClass({
+        id,
+        transitionClass: 'show',
+      });
+    }, 50);
+    setTimeout(() => {
+      this.removeNotification(id);
+    }, notificationItem.timeout);
+  }
+  updateTransitionClass({ id, transitionClass, }) {
+    this.notificationArray = this.notificationArray.map(notification => {
+      if (notification.id === id) {
+        return Object.assign(Object.assign({}, notification), { transitionClass });
+      }
+      return notification;
+    });
+  }
+  /**
+   * Remove a notification
+   */
+  removeNotification(id) {
+    // add hide class before removing the item 100ms to trigger animation
+    this.updateTransitionClass({
+      id,
+      transitionClass: '',
+    });
+    setTimeout(() => {
+      this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+    }, 300);
+  }
+  render() {
+    return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--notification', this.class]) }, index.h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+      return (index.h("div", { "aria-hidden": "true", class: classes.classes([
+          'zonos--notification-item',
+          notification.type,
+          notification.transitionClass,
+        ]), key: notification.id, onClick: () => {
+          this.removeNotification(notification.id);
+        } }, index.h("zonos-text", { color: "gray-0" }, notification.message)));
+    }))));
+  }
+};
+ZonosNotification.style = zonosNotificationCss;
+
+exports.zonos_notification = ZonosNotification;
+
+//# sourceMappingURL=zonos-notification.cjs.entry.js.map

package/dist/cjs/zonos-notification.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-notification.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,0yCAA0yC;;MC4B1zC,iBAAiB;;;iBAIZ,EAAE;6BAE+B,EAAE;;;;;EAMnD,MAAM,gBAAgB,CAAC,YAA8B;;IAEnD,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC9D,MAAM,gBAAgB,mCACjB,YAAY,KACf,EAAE,EACF,OAAO,EAAE,YAAY,CAAC,OAAO,IAAI,IAAI,EACrC,eAAe,EAAE,EAAE,EACnB,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,SAAS,GACrC,CAAC;IACF,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC;MACT,IAAI,CAAC,qBAAqB,CAAC;QACzB,EAAE;QACF,eAAe,EAAE,MAAM;OACxB,CAAC,CAAC;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,UAAU,CAAC;MACT,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;KAC7B,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;GAC9B;EAEO,qBAAqB,CAAC,EAC5B,EAAE,EACF,eAAe,GAIhB;IACC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY;MAC9D,IAAI,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;QAC1B,uCACK,YAAY,KACf,eAAe,IACf;OACH;MACD,OAAO,YAAY,CAAC;KACrB,CAAC,CAAC;GACJ;;;;EAKO,kBAAkB,CAAC,EAAU;;IAEnC,IAAI,CAAC,qBAAqB,CAAC;MACzB,EAAE;MACF,eAAe,EAAE,EAAE;KACpB,CAAC,CAAC;IAEH,UAAU,CAAC;MACT,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CACpD,YAAY,IAAI,YAAY,CAAC,EAAE,KAAK,EAAE,CACvC,CAAC;KACH,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAEC,eAAO,CAAC,CAAC,qCAAqC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAEnEF,iBAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY;MACtC,QACEA,gCACc,MAAM,EAClB,KAAK,EAAEE,eAAO,CAAC;UACb,0BAA0B;UAC1B,YAAY,CAAC,IAAI;UACjB,YAAY,CAAC,eAAe;SAC7B,CAAC,EACF,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,OAAO,EAAE;UACP,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SAC1C,IAEDF,wBAAY,KAAK,EAAC,QAAQ,IAAE,YAAY,CAAC,OAAO,CAAc,CAC1D,EACN;KACH,CAAC,CACE,CACD,EACP;GACH;;;;;;","names":["h","Host","classes"],"sources":["src/components/common/zonos-notification/zonos-notification.scss?tag=zonos-notification&encapsulation=shadow","src/components/common/zonos-notification/zonos-notification.tsx"],"sourcesContent":["$border-radius: var(--border-radius, $amino-radius-6);\n\n:host {\n  display: flex;\n  justify-content: center;\n  .zonos--notification-items {\n    position: fixed;\n    z-index: 9999999;\n    bottom: $amino-space-24;\n    gap: $amino-space-8;\n    display: inline-flex;\n    flex-direction: column;\n  }\n  .zonos--notification-item {\n    cursor: pointer;\n    transition: all 0.3s ease;\n    padding: $amino-space-8;\n    border-radius: $border-radius;\n    // fade in animation\n    opacity: 0;\n    flex-shrink: 0.0001;\n    transform: translateY(100%);\n    & + & {\n      margin-top: 8px;\n    }\n    &.show {\n      opacity: 1;\n      transform: translateY(0);\n      flex-grow: 1000;\n    }\n    &.success {\n      background-color: $amino-green-700;\n    }\n    &.error {\n      background-color: $amino-red-700;\n    }\n    &.warning {\n      background-color: $amino-orange-700;\n    }\n  }\n}\n","import { Component, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type NotificationInit = {\n  message: string;\n  /**\n   * Time in milliseconds\n   * @default 4000\n   */\n  timeout?: number;\n  /**\n   * Type of notification\n   * @default 'success'\n   */\n  type?: 'error' | 'success' | 'warning';\n};\n\ntype NotificationItem = NotificationInit & {\n  id: string;\n  transitionClass: 'show' | '';\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-notification.scss',\n  tag: 'zonos-notification',\n})\nexport class ZonosNotification {\n  /**\n   * Custom class to add to the notification\n   */\n  @Prop() class = '';\n\n  @State() notificationArray: NotificationItem[] = [];\n\n  /**\n   * Show a notification\n   */\n  @Method()\n  async showNotification(notification: NotificationInit) {\n    // random generate id\n    const id = `id-${Math.random().toString(36).substring(2, 9)}`;\n    const notificationItem: NotificationItem = {\n      ...notification,\n      id,\n      timeout: notification.timeout || 5000,\n      transitionClass: '',\n      type: notification.type || 'success',\n    };\n    this.notificationArray = [...this.notificationArray, notificationItem];\n    setTimeout(() => {\n      this.updateTransitionClass({\n        id,\n        transitionClass: 'show',\n      });\n    }, 50);\n\n    setTimeout(() => {\n      this.removeNotification(id);\n    }, notificationItem.timeout);\n  }\n\n  private updateTransitionClass({\n    id,\n    transitionClass,\n  }: {\n    id: string;\n    transitionClass: 'show' | '';\n  }) {\n    this.notificationArray = this.notificationArray.map(notification => {\n      if (notification.id === id) {\n        return {\n          ...notification,\n          transitionClass,\n        };\n      }\n      return notification;\n    });\n  }\n\n  /**\n   * Remove a notification\n   */\n  private removeNotification(id: string) {\n    // add hide class before removing the item 100ms to trigger animation\n    this.updateTransitionClass({\n      id,\n      transitionClass: '',\n    });\n\n    setTimeout(() => {\n      this.notificationArray = this.notificationArray.filter(\n        notification => notification.id !== id,\n      );\n    }, 300);\n  }\n\n  render() {\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--notification', this.class])}\n      >\n        <div class=\"zonos--notification-items\">\n          {this.notificationArray.map(notification => {\n            return (\n              <div\n                aria-hidden=\"true\"\n                class={classes([\n                  'zonos--notification-item',\n                  notification.type,\n                  notification.transitionClass,\n                ])}\n                key={notification.id}\n                onClick={() => {\n                  this.removeNotification(notification.id);\n                }}\n              >\n                <zonos-text color=\"gray-0\">{notification.message}</zonos-text>\n              </div>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const zonosStore = require('./zonosStore-960e5542.js');
+const classes = require('./classes-b7918f56.js');
+const getBorderRadius = require('./getBorderRadius-2904800c.js');
+const isColorVariable = require('./isColorVariable-c1ed7303.js');
+
+const zonosShippingRichRadioCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-left-radius:var(--border-radius, var(--amino-radius-10));border-bottom-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item.selected{border-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+
+const ZonosShippingRichRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.radioSelected = index.createEvent(this, "radioSelected", 7);
+    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.zonosStore.appearance.colorSecondary;
+      const secondaryColor = isColorVariable.isColorVariable(usedColor)
+        ? `var(--amino-${usedColor})`
+        : usedColor;
+      return {
+        '--border-radius': getBorderRadius.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 (index.h(index.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 (index.h("div", { "aria-hidden": "true", class: classes.classes([
+          'zonos--shipping-rich-radio-item',
+          selected && 'selected',
+        ]), onClick: () => this.handleRichRadioSelect(item) }, index.h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), index.h("div", { class: "zonos--shipping-info" }, index.h("div", { class: "zonos--shipping-detail" }, index.h("zonos-text", { type: "label" }, item.label), (item.sublabel || item.caption) && (index.h("div", { class: "zonos--sub-detail" }, item.sublabel && (index.h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (index.h("zonos-text", { color: "gray-400" }, item.caption))))), index.h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+    })));
+  }
+};
+ZonosShippingRichRadio.style = zonosShippingRichRadioCss;
+
+exports.zonos_shipping_rich_radio = ZonosShippingRichRadio;
+
+//# sourceMappingURL=zonos-shipping-rich-radio.cjs.entry.js.map

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-shipping-rich-radio.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,26CAA26C;;MC6Bh8C,sBAAsB;;;;IA+BzB,0BAAqB,GAAG,CAAC,IAA2B;;MAC1D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;MACzB,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC,CAAC;IAEM,+BAA0B,GAAG;MACnC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,IAAIA,qBAAU,CAAC,UAAU,CAAC,cAAc,CAAC;MAC3E,MAAM,cAAc,GAAGC,+BAAe,CAAC,SAAS,CAAC;UAC7C,eAAe,SAAS,GAAG;UAC3B,SAAS,CAAC;MAEd,OAAO;QACL,iBAAiB,EAAEC,+BAAe,CAAC,IAAI,CAAC,WAAW,CAAC;QACpD,yBAAyB,EAAE,cAAc,IAAI,OAAO;OACrD,CAAC;KACH,CAAC;;;;;wBAtBoD,IAAI;;EAwB1D,MAAM;;IACJ,QACEC,QAACC,UAAI,IACH,KAAK,EAAC,4CAA4C,gBACtC,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,IAEvC,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI;;MACnB,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,MAAK,IAAI,CAAC,KAAK,CAAC;MACzD,QACED,gCACc,MAAM,EAClB,KAAK,EAAEE,eAAO,CAAC;UACb,iCAAiC;UACjC,QAAQ,IAAI,UAAU;SACvB,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAE/CF,mBACE,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAC,4BAA4B,EACjC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACFA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,wBAAY,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAc,EACjD,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,MAC7BA,iBAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,QAAQ,KACZA,wBAAY,KAAK,EAAC,UAAU,IACzB,IAAI,CAAC,QAAQ,CACH,CACd,EACA,IAAI,CAAC,OAAO,KACXA,wBAAY,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAc,CACzD,CACG,CACP,CACG,EACNA,wBAAY,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAc,CACtD,CACF,EACN;KACH,CAAC,CACG,EACP;GACH;;;;;;","names":["zonosStore","isColorVariable","getBorderRadius","h","Host","classes"],"sources":["src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.scss?tag=zonos-shipping-rich-radio&encapsulation=shadow","src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx"],"sourcesContent":["$selected-border-color: var(--selected-border-color, $amino-blue-600);\n$border-radius: var(--border-radius, $amino-radius-10);\n:host {\n  display: flex;\n  flex-direction: column;\n  input {\n    margin: 0;\n    accent-color: $selected-border-color;\n  }\n  .zonos--shipping-rich-radio-item {\n    display: flex;\n    flex: 1;\n    padding: $amino-space-16;\n    align-items: center;\n    gap: $amino-space-16;\n    cursor: pointer;\n    border: 1px solid $amino-gray-200;\n    &:first-child {\n      border-top-left-radius: $border-radius;\n      border-top-right-radius: $border-radius;\n    }\n    &:last-child {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n\n    &.selected {\n      border-color: $selected-border-color;\n    }\n  }\n  .zonos--shipping-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n  .zonos--shipping-detail {\n    flex: 1;\n  }\n  .zonos--sub-detail {\n    display: inline-flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n}\n","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"],"version":3}

package/dist/cjs/zonos-text.cjs.entry.js

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9542d2e7.js');
+const classes = require('./classes-b7918f56.js');
+
+const textOptions = {
+  pageHeader: {
+    label: 'Page Header (3XL) · 34px (2.125rem)',
+    size: '3xl',
+    tag: 'h2',
+    weight: 900,
+  },
+  secondaryPageHeader: {
+    label: 'Secondary Page Header (3XL) • 34px, 500 "Medium"',
+    size: '3xl',
+    tag: 'h2',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  header: {
+    label: 'Header (2XL) · 28px (1.75rem)',
+    size: '2xl',
+    tag: 'h3',
+    weight: 700,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  descriptionHeader: {
+    label: 'Description Header (2XL) · 28px (1.75rem)',
+    size: '2xl',
+    tag: 'h3',
+    weight: 700,
+  },
+  title: {
+    label: 'Title (XL) • 22px (1.375rem)',
+    size: 'xl',
+    tag: 'h4',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  boldSubheader: {
+    label: 'Bold Subheader (L) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 700,
+  },
+  semiBoldSubheader: {
+    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 600,
+  },
+  subheader: {
+    label: 'Subheader (L) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  boldLabel: {
+    label: 'Bold Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 700,
+  },
+  semiBoldLabel: {
+    label: 'Semi Bold Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  label: {
+    label: 'Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  body: {
+    label: 'Body (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 400,
+  },
+  smallHeader: {
+    label: 'Small header (S) • 12px (.75rem)',
+    size: 's',
+    tag: 'span',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  caption: {
+    label: 'Caption (S) • 12px (.75rem)',
+    size: 's',
+    tag: 'span',
+    weight: 400,
+  },
+  hintText: {
+    label: 'Hint text (XS) • 10px (.625rem)',
+    size: 'xs',
+    tag: 'span',
+    weight: 400,
+  },
+};
+
+const zonosTextCss = ":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}: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}";
+
+const ZonosText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h("h2", null, index.h("slot", null)));
+        case 'h3':
+          return (index.h("h3", null, index.h("slot", null)));
+        case 'h4':
+          return (index.h("h4", null, index.h("slot", null)));
+        case 'h5':
+          return (index.h("h5", null, index.h("slot", null)));
+        case 'span':
+        default:
+          return (index.h("span", null, index.h("slot", null)));
+      }
+    };
+    return (index.h(index.Host, { class: classes.classes([
+        `zonos--text-size-${textSize}`,
+        `zonos--text-weight-${textWeight}`,
+        this.class,
+      ]), style: {
+        '--color': this.color ? `var(--amino-${this.color})` : '',
+      } }, renderText()));
+  }
+};
+ZonosText.style = zonosTextCss;
+
+exports.zonos_text = ZonosText;
+
+//# sourceMappingURL=zonos-text.cjs.entry.js.map

package/dist/cjs/zonos-text.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-text.entry.cjs.js","mappings":"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","names":["h","Host","classes"],"sources":["src/types/styles/Text.ts","src/components/common/zonos-text/zonos-text.scss?tag=zonos-text&encapsulation=shadow","src/components/common/zonos-text/zonos-text.tsx"],"sourcesContent":["export const textOptions = {\n  pageHeader: {\n    label: 'Page Header (3XL) · 34px (2.125rem)',\n    size: '3xl',\n    tag: 'h2',\n    weight: 900,\n  },\n  secondaryPageHeader: {\n    label: 'Secondary Page Header (3XL) • 34px, 500 \"Medium\"',\n    size: '3xl',\n    tag: 'h2',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  header: {\n    label: 'Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  descriptionHeader: {\n    label: 'Description Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  title: {\n    label: 'Title (XL) • 22px (1.375rem)',\n    size: 'xl',\n    tag: 'h4',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldSubheader: {\n    label: 'Bold Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 700,\n  },\n  semiBoldSubheader: {\n    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 600,\n  },\n  subheader: {\n    label: 'Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldLabel: {\n    label: 'Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 700,\n  },\n  semiBoldLabel: {\n    label: 'Semi Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  label: {\n    label: 'Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  body: {\n    label: 'Body (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 400,\n  },\n  smallHeader: {\n    label: 'Small header (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  caption: {\n    label: 'Caption (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 400,\n  },\n  hintText: {\n    label: 'Hint text (XS) • 10px (.625rem)',\n    size: 'xs',\n    tag: 'span',\n    weight: 400,\n  },\n} as const;\n\ntype TextOptions = typeof textOptions;\nexport type Size = TextOptions[keyof TextOptions]['size'];\nexport type Type = keyof TextOptions;\nexport type FontWeight = TextOptions[keyof TextOptions]['weight'] | 800;\n","$color: var(--color);\n\n$sizes: (\n  '3xl': $amino-font-size-3xl,\n  '2xl': $amino-font-size-2xl,\n  'xl': $amino-font-size-xl,\n  'l': $amino-font-size-l,\n  'base': $amino-font-size-base,\n  's': $amino-font-size-s,\n  'xs': $amino-font-size-xs,\n);\n\n$weights: (\n  '900': 900,\n  '700': 700,\n  '600': 600,\n  '500': 500,\n  '400': 400,\n);\n\n:host {\n  color: var(--color);\n}\n\n@each $_size, $_value in $sizes {\n  :host(.zonos--text-size-#{$_size}) {\n    > *,\n    & {\n      font-size: $_value;\n    }\n  }\n}\n@each $_weight, $_value in $weights {\n  :host(.zonos--text-weight-#{$_weight}) {\n    > *,\n    & {\n      font-weight: $_value;\n    }\n  }\n}\n","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"],"version":3}