@charde/core 0.0.4 → 0.0.6

package/dist/esm/chardes-input-wrapper.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesInputWrapperCss = () => ``;
+
+const InputWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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")))));
+    }
+};
+InputWrapper.style = chardesInputWrapperCss();
+
+export { InputWrapper as chardes_input_wrapper };

package/dist/esm/chardes-modal-body.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalBodyCss = () => ``;
+
+const ModalBody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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" })))));
+    }
+};
+ModalBody.style = chardesModalBodyCss();
+
+export { ModalBody as chardes_modal_body };

package/dist/esm/chardes-modal-cancel-button.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalCancelButtonCss = () => ``;
+
+const ModalCancelButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    btnType;
+    ariaLabel;
+    render() {
+        const cls = ["px-4 py-2 border border-gray-300 rounded-md text-gray-700 font-medium transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("button", { key: '84204c6eba8405d53ef3dd29f08d303e750c259e', class: cls, type: this.btnType || "button", "aria-label": this.ariaLabel || "", style: sty }, this.text || "Cancel"));
+    }
+};
+ModalCancelButton.style = chardesModalCancelButtonCss();
+
+export { ModalCancelButton as chardes_modal_cancel_button };

package/dist/esm/chardes-modal-close-button.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalCloseButtonCss = () => ``;
+
+const ModalCloseButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    btnType;
+    ariaLabel;
+    render() {
+        const cls = ["p-2 rounded-full transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("button", { key: '610d7dfa8edd1ad7ae948b6a47f5197ce3bee936', class: cls, type: this.btnType || "button", "aria-label": this.ariaLabel || "Close modal", style: sty }, h("span", { key: 'e7cfbdd755dc0c42ec119b5848bc087ad36c389b', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>` })));
+    }
+};
+ModalCloseButton.style = chardesModalCloseButtonCss();
+
+export { ModalCloseButton as chardes_modal_close_button };

package/dist/esm/chardes-modal-confirm-button.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalConfirmButtonCss = () => ``;
+
+const ModalConfirmButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    btnType;
+    ariaLabel;
+    render() {
+        const cls = ["px-4 py-2 bg-blue-600 text-white rounded-md font-medium transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("button", { key: 'd20b341190b09367363f80c2214a3573f0d787b8', class: cls, type: this.btnType || "button", "aria-label": this.ariaLabel || "", style: sty }, this.text || "Confirm"));
+    }
+};
+ModalConfirmButton.style = chardesModalConfirmButtonCss();
+
+export { ModalConfirmButton as chardes_modal_confirm_button };

package/dist/esm/chardes-modal-container.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalContainerCss = () => ``;
+
+const ModalContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["w-full max-w-md bg-white rounded-2xl shadow-lg overflow-hidden animate-in fade-in zoom-in-95 duration-300", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'c9f6be64a5a824094b6c4f576e3d94a0e1fb4256', class: cls, style: sty }, h("div", { key: '82e6a1df6bd979f33b1d72e64a9418ac8e0d9578', class: "p-6 border-b border-gray-200 flex justify-between items-center" }, h("h3", { key: '85d2f2169fa76a8ef901717d184f2d95d39eb0b7', class: "text-xl font-semibold text-gray-900" }, "Modal Title"), h("button", { key: '130d98d3268c165ae2faf0d66b7abb0fdde4736a', class: "p-2 rounded-full transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button", "aria-label": "Close modal" }, h("span", { key: '95c927b9d472113dbcc06f4971c443819d9fb949', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>` }))), h("div", { key: '5dfb90751091f704a12805ced6a7243611604e1a', class: "p-6" }, h("p", { key: 'b973913e66b1c19639dcab1bf1fc461ff7ffb345', 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: '8cea67c92bb5e080b4c5b74bd842296bdc6294c6', class: "mt-6 space-y-4" }, h("div", { key: '24e0820d827cca87c102e7d5d9adcb1faa75d424' }, h("label", { key: '8d457da0a343a4634226e597a35ec471dca73b99', class: "block text-sm font-medium text-gray-700 mb-2", htmlFor: "modal-email" }, "Email Address"), h("input", { key: '38e7e33ec6773f6a294abda03e2f26920ccba571', 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" })))), h("div", { key: '92b5e73db5caf23d5f8c59c2e6cfc0e6273d3625', class: "p-6 border-t border-gray-200 flex justify-between space-x-3" }, h("button", { key: '411f7c9c0c82e7c41a58c30f6e65f768ea2a9744', class: "px-4 py-2 border border-gray-300 rounded-md text-gray-700 font-medium transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button" }, "Cancel"), h("button", { key: '003ccccbda5228732c86b2d3fa799b9736ab0412', class: "px-4 py-2 bg-blue-600 text-white rounded-md font-medium transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button" }, "Confirm"))));
+    }
+};
+ModalContainer.style = chardesModalContainerCss();
+
+export { ModalContainer as chardes_modal_container };

package/dist/esm/chardes-modal-content.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalContentCss = () => ``;
+
+const ModalContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    render() {
+        const cls = ["text-gray-700 leading-relaxed", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("p", { key: 'f7da0a54bd72a380ace97ec804b16e041d914741', class: cls, style: sty }, this.text || "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."));
+    }
+};
+ModalContent.style = chardesModalContentCss();
+
+export { ModalContent as chardes_modal_content };

package/dist/esm/chardes-modal-footer.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalFooterCss = () => ``;
+
+const ModalFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["p-6 border-t border-gray-200 flex justify-between space-x-3", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'aeb62500c0aa8d41804acc74451c51cd5997394f', class: cls, style: sty }, h("button", { key: 'd448a46a35c5aab0c23b8faac8feac0bf9daa058', class: "px-4 py-2 border border-gray-300 rounded-md text-gray-700 font-medium transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button" }, "Cancel"), h("button", { key: '064caeb5fd5384f9a02acfc23ab0c53e6b68f029', class: "px-4 py-2 bg-blue-600 text-white rounded-md font-medium transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button" }, "Confirm")));
+    }
+};
+ModalFooter.style = chardesModalFooterCss();
+
+export { ModalFooter as chardes_modal_footer };

package/dist/esm/chardes-modal-form.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalFormCss = () => ``;
+
+const ModalForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["mt-6 space-y-4", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '211e390b781ccb91034de9c90cda9aac3e760547', class: cls, style: sty }, h("div", { key: '314603149d380dfb77c9f8b179373348c10fa686' }, h("label", { key: 'a6ec99a8bb68a5076ff6f64266b8efb309309561', class: "block text-sm font-medium text-gray-700 mb-2", htmlFor: "modal-email" }, "Email Address"), h("input", { key: '6d2e04f38abc415098c00a580148ef5c4a3494ef', 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" }))));
+    }
+};
+ModalForm.style = chardesModalFormCss();
+
+export { ModalForm as chardes_modal_form };

package/dist/esm/chardes-modal-header.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalHeaderCss = () => ``;
+
+const ModalHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["p-6 border-b border-gray-200 flex justify-between items-center", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '7ee31970fb826be3f635e6d2c1f6f670df04b303', class: cls, style: sty }, h("h3", { key: 'ac2fbd682b1f243c323df718fdae2b97d1853019', class: "text-xl font-semibold text-gray-900" }, "Modal Title"), h("button", { key: '086e7afb3e50ab4b3d4e67c370772d04e7b74e84', class: "p-2 rounded-full transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button", "aria-label": "Close modal" }, h("span", { key: '6c08371bf6c7619e055b6984f756f2d905a07d1b', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>` }))));
+    }
+};
+ModalHeader.style = chardesModalHeaderCss();
+
+export { ModalHeader as chardes_modal_header };

package/dist/esm/chardes-modal-title.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalTitleCss = () => ``;
+
+const ModalTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    render() {
+        const cls = ["text-xl font-semibold text-gray-900", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("h3", { key: '393ac73a261c706e5e425434928f8e8a4646501a', class: cls, style: sty }, this.text || "Modal Title"));
+    }
+};
+ModalTitle.style = chardesModalTitleCss();
+
+export { ModalTitle as chardes_modal_title };

package/dist/esm/chardes-modal.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesModalCss = () => ``;
+
+const Modal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["fixed inset-0 flex items-center justify-center bg-black/50 z-50 backdrop-blur-sm p-4", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'c6ec780c57ef668f3c4cd192c62f8f56378b84ca', class: cls, style: sty }, h("div", { key: '31798a15b6a0ff48b7583529401b65e22b472c56', class: "w-full max-w-md bg-white rounded-2xl shadow-lg overflow-hidden animate-in fade-in zoom-in-95 duration-300" }, h("div", { key: '634e58084b2ce2db0ae9901e7dfb91cee91a4946', class: "p-6 border-b border-gray-200 flex justify-between items-center" }, h("h3", { key: '53027aa6e760529e8532abd0edc563d93d5fdbb8', class: "text-xl font-semibold text-gray-900" }, "Modal Title"), h("button", { key: '466280cee1a8ae9487f97848656b6b5627c890d6', class: "p-2 rounded-full transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button", "aria-label": "Close modal" }, h("span", { key: '24de8c4a4146b47d3c9db09d220f504db36e84d9', innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>` }))), h("div", { key: 'd56c724a8c1f7ed59d25912b833fc53dae9b0eba', class: "p-6" }, h("p", { key: '19c12ec4f7c49ee4ebd1029b3af5ac531ea3df72', 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: '79024cce831b0d09814ce34dfcc92ebd7d6b465c', class: "mt-6 space-y-4" }, h("div", { key: '308d4fd2086f50c102d063483f03c45de025f1ff' }, h("label", { key: '2571475fb040c1943b15f8285f24b6e602046043', class: "block text-sm font-medium text-gray-700 mb-2", htmlFor: "modal-email" }, "Email Address"), h("input", { key: 'd8b331995624d8bb83799da3363617e3828486d1', 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" })))), h("div", { key: '1f471afdbc90055e7703626f64cd2d193f1ce436', class: "p-6 border-t border-gray-200 flex justify-between space-x-3" }, h("button", { key: 'bea815e33e02410e64bfad05934dbdb774969285', class: "px-4 py-2 border border-gray-300 rounded-md text-gray-700 font-medium transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button" }, "Cancel"), h("button", { key: 'b790f799b8504e893cb4927c8b75aabc4d2bd11c', class: "px-4 py-2 bg-blue-600 text-white rounded-md font-medium transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", type: "button" }, "Confirm")))));
+    }
+};
+Modal.style = chardesModalCss();
+
+export { Modal as chardes_modal };

package/dist/esm/chardes-muzingo-primary-button.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesMuzingoPrimaryButtonCss = () => ``;
+
+const MuzingoPrimaryButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '78be5fa170b57926c83663d2aad38ef3fc6883d6', class: cls, style: sty }));
+    }
+};
+MuzingoPrimaryButton.style = chardesMuzingoPrimaryButtonCss();
+
+export { MuzingoPrimaryButton as chardes_muzingo_primary_button };

package/dist/esm/chardes-muzingo.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesMuzingoCss = () => ``;
+
+const Muzingo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    type;
+    placeholder;
+    value;
+    inputId;
+    render() {
+        const cls = ["", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("input", { key: '4db2d1b54d60df0983c7218bd101dc5ce727e810', class: cls, type: this.type || "text", id: this.inputId || "", placeholder: this.placeholder || "Enter text here...", value: this.value, style: sty }));
+    }
+};
+Muzingo.style = chardesMuzingoCss();
+
+export { Muzingo as chardes_muzingo };

package/dist/esm/chardes-notification-toast.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesNotificationToastCss = () => ``;
+
+const NotificationToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["fixed top-4 right-4 z-50 w-[350px] bg-white rounded-lg shadow-lg p-4 transition-all duration-300 ease-in-out translate-x-full opacity-0 notification-toast", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '63246616e965b3942fbe33a1a526c68823c14694', class: cls, style: sty }, h("div", { key: '82e0c040128d90a7e4dbcde7819c4081cbbca128', class: "flex items-center justify-between mb-3" }, h("div", { key: '1b5da47c658ce191e8c189f0a4f7875b2338df82', class: "flex items-center space-x-2" }, h("span", { key: '7fa81bba0be9ec918a907f4cf92203a976040706', class: "text-indigo-500 flex-shrink-0", innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" /></svg>` }), h("h3", { key: 'a3e5d99189f0db0cde32b2973c24eaca3d955fa1', class: "text-base font-semibold text-gray-900" }, "New Notification")), h("span", { key: '384a870222cfa5925494ca91ca47497a8f6f670b', class: "text-xs text-gray-500" }, "Just now")), h("p", { key: '7137782af6c8c1ffee5f6d516db6f8a9c38b8a0a', class: "text-sm text-gray-700 leading-relaxed mb-3" }, "You have a new message from John Doe. Check your inbox for more details."), h("div", { key: 'e7abcfef4026e698d332fcf569c2ab906fa63f03', class: "flex justify-between space-x-2" }, h("button", { key: '329c3466e9cf5bc57660fc8ee2f5c79cec0088bb', class: "p-2 text-sm font-medium text-gray-600 bg-transparent border-none rounded-md pointer transition-colors hover:bg-gray-100", type: "button" }, "Dismiss"), h("button", { key: 'fc2ff0a405e4bc4f7a1d3e4eeb55a4266cc308ba', class: "p-2 text-sm font-medium text-white bg-indigo-500 border-none rounded-md pointer transition-colors hover:bg-indigo-600", type: "button" }, "View"))));
+    }
+};
+NotificationToast.style = chardesNotificationToastCss();
+
+export { NotificationToast as chardes_notification_toast };

package/dist/esm/chardes-payment-icon.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesPaymentIconCss = () => ``;
+
+const PaymentIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    svgIcon;
+    render() {
+        const cls = ["", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("span", { key: '262e62e8e8fc6bbd6c0811b6b0e30ab1dca58732', class: cls, style: sty, innerHTML: this.svgIcon || `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300" viewBox="0 0 20 20" fill="currentColor"><path d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm1 4h10v2H5V8zm0 4h10v2H5v-2z" /></svg>` }));
+    }
+};
+PaymentIcon.style = chardesPaymentIconCss();
+
+export { PaymentIcon as chardes_payment_icon };

package/dist/esm/chardes-success-icon-svg.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessIconSvgCss = () => ``;
+
+const SuccessIconSvg = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    svgIcon;
+    render() {
+        const cls = ["", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("span", { key: '2a5662eed56438bf0856fe37f655ac76da0d4fde', class: cls, style: sty, innerHTML: this.svgIcon || `<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>` }));
+    }
+};
+SuccessIconSvg.style = chardesSuccessIconSvgCss();
+
+export { SuccessIconSvg as chardes_success_icon_svg };

package/dist/esm/chardes-success-input-icon.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessInputIconCss = () => ``;
+
+const SuccessInputIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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: 'a8d4f4905ad5a2db2c395cb70b76deb2b4426627', class: cls, style: sty }, h("span", { key: 'f2faaf3960f73d23148d06c3d2a6e525b3926fc9', 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>` })));
+    }
+};
+SuccessInputIcon.style = chardesSuccessInputIconCss();
+
+export { SuccessInputIcon as chardes_success_input_icon };

package/dist/esm/chardes-success-input-wrapper.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessInputWrapperCss = () => ``;
+
+const SuccessInputWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["w-full relative", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'f2c1d677782bc3e4a3189c150351945ef2b13833', class: cls, style: sty }, h("div", { key: 'ef4d70ce54a9e8895017fffa5208f68242bdd717', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: '4d3f4cf6208e22c038f5764d27323fa51b0d707c', 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: '8038d5c7d4420f50928eaa761d83dcfbf731ae05', 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" })));
+    }
+};
+SuccessInputWrapper.style = chardesSuccessInputWrapperCss();
+
+export { SuccessInputWrapper as chardes_success_input_wrapper };

package/dist/esm/chardes-success-input.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessInputCss = () => ``;
+
+const SuccessInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    type;
+    placeholder;
+    value;
+    inputId;
+    render() {
+        const cls = ["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", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("input", { key: '88e6b08aa92fed6d64ec894ee4289d49e9061513', class: cls, type: this.type || "text", id: this.inputId || "success-input", placeholder: this.placeholder || "", value: this.value, style: sty }));
+    }
+};
+SuccessInput.style = chardesSuccessInputCss();
+
+export { SuccessInput as chardes_success_input };

package/dist/esm/chardes-success-label.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessLabelCss = () => ``;
+
+const SuccessLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    htmlFor;
+    render() {
+        const cls = ["text-sm font-semibold text-gray-700", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("label", { key: '107325d973775cb113dda2cb297b0207bbd0f7a3', class: cls, htmlFor: this.htmlFor || "success-input", style: sty }, this.text || "Username"));
+    }
+};
+SuccessLabel.style = chardesSuccessLabelCss();
+
+export { SuccessLabel as chardes_success_label };

package/dist/esm/chardes-success-message.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessMessageCss = () => ``;
+
+const SuccessMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    render() {
+        const cls = ["text-xs text-green-600", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("p", { key: 'aa49e4781d0343288acb66eab92291d39ea8f24a', class: cls, style: sty }, this.text || "Username is available"));
+    }
+};
+SuccessMessage.style = chardesSuccessMessageCss();
+
+export { SuccessMessage as chardes_success_message };

package/dist/esm/chardes-success-state.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesSuccessStateCss = () => ``;
+
+const SuccessState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["flex flex-col space-y-2", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '259dc74e70c3c9c55c2ef974b74ea5327dfdc445', class: cls, style: sty }, h("label", { key: 'a139ed87064c9b5e1de1d47ccc041b6c23ba95fe', class: "text-sm font-semibold text-gray-700", htmlFor: "success-input" }, "Username"), h("div", { key: 'dd70dd14eab535888a9c5950070d902015c0c393', class: "w-full relative" }, h("div", { key: 'c0e0896e74096a24af9e79cc4364fc6046f7d8dc', class: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none" }, h("span", { key: 'a732e2e1baeb63c10dd81d2376c24ecc7aec214c', 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: '3e5249789f2f0c802d4aa3f1e7b08627f8b97789', 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: '93639e7cf961e4f6946e1e501e8984d2e12ebb8f', class: "text-xs text-green-600" }, "Username is available")));
+    }
+};
+SuccessState.style = chardesSuccessStateCss();
+
+export { SuccessState as chardes_success_state };

package/dist/esm/chardes-toast-action-button.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesToastActionButtonCss = () => ``;
+
+const ToastActionButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    btnType;
+    ariaLabel;
+    render() {
+        const cls = ["p-2 text-sm font-medium text-white bg-indigo-500 border-none rounded-md pointer transition-colors hover:bg-indigo-600", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("button", { key: '0f0f9b5490865bc7d84d0428fe99defbc2f11ccf', class: cls, type: this.btnType || "button", "aria-label": this.ariaLabel || "", style: sty }, this.text || "View"));
+    }
+};
+ToastActionButton.style = chardesToastActionButtonCss();
+
+export { ToastActionButton as chardes_toast_action_button };

package/dist/esm/chardes-toast-actions.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesToastActionsCss = () => ``;
+
+const ToastActions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["flex justify-between space-x-2", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: 'f869cd7f4f7fb6fe7d305c898d297b83d5e869e8', class: cls, style: sty }, h("button", { key: '4416fa3ac7d5590c6e10d82b915803ba30cd7a45', class: "p-2 text-sm font-medium text-gray-600 bg-transparent border-none rounded-md pointer transition-colors hover:bg-gray-100", type: "button" }, "Dismiss"), h("button", { key: 'f2d9ff1773ec88d3d3fe2addee47bdaff493b76c', class: "p-2 text-sm font-medium text-white bg-indigo-500 border-none rounded-md pointer transition-colors hover:bg-indigo-600", type: "button" }, "View")));
+    }
+};
+ToastActions.style = chardesToastActionsCss();
+
+export { ToastActions as chardes_toast_actions };

package/dist/esm/chardes-toast-content.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesToastContentCss = () => ``;
+
+const ToastContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    render() {
+        const cls = ["text-sm text-gray-700 leading-relaxed mb-3", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("p", { key: 'd743767ef545f0c187e9e6e7c8157ed0834d95e6', class: cls, style: sty }, this.text || "You have a new message from John Doe. Check your inbox for more details."));
+    }
+};
+ToastContent.style = chardesToastContentCss();
+
+export { ToastContent as chardes_toast_content };

package/dist/esm/chardes-toast-dismiss-button.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesToastDismissButtonCss = () => ``;
+
+const ToastDismissButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    text;
+    btnType;
+    ariaLabel;
+    render() {
+        const cls = ["p-2 text-sm font-medium text-gray-600 bg-transparent border-none rounded-md pointer transition-colors hover:bg-gray-100", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("button", { key: '18248c7d03aa684e1c6f541bea265bd293ab5bdd', class: cls, type: this.btnType || "button", "aria-label": this.ariaLabel || "", style: sty }, this.text || "Dismiss"));
+    }
+};
+ToastDismissButton.style = chardesToastDismissButtonCss();
+
+export { ToastDismissButton as chardes_toast_dismiss_button };

package/dist/esm/chardes-toast-header.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-jZlebn0H.js';
+
+const chardesToastHeaderCss = () => ``;
+
+const ToastHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    customClass;
+    customStyle;
+    render() {
+        const cls = ["flex items-center justify-between mb-3", this.customClass].filter(Boolean).join(' ');
+        const sty = this.customStyle || undefined;
+        return (h("div", { key: '69e802bbcc9be69b82d59cdebe582200b0145087', class: cls, style: sty }, h("div", { key: '2d68f20c480eadc19605c316974ce0ba39a49ab0', class: "flex items-center space-x-2" }, h("span", { key: 'de44db78f953b27500fb3f30ed1172d5d19ce534', class: "text-indigo-500 flex-shrink-0", innerHTML: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" /></svg>` }), h("h3", { key: '309c94fa2c3d2abcaab8ed34269b0269e8ad9540', class: "text-base font-semibold text-gray-900" }, "New Notification")), h("span", { key: '565aa97e200b07f14ea968ac8287e10802e650bb', class: "text-xs text-gray-500" }, "Just now")));
+    }
+};
+ToastHeader.style = chardesToastHeaderCss();
+
+export { ToastHeader as chardes_toast_header };