@dropi/ui 0.1.0

package/dist/collection/components/dropi-badge/dropi-badge.js

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-badge
+ * Status badge for user/account states.
+ */
+export class DropiBadge {
+    /** Badge state: pending | active | canceled | frozen */
+    state = 'pending';
+    stateText = {
+        pending: 'Pendiente',
+        active: 'Activo',
+        canceled: 'Cancelado',
+        frozen: 'Congelado',
+    };
+    renderIcon() {
+        if (this.state === 'active') {
+            return (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11.5444 5.87067L12.5389 6.88004L8.43554 10.9225C8.16142 11.1966 7.80087 11.3333 7.43892 11.3333C7.07696 11.3333 6.71287 11.1952 6.43592 10.919L4.46533 9.00929L5.45204 7.99142L7.43042 9.90887L11.5444 5.87067ZM17 8.5C17 13.187 13.187 17 8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5ZM15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5Z", fill: "currentColor" })));
+        }
+        if (this.state === 'pending') {
+            return (h("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 17C3.81296 17 0 13.187 0 8.5C0 3.81296 3.81296 0 8.5 0C13.187 0 17 3.81296 17 8.5C17 13.187 13.187 17 8.5 17ZM8.5 1.41667C4.59425 1.41667 1.41667 4.59425 1.41667 8.5C1.41667 12.4057 4.59425 15.5833 8.5 15.5833C12.4057 15.5833 15.5833 12.4057 15.5833 8.5C15.5833 4.59425 12.4057 1.41667 8.5 1.41667ZM9.20833 8.5V4.25C9.20833 3.859 8.891 3.54167 8.5 3.54167C8.109 3.54167 7.79167 3.859 7.79167 4.25V7.79167H5.66667C5.27567 7.79167 4.95833 8.109 4.95833 8.5C4.95833 8.891 5.27567 9.20833 5.66667 9.20833H8.5C8.891 9.20833 9.20833 8.891 9.20833 8.5Z", fill: "currentColor" })));
+        }
+        if (this.state === 'canceled') {
+            return (h("svg", { width: "12", height: "14", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.5497 4.86859V5.76046C12.1075 6.00391 12.5823 6.40464 12.916 6.91364C13.2497 7.42264 13.4279 8.01785 13.4287 8.62648V12.3844C13.4277 13.2146 13.0974 14.0106 12.5103 14.5976C11.9233 15.1847 11.1273 15.515 10.2971 15.516H4.03392C3.20368 15.515 2.40773 15.1847 1.82066 14.5976C1.23359 14.0106 0.903338 13.2146 0.902344 12.3844V8.62648C0.903144 8.01785 1.08129 7.42264 1.41498 6.91364C1.74868 6.40464 2.22347 6.00391 2.78129 5.76046V4.86859C2.78129 3.70582 3.2432 2.59068 4.0654 1.76848C4.8876 0.946282 6.00274 0.484375 7.1655 0.484375C8.32827 0.484375 9.44341 0.946282 10.2656 1.76848C11.0878 2.59068 11.5497 3.70582 11.5497 4.86859ZM4.95114 2.65422C4.36386 3.24151 4.03392 4.03804 4.03392 4.86859V5.4949H10.2971V4.86859C10.2971 4.03804 9.96715 3.24151 9.37986 2.65422C8.79258 2.06694 7.99605 1.73701 7.1655 1.73701C6.33496 1.73701 5.53843 2.06694 4.95114 2.65422ZM11.6257 13.713C11.9781 13.3606 12.176 12.8827 12.176 12.3844V8.62648C12.176 8.12815 11.9781 7.65023 11.6257 7.29786C11.2733 6.94549 10.7954 6.74753 10.2971 6.74753H4.03392C3.53559 6.74753 3.05768 6.94549 2.70531 7.29786C2.35294 7.65023 2.15498 8.12815 2.15498 8.62648V12.3844C2.15498 12.8827 2.35294 13.3606 2.70531 13.713C3.05768 14.0654 3.53559 14.2633 4.03392 14.2633H10.2971C10.7954 14.2633 11.2733 14.0654 11.6257 13.713ZM6.72263 9.43615C6.84009 9.31869 6.99939 9.25271 7.1655 9.25271C7.33161 9.25271 7.49092 9.31869 7.60837 9.43615C7.72583 9.55361 7.79182 9.71291 7.79182 9.87902V11.1317C7.79182 11.2978 7.72583 11.4571 7.60837 11.5745C7.49092 11.692 7.33161 11.758 7.1655 11.758C6.99939 11.758 6.84009 11.692 6.72263 11.5745C6.60517 11.4571 6.53919 11.2978 6.53919 11.1317V9.87902C6.53919 9.71291 6.60517 9.55361 6.72263 9.43615Z", fill: "currentColor" })));
+        }
+        return null;
+    }
+    render() {
+        return (h("div", { key: 'b66590d82d7dd760badcfb76c72eb3d589073721', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '82ae7072f3ac6d96ed02db8289f0f98f070a882d' }, this.stateText[this.state])));
+    }
+    static get is() { return "dropi-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeState",
+                    "resolved": "\"active\" | \"canceled\" | \"frozen\" | \"pending\"",
+                    "references": {
+                        "BadgeState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-badge/dropi-badge.tsx",
+                            "id": "src/components/dropi-badge/dropi-badge.tsx::BadgeState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge state: pending | active | canceled | frozen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'pending'"
+            }
+        };
+    }
+}

package/dist/collection/components/dropi-button/dropi-button.css

@@ -0,0 +1,169 @@
+:host {
+  display: inline-block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.btn {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-1, 4px);
+  border-radius: var(--Border-2, 8px);
+  font-weight: 700;
+  min-width: 33px;
+  line-height: 110%;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.25s ease,
+    color 0.25s ease,
+    border-color 0.25s ease,
+    transform 0.25s ease;
+}
+
+.btn:active {
+  transition: transform 0.01s ease-out;
+  transform: scale(0.98);
+}
+
+.btn:hover:not(:active) {
+  transform: scale(1.01);
+}
+
+.btn.without-text {
+  gap: 0;
+}
+
+/* ── Sizes ─────────────────────────────────────────────────── */
+.btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }
+.btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }
+.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--Size-3, 12px); height: 29px; }
+
+/* ── Disabled / Loading ─────────────────────────────────────── */
+.btn.disabled,
+.btn.loading {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   PRIMARY severity
+═══════════════════════════════════════════════════════════════ */
+.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #fff); }
+.btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }
+
+.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #fff); }
+.btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }
+
+.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #fff); }
+.btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }
+
+.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #fff); }
+.btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }
+
+.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #fff); }
+.btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }
+
+.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #fff); }
+.btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }
+
+/* Disabled primary */
+.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #fff); }
+
+/* ══════════════════════════════════════════════════════════════
+   SECONDARY severity
+═══════════════════════════════════════════════════════════════ */
+.btn.secondary {
+  background: var(--Neutral-White, #fff);
+  border: 1px solid;
+}
+
+.btn.secondary.default  { border-color: var(--Primary-Primary-500, #f49a3d); color: var(--Primary-Primary-500, #f49a3d); }
+.btn.secondary.default:hover { color: var(--Primary-Primary-600, #e58017); border-color: var(--Primary-Primary-600, #e58017); }
+
+.btn.secondary.success  { border-color: var(--Success-Success-500, #0abb87); color: var(--Success-Success-500, #0abb87); }
+.btn.secondary.success:hover { color: var(--Success-Success-600, #09aa7b); border-color: var(--Success-Success-600, #09aa7b); }
+
+.btn.secondary.info     { border-color: var(--Info-Info-500, #50a5f1); color: var(--Info-Info-500, #50a5f1); }
+.btn.secondary.info:hover { color: var(--Info-Info-600, #4996db); border-color: var(--Info-Info-600, #4996db); }
+
+.btn.secondary.error    { border-color: var(--Error-Error-500, #f46a6b); color: var(--Error-Error-500, #f46a6b); }
+.btn.secondary.error:hover { color: var(--Error-Error-600, #de6061); border-color: var(--Error-Error-600, #de6061); }
+
+.btn.secondary.warning  { border-color: var(--Warning-Warning-500, #f1b44c); color: var(--Warning-Warning-500, #f1b44c); }
+.btn.secondary.warning:hover { color: var(--Warning-Warning-600, #dba445); border-color: var(--Warning-Warning-600, #dba445); }
+
+.btn.secondary.legacy   { border-color: var(--Secondary-Secondary-500, #008dbf); color: var(--Secondary-Secondary-500, #008dbf); }
+.btn.secondary.legacy:hover { color: var(--Secondary-Secondary-600, #007199); border-color: var(--Secondary-Secondary-600, #007199); }
+
+/* Disabled secondary */
+.btn.secondary.disabled.default  { border-color: var(--Primary-Primary-300, #f2bc85); color: var(--Primary-Primary-300, #f2bc85); }
+.btn.secondary.disabled.success  { border-color: var(--Success-Success-300, #5bd1af); color: var(--Success-Success-300, #5bd1af); }
+.btn.secondary.disabled.info     { border-color: var(--Info-Info-300, #8ac3f6); color: var(--Info-Info-300, #8ac3f6); }
+.btn.secondary.disabled.error    { border-color: var(--Error-Error-300, #f89b9c); color: var(--Error-Error-300, #f89b9c); }
+.btn.secondary.disabled.warning  { border-color: var(--Warning-Warning-300, #f6cd87); color: var(--Warning-Warning-300, #f6cd87); }
+.btn.secondary.disabled.legacy   { border-color: var(--Secondary-Secondary-300, #62bad9); color: var(--Secondary-Secondary-300, #62bad9); }
+
+/* ══════════════════════════════════════════════════════════════
+   TERTIARY severity
+═══════════════════════════════════════════════════════════════ */
+.btn.tertiary { background: none; border: none; }
+
+.btn.tertiary.default,
+.btn.tertiary.legacy {
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-500, #69738c);
+}
+.btn.tertiary.default:hover,
+.btn.tertiary.legacy:hover {
+  border-color: var(--Gray-Gray-400, #858ea6);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.btn.tertiary.success { color: var(--Success-Success-500, #0abb87); }
+.btn.tertiary.success:hover { background: var(--Success-Success-50, #e7f8f3); }
+
+.btn.tertiary.info { color: var(--Info-Info-500, #50a5f1); }
+.btn.tertiary.info:hover { background: var(--Info-Info-50, #eef6fe); }
+
+.btn.tertiary.error { color: var(--Error-Error-500, #f46a6b); }
+.btn.tertiary.error:hover { background: var(--Error-Error-50, #fef0f0); }
+
+.btn.tertiary.warning { color: var(--Warning-Warning-500, #f1b44c); }
+.btn.tertiary.warning:hover { background: var(--Warning-Warning-50, #fef8ed); }
+
+.btn.tertiary.dropdown {
+  color: var(--Gray-Gray-500, #69738c);
+  font-weight: 400;
+  font-size: 14px;
+  background: transparent;
+}
+
+/* Disabled tertiary */
+.btn.tertiary.disabled.default,
+.btn.tertiary.disabled.legacy {
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+.btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }
+.btn.tertiary.disabled.info    { color: var(--Info-Info-300, #8ac3f6); }
+.btn.tertiary.disabled.error   { color: var(--Error-Error-300, #f89b9c); }
+.btn.tertiary.disabled.warning { color: var(--Warning-Warning-300, #f6cd87); }
+
+/* ── Loading spinner ─────────────────────────────────────────── */
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}

package/dist/collection/components/dropi-button/dropi-button.js

@@ -0,0 +1,277 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-button
+ * Primary action button with multiple types, severities, sizes and states.
+ * Supports pre/post icons and a loading spinner.
+ */
+export class DropiButton {
+    /** Visual color palette */
+    type = 'default';
+    /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
+    severity = 'primary';
+    /** Button size */
+    size = 'normal';
+    /** Button state */
+    state = 'default';
+    /** Icon name to show before the text */
+    preIcon = '';
+    /** Icon name to show after the text */
+    postIcon = '';
+    /** Button label */
+    text = '';
+    /** Emitted on click (not emitted when disabled or loading) */
+    dropiClick;
+    colorMap = {
+        default: 'Primary-Primary-',
+        success: 'Success-Success-',
+        error: 'Error-Error-',
+        info: 'Info-Info-',
+        legacy: 'Secondary-Secondary-',
+        warning: 'Warning-Warning-',
+        dropdown: 'Gray-Gray-',
+    };
+    get iconSize() {
+        if (this.size === 'large')
+            return '24px';
+        if (this.size === 'small')
+            return '16px';
+        return '18px';
+    }
+    get color() {
+        const intensity = this.state === 'disabled' ? '300' : '500';
+        return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;
+    }
+    get fontColor() {
+        if (this.severity === 'tertiary') {
+            return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;
+        }
+        if (this.severity === 'secondary')
+            return this.color;
+        return 'Neutral-White';
+    }
+    handleClick(e) {
+        if (this.state !== 'disabled' && this.state !== 'loading') {
+            this.dropiClick.emit(e);
+        }
+    }
+    renderLoadingSpinner() {
+        return (h("svg", { class: "spin", width: this.iconSize, height: this.iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z", fill: `var(--${this.fontColor})` })));
+    }
+    render() {
+        const isDisabled = this.state === 'disabled' || this.state === 'loading';
+        const hasText = this.text !== '';
+        const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
+        const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
+        return (h("button", { key: '6cde7f2616d1cff9e3304481f2a0c38aabc34192', class: {
+                btn: true,
+                'without-text': !hasText,
+                [this.severity]: true,
+                [this.type]: true,
+                [this.size]: true,
+                [this.state]: true,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '769cea8fce2947552462aa2cbbb09d64df952c76', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'f66ad80283d54f643cf37ea702145127b90d4ce4', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '4fd9c7d7d029c3316bc0492576cda0cca74fa460', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3280c56a28ea40016d35e186b9997635b8ba881b' })));
+    }
+    static get is() { return "dropi-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"default\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual color palette"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "severity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSeverity",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "ButtonSeverity": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonSeverity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary (filled) | Secondary (outlined) | Tertiary (ghost)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize",
+                    "resolved": "\"large\" | \"normal\" | \"small\"",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'normal'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonState",
+                    "resolved": "\"default\" | \"disabled\" | \"loading\"",
+                    "references": {
+                        "ButtonState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-button/dropi-button.tsx",
+                            "id": "src/components/dropi-button/dropi-button.tsx::ButtonState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "preIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to show before the text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pre-icon",
+                "defaultValue": "''"
+            },
+            "postIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to show after the text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "post-icon",
+                "defaultValue": "''"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiClick",
+                "name": "dropiClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on click (not emitted when disabled or loading)"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-checkbox/dropi-checkbox.css

@@ -0,0 +1,47 @@
+:host {
+  display: inline-block;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.container-dropi-checkbox {
+  display: inline-block;
+}
+
+.check {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease-in-out,
+    border-style 0.3s ease-in-out;
+}
+
+.noCheck {
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--Gray-Gray-200, #c3c9d9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.noCheck svg {
+  visibility: hidden;
+}
+
+.isCheck {
+  display: flex;
+  background-color: var(--Primary-Primary-500, #f49a3d);
+  justify-content: center;
+  align-items: center;
+}
+
+.disabled {
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  border-color: var(--Gray-Gray-100, #e6eaf2);
+  cursor: not-allowed;
+}

package/dist/collection/components/dropi-checkbox/dropi-checkbox.js

@@ -0,0 +1,103 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-checkbox
+ * A styled checkbox that emits change events.
+ * Supports form association via native `<input type="checkbox">` internals.
+ */
+export class DropiCheckbox {
+    /** Whether the checkbox is checked */
+    checked = false;
+    /** Whether the checkbox is disabled */
+    disabled = false;
+    /** Emitted when the checked state changes */
+    dropiChange;
+    changeState() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dropiChange.emit(this.checked);
+    }
+    render() {
+        return (h("div", { key: 'e5c7ef2fd09e5e18b71cbbdd96cc13d4fd99b8a5', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '2b6a006125e8e68fbba9285451d0d7a578c183d2', class: {
+                check: true,
+                isCheck: this.checked,
+                noCheck: !this.checked,
+                disabled: this.disabled,
+            } }, h("svg", { key: 'ce19f7e7e1159ee2915a78827775bd969484aa4a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'f41304ce433c5ea47f8eb964278e1a4c2c8184b2', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+    }
+    static get is() { return "dropi-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}