jebamo 0.0.1 → 0.0.2

package/dist/collection/components/je-color/je-color.css

@@ -0,0 +1,39 @@
+:host {
+  display: inline-block;
+}
+
+:host([color=primary]), :host([color=auto][primary]) {
+  color: var(--je-primary-500);
+}
+
+:host([color=error]), :host([color=auto][error]) {
+  color: var(--je-error-500);
+}
+
+:host([color=secondary]), :host([color=auto][secondary]) {
+  color: var(--je-secondary-500);
+}
+
+:host([color=tertiary]), :host([color=auto][tertiary]) {
+  color: var(--je-tertiary-500);
+}
+
+:host([color=warning]), :host([color=auto][warning]) {
+  color: var(--je-warning-500);
+}
+
+:host([color=success]), :host([color=auto][success]) {
+  color: var(--je-success-500);
+}
+
+:host([color=medium]), :host([color=auto][medium]) {
+  color: var(--je-medium-500);
+}
+
+:host([color=light]), :host([color=auto][light]) {
+  color: var(--je-medium-100);
+}
+
+:host([color=dark]), :host([color=auto][dark]) {
+  color: var(--je-medium-850);
+}

package/dist/collection/components/je-color/je-color.js

@@ -0,0 +1,116 @@
+import { Host, h } from "@stencil/core";
+export class JeColor {
+    constructor() {
+        this.color = 'primary';
+        this.lightModeColor = 'dark';
+        this.darkModeColor = 'light';
+    }
+    handleThemeChange(e) {
+        if (this.color == 'auto') {
+            this.el.toggleAttribute(this.lightModeColor, e.detail == 'light');
+            this.el.toggleAttribute(this.darkModeColor, e.detail == 'dark');
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f282f9cc373d41672e2f89d28ca63ae2eb68bead' }, h("slot", { key: '595b55df77aa90cd06c63e96a3eb2f2a1a5d300f' })));
+    }
+    static get is() { return "je-color"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-color.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-color.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color | 'auto'",
+                    "resolved": "\"auto\" | \"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Predefined colors. Auto will switch between light and dark based on the closest je-page's theme."
+                },
+                "attribute": "color",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            },
+            "lightModeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides what the light mode color will be when color is \"auto\"."
+                },
+                "attribute": "light-mode-color",
+                "reflect": false,
+                "defaultValue": "'dark'"
+            },
+            "darkModeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "\"dark\" | \"error\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides what the dark mode color will be when color is \"auto\"."
+                },
+                "attribute": "dark-mode-color",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-color.js.map

package/dist/collection/components/je-color/je-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-color.js","sourceRoot":"","sources":["../../../src/components/je-color/je-color.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ1E,MAAM,OAAO,OAAO;;qBAI+B,SAAS;8BAG1B,MAAM;6BAGP,OAAO;;IAGtC,iBAAiB,CAAC,CAAgC;QAChD,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,IAAI,OAAO,CAAC,CAAA;YACjE,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;QACjE,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Listen, Prop, h, Element } from '@stencil/core';\nimport { Color } from '../../components';\n\n@Component({\n  tag: 'je-color',\n  styleUrl: 'je-color.scss',\n  shadow: true,\n})\nexport class JeColor {\n  @Element() el: HTMLJeColorElement;\n\n  /** Predefined colors. Auto will switch between light and dark based on the closest je-page's theme. */\n  @Prop({ reflect: true }) color: Color | 'auto' = 'primary';\n\n  /** Overrides what the light mode color will be when color is \"auto\". */\n  @Prop() lightModeColor: Color = 'dark';\n\n  /** Overrides what the dark mode color will be when color is \"auto\". */\n  @Prop() darkModeColor: Color = 'light';\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    if (this.color == 'auto') {\n      this.el.toggleAttribute(this.lightModeColor, e.detail == 'light')\n      this.el.toggleAttribute(this.darkModeColor, e.detail == 'dark')\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-datepicker/je-datepicker.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  padding: var(--je-spacing-xs);
+  box-sizing: border-box;
+}
+
+je-button.day {
+  --je-button-min-width: 20px;
+  --je-button-height: 20px;
+  --je-button-inline-padding: 0px;
+}
+je-button.day::part(inner-button) {
+  font-weight: 400;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.header div {
+  user-select: none;
+  display: flex;
+  cursor: pointer;
+  flex: 1;
+  align-items: center;
+}
+
+.weekdays-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+  margin-bottom: 8px;
+}
+.weekdays-grid div {
+  height: 20px;
+  font-size: 1em;
+  font-weight: 400;
+  color: var(--je-medium-600);
+  text-align: center;
+  align-content: center;
+}
+
+.days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+}
+
+je-icon {
+  transition: transform 250ms ease;
+}
+
+je-icon.open {
+  transform: rotate(180deg);
+}

package/dist/collection/components/je-datepicker/je-datepicker.js

@@ -0,0 +1,129 @@
+import { Host, h } from "@stencil/core";
+import { startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths, isSameDay, isToday, format, getDay } from "date-fns";
+export class JeDatepicker {
+    constructor() {
+        this.nextMonth = () => {
+            this.currentDate = addMonths(this.currentDate, 1);
+        };
+        this.prevMonth = () => {
+            this.currentDate = subMonths(this.currentDate, 1);
+        };
+        this.currentDate = new Date();
+        this.value = undefined;
+        this.isDark = false;
+        this.monthYearPicker = false;
+    }
+    handleThemeChange(e) {
+        this.isDark = e.detail === 'dark';
+    }
+    valueChangeHandler() {
+        this.valueChange.emit(this.value ? new Date(this.value) : undefined);
+    }
+    getDaysInMonth() {
+        const start = startOfMonth(this.currentDate);
+        const end = endOfMonth(this.currentDate);
+        return eachDayOfInterval({ start, end });
+    }
+    render() {
+        const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+        const firstDayOfMonth = startOfMonth(this.currentDate);
+        const lastDayOfMonth = endOfMonth(this.currentDate);
+        const firstDayOfWeek = getDay(firstDayOfMonth);
+        const lastDayOfWeek = getDay(lastDayOfMonth);
+        const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });
+        const prevMonth = subMonths(this.currentDate, 1);
+        const prevMonthEnd = endOfMonth(prevMonth);
+        const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) => subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1)));
+        const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) => addMonths(this.currentDate, 1).setDate(i + 1));
+        return (h(Host, { key: 'ff2ec54e4e3de84b80468820efa641a2922b93cf' }, h("div", { key: '44b43c08d7dcdb90d3db8ee837fe902e804b8255', class: "header" }, h("div", { key: '34649267bbeeab302a646017714da9f00aa3503a', onClick: () => this.monthYearPicker = !this.monthYearPicker }, h("span", { key: 'f83d4b65cc03662bdd7555113a0d367f263e30f6' }, format(this.currentDate, 'MMMM yyyy')), h("je-button", { key: 'c12c79e67bb19ce76b37ff122a9aba76c33d8627', fill: 'clear', iconOnly: true }, h("je-icon", { key: '7fd6737727798a895899015a30c295913c9c9077', class: { open: this.monthYearPicker }, icon: 'expand_more' }))), h("je-button", { key: '17d319c0c3120906ce733bee52eaf31e3ecfce77', iconOnly: true, fill: 'clear', onClick: this.prevMonth }, h("je-icon", { key: 'c6c86b0c4f0360a335903a0298e39f1db9658d51', fill: true, icon: 'arrow_left' })), h("je-button", { key: '21a79c20202fd0acd26589deab5746bfdda32a3c', iconOnly: true, fill: 'clear', onClick: this.nextMonth }, h("je-icon", { key: '508587d9cd3642520f6b58d197df066da15c10ab', icon: 'arrow_right', fill: true }))), h("div", { key: 'c40de53a4277adebef8c7077af02ab4e80491aea', class: "weekdays-grid" }, daysOfWeek.map(day => h("div", null, day))), h("div", { key: '90a3fea593cd4772cfa4006180532a79264e3502', class: "days-grid" }, daysBefore.map(day => (h("je-button", { expand: true, disabled: true, color: 'medium', fill: 'clear', class: 'day' }, format(day, 'd')))), daysInMonth.map(day => {
+            const selected = this.value && isSameDay(day, this.value);
+            const today = isToday(day);
+            return (h("je-button", { expand: true, color: selected || today ? 'primary' : this.isDark ? 'light' : 'dark', fill: selected ? 'solid' : 'clear', class: 'day', onClick: () => this.value = day }, format(day, 'd')));
+        }), daysAfter.map(day => (h("je-button", { expand: true, disabled: true, color: 'medium', fill: 'clear', class: 'day' }, format(day, 'd')))))));
+    }
+    static get is() { return "je-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentDate": {},
+            "isDark": {},
+            "monthYearPicker": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Date | undefined",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChangeHandler"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-datepicker.js.map

package/dist/collection/components/je-datepicker/je-datepicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-datepicker.js","sourceRoot":"","sources":["../../../src/components/je-datepicker/je-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths, isSameDay, isToday, format, getDay } from 'date-fns';\n\n@Component({\n  tag: 'je-datepicker',\n  styleUrl: 'je-datepicker.scss',\n  shadow: true,\n})\nexport class JeDatepicker {\n  @Element() el!: HTMLJeDatepickerElement;\n  @State() currentDate = new Date();\n  @Prop({ mutable: true }) value?: Date | string;\n  @Event() valueChange: EventEmitter<Date | undefined>;\n  @State() isDark = false;\n  @State() monthYearPicker = false;\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.isDark = e.detail === 'dark';\n  }\n\n  @Watch('value')\n  valueChangeHandler() {\n    this.valueChange.emit(this.value ? new Date(this.value) : undefined);\n  }\n\n  getDaysInMonth() {\n    const start = startOfMonth(this.currentDate);\n    const end = endOfMonth(this.currentDate);\n    return eachDayOfInterval({ start, end });\n  }\n\n  nextMonth = () => {\n    this.currentDate = addMonths(this.currentDate, 1);\n  }\n\n  prevMonth = () => {\n    this.currentDate = subMonths(this.currentDate, 1);\n  }\n\n  render() {\n    const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n    const firstDayOfMonth = startOfMonth(this.currentDate);\n    const lastDayOfMonth = endOfMonth(this.currentDate);\n    const firstDayOfWeek = getDay(firstDayOfMonth);\n    const lastDayOfWeek = getDay(lastDayOfMonth);\n    const daysInMonth = eachDayOfInterval({ start: firstDayOfMonth, end: lastDayOfMonth });\n\n    const prevMonth = subMonths(this.currentDate, 1);\n    const prevMonthEnd = endOfMonth(prevMonth);\n\n    const daysBefore = Array.from({ length: firstDayOfWeek }).map((_, i) =>\n      subMonths(this.currentDate, 1).setDate(prevMonthEnd.getDate() - (firstDayOfWeek - i - 1))\n    );\n    const daysAfter = Array.from({ length: 6 - lastDayOfWeek }).map((_, i) =>\n      addMonths(this.currentDate, 1).setDate(i + 1)\n    );\n\n    return (\n      <Host>\n        <div class=\"header\">\n          <div onClick={() => this.monthYearPicker = !this.monthYearPicker}>\n            <span>{format(this.currentDate, 'MMMM yyyy')}</span>\n            <je-button fill='clear' iconOnly={true}>\n              <je-icon class={{ open: this.monthYearPicker }} icon='expand_more' />\n            </je-button>\n          </div>\n          <je-button iconOnly={true} fill='clear' onClick={this.prevMonth}>\n            <je-icon fill={true} icon='arrow_left' />\n          </je-button>\n          <je-button iconOnly={true} fill='clear' onClick={this.nextMonth}>\n            <je-icon icon='arrow_right' fill={true} />\n          </je-button>\n        </div>\n\n        <div class=\"weekdays-grid\">\n          {daysOfWeek.map(day => <div>{day}</div>)}\n        </div>\n\n        <div class=\"days-grid\">\n          {daysBefore.map(day => (\n            <je-button expand={true} disabled={true} color='medium' fill='clear' class='day'>\n              {format(day, 'd')}\n            </je-button>\n          ))}\n\n          {daysInMonth.map(day => {\n            const selected = this.value && isSameDay(day, this.value);\n            const today = isToday(day);\n            return (\n              <je-button\n                expand={true}\n                color={selected || today ? 'primary' : this.isDark ? 'light' : 'dark'}\n                fill={selected ? 'solid' : 'clear'}\n                class='day'\n                onClick={() => this.value = day}\n              >\n                {format(day, 'd')}\n              </je-button>\n            );\n          })}\n\n          {daysAfter.map(day => (\n            <je-button expand={true} disabled={true} color='medium' fill='clear' class='day'>\n              {format(day, 'd')}\n            </je-button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-details/je-details.css

@@ -0,0 +1,39 @@
+:host {
+  display: block;
+}
+
+[part=summary-container] {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  align-items: center;
+}
+
+[part=details-icon] {
+  height: 24px;
+  width: 24px;
+  transition: transform 250ms ease-in-out;
+}
+
+[part=details-container] {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: 0fr;
+  padding-top: 0;
+  opacity: 0;
+  transition: all 250ms ease-out;
+}
+
+:host([state=open]) [part=details-container] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  padding-top: var(--je-spacing);
+}
+
+:host([state=closed]) [part=details-icon] {
+  height: 24px;
+  width: 24px;
+  transform: rotate(-180deg);
+}

package/dist/collection/components/je-details/je-details.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export class JeDetails {
+    constructor() {
+        this.summary = undefined;
+        this.state = 'closed';
+    }
+    render() {
+        return (h("je-card", { key: 'f06bead6338803d66a638688e5999b5061bb8d89' }, h("div", { key: '05900c217e26e721c4f266525b79b87664fc3a43', part: 'summary-container', onClick: () => this.state = this.state == 'open' ? 'closed' : 'open' }, h("slot", { key: 'e641bb5f360cb268043e3e2dbfc0b5b147c5a8da', name: "summary" }, this.summary && h("summary", { key: '2cca006be4897431aeb8c13287d1db25d05e1295' }, this.summary)), h("div", { key: 'd77902ab93d12d79ca6dd705788a6be11badd209', part: 'details-icon' }, h("svg", { key: 'b2bcfdbc26f1b76fb21475a4cbe58b1a877a6883', xmlns: "XXXXXXXXXXXXXXXXXXXXXXXXXX", viewBox: "0 0 24 24" }, h("path", { key: '8d691bf302c104054d03a96f9a6493e4c7051083', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'de42815153c122e0a054c77ee9c752987da92cba', d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" })))), h("div", { key: '5bfe7b312601083e8855c9f23ee5a209f9468bba', part: 'details-container' }, h("div", { key: '1e6f0a4f17e44d59d8655e576b73ecc2c6c67d33', style: { overflow: 'hidden' } }, h("slot", { key: 'f4802e440f736f76f146a81149d1526b393c305f' })))));
+    }
+    static get is() { return "je-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "summary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "summary",
+                "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'open' | 'closed'",
+                    "resolved": "\"closed\" | \"open\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'closed'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=je-details.js.map

package/dist/collection/components/je-details/je-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-details.js","sourceRoot":"","sources":["../../../src/components/je-details/je-details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,SAAS;;;qBAG+C,QAAQ;;IAE3E,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,IAAI,EAAC,mBAAmB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBAChG,6DAAM,IAAI,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,IAAI,kEAAU,IAAI,CAAC,OAAO,CAAW,CAC7C;gBACP,4DAAK,IAAI,EAAC,cAAc;oBACtB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;wBACzD,6DAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;wBACrC,6DAAM,CAAC,EAAC,gDAAgD,GAAE,CACtD,CACF,CACF;YACN,4DAAK,IAAI,EAAC,mBAAmB;gBAC3B,4DAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAC;oBAC9B,8DAAO,CACH,CACF,CACE,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-details',\n  styleUrl: 'je-details.scss',\n  shadow: true,\n})\nexport class JeDetails {\n  @Element() el!: HTMLElement;\n  @Prop() summary?: string;\n  @Prop({ reflect: true, mutable: true }) state: 'open' | 'closed' = 'closed';\n\n  render() {\n    return (\n      <je-card>\n        <div part='summary-container' onClick={() => this.state = this.state == 'open' ? 'closed' : 'open' }>\n          <slot name=\"summary\">\n            {this.summary && <summary>{this.summary}</summary>}\n          </slot>\n          <div part='details-icon'>\n            <svg xmlns=\"XXXXXXXXXXXXXXXXXXXXXXXXXX\" viewBox=\"0 0 24 24\">\n              <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n              <path d=\"M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z\"/>\n            </svg>\n          </div>\n        </div>\n        <div part='details-container'>\n          <div style={{overflow: 'hidden'}}>\n            <slot/>\n          </div>\n        </div>\n      </je-card>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-divider/je-divider.css

@@ -0,0 +1,32 @@
+:host {
+  --thickness: 1px;
+  --color: var(--je-medium-500);
+  --spacing: var(--je-spacing-sm);
+  background-color: var(--color);
+}
+
+:host([spacing=sm]) {
+  --spacing: var(--je-spacing-2xs);
+}
+
+:host([spacing=lg]) {
+  --spacing: var(--je-spacing-lg);
+}
+
+:host([spacing=none]) {
+  --spacing: 0;
+}
+
+:host([type=horizontal]) {
+  display: block;
+  width: 100%;
+  height: var(--thickness);
+  margin-block: var(--spacing);
+}
+
+:host([type=vertical]) {
+  display: inline-block;
+  align-self: normal;
+  width: var(--thickness);
+  margin-inline: var(--spacing);
+}

package/dist/collection/components/je-divider/je-divider.js

@@ -0,0 +1,63 @@
+import { Host, h } from "@stencil/core";
+export class JeDivider {
+    constructor() {
+        this.type = 'horizontal';
+        this.spacing = 'md';
+    }
+    render() {
+        return h(Host, { key: 'f8db6d54b81c4d874f0e837202ea79c8bad6d328' });
+    }
+    static get is() { return "je-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'horizontal'"
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'none'",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "spacing",
+                "reflect": true,
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=je-divider.js.map

package/dist/collection/components/je-divider/je-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-divider.js","sourceRoot":"","sources":["../../../src/components/je-divider/je-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;oBACuC,YAAY;uBACP,IAAI;;IAEpE,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAE,CAAC;IACjB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-divider',\n  styleUrl: 'je-divider.scss',\n  shadow: true,\n})\nexport class JeDivider {\n  @Prop({ reflect: true }) type: 'horizontal' | 'vertical' = 'horizontal';\n  @Prop({ reflect: true }) spacing: 'sm' | 'md' | 'lg' | 'none' = 'md';\n\n  render() {\n    return <Host/>;\n  }\n}\n"]}

package/dist/collection/components/je-drawer/je-drawer.css

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+  --je-drawer-width: 500px;
+  --je-drawer-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  --je-drawer-padding: var(--je-spacing-lg, 20px);
+}
+
+.backdrop {
+  display: block;
+  position: fixed;
+  transition: all 250ms ease-in-out;
+  cursor: pointer;
+  background: var(--je-backdrop-color);
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}
+
+div[part=container] {
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: canvas;
+  color: canvastext;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: var(--je-drawer-width);
+  transition: all 250ms ease-in-out;
+  z-index: 900;
+  padding: var(--je-drawer-padding);
+}
+
+:host([state=closed]) .backdrop {
+  opacity: 0;
+}
+:host([state=closed]) div[part=container] {
+  margin-left: calc(var(--je-drawer-width) * -1);
+}
+
+:host([state=open]) .backdrop {
+  opacity: 1;
+  z-index: 899;
+}
+:host([state=open]) div[part=container] {
+  box-shadow: var(--je-drawer-shadow);
+}