@usecapsule/core-components 2.0.2 → 2.0.4-dev.dropdown

package/dist/types/assets/icons/index.d.ts

@@ -1,4 +1,237 @@
 export declare const Icons: {
+    AD: string;
+    AE: string;
+    AF: string;
+    AG: string;
+    AI: string;
+    AL: string;
+    AM: string;
+    AO: string;
+    AR: string;
+    AS: string;
+    AT: string;
+    AU: string;
+    AW: string;
+    AX: string;
+    AZ: string;
+    BA: string;
+    BB: string;
+    BD: string;
+    BE: string;
+    BF: string;
+    BG: string;
+    BH: string;
+    BI: string;
+    BJ: string;
+    BL: string;
+    BM: string;
+    BN: string;
+    BO: string;
+    BQ: string;
+    BQ2: string;
+    BQ3: string;
+    BR: string;
+    BS: string;
+    BT: string;
+    BW: string;
+    BY: string;
+    BZ: string;
+    CA: string;
+    CC: string;
+    CD: string;
+    CD2: string;
+    CF: string;
+    CH: string;
+    CK: string;
+    CL: string;
+    CM: string;
+    CN: string;
+    CO: string;
+    CR: string;
+    CU: string;
+    CW: string;
+    CX: string;
+    CY: string;
+    CZ: string;
+    DE: string;
+    DJ: string;
+    DK: string;
+    DM: string;
+    DO: string;
+    DS: string;
+    DZ: string;
+    EC: string;
+    EE: string;
+    EG: string;
+    EH: string;
+    ER: string;
+    ES: string;
+    ET: string;
+    FI: string;
+    FJ: string;
+    FK: string;
+    FM: string;
+    FO: string;
+    FR: string;
+    GA: string;
+    GB2: string;
+    GB: string;
+    GD: string;
+    GE: string;
+    GG: string;
+    GH: string;
+    GI: string;
+    GL: string;
+    GM: string;
+    GN: string;
+    GQ: string;
+    GR: string;
+    GT: string;
+    GU: string;
+    GW: string;
+    GY: string;
+    HK: string;
+    HN: string;
+    HR: string;
+    HT: string;
+    HU: string;
+    ID: string;
+    IE: string;
+    IL: string;
+    IM: string;
+    IN: string;
+    IO: string;
+    IQ: string;
+    IR: string;
+    IS: string;
+    IT: string;
+    JE: string;
+    JM: string;
+    JO: string;
+    JP: string;
+    KE: string;
+    KG: string;
+    KH: string;
+    KI: string;
+    KM: string;
+    KN: string;
+    KP: string;
+    KR: string;
+    KW: string;
+    KY: string;
+    KZ: string;
+    LA: string;
+    LB: string;
+    LC: string;
+    LI: string;
+    LK: string;
+    LR: string;
+    LS: string;
+    LT: string;
+    LU: string;
+    LV: string;
+    LY: string;
+    MA: string;
+    MC: string;
+    MD: string;
+    ME: string;
+    MG: string;
+    MH: string;
+    MK: string;
+    ML: string;
+    MM: string;
+    MN: string;
+    MO: string;
+    MP: string;
+    MQ: string;
+    MR: string;
+    MS: string;
+    MT: string;
+    MU: string;
+    MV: string;
+    MW: string;
+    MX: string;
+    MY: string;
+    MZ: string;
+    NA: string;
+    NE: string;
+    NF: string;
+    NG: string;
+    NI: string;
+    NL: string;
+    NO: string;
+    NP: string;
+    NR: string;
+    NU: string;
+    NZ: string;
+    OM: string;
+    PA: string;
+    PE: string;
+    PF: string;
+    PG: string;
+    PH: string;
+    PK: string;
+    PL: string;
+    PN: string;
+    PR: string;
+    PS: string;
+    PT: string;
+    PW: string;
+    PY: string;
+    QA: string;
+    RO: string;
+    RS: string;
+    RU: string;
+    RW: string;
+    SA: string;
+    SB: string;
+    SC: string;
+    SE: string;
+    SG: string;
+    SI: string;
+    SK: string;
+    SL: string;
+    SM: string;
+    SN: string;
+    SO: string;
+    SR: string;
+    SS: string;
+    ST: string;
+    SV: string;
+    SX: string;
+    SY: string;
+    SZ: string;
+    TC: string;
+    TD: string;
+    TG: string;
+    TH: string;
+    TJ: string;
+    TK: string;
+    TL: string;
+    TM: string;
+    TN: string;
+    TO: string;
+    TR: string;
+    TT: string;
+    TV: string;
+    TW: string;
+    TZ: string;
+    UA: string;
+    UG: string;
+    US: string;
+    UY: string;
+    UZ: string;
+    VC: string;
+    VE: string;
+    VG: string;
+    VI: string;
+    VN: string;
+    VU: string;
+    WS: string;
+    YE: string;
+    ZA: string;
+    ZM: string;
+    ZW: string;
     alertCircle: string;
     angelListBrand: string;
     angelList: string;
@@ -12,6 +245,7 @@ export declare const Icons: {
     capsuleRings: string;
     capsule: string;
     check: string;
+    chevronUp: string;
     clock: string;
     close: string;
     clubhouseBrand: string;
@@ -22,6 +256,7 @@ export declare const Icons: {
     downloadCloud: string;
     dribbbleBrand: string;
     dribbble: string;
+    earth: string;
     eyeOff: string;
     eye: string;
     facebookBrand: string;

package/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts

@@ -0,0 +1,25 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class CpslDropdown implements ComponentInterface {
+    el: HTMLCpslDropdownElement;
+    width: string;
+    isOpen: boolean;
+    selectedItem: {
+        icon: string;
+        label: string;
+        value: string;
+        selectedLabel?: string;
+    };
+    items: Array<{
+        icon: string;
+        label: string;
+        value: string;
+        selectedLabel?: string;
+    }>;
+    private toggleDropdown;
+    private selectItem;
+    private handleItemSelect;
+    handleOpenChange(): void;
+    private adjustPosition;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -168,6 +168,16 @@ export namespace Components {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items": Array<{ icon: string, label: string, value: string, selectedLabel?: string }>;
+        /**
+          * Width of the dropdown
+         */
+        "width": string;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -421,6 +431,18 @@ export namespace Components {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The color of text. Options are: `"primary"`, `"secondary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "color"?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error';
+        /**
+          * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
+         */
+        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
         /**
@@ -505,6 +527,12 @@ declare global {
         prototype: HTMLCpslDividerElement;
         new (): HTMLCpslDividerElement;
     };
+    interface HTMLCpslDropdownElement extends Components.CpslDropdown, HTMLStencilElement {
+    }
+    var HTMLCpslDropdownElement: {
+        prototype: HTMLCpslDropdownElement;
+        new (): HTMLCpslDropdownElement;
+    };
     interface HTMLCpslGridElement extends Components.CpslGrid, HTMLStencilElement {
     }
     var HTMLCpslGridElement: {
@@ -671,6 +699,7 @@ declare global {
         "cpsl-code-input": HTMLCpslCodeInputElement;
         "cpsl-col": HTMLCpslColElement;
         "cpsl-divider": HTMLCpslDividerElement;
+        "cpsl-dropdown": HTMLCpslDropdownElement;
         "cpsl-grid": HTMLCpslGridElement;
         "cpsl-icon": HTMLCpslIconElement;
         "cpsl-info-box": HTMLCpslInfoBoxElement;
@@ -842,6 +871,16 @@ declare namespace LocalJSX {
     }
     interface CpslDivider {
     }
+    interface CpslDropdown {
+        /**
+          * Items to be presented in the dropdown
+         */
+        "items"?: Array<{ icon: string, label: string, value: string, selectedLabel?: string }>;
+        /**
+          * Width of the dropdown
+         */
+        "width"?: string;
+    }
     interface CpslGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -1139,6 +1178,18 @@ declare namespace LocalJSX {
         "selectedTab"?: string;
     }
     interface CpslText {
+        /**
+          * The color of text. Options are: `"primary"`, `"secondary", `"subtle", `"inverted", `"error". Default is: `"primary"`.
+         */
+        "color"?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error';
+        /**
+          * The variant of text. Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL". Default is: `"bodyM"`.
+         */
+        "variant"?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+        /**
+          * The weight of text. Options are: `"regular"`, `"medium", `"semiBold", `"bold". Default is: `"regular"`.
+         */
+        "weight"?: 'regular' | 'medium' | 'semiBold' | 'bold';
     }
     interface CpslTileButton {
         /**
@@ -1157,6 +1208,7 @@ declare namespace LocalJSX {
         "cpsl-code-input": CpslCodeInput;
         "cpsl-col": CpslCol;
         "cpsl-divider": CpslDivider;
+        "cpsl-dropdown": CpslDropdown;
         "cpsl-grid": CpslGrid;
         "cpsl-icon": CpslIcon;
         "cpsl-info-box": CpslInfoBox;
@@ -1185,6 +1237,7 @@ declare module "@stencil/core" {
             "cpsl-code-input": LocalJSX.CpslCodeInput & JSXBase.HTMLAttributes<HTMLCpslCodeInputElement>;
             "cpsl-col": LocalJSX.CpslCol & JSXBase.HTMLAttributes<HTMLCpslColElement>;
             "cpsl-divider": LocalJSX.CpslDivider & JSXBase.HTMLAttributes<HTMLCpslDividerElement>;
+            "cpsl-dropdown": LocalJSX.CpslDropdown & JSXBase.HTMLAttributes<HTMLCpslDropdownElement>;
             "cpsl-grid": LocalJSX.CpslGrid & JSXBase.HTMLAttributes<HTMLCpslGridElement>;
             "cpsl-icon": LocalJSX.CpslIcon & JSXBase.HTMLAttributes<HTMLCpslIconElement>;
             "cpsl-info-box": LocalJSX.CpslInfoBox & JSXBase.HTMLAttributes<HTMLCpslInfoBoxElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecapsule/core-components",
-  "version": "2.0.2",
+  "version": "2.0.4-dev.dropdown",
   "description": "Capsule Core Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -49,6 +49,5 @@
     "sass": "^1.71.1",
     "stencil-inline-svg": "^1.1.0",
     "ts-node": "^10.9.2"
-  },
-  "gitHead": "a280965b7a4a72105912da9acc705710bb719674"
+  }
 }

package/dist/capsule/_commonjsHelpers-bc8ff177.js

@@ -1,36 +0,0 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getDefaultExportFromNamespaceIfPresent (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
-}
-
-function getDefaultExportFromNamespaceIfNotNamed (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-function commonjsRequire (path) {
-	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
-}
-
-export { commonjsGlobal as c, getDefaultExportFromCjs as g };
-
-//# sourceMappingURL=_commonjsHelpers-bc8ff177.js.map

package/dist/capsule/_commonjsHelpers-bc8ff177.js.map

@@ -1 +0,0 @@
-{"file":"_commonjsHelpers-bc8ff177.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/capsule/cpsl-alert.entry.js

@@ -1,31 +0,0 @@
-import { r as registerInstance, h, a as Host } from './index-f19e63df.js';
-import { I as Icons } from './index-3ac1b9e9.js';
-
-const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:clamp(12px, 0.75rem, 18px);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-background-color:var(--cpsl-color-alert-surface-error);--container-border-color:var(--cpsl-color-alert-border-error);--container-color:var(--cpsl-color-text-error)}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.icon{display:flex}";
-
-const CpslAlert = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.type = 'error';
-        this.icon = undefined;
-    }
-    get Icon() {
-        if (Boolean(this.icon)) {
-            return Icons[this.icon];
-        }
-        switch (this.type) {
-            case 'error':
-            default: {
-                return Icons.alertCircle;
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: 'dc86a2cfcc312f4697d67aecbd84dea037146d32', class: { error: this.type === 'error' } }, h("div", { key: 'd5d102a894ecc1ccc467537e769b7fd06b65638d', class: "alert-container" }, h("div", { key: '00cd13e8ffafd7dd0a052947a77714531f0ca97b', class: "icon", innerHTML: this.Icon }), h("slot", { key: 'd9c6fbbed43b6995381560d4e858fc26ba31fe99' }))));
-    }
-};
-CpslAlert.style = cpslAlertCss;
-
-export { CpslAlert as cpsl_alert };
-
-//# sourceMappingURL=cpsl-alert.entry.js.map

package/dist/capsule/cpsl-alert.entry.js.map

@@ -1 +0,0 @@
-{"file":"cpsl-alert.entry.esm.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,4sCAA4sC;;MCSptC,SAAS;;;oBAMK,OAAO;;;IAOhC,IAAY,IAAI;QACd,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACtB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;QAED,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,OAAO,CAAC;YACb,SAAS;gBACP,OAAO,KAAK,CAAC,WAAW,CAAC;aAC1B;SACF;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,IAC3C,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,EAC1C,8DAAa,CACT,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/cpsl-alert/cpsl-alert.scss?tag=cpsl-alert&encapsulation=shadow","src/components/cpsl-alert/cpsl-alert.tsx"],"sourcesContent":["@import '../../themes/capsule.globals';\n\n:host {\n  --container-gap: 8px;\n\n  --container-padding-top: 4px;\n  --container-padding-bottom: 4px;\n  --container-padding-start: 16px;\n  --container-padding-end: 16px;\n\n  --container-font-size: #{dynamic-font-clamp(1, 12px, 1.5)};\n\n  --container-border-width: 1px;\n  --container-border-radius: var(--cpsl-border-radius-alert);\n\n  display: inline-block;\n  font-family: $font-family-base;\n}\n\n:host(.error) {\n  --container-background-color: var(--cpsl-color-alert-surface-error);\n  --container-border-color: var(--cpsl-color-alert-border-error);\n  --container-color: var(--cpsl-color-text-error);\n}\n\n.alert-container {\n  @include border-radius(var(--container-border-radius));\n  @include padding(var(--container-padding-top), var(--container-padding-end), var(--container-padding-bottom), var(--container-padding-start));\n\n  font-size: var(--container-font-size);\n  font-weight: 500;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--container-gap);\n\n  border-style: solid;\n  border-width: var(--container-border-width);\n  border-color: var(--container-border-color);\n\n  background-color: var(--container-background-color);\n  color: var(--container-color);\n}\n\n.icon {\n  display: flex;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { Icons } from '../../assets/icons';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-alert',\n  styleUrl: 'cpsl-alert.scss',\n  shadow: true,\n})\nexport class CpslAlert {\n  /**\n   * The type of alert.\n   * Options are: `\"error\"`\n   * Default is: `\"error\"`.\n   */\n  @Prop() type?: 'error' = 'error';\n\n  /**\n   * The name of the icon to show.\n   */\n  @Prop() icon?: IconType;\n\n  private get Icon() {\n    if (Boolean(this.icon)) {\n      return Icons[this.icon];\n    }\n\n    switch (this.type) {\n      case 'error':\n      default: {\n        return Icons.alertCircle;\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host class={{ error: this.type === 'error' }}>\n        <div class=\"alert-container\">\n          <div class=\"icon\" innerHTML={this.Icon} />\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}