reke-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,191 @@
+import { nothing as h, html as n } from "lit";
+import { property as l, state as c, customElement as b } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { RekeElement as f } from "../../shared/base-element.js";
+import { styles as u } from "./reke-table.styles.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, r, o) => {
+  for (var d = o > 1 ? void 0 : o ? w(e, r) : e, i = t.length - 1, p; i >= 0; i--)
+    (p = t[i]) && (d = (o ? p(e, r, d) : p(d)) || d);
+  return o && d && m(e, r, d), d;
+};
+let s = class extends f {
+  constructor() {
+    super(...arguments), this.columns = [], this.rows = [], this.striped = !1, this.dense = !1, this.hoverable = !1, this.bordered = !1, this.borderless = !1, this.sortKey = "", this.sortDirection = "asc", this.expandedRowRender = null, this.expandedRowElement = null, this.expandedRows = /* @__PURE__ */ new Set(), this._expandCleanups = /* @__PURE__ */ new Map(), this._hasToolbar = !1, this._hasFooter = !1;
+  }
+  handleHeaderClick(t) {
+    t.sortable !== !1 && (this.sortKey === t.key ? this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc" : (this.sortKey = t.key, this.sortDirection = "asc"), this.emit("reke-sort", { key: this.sortKey, direction: this.sortDirection }));
+  }
+  handleRowClick(t, e) {
+    this.emit("reke-row-click", { row: t, index: e });
+  }
+  /** Toggle expand state for a row at the given index. */
+  toggleExpand(t) {
+    const e = new Set(this.expandedRows), r = this.rows[t], o = !e.has(t);
+    if (o)
+      e.add(t);
+    else {
+      e.delete(t);
+      const d = this._expandCleanups.get(t);
+      d && (d(), this._expandCleanups.delete(t));
+    }
+    this.expandedRows = e, this.emit("reke-row-expand", { row: r, index: t, expanded: o });
+  }
+  /** Check whether a row at the given index is currently expanded. */
+  isRowExpanded(t) {
+    return this.expandedRows.has(t);
+  }
+  _onToolbarSlotChange(t) {
+    const e = t.target;
+    this._hasToolbar = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _onFooterSlotChange(t) {
+    const e = t.target;
+    this._hasFooter = e.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _renderRow(t, e) {
+    const r = this.expandedRows.has(e);
+    return n`
+      <tr
+        part="row"
+        class="row ${e % 2 === 1 ? "row--even" : ""} ${r ? "row--expanded" : ""}"
+        @click=${() => this.handleRowClick(t, e)}
+      >
+        ${this.columns.map(
+      (o) => n`
+            <td
+              part="cell"
+              class="cell"
+              data-align=${o.align || "left"}
+            >
+              ${o.render ? o.render(t[o.key], t, e) : t[o.key] ?? ""}
+            </td>
+          `
+    )}
+      </tr>
+      ${(this.expandedRowElement || this.expandedRowRender) && r ? n`
+            <tr part="expand-row" class="expand-row">
+              <td part="expand-content" class="expand-content" colspan=${this.columns.length}>
+                ${this.expandedRowElement ? this._renderExpandedElement(t, e) : this.expandedRowRender(t, e)}
+              </td>
+            </tr>
+          ` : h}
+    `;
+  }
+  _renderExpandedElement(t, e) {
+    const r = document.createElement("div");
+    r.style.cssText = "display: contents;";
+    const o = this.expandedRowElement(r, t, e);
+    return o && this._expandCleanups.set(e, o), r;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._expandCleanups.forEach((t) => t()), this._expandCleanups.clear();
+  }
+  render() {
+    const t = {
+      table: !0,
+      "table--striped": this.striped,
+      "table--dense": this.dense,
+      "table--hoverable": this.hoverable,
+      "table--bordered": this.bordered
+    };
+    return n`
+      <div class="table-container">
+        ${this._hasToolbar ? n`
+              <div part="toolbar" class="table-toolbar">
+                <slot name="toolbar" @slotchange=${this._onToolbarSlotChange}></slot>
+              </div>
+            ` : n`<slot name="toolbar" @slotchange=${this._onToolbarSlotChange} style="display:none"></slot>`}
+
+        <div class="table-wrapper">
+          <table part="table" class=${y(t)} role="table">
+            <thead part="header">
+              <tr>
+                ${this.columns.map(
+      (e) => n`
+                    <th
+                      part="header-cell"
+                      class="header-cell ${this.sortKey === e.key ? "header-cell--sorted" : ""} ${e.sortable === !1 ? "header-cell--no-sort" : ""}"
+                      style=${e.width ? `width: ${e.width}` : ""}
+                      data-align=${e.align || "left"}
+                      @click=${() => this.handleHeaderClick(e)}
+                    >
+                      <span class="header-content">
+                        ${e.header}
+                        ${this.sortKey === e.key ? n`<span class="sort-indicator" aria-hidden="true">${this.sortDirection === "asc" ? "↑" : "↓"}</span>` : h}
+                      </span>
+                    </th>
+                  `
+    )}
+              </tr>
+            </thead>
+            <tbody part="body">
+              ${this.rows.map((e, r) => this._renderRow(e, r))}
+              ${this.rows.length === 0 ? n`
+                    <tr class="row row--empty">
+                      <td class="cell cell--empty" colspan=${this.columns.length}>
+                        <slot name="empty">No data</slot>
+                      </td>
+                    </tr>
+                  ` : h}
+            </tbody>
+          </table>
+        </div>
+
+        ${this._hasFooter ? n`
+              <div part="footer" class="table-footer">
+                <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
+              </div>
+            ` : n`<slot name="footer" @slotchange=${this._onFooterSlotChange} style="display:none"></slot>`}
+      </div>
+    `;
+  }
+};
+s.styles = u;
+a([
+  l({ attribute: !1 })
+], s.prototype, "columns", 2);
+a([
+  l({ attribute: !1 })
+], s.prototype, "rows", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "striped", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "dense", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "hoverable", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "bordered", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "borderless", 2);
+a([
+  l({ reflect: !0, attribute: "sort-key" })
+], s.prototype, "sortKey", 2);
+a([
+  l({ reflect: !0, attribute: "sort-direction" })
+], s.prototype, "sortDirection", 2);
+a([
+  l({ attribute: !1 })
+], s.prototype, "expandedRowRender", 2);
+a([
+  l({ attribute: !1 })
+], s.prototype, "expandedRowElement", 2);
+a([
+  l({ attribute: !1 })
+], s.prototype, "expandedRows", 2);
+a([
+  c()
+], s.prototype, "_hasToolbar", 2);
+a([
+  c()
+], s.prototype, "_hasFooter", 2);
+s = a([
+  b("reke-table")
+], s);
+export {
+  s as RekeTable
+};

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

@@ -0,0 +1,207 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as r } from "lit";
+const t = [
+  e,
+  r`
+    :host {
+      display: block;
+    }
+
+    /* === Container (wraps toolbar + table + footer) === */
+
+    .table-container {
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: var(--reke-radius, 4px);
+      overflow: hidden;
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+    }
+
+    .table {
+      width: 100%;
+      border-collapse: collapse;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: 13px;
+      color: var(--reke-color-text, #E5E5E5);
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    /* === Toolbar === */
+
+    .table-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    /* === Footer === */
+
+    .table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      border-top: 1px solid var(--reke-color-border, #252525);
+      background: var(--reke-color-surface, #1A1A1A);
+      font-size: 12px;
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    /* === Header === */
+
+    thead {
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    .header-cell {
+      padding: 12px 16px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--reke-color-text-muted, #525252);
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .header-cell--no-sort {
+      cursor: default;
+    }
+
+    .header-cell[data-align='left'] {
+      text-align: left;
+    }
+
+    .header-cell[data-align='center'] {
+      text-align: center;
+    }
+
+    .header-cell[data-align='right'] {
+      text-align: right;
+    }
+
+    .header-cell:hover {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .header-cell--no-sort:hover {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .header-cell--sorted {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .header-content {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .sort-indicator {
+      font-size: 10px;
+    }
+
+    /* === Body === */
+
+    .row {
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .row:last-child {
+      border-bottom: none;
+    }
+
+    .row--expanded {
+      border-bottom: none;
+    }
+
+    .cell {
+      padding: 12px 16px;
+    }
+
+    .cell[data-align='left'] {
+      text-align: left;
+    }
+
+    .cell[data-align='center'] {
+      text-align: center;
+    }
+
+    .cell[data-align='right'] {
+      text-align: right;
+    }
+
+    .cell--empty {
+      text-align: center;
+      color: var(--reke-color-text-muted, #525252);
+      padding: 24px 16px;
+    }
+
+    /* === Expanded row === */
+
+    .expand-row {
+      background: var(--reke-color-surface, #1A1A1A);
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .expand-row:last-child {
+      border-bottom: none;
+    }
+
+    .expand-content {
+      padding: 0 16px 16px 16px;
+    }
+
+    /* === Modifiers === */
+
+    .table--striped .row--even {
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 85%, var(--reke-color-border, #252525));
+    }
+
+    .table--hoverable .row:hover {
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
+      cursor: pointer;
+    }
+
+    .table--dense .header-cell {
+      padding: 8px 12px;
+    }
+
+    .table--dense .cell {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    .table--dense .expand-content {
+      padding: 0 12px 12px 12px;
+    }
+
+    .table--bordered .cell,
+    .table--bordered .header-cell {
+      border-right: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .table--bordered .cell:last-child,
+    .table--bordered .header-cell:last-child {
+      border-right: none;
+    }
+
+    /* === Borderless (for embedding inside cards/containers) === */
+
+    :host([borderless]) .table-container {
+      border: none;
+      border-radius: 0;
+    }
+  `
+];
+export {
+  t as styles
+};

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

@@ -0,0 +1,73 @@
+import { nothing as n, html as u } from "lit";
+import { property as a, customElement as d } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { RekeElement as m } from "../../shared/base-element.js";
+import { styles as b } from "./reke-textarea.styles.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (l, s, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? f(s, i) : s, p = l.length - 1, h; p >= 0; p--)
+    (h = l[p]) && (r = (o ? h(s, i, r) : h(r)) || r);
+  return o && r && v(s, i, r), r;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.rows = 4, this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
+  }
+  handleInput(l) {
+    const s = l.target;
+    this.value = s.value, this.emit("reke-input", { value: this.value });
+  }
+  handleChange() {
+    this.emit("reke-change", { value: this.value });
+  }
+  render() {
+    const l = {
+      textarea: !0,
+      [`textarea--${this.size}`]: !0,
+      "textarea--error": this.error
+    };
+    return u`
+      ${this.label ? u`<label class="label">${this.label}</label>` : n}
+      <textarea
+        part="textarea"
+        class=${c(l)}
+        .value=${this.value}
+        placeholder=${this.placeholder || n}
+        rows=${this.rows}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled}
+        aria-invalid=${this.error}
+        aria-label=${this.label || n}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      ></textarea>
+    `;
+  }
+};
+e.styles = b;
+t([
+  a()
+], e.prototype, "value", 2);
+t([
+  a()
+], e.prototype, "placeholder", 2);
+t([
+  a({ type: Number })
+], e.prototype, "rows", 2);
+t([
+  a({ reflect: !0 })
+], e.prototype, "size", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
+t([
+  a()
+], e.prototype, "label", 2);
+e = t([
+  d("reke-textarea")
+], e);
+export {
+  e as RekeTextarea
+};

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

@@ -0,0 +1,76 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as r } from "lit";
+const t = [
+  e,
+  r`
+    :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);
+    }
+
+    .textarea {
+      display: block;
+      width: 100%;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      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;
+      resize: vertical;
+    }
+
+    .textarea::placeholder {
+      color: var(--reke-color-text-muted, #525252);
+    }
+
+    .textarea:focus-visible {
+      border-color: var(--reke-color-primary, #22C55E);
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: -1px;
+    }
+
+    .textarea--error {
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .textarea--error:focus-visible {
+      border-color: var(--reke-color-danger, #EF4444);
+      outline-color: var(--reke-color-danger, #EF4444);
+    }
+
+    /* === Sizes === */
+
+    .textarea--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-sm, 12px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .textarea--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .textarea--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+  `
+];
+export {
+  t as styles
+};

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

@@ -0,0 +1,92 @@
+import { html as e, nothing as p } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { RekeElement as u } from "../../shared/base-element.js";
+import { styles as d } from "./reke-toast.styles.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (r, a, n, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(a, n) : a, l = r.length - 1, m; l >= 0; l--)
+    (m = r[l]) && (t = (o ? m(a, n, t) : m(t)) || t);
+  return o && t && y(a, n, t), t;
+};
+const x = {
+  success: e`<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,
+  error: e`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
+  warning: e`<svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+  info: e`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`
+};
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "success", this.message = "", this.action = "", this.duration = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.startTimer();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearTimer();
+  }
+  startTimer() {
+    this.clearTimer(), this.duration > 0 && (this._timer = setTimeout(() => this.dismiss(), this.duration));
+  }
+  clearTimer() {
+    this._timer !== void 0 && (clearTimeout(this._timer), this._timer = void 0);
+  }
+  dismiss() {
+    this.emit("reke-close"), this.remove();
+  }
+  handleAction() {
+    this.emit("reke-action");
+  }
+  render() {
+    const r = {
+      toast: !0,
+      [`toast--${this.variant}`]: !0
+    };
+    return e`
+      <div part="toast" class=${v(r)} role="status">
+        <div class="toast__left">
+          <span class="toast__icon" aria-hidden="true">
+            ${x[this.variant]}
+          </span>
+          <span class="toast__message">${this.message}</span>
+        </div>
+        <div class="toast__right">
+          ${this.action ? e`
+                <button
+                  class="toast__action"
+                  type="button"
+                  @click=${this.handleAction}
+                >
+                  ${this.action}
+                </button>
+              ` : p}
+          <button
+            class="toast__close"
+            @click=${() => this.dismiss()}
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = d;
+i([
+  c({ reflect: !0 })
+], s.prototype, "variant", 2);
+i([
+  c()
+], s.prototype, "message", 2);
+i([
+  c()
+], s.prototype, "action", 2);
+i([
+  c({ type: Number })
+], s.prototype, "duration", 2);
+s = i([
+  h("reke-toast")
+], s);
+export {
+  s as RekeToast
+};

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

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