reke-ui 0.1.1 → 0.2.0

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

@@ -0,0 +1,265 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-table/reke-table.styles.ts
+var n = [e, t`
+    :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;
+    }
+
+    /* === Expand toggle column (opt-in via expandable prop) === */
+
+    .expand-toggle-header-cell {
+      width: 40px;
+      padding: 12px 8px;
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+      background: var(--reke-color-surface, #1A1A1A);
+    }
+
+    .expand-toggle-cell {
+      width: 40px;
+      padding: 8px 4px 8px 8px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    .expand-toggle-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: var(--reke-radius, 4px);
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      font: inherit;
+      line-height: 1;
+    }
+
+    .expand-toggle-button:hover {
+      color: var(--reke-color-text, #E5E5E5);
+      background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
+    }
+
+    .expand-toggle-button:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .expand-toggle-chevron {
+      display: inline-block;
+      font-size: 10px;
+      transition: transform 120ms ease;
+      transform: rotate(0deg);
+    }
+
+    .expand-toggle-button--expanded .expand-toggle-chevron {
+      transform: rotate(90deg);
+    }
+
+    .table--dense .expand-toggle-header-cell {
+      padding: 8px 6px;
+    }
+
+    .table--dense .expand-toggle-cell {
+      padding: 4px 4px 4px 6px;
+    }
+
+    /* === 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;
+    }
+  `];
+//#endregion
+export { n as styles };

package/dist/components/reke-textarea/reke-textarea.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-textarea.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-textarea/reke-textarea.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this.value = "", this.placeholder = "", this.rows = 4, 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 = {
+			textarea: !0,
+			[`textarea--${this.size}`]: !0,
+			"textarea--error": this.error
+		};
+		return r`
+      ${this.label ? r`<label class="label">${this.label}</label>` : i}
+      <textarea
+        part="textarea"
+        class=${s(e)}
+        .value=${this.value}
+        placeholder=${this.placeholder || i}
+        rows=${this.rows}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled}
+        aria-invalid=${this.error}
+        aria-label=${this.label || i}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      ></textarea>
+    `;
+	}
+};
+t([o()], c.prototype, "value", void 0), t([o()], c.prototype, "placeholder", void 0), t([o({ type: Number })], c.prototype, "rows", 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-textarea")], c);
+//#endregion
+export { c as RekeTextarea };

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

@@ -0,0 +1,73 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-textarea/reke-textarea.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);
+    }
+
+    .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);
+    }
+  `];
+//#endregion
+export { n as styles };

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

@@ -1 +1 @@
-{"version":3,"file":"reke-toast.d.ts","sourceRoot":"","sources":["../../../src/components/reke-toast/reke-toast.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AASpE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAa;IAGlC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,MAAM,SAAM;IAEZ,8DAA8D;IAE9D,QAAQ,SAAK;IAEb,OAAO,CAAC,MAAM,CAA4C;IAEjD,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,UAAU;IAOlB,OAAO;IAKP,OAAO,CAAC,YAAY;IAIX,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"reke-toast.d.ts","sourceRoot":"","sources":["../../../src/components/reke-toast/reke-toast.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AASpE;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAa;IAGlC,OAAO,SAAM;IAEb,4CAA4C;IAE5C,MAAM,SAAM;IAEZ,8DAA8D;IAE9D,QAAQ,SAAK;IAEb,OAAO,CAAC,MAAM,CAA4C;IAEjD,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,UAAU;IAOlB,OAAO;IAKP,OAAO,CAAC,YAAY;IAIX,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,74 @@
+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-toast.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-toast/reke-toast.ts
+var c = {
+	success: r`<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: r`<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: r`<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: r`<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>`
+}, l = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "success", this.message = "", this.action = "", this.duration = 0;
+	}
+	static {
+		this.styles = n;
+	}
+	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() {
+		return r`
+      <div part="toast" class=${s({
+			toast: !0,
+			[`toast--${this.variant}`]: !0
+		})} role="status">
+        <div class="toast__left">
+          <span class="toast__icon" aria-hidden="true">
+            ${c[this.variant]}
+          </span>
+          <span class="toast__message">${this.message}</span>
+        </div>
+        <div class="toast__right">
+          ${this.action ? r`
+                <button
+                  class="toast__action"
+                  type="button"
+                  @click=${this.handleAction}
+                >
+                  ${this.action}
+                </button>
+              ` : i}
+          <button
+            class="toast__close"
+            @click=${() => this.dismiss()}
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+    `;
+	}
+};
+t([o({ reflect: !0 })], l.prototype, "variant", void 0), t([o()], l.prototype, "message", void 0), t([o()], l.prototype, "action", void 0), t([o({ type: Number })], l.prototype, "duration", void 0), l = t([a("reke-toast")], l);
+//#endregion
+export { l 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,2BAoLlB,CAAC"}

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

@@ -0,0 +1,183 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+//#region src/components/reke-toast/reke-toast.styles.ts
+var n = [e, t`
+    :host {
+      display: block;
+      animation: toast-in var(--reke-transition-normal, 0.2s ease) both;
+    }
+
+    @keyframes toast-in {
+      from {
+        opacity: 0;
+        transform: translateY(8px) scale(0.97);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    .toast {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--reke-space-sm, 12px);
+      padding: 12px 14px;
+      border-radius: var(--reke-radius, 4px);
+      border: 1px solid var(--reke-color-border, #252525);
+      background-color: var(--reke-color-surface, #1A1A1A);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      box-sizing: border-box;
+      transition:
+        opacity var(--reke-transition-normal, 0.2s ease),
+        transform var(--reke-transition-normal, 0.2s ease);
+      /* left accent stripe */
+      border-left-width: 3px;
+    }
+
+    .toast--error {
+      border-left-color: var(--reke-color-danger, #EF4444);
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 8%, var(--reke-color-surface, #1A1A1A));
+    }
+
+    .toast--success {
+      border-left-color: var(--reke-color-primary, #22C55E);
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 8%, var(--reke-color-surface, #1A1A1A));
+    }
+
+    .toast--warning {
+      border-left-color: var(--reke-color-warning, #F59E0B);
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 8%, var(--reke-color-surface, #1A1A1A));
+    }
+
+    .toast--info {
+      border-left-color: var(--reke-color-secondary, #3B82F6);
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 8%, var(--reke-color-surface, #1A1A1A));
+    }
+
+    /* === Left section === */
+
+    .toast__left {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-sm, 12px);
+      min-width: 0;
+      flex: 1;
+    }
+
+    .toast__icon {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .toast__icon svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .toast--success .toast__icon {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .toast--error .toast__icon {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .toast--warning .toast__icon {
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .toast--info .toast__icon {
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    .toast__message {
+      color: var(--reke-color-text, #E5E5E5);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* === Right section === */
+
+    .toast__right {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-xs, 8px);
+      flex-shrink: 0;
+    }
+
+    .toast__action {
+      background: transparent;
+      border: none;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-2xs, 11px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      cursor: pointer;
+      padding: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    .toast--error .toast__action {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .toast--success .toast__action {
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .toast--warning .toast__action {
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .toast--info .toast__action {
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    .toast__action:hover {
+      opacity: 0.8;
+    }
+
+    .toast__action:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    .toast__close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: transparent;
+      border: none;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      padding: 0;
+      font-size: 14px;
+      line-height: 1;
+      transition: color 0.15s ease;
+    }
+
+    .toast__close:hover {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .toast__close:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+  `];
+//#endregion
+export { n as styles };