@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,192 +0,0 @@
-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.startsWith('#') ? this.baseColor : `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

@@ -1,95 +0,0 @@
-: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

@@ -1,173 +0,0 @@
-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: 'cc54b22068478a85a29603e05d618c66ec1d2218', 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

@@ -1,57 +0,0 @@
-: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

@@ -1,96 +0,0 @@
-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: '15d604adb71cbe0c4d7e3627b8ee58380749c4df', class: "toggle-switch" }, h("input", { key: '5ff458aa0c536d88e2ee44576e7b5cbfdb15e990', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'a0dbc3f038af17fcea903fccd5f1e1638192c89a', 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": {}
-                }
-            }];
-    }
-}