@stencil-kit/core 0.0.1 → 0.0.2

package/dist/collection/components/my-alert/my-alert.js

@@ -0,0 +1,122 @@
+import { h } from "@stencil/core";
+export class MyAlert {
+    type = 'info';
+    alertTitle = '';
+    dismissible = false;
+    dismissed = false;
+    myDismiss;
+    icons = {
+        success: '✓',
+        warning: '⚠',
+        error: '✕',
+        info: 'ℹ',
+    };
+    dismiss() {
+        this.dismissed = true;
+        this.myDismiss.emit();
+    }
+    render() {
+        if (this.dismissed)
+            return null;
+        return (h("div", { class: `alert alert--${this.type}`, role: "alert" }, h("span", { class: "alert-icon" }, this.icons[this.type]), h("div", { class: "alert-content" }, this.alertTitle && h("strong", { class: "alert-title" }, this.alertTitle), h("span", { class: "alert-message" }, h("slot", null))), this.dismissible && (h("button", { class: "alert-dismiss", onClick: () => this.dismiss() }, "\u2715"))));
+    }
+    static get is() { return "my-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'warning' | 'error' | 'info'",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'info'"
+            },
+            "alertTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alert-title",
+                "defaultValue": "''"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dismissed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "myDismiss",
+                "name": "myDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/my-dropdown/my-dropdown.css

@@ -0,0 +1,111 @@
+:host {
+  display: block;
+}
+
+.dropdown-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.dropdown-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-trigger {
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 15px;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  background: #fff;
+  color: #111827;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.dropdown-trigger:hover:not(:disabled) {
+  border-color: #667eea;
+}
+
+.dropdown--open .dropdown-trigger {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+}
+
+.dropdown--disabled .dropdown-trigger {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.dropdown-placeholder {
+  color: #9ca3af;
+}
+
+.dropdown-arrow {
+  font-size: 11px;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 2px solid #667eea;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  z-index: 100;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.dropdown-item {
+  padding: 10px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 15px;
+  color: #111827;
+  transition: background 0.15s;
+}
+
+.dropdown-item:hover {
+  background: #f3f4f6;
+}
+
+.dropdown-item--selected {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.dropdown-item--selected:hover {
+  background: linear-gradient(135deg, #5568d3 0%, #63408a 100%);
+}
+
+.dropdown-wrapper--error .dropdown-trigger {
+  border-color: #ef4444;
+}
+
+.dropdown-error {
+  font-size: 13px;
+  color: #ef4444;
+}

package/dist/collection/components/my-dropdown/my-dropdown.js

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+export class MyDropdown {
+    options = [];
+    value = '';
+    placeholder = 'Select an option';
+    label = '';
+    disabled = false;
+    error = '';
+    isOpen = false;
+    myChange;
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get selectedLabel() {
+        const found = this.parsedOptions.find(o => o.value === this.value);
+        return found ? found.label : this.placeholder;
+    }
+    select(value) {
+        this.myChange.emit(value);
+        this.isOpen = false;
+    }
+    render() {
+        return (h("div", { key: '2e99fe0d9bd2ee48e0827ddcb4feec85ad102b36', class: `dropdown-wrapper ${this.error ? 'dropdown-wrapper--error' : ''}` }, this.label && h("label", { key: 'c69f0dcc8c6f0cadd7e3896ebacd43a5dfdfccda', class: "dropdown-label" }, this.label), h("div", { key: '2f9e442f6a92be57ffe694dd9ec53586fbf548e0', class: `dropdown ${this.isOpen ? 'dropdown--open' : ''} ${this.disabled ? 'dropdown--disabled' : ''}` }, h("button", { key: '46d0696358cac16b51127cabb408a7290a54ea1a', class: "dropdown-trigger", disabled: this.disabled, onClick: () => !this.disabled && (this.isOpen = !this.isOpen) }, h("span", { key: '16acade80b5ff899084acbfb753ca869f9f5f237', class: !this.value ? 'dropdown-placeholder' : '' }, this.selectedLabel), h("span", { key: '426582643773176b7dbaeacc22b46b27ececa60b', class: "dropdown-arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (h("ul", { key: 'f1cbe6f1af273ed5b3437985ecb5bd1ec73ca318', class: "dropdown-menu" }, this.parsedOptions.map(option => (h("li", { class: `dropdown-item ${option.value === this.value ? 'dropdown-item--selected' : ''}`, onClick: () => this.select(option.value) }, option.label)))))), this.error && h("span", { key: 'd14cac844bb832778afa7592869eb96dcfeb10a2', class: "dropdown-error" }, this.error)));
+    }
+    static get is() { return "my-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[] | string",
+                    "resolved": "DropdownOption[] | string",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/anis/Sites/designsystem/my-monorepo/packages/stencil-library/src/components/my-dropdown/my-dropdown.tsx",
+                            "id": "src/components/my-dropdown/my-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select an option'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "myChange",
+                "name": "myChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/my-input/my-input.css

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+}
+
+.input-required {
+  color: #ef4444;
+  margin-left: 2px;
+}
+
+.input-field {
+  padding: 10px 14px;
+  font-size: 15px;
+  border: 2px solid #d1d5db;
+  border-radius: 8px;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  background: #fff;
+  color: #111827;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.input-field:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+}
+
+.input-field:disabled {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.input-wrapper--error .input-field {
+  border-color: #ef4444;
+}
+
+.input-wrapper--error .input-field:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+
+.input-error {
+  font-size: 13px;
+  color: #ef4444;
+}

package/dist/collection/components/my-input/my-input.js

@@ -0,0 +1,204 @@
+import { h } from "@stencil/core";
+export class MyInput {
+    label = '';
+    placeholder = '';
+    value = '';
+    type = 'text';
+    error = '';
+    disabled = false;
+    required = false;
+    myChange;
+    myBlur;
+    render() {
+        return (h("div", { key: '9ee947b792e9829d2aa329b5314ea61515e460b1', class: `input-wrapper ${this.error ? 'input-wrapper--error' : ''}` }, this.label && (h("label", { key: 'f0e912275821438feb4518ed2618a49971625470', class: "input-label" }, this.label, this.required && h("span", { key: 'c7033d3974315c8fd4a25b7f408f263852b47920', class: "input-required" }, "*"))), h("input", { key: 'e5858925769f01801051fe54da86bd805b3594e2', class: "input-field", type: this.type, placeholder: this.placeholder, value: this.value, disabled: this.disabled, onInput: (e) => this.myChange.emit(e.target.value), onBlur: () => this.myBlur.emit() }), this.error && h("span", { key: 'f07db0cbdc2d9d91a48ea3cb67e74cc56f039ee6', class: "input-error" }, this.error)));
+    }
+    static get is() { return "my-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'number' | 'tel'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"tel\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "myChange",
+                "name": "myChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "myBlur",
+                "name": "myBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}