reke-ui 0.1.1 → 0.2.0

package/dist/components/reke-dialog/reke-dialog.js

@@ -0,0 +1,77 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-dialog.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/components/reke-dialog/reke-dialog.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this.open = !1, this.heading = "", this.variant = "modal", this.position = "right", this._handleKeydown = (e) => {
+			e.key === "Escape" && this.open && this.close();
+		};
+	}
+	static {
+		this.styles = n;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown);
+	}
+	show() {
+		this.open = !0;
+	}
+	close() {
+		this.open = !1, this.emit("reke-close");
+	}
+	render() {
+		if (!this.open) return i;
+		let e = this.variant === "drawer", t = {
+			backdrop: !0,
+			"backdrop--drawer": e,
+			[`backdrop--${this.position}`]: e
+		}, n = {
+			dialog: !e,
+			drawer: e,
+			[`drawer--${this.position}`]: e
+		};
+		return r`
+      <div class=${s(t)} @click=${this.close}>
+        <div
+          class=${s(n)}
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.heading}
+          @click=${(e) => e.stopPropagation()}
+        >
+          ${this.heading ? r`
+                <div class="dialog-header">
+                  <h2 class="dialog-title">${this.heading}</h2>
+                  <button
+                    class="close-btn"
+                    @click=${this.close}
+                    aria-label="Close"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ` : i}
+          <div class="dialog-body">
+            <slot></slot>
+          </div>
+          <div class="dialog-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), t([o()], c.prototype, "heading", void 0), t([o({ reflect: !0 })], c.prototype, "variant", void 0), t([o({ reflect: !0 })], c.prototype, "position", void 0), c = t([a("reke-dialog")], c);
+//#endregion
+export { c as RekeDialog };

package/dist/components/reke-dialog/reke-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-dialog/reke-dialog.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAgIlB,CAAC"}
+{"version":3,"file":"reke-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-dialog/reke-dialog.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAiIlB,CAAC"}

package/dist/components/reke-dialog/reke-dialog.styles.js

@@ -0,0 +1,132 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-dialog/reke-dialog.styles.ts
+var n = [e, t`
+    :host {
+      display: block;
+    }
+
+    /* === Backdrop === */
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(2px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+
+    .backdrop--drawer {
+      align-items: stretch;
+    }
+
+    .backdrop--right {
+      justify-content: flex-end;
+    }
+
+    .backdrop--left {
+      justify-content: flex-start;
+    }
+
+    /* === Modal === */
+
+    .dialog {
+      background: var(--reke-color-bg, #0f0f10);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: 6px;
+      min-width: 400px;
+      max-width: 560px;
+      width: 100%;
+      max-height: 80vh;
+      overflow-y: auto;
+      font-family: var(
+        --reke-font-mono,
+        'JetBrains Mono',
+        ui-monospace,
+        monospace
+      );
+    }
+
+    /* === Drawer === */
+
+    .drawer {
+      background: var(--reke-color-bg, #0f0f10);
+      width: 400px;
+      max-width: 90vw;
+      height: 100%;
+      overflow-y: auto;
+      font-family: var(
+        --reke-font-mono,
+        'JetBrains Mono',
+        ui-monospace,
+        monospace
+      );
+      display: flex;
+      flex-direction: column;
+    }
+
+    .drawer--right {
+      border-left: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .drawer--left {
+      border-right: 1px solid var(--reke-color-border, #252525);
+    }
+
+    /* === Shared parts === */
+
+    .dialog-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      flex-shrink: 0;
+    }
+
+    .dialog-title {
+      margin: 0;
+      font-size: var(--reke-font-size-md, 14px);
+      font-weight: var(--reke-font-weight-semibold, 600);
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .close-btn {
+      background: transparent;
+      border: none;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      font-size: 20px;
+      padding: 4px 8px;
+      line-height: 1;
+    }
+
+    .close-btn:hover {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .close-btn:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .dialog-body {
+      padding: 20px;
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .dialog-footer {
+      padding: 12px 20px;
+      border-top: 1px solid var(--reke-color-border, #252525);
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-file-upload/reke-file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/reke-file-upload/reke-file-upload.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C,OAAgB,MAAM,4BAAU;IAEhC,kEAAkE;IAElE,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,oCAAoC;IAEpC,OAAO,UAAS;IAGhB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,SAAS,CAAM;IAGvB,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,iBAAiB;IAQzB,gDAAgD;IAChD,KAAK;IAMI,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"reke-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/reke-file-upload/reke-file-upload.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C,OAAgB,MAAM,4BAAU;IAEhC,kEAAkE;IAElE,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,oCAAoC;IAEpC,OAAO,UAAS;IAGhB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,SAAS,CAAM;IAGvB,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,iBAAiB;IAQzB,gDAAgD;IAChD,KAAK;IAMI,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/reke-file-upload/reke-file-upload.js

@@ -0,0 +1,84 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-file-upload.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+//#region src/components/reke-file-upload/reke-file-upload.ts
+var u = class extends e {
+	constructor(...e) {
+		super(...e), this.accept = "", this.hint = "", this.disabled = !1, this.error = !1, this.errorMessage = "", this.compact = !1, this._dragging = !1, this._fileName = "";
+	}
+	static {
+		this.styles = n;
+	}
+	handleClick() {
+		this.disabled || this._input.click();
+	}
+	handleDragOver(e) {
+		e.preventDefault(), e.stopPropagation(), this.disabled || (this._dragging = !0);
+	}
+	handleDragLeave(e) {
+		e.preventDefault(), e.stopPropagation(), this._dragging = !1;
+	}
+	handleDrop(e) {
+		if (e.preventDefault(), e.stopPropagation(), this._dragging = !1, this.disabled) return;
+		let t = e.dataTransfer?.files[0];
+		t && (this._fileName = t.name, this.emit("reke-file-select", { file: t }));
+	}
+	handleInputChange() {
+		let e = this._input.files?.[0];
+		e && (this._fileName = e.name, this.emit("reke-file-select", { file: e }));
+	}
+	clear() {
+		this._fileName = "", this._input && (this._input.value = ""), this.emit("reke-file-clear");
+	}
+	render() {
+		return r`
+      <div
+        part="dropzone"
+        class=${l({
+			dropzone: !0,
+			"dropzone--dragging": this._dragging,
+			"dropzone--error": this.error,
+			"dropzone--compact": this.compact
+		})}
+        @click=${this.handleClick}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+        role="button"
+        tabindex="0"
+        aria-label="Upload file"
+        @keydown=${(e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
+		}}
+      >
+        <div class="icon" aria-hidden="true">&#8593;</div>
+        <div class="text">
+          ${this._fileName ? r`<span class="text__file">${this._fileName}</span>` : r`<span class="text__primary">
+                ${this._dragging ? "drop file here" : "drag or select file"}
+              </span>`}
+          ${this.error && this.errorMessage ? r`<span class="text__error">${this.errorMessage}</span>` : this.hint ? r`<span class="text__secondary">${this.hint}</span>` : i}
+        </div>
+      </div>
+      <input
+        type="file"
+        accept=${this.accept || i}
+        @change=${this.handleInputChange}
+      />
+    `;
+	}
+};
+t([o()], u.prototype, "accept", void 0), t([o()], u.prototype, "hint", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "error", void 0), t([o({ attribute: "error-message" })], u.prototype, "errorMessage", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "compact", void 0), t([c()], u.prototype, "_dragging", void 0), t([c()], u.prototype, "_fileName", void 0), t([s("input[type=\"file\"]")], u.prototype, "_input", void 0), u = t([a("reke-file-upload")], u);
+//#endregion
+export { u as RekeFileUpload };

package/dist/components/reke-file-upload/reke-file-upload.styles.js

@@ -0,0 +1,104 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-file-upload/reke-file-upload.styles.ts
+var n = [e, t`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .dropzone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--reke-space-sm, 12px);
+      padding: var(--reke-space-xl, 24px) var(--reke-space-lg, 20px);
+      border-radius: var(--reke-radius, 4px);
+      border: 1px dashed var(--reke-color-border, #252525);
+      background-color: transparent;
+      cursor: pointer;
+      transition: border-color 0.2s ease, background-color 0.2s ease;
+      text-align: center;
+    }
+
+    .dropzone:hover {
+      border-color: var(--reke-color-text-muted, #525252);
+    }
+
+    .dropzone--dragging {
+      border-color: var(--reke-color-primary, #22c55e);
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22c55e) 5%, transparent);
+    }
+
+    .dropzone--error {
+      border-color: var(--reke-color-danger, #ef4444);
+    }
+
+    .dropzone--compact {
+      flex-direction: row;
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+    }
+
+    .icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22c55e) 10%, transparent);
+      border: 1px solid color-mix(in srgb, var(--reke-color-primary, #22c55e) 20%, transparent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--reke-color-primary, #22c55e);
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+
+    .dropzone--compact .icon {
+      width: 28px;
+      height: 28px;
+      font-size: 14px;
+    }
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .text__primary {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      color: var(--reke-color-text, #e5e5e5);
+    }
+
+    .text__secondary {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      color: var(--reke-color-text-ghost, #7A7A7A);
+    }
+
+    .text__file {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      color: var(--reke-color-primary, #22c55e);
+    }
+
+    .text__error {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      color: var(--reke-color-danger, #ef4444);
+    }
+
+    input[type='file'] {
+      display: none;
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-input/reke-input.js

@@ -0,0 +1,54 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-input.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/components/reke-input/reke-input.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "", this.type = "text", this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
+	}
+	static {
+		this.styles = n;
+	}
+	handleInput(e) {
+		let t = e.target;
+		this.value = t.value, this.emit("reke-input", { value: this.value });
+	}
+	handleChange() {
+		this.emit("reke-change", { value: this.value });
+	}
+	render() {
+		let e = {
+			input: !0,
+			[`input--${this.size}`]: !0,
+			"input--error": this.error
+		};
+		return r`
+      ${this.label ? r`<label class="label">${this.label}</label>` : i}
+      <input
+        part="input"
+        class=${s(e)}
+        type=${this.type}
+        .value=${this.value}
+        placeholder=${this.placeholder || i}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled}
+        aria-invalid=${this.error}
+        aria-label=${this.label || i}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      />
+    `;
+	}
+};
+t([o()], c.prototype, "value", void 0), t([o()], c.prototype, "placeholder", void 0), t([o()], c.prototype, "type", void 0), t([o({ reflect: !0 })], c.prototype, "size", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "error", void 0), t([o()], c.prototype, "label", void 0), c = t([a("reke-input")], c);
+//#endregion
+export { c as RekeInput };

package/dist/components/reke-input/reke-input.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-input/reke-input.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA0ElB,CAAC"}
+{"version":3,"file":"reke-input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-input/reke-input.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA2ElB,CAAC"}

package/dist/components/reke-input/reke-input.styles.js

@@ -0,0 +1,78 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-input/reke-input.styles.ts
+var n = [e, t`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .label {
+      display: block;
+      margin-bottom: var(--reke-space-2xs, 6px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      color: var(--reke-color-text-label, #8A8A8A);
+    }
+
+    .input {
+      display: block;
+      width: 100%;
+      background: var(--reke-color-input-bg, var(--reke-color-surface, #1A1A1A));
+      box-shadow: var(--reke-shadow-input, none);
+      color: var(--reke-color-text, #E5E5E5);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      box-sizing: border-box;
+      outline: none;
+      transition: border-color 0.15s ease;
+    }
+
+    .input::placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .input:focus-visible {
+      border-color: var(--reke-color-primary, #22C55E);
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: -1px;
+    }
+
+    .input--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .input--error:focus-visible {
+      border-color: var(--reke-color-danger, #EF4444);
+      outline-color: var(--reke-color-danger, #EF4444);
+    }
+
+    /* === Sizes === */
+
+    .input--xs {
+      padding: var(--reke-space-2xs, 6px) var(--reke-space-xs, 8px);
+      font-size: var(--reke-font-size-2xs, 11px);
+    }
+
+    .input--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-sm, 12px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .input--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .input--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-select/reke-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-select.d.ts","sourceRoot":"","sources":["../../../src/components/reke-select/reke-select.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAgB,MAAM,4BAAU;IAGhC,KAAK,SAAM;IAGX,WAAW,SAAe;IAG1B,OAAO,EAAE,YAAY,EAAE,CAAM;IAG7B,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,KAAK,SAAM;IAGX,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,wBAAwB,CAAsC;IACtE,OAAO,CAAC,mBAAmB,CAAiC;IAEnD,iBAAiB;IAMjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,KAAK,aAAa,GAGxB;IAEQ,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"reke-select.d.ts","sourceRoot":"","sources":["../../../src/components/reke-select/reke-select.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAgB,MAAM,4BAAU;IAGhC,KAAK,SAAM;IAGX,WAAW,SAAe;IAG1B,OAAO,EAAE,YAAY,EAAE,CAAM;IAG7B,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,KAAK,SAAM;IAGX,IAAI,EAAE,UAAU,CAAQ;IAGxB,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,wBAAwB,CAAsC;IACtE,OAAO,CAAC,mBAAmB,CAAiC;IAEnD,iBAAiB;IAMjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,KAAK,aAAa,GAGxB;IAEQ,MAAM;CAsDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/reke-select/reke-select.js

@@ -0,0 +1,89 @@
+import { RekeElement as e } from "../../shared/base-element.js";
+import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
+import { styles as n } from "./reke-select.styles.js";
+import { html as r, nothing as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/components/reke-select/reke-select.ts
+var l = class extends e {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "Select...", this.options = [], this.disabled = !1, this.error = !1, this.label = "", this.size = "md", this._open = !1, this._boundHandleOutsideClick = this.handleOutsideClick.bind(this), this._boundHandleKeyDown = this.handleKeyDown.bind(this);
+	}
+	static {
+		this.styles = n;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._boundHandleOutsideClick), document.addEventListener("keydown", this._boundHandleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._boundHandleOutsideClick), document.removeEventListener("keydown", this._boundHandleKeyDown);
+	}
+	handleOutsideClick(e) {
+		e.composedPath().includes(this) || (this._open = !1);
+	}
+	handleKeyDown(e) {
+		e.key === "Escape" && this._open && (this._open = !1);
+	}
+	handleTriggerClick() {
+		this.disabled || (this._open = !this._open);
+	}
+	handleOptionClick(e) {
+		this.value = e, this._open = !1, this.emit("reke-change", { value: this.value });
+	}
+	get selectedLabel() {
+		return this.options.find((e) => e.value === this.value)?.label;
+	}
+	render() {
+		let e = this.selectedLabel, t = !e, n = {
+			trigger: !0,
+			[`trigger--${this.size}`]: !0,
+			"trigger--error": this.error,
+			"trigger--placeholder": t
+		};
+		return r`
+      ${this.label ? r`<label class="label">${this.label}</label>` : i}
+      <button
+        part="trigger"
+        class=${c(n)}
+        type="button"
+        ?disabled=${this.disabled}
+        aria-expanded=${this._open}
+        aria-haspopup="listbox"
+        aria-invalid=${this.error}
+        aria-label=${this.label || i}
+        @click=${this.handleTriggerClick}
+      >
+        <span class="trigger__text">${e ?? this.placeholder}</span>
+        <span class="trigger__chevron" aria-hidden="true">&#9660;</span>
+      </button>
+      ${this._open ? r`
+            <ul
+              part="dropdown"
+              class="dropdown"
+              role="listbox"
+              aria-label=${this.label || i}
+            >
+              ${this.options.map((e) => r`
+                  <li
+                    class="option ${e.value === this.value ? "option--selected" : ""}"
+                    role="option"
+                    aria-selected=${e.value === this.value}
+                    @click=${() => this.handleOptionClick(e.value)}
+                  >
+                    ${e.label}
+                  </li>
+                `)}
+            </ul>
+          ` : i}
+    `;
+	}
+};
+t([o()], l.prototype, "value", void 0), t([o()], l.prototype, "placeholder", void 0), t([o({ attribute: !1 })], l.prototype, "options", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "error", void 0), t([o()], l.prototype, "label", void 0), t([o({ reflect: !0 })], l.prototype, "size", void 0), t([s()], l.prototype, "_open", void 0), l = t([a("reke-select")], l);
+//#endregion
+export { l as RekeSelect };

package/dist/components/reke-select/reke-select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-select/reke-select.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAoHlB,CAAC"}
+{"version":3,"file":"reke-select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-select/reke-select.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAqHlB,CAAC"}