@dropi/ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-skeleton
+ * Loading placeholder with shimmer animation.
+ */
+export class DropiSkeleton {
+    /** Shape variant: 'text' | 'circle' | 'rect' */
+    variant = 'text';
+    /** Width (CSS value, e.g. "100%", "200px") */
+    width = '';
+    /** Height (CSS value, e.g. "16px", "48px") */
+    height = '';
+    /** Border radius override */
+    radius = '8px';
+    /** Number of lines to repeat (text variant only) */
+    lines = 1;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor = '#f6f7f8';
+    getBackground() {
+        const color = (this.baseColor ?? '#f6f7f8').startsWith('#') ? (this.baseColor ?? '#f6f7f8') : `var(--${this.baseColor})`;
+        return `linear-gradient(to right, ${color} 8%, #e3e7efe7 28%, ${color} 77%)`;
+    }
+    getRadius() {
+        if (this.radius)
+            return this.radius;
+        if (this.variant === 'circle')
+            return '50%';
+        if (this.variant === 'text')
+            return '4px';
+        return 'var(--Border-1, 4px)';
+    }
+    render() {
+        if (this.variant === 'text' && this.lines > 1) {
+            return (h("div", { class: "skeleton-lines" }, Array.from({ length: this.lines }).map((_, i) => (h("div", { class: "skeleton", style: {
+                    width: i === this.lines - 1 ? '70%' : this.width,
+                    height: this.height,
+                    borderRadius: this.getRadius(),
+                    background: this.getBackground(),
+                    backgroundSize: '1000px 104px',
+                } })))));
+        }
+        return (h("div", { class: "skeleton", style: {
+                width: this.width,
+                height: this.height,
+                borderRadius: this.getRadius(),
+                background: this.getBackground(),
+                backgroundSize: '1000px 104px',
+            } }));
+    }
+    static get is() { return "dropi-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SkeletonVariant",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {
+                        "SkeletonVariant": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-skeleton/dropi-skeleton.tsx",
+                            "id": "src/components/dropi-skeleton/dropi-skeleton.tsx::SkeletonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape variant: 'text' | 'circle' | 'rect'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width (CSS value, e.g. \"100%\", \"200px\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height (CSS value, e.g. \"16px\", \"48px\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            },
+            "radius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border radius override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "radius",
+                "defaultValue": "'8px'"
+            },
+            "lines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of lines to repeat (text variant only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "1"
+            },
+            "baseColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-color",
+                "defaultValue": "'#f6f7f8'"
+            }
+        };
+    }
+}

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, #ffffff);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.stepper__circle--focus {
+  background: var(--Neutral-White, #ffffff);
+  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, #ffffff);
+}
+
+/* ── 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);
+}

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

@@ -0,0 +1,173 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-steps
+ * Horizontal stepper showing step progress with number/title/description.
+ */
+export class DropiSteps {
+    /** Total number of steps */
+    stepsCount = 3;
+    /** Show step number inside the circle */
+    showNumberOfStep = true;
+    /** Active/current step index (1-based) */
+    currentStep = 0;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels = [];
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state = 'pending';
+    get parsedLabels() {
+        if (typeof this.stepLabels === 'string') {
+            try {
+                return JSON.parse(this.stepLabels);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.stepLabels || [];
+    }
+    stepState(index) {
+        if (index < this.currentStep)
+            return 'completed';
+        if (index === this.currentStep)
+            return 'focus';
+        return 'pending';
+    }
+    render() {
+        const labels = this.parsedLabels;
+        const steps = Array.from({ length: this.stepsCount }, (_, i) => i + 1);
+        return (h("div", { key: '35c28210675370e76f16e2525fdf785b6205ec78', class: "stepper" }, steps.map((step) => {
+            const state = this.stepState(step);
+            const label = labels[step - 1];
+            const isLast = step === this.stepsCount;
+            return (h("div", { class: "stepper__step", key: step }, h("div", { class: "stepper__circle-wrap" }, h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? h("span", null, step) : null)), !isLast && h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (h("div", { class: "stepper__label" }, label.title && h("span", { class: "stepper__title" }, label.title), label.description && h("span", { class: "stepper__desc" }, label.description)))));
+        })));
+    }
+    static get is() { return "dropi-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stepsCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps-count",
+                "defaultValue": "3"
+            },
+            "showNumberOfStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show step number inside the circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-number-of-step",
+                "defaultValue": "true"
+            },
+            "currentStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active/current step index (1-based)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-step",
+                "defaultValue": "0"
+            },
+            "stepLabels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepLabel[] | string",
+                    "resolved": "StepLabel[] | string",
+                    "references": {
+                        "StepLabel": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-steps/dropi-steps.tsx",
+                            "id": "src/components/dropi-steps/dropi-steps.tsx::StepLabel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Labels for each step. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-labels",
+                "defaultValue": "[]"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepState",
+                    "resolved": "\"completed\" | \"focus\" | \"pending\"",
+                    "references": {
+                        "StepState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-steps/dropi-steps.tsx",
+                            "id": "src/components/dropi-steps/dropi-steps.tsx::StepState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual state applied to the active step (matches Angular `state`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'pending'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,57 @@
+:host {
+  display: inline-block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 21px;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--Gray-Gray-200, #c3c9d9);
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider::before {
+  position: absolute;
+  content: '';
+  height: 17px;
+  width: 17px;
+  left: 3px;
+  bottom: 2px;
+  background-color: var(--Neutral-White, #ffffff);
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+input:checked + .slider::before {
+  transform: translateX(17px);
+}
+
+:host([disabled]) .toggle-switch {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

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

@@ -0,0 +1,96 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-switch
+ * Toggle switch component. Emits dropiChange on toggle.
+ */
+export class DropiSwitch {
+    /** Whether the switch is on */
+    isChecked = false;
+    /** Whether the switch is disabled */
+    disabled = false;
+    /** Emitted when the toggle state changes */
+    onChange;
+    onToggleChange(event) {
+        const input = event.target;
+        this.isChecked = input.checked;
+        this.onChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, h("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
+    }
+    static get is() { return "dropi-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isChecked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the switch is on"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the switch is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}