reke-ui 0.1.0 → 0.1.2

package/dist/components/reke-date-range/reke-date-range.styles.js

@@ -0,0 +1,322 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as e } from "lit";
+const t = [
+  r,
+  e`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /* === Label === */
+
+    .label {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 12px;
+      color: var(--reke-color-text-ghost, #737373);
+      transition: color 0.15s ease;
+    }
+
+    .label--active {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    /* === Trigger === */
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      color: var(--reke-color-text, #E5E5E5);
+      font-family: inherit;
+      font-size: 13px;
+      cursor: pointer;
+      transition: border-color 0.15s ease;
+      min-width: 200px;
+      box-sizing: border-box;
+    }
+
+    .trigger:hover {
+      border-color: var(--reke-color-text-muted, #525252);
+    }
+
+    .trigger--open {
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .trigger--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .trigger--placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .trigger__icon {
+      display: inline-flex;
+      width: 16px;
+      height: 16px;
+      color: var(--reke-color-text-muted, #525252);
+      transition: color 0.15s ease;
+    }
+
+    .trigger--open .trigger__icon {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .trigger__icon svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .trigger__text {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .trigger__separator {
+      color: var(--reke-color-text-disabled, #3B3B3B);
+    }
+
+    .trigger__chevron {
+      display: inline-flex;
+      width: 16px;
+      height: 16px;
+      color: var(--reke-color-text-muted, #525252);
+      transition: transform 0.15s ease, color 0.15s ease;
+    }
+
+    .trigger--open .trigger__chevron {
+      transform: rotate(180deg);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .trigger__chevron svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    /* === Calendar dropdown === */
+
+    .calendar {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 50;
+      margin-top: 4px;
+      padding: 16px;
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
+      min-width: 280px;
+    }
+
+    /* === Calendar header (month/year + nav) === */
+
+    .calendar__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+
+    .calendar__title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .calendar__nav {
+      display: flex;
+      gap: 4px;
+    }
+
+    .calendar__nav-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: var(--reke-radius, 4px);
+      background: transparent;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    .calendar__nav-btn:hover {
+      color: var(--reke-color-text, #E5E5E5);
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
+    }
+
+    .calendar__nav-btn svg {
+      width: 14px;
+      height: 14px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    /* === Weekday header === */
+
+    .calendar__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      margin-bottom: 4px;
+    }
+
+    .calendar__weekday {
+      text-align: center;
+      font-size: 9px;
+      font-weight: 600;
+      color: var(--reke-color-text-disabled, #3B3B3B);
+      padding: 4px 0;
+      text-transform: uppercase;
+    }
+
+    /* === Day grid === */
+
+    .calendar__grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+    }
+
+    .calendar__day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 28px;
+      font-size: 11px;
+      border: none;
+      border-radius: var(--reke-radius, 4px);
+      background: transparent;
+      color: var(--reke-color-text, #E5E5E5);
+      cursor: pointer;
+      padding: 0;
+      font-family: inherit;
+      transition: background-color 0.1s ease;
+    }
+
+    .calendar__day:hover {
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 70%, var(--reke-color-border, #252525));
+    }
+
+    .calendar__day--other {
+      color: var(--reke-color-text-disabled, #3B3B3B);
+    }
+
+    .calendar__day--today {
+      font-weight: 600;
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .calendar__day--selected {
+      background: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      font-weight: 600;
+      border-radius: 14px;
+    }
+
+    .calendar__day--selected:hover {
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 85%, black);
+    }
+
+    .calendar__day--in-range {
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 10%, transparent);
+      border-radius: var(--reke-radius, 4px);
+    }
+
+    .calendar__day--range-start {
+      background: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      font-weight: 600;
+      border-radius: 14px 4px 4px 14px;
+    }
+
+    .calendar__day--range-end {
+      background: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      font-weight: 600;
+      border-radius: 4px 14px 14px 4px;
+    }
+
+    .calendar__day--range-start.calendar__day--range-end {
+      border-radius: 14px;
+    }
+
+    .calendar__day--disabled {
+      color: var(--reke-color-text-disabled, #3B3B3B);
+      cursor: default;
+      pointer-events: none;
+    }
+
+    /* === Calendar footer === */
+
+    .calendar__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      padding-top: 8px;
+    }
+
+    .calendar__action {
+      font-family: inherit;
+      font-size: 11px;
+      font-weight: 600;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0;
+    }
+
+    .calendar__action--today {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .calendar__action--today:hover {
+      text-decoration: underline;
+    }
+
+    .calendar__action--clear {
+      color: var(--reke-color-text-muted, #525252);
+      font-weight: 400;
+    }
+
+    .calendar__action--clear:hover {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+  `
+];
+export {
+  t as styles
+};

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

@@ -0,0 +1,90 @@
+import { nothing as c, html as p } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { RekeElement as v } from "../../shared/base-element.js";
+import { styles as u } from "./reke-dialog.styles.js";
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, s, r, i) => {
+  for (var t = i > 1 ? void 0 : i ? g(s, r) : s, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (t = (i ? d(s, r, t) : d(t)) || t);
+  return i && t && f(s, r, t), t;
+};
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.open = !1, this.heading = "", this.variant = "modal", this.position = "right", this._handleKeydown = (e) => {
+      e.key === "Escape" && this.open && this.close();
+    };
+  }
+  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 c;
+    const e = this.variant === "drawer", s = {
+      backdrop: !0,
+      "backdrop--drawer": e,
+      [`backdrop--${this.position}`]: e
+    }, r = {
+      dialog: !e,
+      drawer: e,
+      [`drawer--${this.position}`]: e
+    };
+    return p`
+      <div class=${h(s)} @click=${this.close}>
+        <div
+          class=${h(r)}
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.heading}
+          @click=${(i) => i.stopPropagation()}
+        >
+          ${this.heading ? p`
+                <div class="dialog-header">
+                  <h2 class="dialog-title">${this.heading}</h2>
+                  <button
+                    class="close-btn"
+                    @click=${this.close}
+                    aria-label="Close"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ` : c}
+          <div class="dialog-body">
+            <slot></slot>
+          </div>
+          <div class="dialog-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = u;
+a([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+a([
+  l()
+], o.prototype, "heading", 2);
+a([
+  l({ reflect: !0 })
+], o.prototype, "variant", 2);
+a([
+  l({ reflect: !0 })
+], o.prototype, "position", 2);
+o = a([
+  m("reke-dialog")
+], o);
+export {
+  o as RekeDialog
+};

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

@@ -0,0 +1,134 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const i = [
+  e,
+  o`
+    :host {
+      display: block;
+    }
+
+    /* === Backdrop === */
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      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: var(--reke-radius, 4px);
+      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;
+    }
+  `
+];
+export {
+  i as styles
+};

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

@@ -0,0 +1,108 @@
+import { nothing as d, html as o } from "lit";
+import { property as s, state as c, query as f, customElement as g } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { RekeElement as u } from "../../shared/base-element.js";
+import { styles as _ } from "./reke-file-upload.styles.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, t, p, l) => {
+  for (var a = l > 1 ? void 0 : l ? y(t, p) : t, n = e.length - 1, h; n >= 0; n--)
+    (h = e[n]) && (a = (l ? h(t, p, a) : h(a)) || a);
+  return l && a && v(t, p, a), a;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.accept = "", this.hint = "", this.disabled = !1, this.error = !1, this.errorMessage = "", this.compact = !1, this._dragging = !1, this._fileName = "";
+  }
+  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;
+    const t = e.dataTransfer?.files[0];
+    t && (this._fileName = t.name, this.emit("reke-file-select", { file: t }));
+  }
+  handleInputChange() {
+    const e = this._input.files?.[0];
+    e && (this._fileName = e.name, this.emit("reke-file-select", { file: e }));
+  }
+  /** Clear the selected file programmatically. */
+  clear() {
+    this._fileName = "", this._input && (this._input.value = ""), this.emit("reke-file-clear");
+  }
+  render() {
+    const e = {
+      dropzone: !0,
+      "dropzone--dragging": this._dragging,
+      "dropzone--error": this.error,
+      "dropzone--compact": this.compact
+    };
+    return o`
+      <div
+        part="dropzone"
+        class=${m(e)}
+        @click=${this.handleClick}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+        role="button"
+        tabindex="0"
+        aria-label="Upload file"
+        @keydown=${(t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.handleClick());
+    }}
+      >
+        <div class="icon" aria-hidden="true">&#8593;</div>
+        <div class="text">
+          ${this._fileName ? o`<span class="text__file">${this._fileName}</span>` : o`<span class="text__primary">
+                ${this._dragging ? "drop file here" : "drag or select file"}
+              </span>`}
+          ${this.error && this.errorMessage ? o`<span class="text__error">${this.errorMessage}</span>` : this.hint ? o`<span class="text__secondary">${this.hint}</span>` : d}
+        </div>
+      </div>
+      <input
+        type="file"
+        accept=${this.accept || d}
+        @change=${this.handleInputChange}
+      />
+    `;
+  }
+};
+r.styles = _;
+i([
+  s()
+], r.prototype, "accept", 2);
+i([
+  s()
+], r.prototype, "hint", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+i([
+  s({ attribute: "error-message" })
+], r.prototype, "errorMessage", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "compact", 2);
+i([
+  c()
+], r.prototype, "_dragging", 2);
+i([
+  c()
+], r.prototype, "_fileName", 2);
+i([
+  f('input[type="file"]')
+], r.prototype, "_input", 2);
+r = i([
+  g("reke-file-upload")
+], r);
+export {
+  r as RekeFileUpload
+};