reke-ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,182 @@
+import { tailwindStyles as o } from "../../shared/tailwind-styles.js";
+import { css as r } from "lit";
+const a = [
+  o,
+  r`
+    :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);
+    }
+
+    .toast--success {
+      border-left-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .toast--warning {
+      border-left-color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .toast--info {
+      border-left-color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    /* === 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: 20px;
+      height: 20px;
+      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;
+    }
+  `
+];
+export {
+  a as styles
+};

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

@@ -0,0 +1,57 @@
+import { nothing as d, html as n } from "lit";
+import { property as o, customElement as p } from "lit/decorators.js";
+import { RekeElement as k } from "../../shared/base-element.js";
+import { styles as b } from "./reke-toggle.styles.js";
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, c = (t, s, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? f(s, i) : s, h = t.length - 1, a; h >= 0; h--)
+    (a = t[h]) && (e = (r ? a(s, i, e) : a(e)) || e);
+  return r && e && m(s, i, e), e;
+};
+let l = class extends k {
+  constructor() {
+    super(...arguments), this.checked = !1, this.disabled = !1, this.label = "";
+  }
+  toggle() {
+    this.disabled || (this.checked = !this.checked, this.emit("reke-change", { checked: this.checked }));
+  }
+  handleClick() {
+    this.toggle();
+  }
+  handleKeyDown(t) {
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.toggle());
+  }
+  render() {
+    return n`
+      <div
+        class="toggle"
+        role="switch"
+        aria-checked=${this.checked}
+        aria-label=${this.label || d}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <div part="track" class="track ${this.checked ? "track--checked" : ""}">
+          <div part="thumb" class="thumb ${this.checked ? "thumb--checked" : ""}"></div>
+        </div>
+        ${this.label ? n`<span class="label">${this.label}</span>` : d}
+      </div>
+    `;
+  }
+};
+l.styles = b;
+c([
+  o({ type: Boolean, reflect: !0 })
+], l.prototype, "checked", 2);
+c([
+  o({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+c([
+  o()
+], l.prototype, "label", 2);
+l = c([
+  p("reke-toggle")
+], l);
+export {
+  l as RekeToggle
+};

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

@@ -0,0 +1,71 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const a = [
+  r,
+  o`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .toggle:focus-visible .track {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .track {
+      position: relative;
+      width: 40px;
+      height: 22px;
+      border-radius: 11px;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      box-sizing: border-box;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .track--checked {
+      background-color: var(--reke-color-primary, #22C55E);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .thumb {
+      position: absolute;
+      top: 50%;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background-color: var(--reke-color-text-muted, #525252);
+      transform: translateY(-50%);
+      transition: transform 0.15s ease, background-color 0.15s ease;
+    }
+
+    .thumb--checked {
+      background-color: var(--reke-color-on-primary, #0A0A0B);
+      transform: translateX(18px) translateY(-50%);
+    }
+
+    .label {
+      color: var(--reke-color-text, #E5E5E5);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+  `
+];
+export {
+  a as styles
+};

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

@@ -0,0 +1,67 @@
+import { html as m } from "lit";
+import { property as a, state as u, customElement as d } from "lit/decorators.js";
+import { RekeElement as c } from "../../shared/base-element.js";
+import { styles as n } from "./reke-tooltip.styles.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (h, o, l, s) => {
+  for (var t = s > 1 ? void 0 : s ? v(o, l) : o, r = h.length - 1, p; r >= 0; r--)
+    (p = h[r]) && (t = (s ? p(o, l, t) : p(t)) || t);
+  return s && t && y(o, l, t), t;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.text = "", this.position = "top", this.delay = 200, this._visible = !1;
+  }
+  show() {
+    clearTimeout(this._delayTimeout), this._delayTimeout = setTimeout(() => {
+      this._visible = !0;
+    }, this.delay);
+  }
+  hide() {
+    clearTimeout(this._delayTimeout), this._delayTimeout = setTimeout(() => {
+      this._visible = !1;
+    }, this.delay);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this._delayTimeout);
+  }
+  render() {
+    return m`
+      <div
+        class="wrapper"
+        aria-describedby="tooltip"
+        @mouseenter=${this.show}
+        @mouseleave=${this.hide}
+        @focusin=${this.show}
+        @focusout=${this.hide}
+      >
+        <div
+          id="tooltip"
+          class="tooltip tooltip--${this.position} ${this._visible ? "tooltip--visible" : ""}"
+          role="tooltip"
+        >
+          ${this.text}
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+e.styles = n;
+i([
+  a()
+], e.prototype, "text", 2);
+i([
+  a({ reflect: !0 })
+], e.prototype, "position", 2);
+i([
+  a({ type: Number })
+], e.prototype, "delay", 2);
+i([
+  u()
+], e.prototype, "_visible", 2);
+e = i([
+  d("reke-tooltip")
+], e);
+export {
+  e as RekeTooltip
+};

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

@@ -0,0 +1,67 @@
+import { tailwindStyles as o } from "../../shared/tailwind-styles.js";
+import { css as t } from "lit";
+const i = [
+  o,
+  t`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .wrapper {
+      display: inline-block;
+      position: relative;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: 1000;
+      padding: 6px 12px;
+      background-color: var(--reke-color-surface-elevated, #151515);
+      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);
+      font-size: var(--reke-font-size-xs, 12px);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+
+    .tooltip--visible {
+      opacity: 1;
+    }
+
+    .tooltip--top {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-bottom: 6px;
+    }
+
+    .tooltip--bottom {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 6px;
+    }
+
+    .tooltip--left {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-right: 6px;
+    }
+
+    .tooltip--right {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-left: 6px;
+    }
+  `
+];
+export {
+  i as styles
+};

package/dist/index.d.ts

@@ -7,9 +7,9 @@ export type { TextareaSize } from './components/reke-textarea/reke-textarea.js';
 export { RekeCheckbox } from './components/reke-checkbox/reke-checkbox.js';
 export { RekeToggle } from './components/reke-toggle/reke-toggle.js';
 export { RekeBadge } from './components/reke-badge/reke-badge.js';
-export type { BadgeVariant, BadgeSize } from './components/reke-badge/reke-badge.js';
+export type { BadgeVariant, BadgeSize, BadgeShape } from './components/reke-badge/reke-badge.js';
 export { RekeCard } from './components/reke-card/reke-card.js';
-export type { CardVariant, CardPadding } from './components/reke-card/reke-card.js';
+export type { CardVariant, CardPadding, CardAccent } from './components/reke-card/reke-card.js';
 export { RekeTooltip } from './components/reke-tooltip/reke-tooltip.js';
 export type { TooltipPosition } from './components/reke-tooltip/reke-tooltip.js';
 export { RekeDialog } from './components/reke-dialog/reke-dialog.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,YAAY,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,YAAY,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,YAAY,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,YAAY,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACjG,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,YAAY,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,YAAY,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,36 @@
+import { RekeButton as r } from "./components/reke-button/reke-button.js";
+import { RekeInput as p } from "./components/reke-input/reke-input.js";
+import { RekeTextarea as k } from "./components/reke-textarea/reke-textarea.js";
+import { RekeCheckbox as R } from "./components/reke-checkbox/reke-checkbox.js";
+import { RekeToggle as a } from "./components/reke-toggle/reke-toggle.js";
+import { RekeBadge as g } from "./components/reke-badge/reke-badge.js";
+import { RekeCard as i } from "./components/reke-card/reke-card.js";
+import { RekeTooltip as d } from "./components/reke-tooltip/reke-tooltip.js";
+import { RekeDialog as b } from "./components/reke-dialog/reke-dialog.js";
+import { RekeSelect as h } from "./components/reke-select/reke-select.js";
+import { RekeTable as B } from "./components/reke-table/reke-table.js";
+import { RekeDateRange as s } from "./components/reke-date-range/reke-date-range.js";
+import { RekeFileUpload as E } from "./components/reke-file-upload/reke-file-upload.js";
+import { RekeAlert as I } from "./components/reke-alert/reke-alert.js";
+import { RekeToast as U } from "./components/reke-toast/reke-toast.js";
+import { RekeChip as q } from "./components/reke-chip/reke-chip.js";
+import { RekeElement as w } from "./shared/base-element.js";
+export {
+  I as RekeAlert,
+  g as RekeBadge,
+  r as RekeButton,
+  i as RekeCard,
+  R as RekeCheckbox,
+  q as RekeChip,
+  s as RekeDateRange,
+  b as RekeDialog,
+  w as RekeElement,
+  E as RekeFileUpload,
+  p as RekeInput,
+  h as RekeSelect,
+  B as RekeTable,
+  k as RekeTextarea,
+  U as RekeToast,
+  a as RekeToggle,
+  d as RekeTooltip
+};