@dropi/ui 0.1.0

package/dist/collection/components/dropi-select/select.types.js

@@ -0,0 +1 @@
+export {};

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 */
+    dropiChange;
+    onToggleChange(event) {
+        const input = event.target;
+        this.isChecked = input.checked;
+        this.dropiChange.emit(this.isChecked);
+    }
+    render() {
+        return (h("label", { key: '336fa18042e7b128d2e6e0b680ddd67e30ce917e', class: "toggle-switch" }, h("input", { key: '57e2fa77fa9b49341b03f6ff041ce4987a6b277b', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'e7617599947289a6e21b9db573dd7bec80dbeb43', 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": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,40 @@
+:host {
+  display: inline-block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.container-chips {
+  display: inline-block;
+}
+
+.tags {
+  display: inline-flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--Border-5, 9999px);
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--Size-5, 24px);
+  /* Animation */
+  animation: fade-in 200ms ease-out;
+}
+
+.tags.icon-only {
+  gap: 0;
+}
+
+.file-icon {
+  display: flex;
+  margin-right: 4px;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: scale(0.8); }
+  to   { opacity: 1; transform: scale(1); }
+}

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

@@ -0,0 +1,190 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-tag
+ * Colored tag/chip for statuses, categories, and labels.
+ */
+export class DropiTag {
+    /** primary (filled) | secondary (soft) */
+    type = 'primary';
+    /** Color state of the tag */
+    state = 'default';
+    /** Whether to show the icon */
+    showIcon = false;
+    /** Icon name from the sprite */
+    icon = '';
+    /** Label text */
+    text = '';
+    colorMap = {
+        default: 'Primary-Primary',
+        success: 'Success-Success',
+        info: 'Info-Info',
+        warning: 'Warning-Warning',
+        error: 'Error-Error',
+        legacy: 'Gray-Gray',
+    };
+    propsChanged() { }
+    get bgColor() {
+        const base = this.colorMap[this.state];
+        if (this.type === 'primary')
+            return `var(--${base}-500)`;
+        const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';
+        return `var(--${base}${shade})`;
+    }
+    get textColor() {
+        const base = this.colorMap[this.state];
+        if (this.type === 'primary')
+            return `var(--Neutral-White)`;
+        const shade = this.state === 'default' ? '-500' : '-700';
+        return `var(--${base}${shade})`;
+    }
+    get iconColor() {
+        if (this.type === 'primary')
+            return 'Neutral-White';
+        const base = this.colorMap[this.state];
+        const shade = this.state === 'default' ? '-500' : '-700';
+        return `${base}${shade}`;
+    }
+    get hasContent() {
+        return typeof this.text === 'string' && this.text.trim().length > 0;
+    }
+    render() {
+        return (h("div", { key: '7044b9b910b9216c8674f5aa21afc8ec79310af2', class: "container-chips" }, h("div", { key: '1097981d0e3709a57a95e4a7c87937a24930e416', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'ba69aac6bb39a5cdc27d3d0ff2cc949cff1fb1a1', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '94aa2c494391b45341f14167bed97fa73f389b69' }, this.text))));
+    }
+    static get is() { return "dropi-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagType",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {
+                        "TagType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tag/dropi-tag.tsx",
+                            "id": "src/components/dropi-tag/dropi-tag.tsx::TagType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "primary (filled) | secondary (soft)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'primary'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagState",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TagState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tag/dropi-tag.tsx",
+                            "id": "src/components/dropi-tag/dropi-tag.tsx::TagState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color state of the tag"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name from the sprite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "propsChanged"
+            }, {
+                "propName": "state",
+                "methodName": "propsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-text-area/dropi-text-area.css

@@ -0,0 +1,97 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.textarea-wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.textarea-wrapper label {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.asterisk {
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+.textarea-container {
+  position: relative;
+}
+
+textarea.form-control {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+  padding: var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Neutral-White, #fff);
+  transition: border-color 0.3s ease-in-out;
+  outline: none;
+  appearance: none;
+}
+
+textarea.form-control:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+textarea.form-control:focus::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+textarea.form-control-valid {
+  border-color: var(--Gray-Gray-400, #858ea6) !important;
+  color: var(--Gray-Gray-600, #475066);
+}
+
+textarea.form-control-invalid {
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+  color: var(--Gray-Gray-600, #475066);
+}
+
+textarea.form-control:disabled {
+  border-color: var(--Gray-Gray-200, #c3c9d9) !important;
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: not-allowed;
+}
+
+/* ── Char counter ───────────────────────────────────────────── */
+.char-counter {
+  position: absolute;
+  bottom: 10px;
+  right: 16px;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+  pointer-events: none;
+}
+
+/* ── Helper ─────────────────────────────────────────────────── */
+.form-control-helper {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.form-control-helper span {
+  display: block;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 10px);
+}
+
+.invalid-color {
+  color: var(--Error-Error-500, #f46a6b) !important;
+}