@dropi/ui 0.1.0

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

@@ -0,0 +1,19 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  fill: var(--icon-fill, currentColor);
+}
+
+svg {
+  fill: inherit;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,142 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-icon
+ * Renders an SVG icon from the Dropi sprite sheet.
+ * The sprite must be available at `assets/icons/sprite.svg`.
+ */
+export class DropiIcon {
+    el;
+    /** Icon name matching the id in the SVG sprite */
+    name = '';
+    /** Width of the icon (CSS value) */
+    width = '24px';
+    /** Height of the icon (CSS value) */
+    height = '24px';
+    /**
+     * Color of the icon. Accepts:
+     * - Hex color: `#ff0000`
+     * - CSS variable name without `--`: `Primary-Primary-500`
+     * - `currentColor` to inherit
+     */
+    color = 'currentColor';
+    colorChanged() {
+        this.applyColor();
+    }
+    componentDidLoad() {
+        this.applyColor();
+    }
+    applyColor() {
+        const fill = this.color.startsWith('#')
+            ? this.color
+            : this.color === 'currentColor'
+                ? 'currentColor'
+                : `var(--${this.color})`;
+        this.el.style.setProperty('--icon-fill', fill);
+    }
+    render() {
+        return (h("svg", { key: 'e71bfb0be9f68882bbd7314d0f6f3fd877fccf07', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: 'e6905c3ba9c68f463db62cde2cd64ce51093c2c0', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+    }
+    static get is() { return "dropi-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name matching the id in the SVG sprite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the icon (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'24px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the icon (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'24px'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the icon. Accepts:\n- Hex color: `#ff0000`\n- CSS variable name without `--`: `Primary-Primary-500`\n- `currentColor` to inherit"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'currentColor'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "colorChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,168 @@
+:host {
+  display: block;
+  width: 100%;
+  text-align: left;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ── Fixed label layout ────────────────────────────────────── */
+.fixed-label-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  text-align: left;
+}
+
+.input-label {
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-regular, 400);
+}
+
+.asterisk {
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+/* ── Form group / container ────────────────────────────────── */
+.form-group {
+  position: relative;
+  width: 100%;
+  text-align: left;
+}
+
+.input-container {
+  position: relative;
+}
+
+/* ── Icons ─────────────────────────────────────────────────── */
+.icon-input {
+  position: absolute;
+  top: 10px;
+  left: 5px;
+  z-index: 1;
+}
+
+.icon-input-password {
+  position: absolute;
+  top: 10px;
+  right: 13px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* ── Base input ─────────────────────────────────────────────── */
+.form-control {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--Size-2, 8px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  transition: border-color 0.3s ease-in-out;
+  height: 40px;
+  outline: none;
+  appearance: none;
+  text-align: left;
+}
+
+.form-control::placeholder {
+  color: transparent;
+  transition: color 0.2s ease-in-out;
+}
+
+/* Show placeholder only on focus or in fixedLabel mode */
+.form-control:focus::placeholder,
+.fixed-label-input::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.form-control:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+.form-control-valid {
+  border-color: var(--Gray-Gray-400, #858ea6) !important;
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.form-control-invalid {
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.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;
+}
+
+.padding-icon {
+  padding-left: 28px;
+}
+
+/* Password: hide characters via CSS (no type=password needed for font trick) */
+.text-password {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+
+/* ── Floating label ─────────────────────────────────────────── */
+label.label-bottom {
+  position: absolute;
+  font-weight: var(--font-weight-regular, 400);
+  top: 10px;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-500, #69738c);
+  left: 10px;
+  transition: all 0.2s ease-in-out;
+  pointer-events: none;
+  overflow: hidden;
+  width: 90%;
+  white-space: nowrap;
+}
+
+/* Float up when focused or has value */
+.form-control:focus + label.label-bottom,
+.form-control:not(:placeholder-shown) + label.label-bottom {
+  top: -22px;
+  left: 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  width: unset;
+}
+
+.form-control:disabled + label.label-bottom {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+/* ── Helper text ────────────────────────────────────────────── */
+.form-control-helper {
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  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;
+}
+
+.disabled-helper {
+  color: var(--Gray-Gray-400, #858ea6) !important;
+}