@charde/core 0.0.4 → 0.0.5

package/dist/collection/components/generated/chardes-input-field-wrapper.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * Input Field Wrapper
+ * Auto-generated from Charisol Design System
+ */
+export class InputFieldWrapper {
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["w-full relative", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '39d9c5daba52b94028e5769d64b7911996e7f0a1', class: cls, style: sty }, h("div", { key: '4ba0716f5b697303abdf36fd07c110c926e52546', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: '7ca519c99b252243cfbd3a689d951ed4522db124', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-gray-500"><path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" /><path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" /></svg>` })), h("input", { key: '302d90355c48670452e8a60d2f970c454048ea3e', class: "w-full px-4 py-2 bg-white text-gray-900 border border-gray-300 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 pl-12", type: "email", placeholder: "you@example.com", id: "email-input" })));
+    }
+    static get is() { return "chardes-input-field-wrapper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input-field-wrapper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input-field-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-input-helper.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-input-helper.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+/**
+ * Input Helper Text
+ * Auto-generated from Charisol Design System
+ */
+export class InputHelper {
+    customClass;
+    customStyle;
+    text;
+    render() {
+        const cls = ["text-xs text-gray-500 mt-1", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("p", { key: 'f2c9aac445ed175a3b215009c65ae141a5c75352', class: cls, style: sty }, this.text || "We'll never share your email with anyone else."));
+    }
+    static get is() { return "chardes-input-helper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input-helper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input-helper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-input-icon.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-input-icon.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * Input Icon
+ * Auto-generated from Charisol Design System
+ */
+export class InputIcon {
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'a130963c831b0b7e61d4497a6541af966773f0fb', class: cls, style: sty }, h("span", { key: '9c26db7532a74b8639d9fa9278bf6b8cda6c5775', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-gray-500"><path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" /><path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" /></svg>` })));
+    }
+    static get is() { return "chardes-input-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-input-label.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-input-label.js

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+/**
+ * Input Label
+ * Auto-generated from Charisol Design System
+ */
+export class InputLabel {
+    customClass;
+    customStyle;
+    text;
+    htmlFor;
+    render() {
+        const cls = ["text-sm font-semibold text-gray-700 mb-1", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("label", { key: 'f358625682e56e3faf75b9d26e4f081815bf4ef8', class: cls, htmlFor: this.htmlFor || "email-input", style: sty }, this.text || "Email Address"));
+    }
+    static get is() { return "chardes-input-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input-label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "htmlFor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-for"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-input-states.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-input-states.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * Input State Examples
+ * Auto-generated from Charisol Design System
+ */
+export class InputStates {
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["grid grid-cols-2 gap-4 mt-6", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'd744bc0a263cf0b1b1e8be122288906e24d48666', class: cls, style: sty }, h("div", { key: '7399e89b4026209d129126d3cb9f26ae36c532c1', class: "flex flex-col space-y-2" }, h("label", { key: '4404655c661fa62242e3810545522b0000e6d2ba', class: "text-sm font-semibold text-red-600", htmlFor: "error-input" }, "Password"), h("div", { key: 'a244bc7dfc7392296ab5fc3e07ea0200fcfe590b', class: "w-full relative" }, h("div", { key: '247d643fc4117d96587a9826ced74d7eaa697390', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: '32c7b98e66332b1c9f2f5c864b61e580def586cb', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-red-600"><path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd" /></svg>` })), h("input", { key: 'f9033e7c84c3d3c7383603a737c1ac4abc91fb19', class: "w-full px-4 py-2 bg-white text-gray-900 border border-red-500 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/20 pl-12", type: "password", id: "error-input" })), h("p", { key: 'f123c49e0c383b1af61e7f53969f33686277049a', class: "text-xs text-red-600" }, "Password must be at least 8 characters")), h("div", { key: '75646410e477a0ea185c72146b0b0cdfce15426c', class: "flex flex-col space-y-2" }, h("label", { key: '0520f0ffedc5ad94d7c8a16aae03e49ac99f802c', class: "text-sm font-semibold text-gray-700", htmlFor: "success-input" }, "Username"), h("div", { key: '2fd8110dcf1517789226c002691a3dbc0aa9539f', class: "w-full relative" }, h("div", { key: 'a6a2e5daa3928c14949b9ea1c039d3a0d08bcba3', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'e444b15017b79491dadcbd22ddb1c5c19a941972', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-green-600"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /></svg>` })), h("input", { key: '6b7b3ae37157c26df52effa9ccd1bb96eb578ea7', class: "w-full px-4 py-2 bg-white text-gray-900 border border-green-600 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none focus:border-green-600 focus:ring-2 focus:ring-green-500/20 pl-12", type: "text", id: "success-input" })), h("p", { key: 'f3865e17e8a81dc839e3a1a192a452dc1db72c74', class: "text-xs text-green-600" }, "Username is available"))));
+    }
+    static get is() { return "chardes-input-states"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input-states.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input-states.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-input-wrapper.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-input-wrapper.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * Input Wrapper
+ * Auto-generated from Charisol Design System
+ */
+export class InputWrapper {
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["w-full max-w-md", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '6a2b757113c52a3ea23d5da27c51f3cef439c308', class: cls, style: sty }, h("label", { key: '5d88e7ad2441e989a3156a6aa07610bdda22176a', class: "text-sm font-semibold text-gray-700 mb-1", htmlFor: "email-input" }, "Email Address"), h("div", { key: 'fc8344818219bdb983872375908ac5a0e888e5a6', class: "w-full relative" }, h("div", { key: 'f693a557b53498230ee4a21bfb7424b6dd82a95c', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'c7ddb09871562f54e9d7da9cfc8e777d89a7f404', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-gray-500"><path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" /><path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" /></svg>` })), h("input", { key: '798887a70dc85b5e28b0495563411b5485f53cb0', class: "w-full px-4 py-2 bg-white text-gray-900 border border-gray-300 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 pl-12", type: "email", placeholder: "you@example.com", id: "email-input" })), h("p", { key: 'df76844285ee203b79b6f438cd8228e0e0a14bb5', class: "text-xs text-gray-500 mt-1" }, "We'll never share your email with anyone else."), h("div", { key: 'aacd4c47493c2c370c8aeb3319592e8ca6cf48e6', class: "grid grid-cols-2 gap-4 mt-6" }, h("div", { key: '0727763ad4f0cc755b9e4fd9990174dbb484da1a', class: "flex flex-col space-y-2" }, h("label", { key: 'd6e6658e600b6897d54a198c765ba34917729afb', class: "text-sm font-semibold text-red-600", htmlFor: "error-input" }, "Password"), h("div", { key: 'df145f553afffb521c0dfcec53fd643a1d42d085', class: "w-full relative" }, h("div", { key: '9a5cbd2a6b211aa8b1fa957cd39842d3468516cc', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'fe4263f1f0a9973d61ab13209589b9de3876fb49', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-red-600"><path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd" /></svg>` })), h("input", { key: '26fd673891cb6515feab15780655866ee3f54c34', class: "w-full px-4 py-2 bg-white text-gray-900 border border-red-500 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/20 pl-12", type: "password", id: "error-input" })), h("p", { key: '22de99f7f8f35e371e098eadb33305f44057c1ec', class: "text-xs text-red-600" }, "Password must be at least 8 characters")), h("div", { key: '803fb1a761218045ff2dc999775a3adbe9cd1069', class: "flex flex-col space-y-2" }, h("label", { key: 'b53baeadf84d4e778f53b0cfb7b77db766f9e093', class: "text-sm font-semibold text-gray-700", htmlFor: "success-input" }, "Username"), h("div", { key: '4a8cd62440a5ecc35b15da36881a658f20f5471a', class: "w-full relative" }, h("div", { key: '90a0a9641f372598a69f083b9187500fe84303d2', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'bcec5a5e281ece1d71346d992613cfb8fa7806f5', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-green-600"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /></svg>` })), h("input", { key: '3af3eac7278578cbca6b5c458d494efdb2e39278', class: "w-full px-4 py-2 bg-white text-gray-900 border border-green-600 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none focus:border-green-600 focus:ring-2 focus:ring-green-500/20 pl-12", type: "text", id: "success-input" })), h("p", { key: 'd0b6642b5fa5776bc88f7925cfc193bc01e098f6', class: "text-xs text-green-600" }, "Username is available")))));
+    }
+    static get is() { return "chardes-input-wrapper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input-wrapper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-input.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-input.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * Input
+ * Auto-generated from Charisol Design System
+ */
+export class Input {
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["font-sans", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'a0d74cc3d1b8c94eaf386bcd6445f28dd5a7dbdd', class: cls, style: sty }, h("div", { key: '0ba5c719dbb1c76fcacf996ee171599d2c01bd71', class: "w-full max-w-md" }, h("label", { key: '253421f5fd37083993e19e2f8dca7603bcf57088', class: "text-sm font-semibold text-gray-700 mb-1", htmlFor: "email-input" }, "Email Address"), h("div", { key: '4f7f86f91a3fb4afca7f3e9b5919851b2b6d7675', class: "w-full relative" }, h("div", { key: '4e060b31fe4331f62c29c308ef3426a982b5b2c5', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'e537136294fc56e85d86cc14d1c3f38e3641faae', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-gray-500"><path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" /><path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" /></svg>` })), h("input", { key: 'c435cfa6fba215619161981d12ea26d777e701d5', class: "w-full px-4 py-2 bg-white text-gray-900 border border-gray-300 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 pl-12", type: "email", placeholder: "you@example.com", id: "email-input" })), h("p", { key: 'da73d3829e0ee8d5f9a3f9e7dc2ab689d0b87c92', class: "text-xs text-gray-500 mt-1" }, "We'll never share your email with anyone else."), h("div", { key: 'bb88145e878fad448c977b8aec238ac00c0ce76f', class: "grid grid-cols-2 gap-4 mt-6" }, h("div", { key: '871ed7e4744a211e75354ddcf34a08f320a36cbf', class: "flex flex-col space-y-2" }, h("label", { key: '7854279a9a493b4ffeb1a468c8c5c59ed0e04aae', class: "text-sm font-semibold text-red-600", htmlFor: "error-input" }, "Password"), h("div", { key: '71f265cc7f990b3ee099398dabb785c11eb55ce4', class: "w-full relative" }, h("div", { key: '5f1d8e62a72892693b76173fb4374f806be411d8', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: '794c6f9f8b9dbd58c6134b73addb8fc7fc00d841', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-red-600"><path fill-rule="evenodd" d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z" clip-rule="evenodd" /></svg>` })), h("input", { key: '8ca01b9b897d893410bc39f39ee9bde3c1b20ea9', class: "w-full px-4 py-2 bg-white text-gray-900 border border-red-500 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/20 pl-12", type: "password", id: "error-input" })), h("p", { key: '0246d99be0669e46c74c1fbc2d1728b445aca26d', class: "text-xs text-red-600" }, "Password must be at least 8 characters")), h("div", { key: '913c8cc7eb8b0b98172428e42e7776566844a3fc', class: "flex flex-col space-y-2" }, h("label", { key: '7684966526eca30f54364cbf9ce1c940f6b87de8', class: "text-sm font-semibold text-gray-700", htmlFor: "success-input" }, "Username"), h("div", { key: 'adc6c799c1953e840dad7b83bc7f6488ccb0e626', class: "w-full relative" }, h("div", { key: 'ed51959249c60bb3b436e8b7b658c247993cf806', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'da0deeb02d228d1fa7d59b2027f391bd6e80cf21', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="text-green-600"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /></svg>` })), h("input", { key: '2844105957ff1b0f639231c42400915bf2851dfd', class: "w-full px-4 py-2 bg-white text-gray-900 border border-green-600 rounded-lg font-sans text-base leading-relaxed transition-all duration-200 outline-none focus:border-green-600 focus:ring-2 focus:ring-green-500/20 pl-12", type: "text", id: "success-input" })), h("p", { key: 'd1788a06df42376fc611565ac0e7a39469f4cda4', class: "text-xs text-green-600" }, "Username is available"))))));
+    }
+    static get is() { return "chardes-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-modal-body.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */

package/dist/collection/components/generated/chardes-modal-body.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * Modal Body
+ * Auto-generated from Charisol Design System
+ */
+export class ModalBody {
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["p-6", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '11d996c68aab7a8f40a913798798223f00e3077a', class: cls, style: sty }, h("p", { key: '94d00b7f56212d124c23a5249db07d3f74066726', class: "text-gray-700 leading-relaxed" }, "This is a beautiful modal component with interactive elements. You can click the close button, interact with form elements, and see hover effects in action."), h("div", { key: '6713f0e55daea6af8115c23e58861468e7a419aa', class: "mt-6 space-y-4" }, h("div", { key: 'd26739c6ca689a3b629db201bf5318177e79a685' }, h("label", { key: 'fafa49876be255f195f8375fbc49c3ad59b43f84', class: "block text-sm font-medium text-gray-700 mb-2", htmlFor: "modal-email" }, "Email Address"), h("input", { key: '3346d0d8c8096c03b64435ae0147353a0e4625c1', class: "w-full px-3 py-2 border border-gray-300 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400", type: "email", placeholder: "you@example.com", id: "modal-email" })))));
+    }
+    static get is() { return "chardes-modal-body"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chardes-modal-body.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chardes-modal-body.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            }
+        };
+    }
+}

package/dist/collection/components/generated/chardes-modal-cancel-button.css

@@ -0,0 +1 @@
+/* Styles from global utilities.css */