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

package/dist/collection/components/cpsl-text/cpsl-text.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class CpslText {
+    render() {
+        return (h(Host, { key: '14b6b911fe1c66fa0dbc118207755123110fd85a' }, h("slot", { key: 'ebf8c3b818cc85fd06bc4feb3d7c2b21818fcc9c' })));
+    }
+    static get is() { return "cpsl-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-text.css"]
+        };
+    }
+}
+//# sourceMappingURL=cpsl-text.js.map

package/dist/collection/components/cpsl-text/cpsl-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-text',\n  styleUrl: 'cpsl-text.scss',\n  shadow: true,\n})\nexport class CpslText {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-text/test/cpsl-text.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-text', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-text></cpsl-text>');
+        const element = yield page.find('cpsl-text');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-text.e2e.js.map

package/dist/collection/components/cpsl-text/test/cpsl-text.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-text/test/cpsl-text.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-text', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-text></cpsl-text>');\n\n    const element = await page.find('cpsl-text');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-text/test/cpsl-text.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslText } from "../cpsl-text";
+describe('cpsl-text', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslText],
+            html: `<cpsl-text></cpsl-text>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-text>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-text>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-text.spec.js.map

package/dist/collection/components/cpsl-text/test/cpsl-text.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-text/test/cpsl-text.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslText } from '../cpsl-text';\n\ndescribe('cpsl-text', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslText],\n      html: `<cpsl-text></cpsl-text>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-text>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-text>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css

@@ -0,0 +1,97 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --button-icon-color: var(--cpsl-color-text-primary);
+  --button-border-radius: var(--cpsl-border-radius-tile-button);
+  --button-background-color: var(--cpsl-color-tile-button-surface-default);
+  --button-border-color: var(--cpsl-color-tile-button-border);
+  --button-width: 72px;
+  --button-height: 56px;
+  --button-gap: 4px;
+  --button-box-shadow: 0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset;
+}
+
+:host :hover {
+  --button-background-color: var(--cpsl-color-tile-button-surface-hover);
+}
+:host :active {
+  --button-background-color: var(--cpsl-color-tile-button-surface-pressed);
+}
+
+.button-native {
+  border-radius: var(--button-border-radius);
+  -webkit-padding-start: var(--button-padding-start);
+  padding-inline-start: var(--button-padding-start);
+  -webkit-padding-end: var(--button-padding-end);
+  padding-inline-end: var(--button-padding-end);
+  padding-top: var(--button-padding-top);
+  padding-bottom: var(--button-padding-bottom);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background-color: var(--button-background-color);
+  border-color: var(--button-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-gap);
+  align-items: center;
+  justify-content: center;
+  width: var(--button-width);
+  height: var(--button-height);
+  box-shadow: var(--button-box-shadow);
+}
+.button-native cpsl-icon {
+  --icon-color: var(--button-icon-color);
+}

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js

@@ -0,0 +1,67 @@
+import { Host, h } from "@stencil/core";
+export class CpslTileButton {
+    constructor() {
+        this.src = undefined;
+        this.icon = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'f86ee8387b40817115e680cad78b3cab4af7b35f' }, h("button", { key: '7fa11eeed97fd89c8d5640cb270403c6bab8cda1', class: "button-native" }, h("cpsl-icon", { key: '0b605c0839dd930cc97a70fd867619929c3ce5af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '8c3fe5d96e1443cd7a454589cdb279a684773a83' }))));
+    }
+    static get is() { return "cpsl-tile-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-tile-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-tile-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The external source of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "icon",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-tile-button.js.map

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tile-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tile-button/cpsl-tile-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,cAAc;;;;;IAWzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,eAAe;gBAC3B,kEAAW,WAAW,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;gBAChE,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-tile-button',\n  styleUrl: 'cpsl-tile-button.scss',\n  shadow: true,\n})\nexport class CpslTileButton {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host>\n        <button class=\"button-native\">\n          <cpsl-icon exportparts=\"icon\" src={this.src} icon={this.icon} />\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-tile-button', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-tile-button></cpsl-tile-button>');
+        const element = yield page.find('cpsl-tile-button');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-tile-button.e2e.js.map

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tile-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tile-button/test/cpsl-tile-button.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;QAE/D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACpD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-tile-button', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-tile-button></cpsl-tile-button>');\n\n    const element = await page.find('cpsl-tile-button');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslTileButton } from "../cpsl-tile-button";
+describe('cpsl-tile-button', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslTileButton],
+            html: `<cpsl-tile-button></cpsl-tile-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-tile-button>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-tile-button>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-tile-button.spec.js.map

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tile-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tile-button/test/cpsl-tile-button.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslTileButton } from '../cpsl-tile-button';\n\ndescribe('cpsl-tile-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslTileButton],\n      html: `<cpsl-tile-button></cpsl-tile-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-tile-button>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-tile-button>\n    `);\n  });\n});\n"]}

package/dist/collection/constants.js

@@ -0,0 +1,6 @@
+export const MOBILE_SIZE = 480;
+export const DEFAULT_THEME = {
+    foregroundColor: '#121212',
+    backgroundColor: '#FAFAFA',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC","sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n  foregroundColor: '#121212',\n  backgroundColor: '#FAFAFA',\n};\n"]}

package/dist/collection/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export { default as generateTheme } from './utils/theme/generateTheme';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { default as generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius } from './interface';\n"]}

package/dist/collection/interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interface.js.map

package/dist/collection/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n  | 'on'\n  | 'off'\n  | 'name'\n  | 'honorific-prefix'\n  | 'given-name'\n  | 'additional-name'\n  | 'family-name'\n  | 'honorific-suffix'\n  | 'nickname'\n  | 'email'\n  | 'username'\n  | 'new-password'\n  | 'current-password'\n  | 'one-time-code'\n  | 'organization-title'\n  | 'organization'\n  | 'street-address'\n  | 'address-line1'\n  | 'address-line2'\n  | 'address-line3'\n  | 'address-level4'\n  | 'address-level3'\n  | 'address-level2'\n  | 'address-level1'\n  | 'country'\n  | 'country-name'\n  | 'postal-code'\n  | 'cc-name'\n  | 'cc-given-name'\n  | 'cc-additional-name'\n  | 'cc-family-name'\n  | 'cc-family-name'\n  | 'cc-number'\n  | 'cc-exp'\n  | 'cc-exp-month'\n  | 'cc-exp-year'\n  | 'cc-csc'\n  | 'cc-type'\n  | 'transaction-currency'\n  | 'transaction-amount'\n  | 'language'\n  | 'bday'\n  | 'bday-day'\n  | 'bday-month'\n  | 'bday-year'\n  | 'sex'\n  | 'tel'\n  | 'tel-country-code'\n  | 'tel-national'\n  | 'tel-area-code'\n  | 'tel-local'\n  | 'tel-extension'\n  | 'impp'\n  | 'url'\n  | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderRadius?: BorderRadius;\n  font?: string;\n  customPalette?: CustomPalette;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomPalette {\n  text?: {\n    primary?: string;\n    secondary?: string;\n    subtle?: string;\n    inverted?: string;\n    error?: string;\n  };\n  modal?: {\n    surface?: {\n      main?: string;\n      footer?: string;\n    };\n    border?: string;\n  };\n  input?: {\n    surface?: {\n      disabled?: string;\n      default?: string;\n    };\n    border?: {\n      placeholder?: string;\n      active?: string;\n      error?: string;\n    };\n  };\n  tileButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n    };\n    border?: string;\n  };\n  primaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  secondaryButton?: {\n    surface?: {\n      default?: string;\n      hover?: string;\n      pressed?: string;\n      disabled?: string;\n    };\n    border?: {\n      default?: string;\n      disabled?: string;\n    };\n    outline?: string;\n  };\n  divider?: string;\n  spinner?: {\n    path?: string;\n    circle?: string;\n  };\n  pill?: {\n    text?: string;\n    container?: {\n      background?: string;\n      border?: string;\n    };\n  };\n  progressIndicator?: {\n    active?: string;\n    next?: string;\n    previous?: string;\n  };\n  qr?: {\n    fill?: string;\n    background?: string;\n    border?: string;\n  };\n  slideButton?: {\n    slider?: {\n      background?: string;\n      border?: string;\n      text?: string;\n      container?: {\n        start?: {\n          background?: string;\n          border?: string;\n        };\n        end?: {\n          background?: string;\n          border?: string;\n        };\n      };\n    };\n    start?: {\n      text?: string;\n    };\n    end?: {\n      text?: string;\n    };\n  };\n  alert?: {\n    surface?: {\n      error?: string;\n    };\n    border?: {\n      error?: string;\n    };\n  };\n}\n"]}

package/dist/collection/utils/media.js

@@ -0,0 +1,18 @@
+export const SIZE_TO_MEDIA = {
+    xs: '(min-width: 0px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+};
+export const matchBreakpoint = (breakpoint) => {
+    if (breakpoint === undefined || breakpoint === '') {
+        return true;
+    }
+    if (window.matchMedia) {
+        const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+        return window.matchMedia(mediaQuery).matches;
+    }
+    return false;
+};
+//# sourceMappingURL=media.js.map

package/dist/collection/utils/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","sourceRoot":"","sources":["../../../src/utils/media.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAQ;IAChC,EAAE,EAAE,kBAAkB;IACtB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,qBAAqB;CAC1B,CAAC;AAKF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,UAA8B,EAAE,EAAE;IAChE,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,EAAE,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAK,MAAc,CAAC,UAAU,EAAE,CAAC;QAC/B,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["export const SIZE_TO_MEDIA: any = {\n  xs: '(min-width: 0px)',\n  sm: '(min-width: 576px)',\n  md: '(min-width: 768px)',\n  lg: '(min-width: 992px)',\n  xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string | undefined) => {\n  if (breakpoint === undefined || breakpoint === '') {\n    return true;\n  }\n  if ((window as any).matchMedia) {\n    const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n    return window.matchMedia(mediaQuery).matches;\n  }\n  return false;\n};\n"]}

package/dist/collection/utils/theme/generateBorderRadii.js

@@ -0,0 +1,56 @@
+export const generateBorderRadii = ({ borderRadius }) => {
+    if (!Boolean(borderRadius)) {
+        return;
+    }
+    let smallRadius = 8;
+    let mediumRadius = 16;
+    let largeRadius = 24;
+    const fullRadius = 1000;
+    let isFull = false;
+    let isNone = false;
+    switch (borderRadius) {
+        case 'none': {
+            isNone = true;
+            smallRadius = 0;
+            mediumRadius = 0;
+            largeRadius = 0;
+            break;
+        }
+        case 'xs': {
+            smallRadius = 4;
+            mediumRadius = 12;
+            largeRadius = 20;
+            break;
+        }
+        case 'md': {
+            smallRadius = 12;
+            mediumRadius = 20;
+            largeRadius = 28;
+            break;
+        }
+        case 'lg': {
+            smallRadius = 16;
+            mediumRadius = 24;
+            largeRadius = 32;
+            break;
+        }
+        case 'full': {
+            smallRadius = 16;
+            mediumRadius = 24;
+            largeRadius = 32;
+            isFull = true;
+            break;
+        }
+    }
+    document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);
+    document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);
+};
+//# sourceMappingURL=generateBorderRadii.js.map

package/dist/collection/utils/theme/generateBorderRadii.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAA+B,EAAE,EAAE;IACnF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC3B,OAAO;IACT,CAAC;IAED,IAAI,WAAW,GAAG,CAAC,CAAC;IACpB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,MAAM,UAAU,GAAG,IAAI,CAAC;IACxB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,MAAM,GAAG,KAAK,CAAC;IAEnB,QAAQ,YAAY,EAAE,CAAC;QACrB,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,MAAM,GAAG,IAAI,CAAC;YACd,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,CAAC,CAAC;YACjB,WAAW,GAAG,CAAC,CAAC;YAChB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,WAAW,GAAG,CAAC,CAAC;YAChB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,IAAI,CAAC,CAAC,CAAC;YACV,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM;QACR,CAAC;QACD,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,WAAW,GAAG,EAAE,CAAC;YACjB,YAAY,GAAG,EAAE,CAAC;YAClB,WAAW,GAAG,EAAE,CAAC;YACjB,MAAM,GAAG,IAAI,CAAC;YACd,MAAM;QACR,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IACnH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC7F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAClH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAC5H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,uCAAuC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;IAC9H,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IACnG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,YAAY,IAAI,CAAC,CAAC;IAC9F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC;IACxG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;IAC/F,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,WAAW,IAAI,CAAC,CAAC;AAClG,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateBorderRadii = ({ borderRadius }: Pick<Theme, 'borderRadius'>) => {\n  if (!Boolean(borderRadius)) {\n    return;\n  }\n\n  let smallRadius = 8;\n  let mediumRadius = 16;\n  let largeRadius = 24;\n  const fullRadius = 1000;\n  let isFull = false;\n  let isNone = false;\n\n  switch (borderRadius) {\n    case 'none': {\n      isNone = true;\n      smallRadius = 0;\n      mediumRadius = 0;\n      largeRadius = 0;\n      break;\n    }\n    case 'xs': {\n      smallRadius = 4;\n      mediumRadius = 12;\n      largeRadius = 20;\n      break;\n    }\n    case 'md': {\n      smallRadius = 12;\n      mediumRadius = 20;\n      largeRadius = 28;\n      break;\n    }\n    case 'lg': {\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      break;\n    }\n    case 'full': {\n      smallRadius = 16;\n      mediumRadius = 24;\n      largeRadius = 32;\n      isFull = true;\n      break;\n    }\n  }\n\n  document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);\n  document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);\n};\n"]}

package/dist/collection/utils/theme/generateFont.js

@@ -0,0 +1,7 @@
+export const generateFont = ({ font }) => {
+    if (!Boolean(font)) {
+        return;
+    }
+    document.documentElement.style.setProperty('--cpsl-default-font', font);
+};
+//# sourceMappingURL=generateFont.js.map

package/dist/collection/utils/theme/generateFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateFont.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateFont.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE;IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACnB,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateFont = ({ font }: Pick<Theme, 'font'>) => {\n  if (!Boolean(font)) {\n    return;\n  }\n\n  document.documentElement.style.setProperty('--cpsl-default-font', font);\n};\n"]}

package/dist/collection/utils/theme/generatePalette.js

@@ -0,0 +1,46 @@
+import { mix, readableColorIsBlack } from "color2k";
+import { getCssColors, isColor } from "./utils";
+import { DEFAULT_THEME } from "../../constants";
+const MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];
+export const generatePalette = ({ foregroundColor, backgroundColor, customPalette }) => {
+    if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {
+        foregroundColor = DEFAULT_THEME.foregroundColor;
+    }
+    if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {
+        backgroundColor = DEFAULT_THEME.backgroundColor;
+    }
+    const isDarkBackground = !readableColorIsBlack(backgroundColor);
+    const palette = {
+        foregroundColors: [],
+        backgroundColors: [],
+        isDarkBackground,
+    };
+    const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';
+    const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';
+    MIXES.forEach(value => {
+        palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));
+        palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));
+    });
+    document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);
+    document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);
+    document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);
+    document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);
+    document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);
+    document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);
+    document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);
+    document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);
+    document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);
+    if (Boolean(customPalette)) {
+        const cssColorVars = getCssColors(customPalette);
+        Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
+    }
+    return palette;
+};
+//# sourceMappingURL=generatePalette.js.map

package/dist/collection/utils/theme/generatePalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generatePalette.js","sourceRoot":"","sources":["../../../../src/utils/theme/generatePalette.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColorIsBlack } from 'color2k';\nimport { Theme } from '../../interface';\nimport { getCssColors, isColor } from './utils';\nimport { DEFAULT_THEME } from '../../constants';\n\nexport type Palette = {\n  foregroundColors: string[];\n  backgroundColors: string[];\n  isDarkBackground: boolean;\n};\n\nconst MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];\n\nexport const generatePalette = ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>): Palette => {\n  if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {\n    foregroundColor = DEFAULT_THEME.foregroundColor;\n  }\n  if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {\n    backgroundColor = DEFAULT_THEME.backgroundColor;\n  }\n\n  const isDarkBackground = !readableColorIsBlack(backgroundColor);\n\n  const palette: Palette = {\n    foregroundColors: [],\n    backgroundColors: [],\n    isDarkBackground,\n  };\n\n  const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';\n  const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';\n\n  MIXES.forEach(value => {\n    palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));\n    palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));\n  });\n\n  // BACKGROUND\n  document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);\n  document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);\n  document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);\n  document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);\n  document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);\n  document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);\n  document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);\n  document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);\n\n  // FOREGROUND\n  document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);\n  document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);\n\n  if (Boolean(customPalette)) {\n    const cssColorVars = getCssColors(customPalette);\n    Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n  }\n\n  return palette;\n};\n"]}

package/dist/collection/utils/theme/generateTheme.js

@@ -0,0 +1,12 @@
+import { DEFAULT_THEME } from "../../constants";
+import { generateBorderRadii } from "./generateBorderRadii";
+import { generateFont } from "./generateFont";
+import { generatePalette } from "./generatePalette";
+const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius }) => {
+    const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
+    generateFont({ font });
+    generateBorderRadii({ borderRadius });
+    return palette.isDarkBackground;
+};
+export default generateTheme;
+//# sourceMappingURL=generateTheme.js.map

package/dist/collection/utils/theme/generateTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,aAAa,GAAG,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC,eAAe,EAAE,eAAe,GAAG,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAS,EAAW,EAAE;IAChL,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEvB,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { DEFAULT_THEME } from '../../constants';\nimport { Theme } from '../../interface';\nimport { generateBorderRadii } from './generateBorderRadii';\nimport { generateFont } from './generateFont';\nimport { generatePalette } from './generatePalette';\n\n/**\n * Generates css theme variables.\n * @returns @boolean Whether background is dark or not.\n */\nconst generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius }: Theme): boolean => {\n  const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n  generateFont({ font });\n\n  generateBorderRadii({ borderRadius });\n\n  return palette.isDarkBackground;\n};\n\nexport default generateTheme;\n"]}

package/dist/collection/utils/theme/utils.js

@@ -0,0 +1,21 @@
+export const isColor = strColor => {
+    const s = new Option().style;
+    s.color = strColor;
+    return s.color !== '';
+};
+const toKebabCase = (pascal) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();
+const buildVars = (prev, obj) => {
+    let resp = {};
+    for (const k in obj) {
+        const name = `${prev}-${toKebabCase(k)}`;
+        if (typeof obj[k] === 'object' && obj[k] !== null) {
+            resp = Object.assign(Object.assign({}, resp), buildVars(name, obj[k]));
+        }
+        else {
+            resp[name] = obj[k];
+        }
+    }
+    return resp;
+};
+export const getCssColors = (customPalette) => buildVars('--cpsl-color', customPalette);
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/theme/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE;IAChC,MAAM,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAGpG,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,GAAQ,EAA2B,EAAE;IACpE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAClD,IAAI,mCAAQ,IAAI,GAAK,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAA4B,EAA2B,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { CustomPalette } from '../../interface';\n\nexport const isColor = strColor => {\n  const s = new Option().style;\n  s.color = strColor;\n  return s.color !== '';\n};\n\nconst toKebabCase = (pascal: string) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// This function handles arrays and objects\nconst buildVars = (prev: string, obj: any): { [k: string]: string } => {\n  let resp = {};\n\n  for (const k in obj) {\n    const name = `${prev}-${toKebabCase(k)}`;\n    if (typeof obj[k] === 'object' && obj[k] !== null) {\n      resp = { ...resp, ...buildVars(name, obj[k]) };\n    } else {\n      resp[name] = obj[k];\n    }\n  }\n\n  return resp;\n};\n\nexport const getCssColors = (customPalette: CustomPalette): { [k: string]: string } => buildVars('--cpsl-color', customPalette);\n"]}

package/dist/esm/_commonjsHelpers-1789f0cf.js

@@ -0,0 +1,9 @@
+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;
+}
+
+export { commonjsGlobal as c, getDefaultExportFromCjs as g };
+
+//# sourceMappingURL=_commonjsHelpers-1789f0cf.js.map

package/dist/esm/_commonjsHelpers-1789f0cf.js.map

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