@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,233 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-sidebar
+ * Collapsible vertical sidebar navigation with icon support and nested items.
+ */
+export class DropiSidebar {
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** Collapsed state (icon-only) */
+    collapsed = false;
+    /** Show collapse toggle button */
+    showToggle = true;
+    /** Logo URL (shown at top) */
+    logoUrl = '';
+    /** Sidebar width when expanded */
+    width = '240px';
+    expandedIds = new Set();
+    /** Emitted when an item is clicked. e.detail = item id */
+    dropiSidebarItemClick;
+    /** Emitted when collapse state changes. e.detail = collapsed */
+    dropiCollapse;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    toggleExpand(id) {
+        if (this.expandedIds.has(id))
+            this.expandedIds.delete(id);
+        else
+            this.expandedIds.add(id);
+        // Force re-render
+        this.expandedIds = new Set(this.expandedIds);
+    }
+    renderItem(item, depth = 0) {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = this.expandedIds.has(item.id);
+        const isActive = item.id === this.activeId;
+        return (h("li", null, h("button", { class: {
+                'sidebar__item': true,
+                'sidebar__item--active': isActive,
+                'sidebar__item--depth1': depth === 1,
+            }, style: { paddingLeft: depth > 0 ? `${12 + depth * 12}px` : undefined }, onClick: () => {
+                if (hasChildren)
+                    this.toggleExpand(item.id);
+                else
+                    this.dropiSidebarItemClick.emit(item.id);
+            }, type: "button", title: this.collapsed ? item.label : undefined }, item.icon && (h("dropi-icon", { name: item.icon, width: "18px", height: "18px", color: isActive ? 'Primary-Primary-500' : 'Gray-Gray-600' })), !this.collapsed && (h("span", { class: "sidebar__item-label" }, item.label)), !this.collapsed && item.badge != null && String(item.badge) !== '0' && (h("span", { class: "sidebar__badge" }, item.badge)), !this.collapsed && hasChildren && (h("dropi-icon", { name: isExpanded ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "12px", height: "12px", color: "Gray-Gray-400" }))), hasChildren && isExpanded && !this.collapsed && (h("ul", { class: "sidebar__sub" }, item.children.map(child => this.renderItem(child, depth + 1))))));
+    }
+    render() {
+        const items = this.parsedItems;
+        return (h("aside", { key: '97c46e8c84a9e389fb67b34364321c35b0c5ebf2', class: { 'sidebar': true, 'sidebar--collapsed': this.collapsed }, style: { width: this.collapsed ? '56px' : this.width } }, this.logoUrl && (h("div", { key: '211e43514bcdd6b613aa1001ef630e5b9629091a', class: "sidebar__logo-wrap" }, h("img", { key: 'ce6b7a3b9ce26f4caa1eafd4821f5a2fa70e4dda', class: "sidebar__logo", src: this.logoUrl, alt: "Logo" }))), this.showToggle && (h("button", { key: 'ba66d7664b76ecdea519f9d128e998331106da8f', class: "sidebar__toggle", onClick: () => {
+                this.collapsed = !this.collapsed;
+                this.dropiCollapse.emit(this.collapsed);
+            }, "aria-label": this.collapsed ? 'Expandir' : 'Colapsar', type: "button" }, h("dropi-icon", { key: '3a362cb657dfa881523ae29c1e677e6cc16afb61', name: this.collapsed ? 'Arrow-Right-2' : 'Arrow-Left-2', width: "16px", height: "16px", color: "Gray-Gray-400" }))), h("nav", { key: '02152d2e92f7802daa1192bd9d00d21c13619de4', class: "sidebar__nav" }, h("ul", { key: '9e90a7d2d25a63885713b881c6d091528027ec57', class: "sidebar__list" }, items.map(item => this.renderItem(item)))), h("div", { key: 'b70d89a324de1b56e022ec66b52ecb2b01031d34', class: "sidebar__footer" }, h("slot", { key: '6ead0e515e6a59194cd3495bd691ae9acdb0dd05', name: "footer" }))));
+    }
+    static get is() { return "dropi-sidebar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-sidebar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SidebarItem[] | string",
+                    "resolved": "SidebarItem[] | string",
+                    "references": {
+                        "SidebarItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-sidebar/dropi-sidebar.tsx",
+                            "id": "src/components/dropi-sidebar/dropi-sidebar.tsx::SidebarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigation items (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "[]"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active item ID"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id",
+                "defaultValue": "''"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Collapsed state (icon-only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "showToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show collapse toggle button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-toggle",
+                "defaultValue": "true"
+            },
+            "logoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo URL (shown at top)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-url",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sidebar width when expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'240px'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiSidebarItemClick",
+                "name": "dropiSidebarItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item is clicked. e.detail = item id"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiCollapse",
+                "name": "dropiCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when collapse state changes. e.detail = collapsed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.css

@@ -0,0 +1,94 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.stepper__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.stepper__circle-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* ── Circle ─────────────────────────────────────────────── */
+.stepper__circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.stepper__circle--pending {
+  background: var(--Gray-Gray-100, #e6eaf2);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+}
+
+.stepper__circle--active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.stepper__circle--completed {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.stepper__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--Neutral-White, #fff);
+  display: block;
+}
+
+.stepper__circle--pending .stepper__dot {
+  background: var(--Gray-Gray-400, #858ea6);
+}
+
+.stepper__number {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Neutral-White, #fff);
+}
+
+.stepper__circle--pending .stepper__number {
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+/* ── Connecting line ────────────────────────────────────── */
+.stepper__line {
+  flex: 1;
+  height: 2px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  transition: background 0.2s;
+}
+
+.stepper__line--done {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Label ──────────────────────────────────────────────── */
+.stepper__label {
+  margin-top: 6px;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  text-align: center;
+}

package/dist/collection/components/dropi-simple-stepper/dropi-simple-stepper.js

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-simple-stepper
+ * Compact horizontal stepper using dots or numbers.
+ */
+export class DropiSimpleStepper {
+    /** Total steps */
+    stepsCount = 3;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep = 'number';
+    /** Current active step (1-based) */
+    currentStep = 1;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper = [];
+    /** Flow mode (visual only) */
+    flowMode = 'Sequential';
+    get parsedLabels() {
+        if (typeof this.labelStepper === 'string') {
+            try {
+                return JSON.parse(this.labelStepper);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.labelStepper || [];
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: '9991a928ba08a7720d8ded5aea01b3bc77372e71', class: "stepper" }, steps.map((step, i) => {
+            const isCompleted = step < this.currentStep;
+            const isActive = step === this.currentStep;
+            const isLast = i === steps.length - 1;
+            const label = labels[i];
+            return (h("div", { class: "stepper__item", key: step }, h("div", { class: "stepper__circle-row" }, h("div", { class: {
+                    'stepper__circle': true,
+                    'stepper__circle--active': isActive,
+                    'stepper__circle--completed': isCompleted,
+                    'stepper__circle--pending': !isActive && !isCompleted,
+                } }, this.typeStep === 'point' ? (h("span", { class: "stepper__dot" })) : (h("span", { class: "stepper__number" }, step))), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': isCompleted } })), label && h("span", { class: "stepper__label" }, label)));
+        })));
+    }
+    static get is() { return "dropi-simple-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-simple-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-simple-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stepsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total steps"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps-count",
+                "defaultValue": "3"
+            },
+            "typeStep": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperType",
+                    "resolved": "\"number\" | \"point\"",
+                    "references": {
+                        "StepperType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-simple-stepper/dropi-simple-stepper.tsx",
+                            "id": "src/components/dropi-simple-stepper/dropi-simple-stepper.tsx::StepperType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Circle content: 'point' (dot) | 'number'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type-step",
+                "defaultValue": "'number'"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active step (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "1"
+            },
+            "labelStepper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Labels shown below each step. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-stepper",
+                "defaultValue": "[]"
+            },
+            "flowMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FlowMode",
+                    "resolved": "\"Sequential\" | \"Simultaneous\"",
+                    "references": {
+                        "FlowMode": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-simple-stepper/dropi-simple-stepper.tsx",
+                            "id": "src/components/dropi-simple-stepper/dropi-simple-stepper.tsx::FlowMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flow mode (visual only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flow-mode",
+                "defaultValue": "'Sequential'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,95 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* ── Each step ──────────────────────────────────────────── */
+.stepper__step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+/* ── Circle row (circle + connecting line) ──────────────── */
+.stepper__circle-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+
+.stepper__circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+  flex-shrink: 0;
+  z-index: 1;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.stepper__circle--pending {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.stepper__circle--focus {
+  background: var(--Neutral-White, #fff);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.stepper__circle--completed {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+}
+
+/* ── Connecting line ────────────────────────────────────── */
+.stepper__line {
+  flex: 1;
+  height: 2px;
+  background: var(--Gray-Gray-200, #c3c9d9);
+  transition: background 0.2s;
+}
+
+.stepper__line--done {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Labels ─────────────────────────────────────────────── */
+.stepper__label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  margin-top: var(--Size-2, 8px);
+  text-align: center;
+  padding: 0 4px;
+}
+
+.stepper__title {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.stepper__desc {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+}