@dropi/ui 0.1.0

package/dist/collection/components/dropi-radio-button/dropi-radio-button.css

@@ -0,0 +1,59 @@
+:host {
+  display: inline-block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.dropi-radio-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 20px;
+}
+
+label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: 1.5;
+}
+
+input[type='radio'] {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 50%;
+  background-color: transparent;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+input[type='radio']::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 10px;
+  height: 10px;
+  background-color: var(--Primary-Primary-400, #f7b46f);
+  border-radius: 50%;
+  display: none;
+}
+
+input[type='radio']:checked {
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+input[type='radio']:checked::before {
+  display: block;
+}

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -0,0 +1,181 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-radio-button
+ * Styled radio button with label.
+ */
+export class DropiRadioButton {
+    /** Label text displayed next to the radio */
+    label = '';
+    /** Input name (for grouping radio buttons) */
+    name = 'radio';
+    /** Input id */
+    inputId = 'radioButton';
+    /** Whether this radio is selected */
+    checked = false;
+    /**
+     * Set to true to programmatically reset this radio to unchecked.
+     * Useful when the parent needs to clear a group.
+     */
+    resetTrigger = false;
+    /** Emitted when the radio is selected */
+    dropiChange;
+    onResetTrigger(val) {
+        if (val)
+            this.checked = false;
+    }
+    handleChange(e) {
+        this.checked = e.target.checked;
+        this.dropiChange.emit(e);
+    }
+    render() {
+        return (h("div", { key: '3b31699bf088bee52465981074c0aea48b6fe112', class: "dropi-radio-button" }, h("label", { key: '072d19bd9c88739b849db0e264c65183eaab2132', htmlFor: this.inputId }, h("input", { key: '82d1600002e9dc2795cdc5c731997742adc8e2db', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+    }
+    static get is() { return "dropi-radio-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-radio-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed next to the radio"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name (for grouping radio buttons)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'radio'"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input id"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id",
+                "defaultValue": "'radioButton'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this radio is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "resetTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to programmatically reset this radio to unchecked.\nUseful when the parent needs to clear a group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reset-trigger",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio is selected"
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "node_modules::Event",
+                            "referenceLocation": "Event"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "resetTrigger",
+                "methodName": "onResetTrigger"
+            }];
+    }
+}

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

@@ -0,0 +1,364 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ── Wrapper ────────────────────────────────────────────────── */
+.custom-select {
+  position: relative;
+  width: 100%;
+}
+
+.custom-select label {
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.disabled-label {
+  color: var(--Gray-Gray-400, #858ea6) !important;
+}
+
+.asterisk {
+  color: var(--Error-Error-500, #f46a6b);
+}
+
+/* ── Trigger row ────────────────────────────────────────────── */
+.dropdown-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.left-label {
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-m, 14px);
+  white-space: nowrap;
+}
+
+/* ── Trigger button ─────────────────────────────────────────── */
+.select-button {
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  gap: 8px;
+}
+
+.select-button:focus {
+  outline: none;
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+.select-button:disabled {
+  border-color: var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: not-allowed;
+}
+
+.select-completed {
+  border-color: var(--Gray-Gray-400, #858ea6);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.select-button-error {
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+}
+
+.no-border {
+  border: none !important;
+  color: var(--Gray-Gray-600, #475066);
+  padding: var(--Size-4, 16px);
+  background-color: transparent !important;
+  gap: var(--Size-2, 8px);
+}
+
+.no-border:disabled {
+  background-color: transparent !important;
+}
+
+/* ── Button content ─────────────────────────────────────────── */
+.button-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.elipsis {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Dropdown overlay (fixed position) ──────────────────────── */
+.select-dropdown-overlay {
+  position: fixed;
+  max-height: 250px;
+  overflow-y: auto;
+  list-style: none;
+  padding: var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);
+  margin: 0;
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
+  z-index: 9999;
+  animation: dropdown-open 120ms ease-out;
+}
+
+@keyframes dropdown-open {
+  from { opacity: 0; transform: scaleY(0.95); transform-origin: top; }
+  to   { opacity: 1; transform: scaleY(1);    transform-origin: top; }
+}
+
+/* ── Options ────────────────────────────────────────────────── */
+.option {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40px;
+  border-radius: var(--Border-2, 8px);
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  transition: background 0.15s ease;
+}
+
+.option:hover:not(:disabled) {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.option:disabled,
+.disabled-option {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.option.selected-option:not(.option-radio) {
+  background: var(--Primary-Primary-50, #fef8f2);
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Grouped options ─────────────────────────────────────────── */
+.option-group-title {
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--Gray-Gray-500, #69738c);
+  list-style: none;
+}
+
+.option-group {
+  padding-left: var(--Size-6, 32px);
+}
+
+/* ── Sticky search ───────────────────────────────────────────── */
+.sticky-search {
+  position: sticky;
+  top: calc(-1 * var(--Size-4, 16px));
+  background: var(--Neutral-White, #fff);
+  z-index: 10;
+  margin: calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;
+  padding: var(--Size-2, 8px) var(--Size-4, 16px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  list-style: none;
+}
+
+.search-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  padding: 6px 10px;
+  background: var(--Neutral-White, #fff);
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: transparent;
+}
+
+.search-input::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.search-clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Multi-select checkbox ───────────────────────────────────── */
+.multi-checkbox {
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border-radius: var(--Border-1, 4px);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.multi-checkbox.checked {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Radio options ───────────────────────────────────────────── */
+.option-radio {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.option-radio.selected-option {
+  border-radius: var(--Border-2, 8px);
+  background: var(--Primary-Primary-50, #fef8f2);
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.option-radio.selected-option .option-second-label {
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.radio {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border-radius: 50%;
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.radio.selected {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.circle {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+.labels-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+}
+
+.option-image {
+  width: 24px;
+  height: 24px;
+  border-radius: 60px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.small-image {
+  width: 20px;
+  height: 20px;
+}
+
+.option-image-fallback {
+  width: 24px;
+  height: 24px;
+  border-radius: 60px;
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: white;
+  font-size: 13px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.small-image.option-image-fallback {
+  width: 20px;
+  height: 20px;
+}
+
+.option-second-label {
+  color: var(--Gray-Gray-700, #32394d);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* ── Country flag placeholder ────────────────────────────────── */
+.flag-placeholder {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--Gray-Gray-500, #69738c);
+  flex-shrink: 0;
+}
+
+/* ── Helper / error text ────────────────────────────────────── */
+.select-helper,
+.select-helper-error {
+  display: flex;
+  gap: var(--Size-1, 4px);
+  align-items: center;
+  margin-top: var(--Size-1, 4px);
+}
+
+.select-helper span {
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-xs, 10px);
+}
+
+.select-helper-error span {
+  color: var(--Error-Error-500, #f46a6b);
+  font-size: var(--font-size-xs, 10px);
+}
+
+/* ── No results ─────────────────────────────────────────────── */
+.no-results {
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  color: var(--Gray-Gray-400, #858ea6);
+  font-size: var(--font-size-s, 12px);
+  list-style: none;
+  text-align: center;
+}