reke-ui 0.1.1 → 0.1.2

package/README.md

@@ -2,6 +2,8 @@
 
 A Web Component library built with [Lit 3](https://lit.dev). Ships with dark and light themes. Framework-agnostic — works with Vue, React, Angular, Svelte, or vanilla JS.
 
+**[Documentation](https://jreque.github.io/reke-ui/)** · **[Storybook](https://jreque.github.io/reke-ui/storybook/)**
+
 ## Components
 
 | Component | Tag | Description |

package/custom-elements.json

@@ -195,6 +195,16 @@
               "default": "'md'",
               "attribute": "size",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "BadgeShape"
+              },
+              "default": "'pill'",
+              "attribute": "shape",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -213,6 +223,14 @@
               },
               "default": "'md'",
               "fieldName": "size"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "BadgeShape"
+              },
+              "default": "'pill'",
+              "fieldName": "shape"
             }
           ],
           "superclass": {
@@ -464,6 +482,14 @@
               "description": "Card border radius.",
               "name": "--reke-radius",
               "default": "4px"
+            },
+            {
+              "description": "Shadow applied on hover when interactive.",
+              "name": "--reke-shadow-lift"
+            },
+            {
+              "description": "Glow shadow for accent=primary on hover.",
+              "name": "--reke-shadow-glow-primary"
             }
           ],
           "slots": [
@@ -501,6 +527,28 @@
               "attribute": "padding",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables hover lift + border glow effect.",
+              "attribute": "interactive",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "accent",
+              "type": {
+                "text": "CardAccent"
+              },
+              "default": "'none'",
+              "description": "Accent color shown on hover border (requires interactive=true).",
+              "attribute": "accent",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_hasHeader",
@@ -555,6 +603,24 @@
               },
               "default": "'md'",
               "fieldName": "padding"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables hover lift + border glow effect.",
+              "fieldName": "interactive"
+            },
+            {
+              "name": "accent",
+              "type": {
+                "text": "CardAccent"
+              },
+              "default": "'none'",
+              "description": "Accent color shown on hover border (requires interactive=true).",
+              "fieldName": "accent"
             }
           ],
           "superclass": {
@@ -2392,7 +2458,7 @@
               "default": "#E5E5E5"
             },
             {
-              "description": "Header text color.",
+              "description": "Header text color. Props: - `expandedRowRender`: Lit-based expand render. Receives `(row, index)` → TemplateResult. - `expandedRowElement`: Framework-agnostic expand render. Receives `(host, row, index)` — mount any framework. Return cleanup or void.",
               "name": "--reke-color-text-muted",
               "default": "#525252"
             }
@@ -2549,6 +2615,15 @@
               "default": "null",
               "description": "When set, rows become expandable with a chevron toggle."
             },
+            {
+              "kind": "field",
+              "name": "expandedRowElement",
+              "type": {
+                "text": "((host: HTMLElement, row: TableRow, index: number) => (() => void) | void) | null"
+              },
+              "default": "null",
+              "description": "Framework-agnostic alternative to expandedRowRender.\nReceives an HTMLElement host — mount any framework's content into it.\nReturn a cleanup function (called on collapse) or void."
+            },
             {
               "kind": "field",
               "name": "expandedRows",
@@ -2558,6 +2633,12 @@
               "default": "new Set()",
               "description": "Set of row indices currently expanded."
             },
+            {
+              "kind": "field",
+              "name": "_expandCleanups",
+              "privacy": "private",
+              "default": "new Map<number, () => void>()"
+            },
             {
               "kind": "field",
               "name": "_hasToolbar",
@@ -2683,6 +2764,25 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderExpandedElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "row",
+                  "type": {
+                    "text": "TableRow"
+                  }
+                },
+                {
+                  "name": "i",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             }
           ],
           "events": [

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

@@ -0,0 +1,53 @@
+import { nothing as c, html as p } from "lit";
+import { property as m, customElement as f } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { RekeElement as h } from "../../shared/base-element.js";
+import { styles as v } from "./reke-alert.styles.js";
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (r, s, o, l) => {
+  for (var e = l > 1 ? void 0 : l ? b(s, o) : s, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (e = (l ? i(s, o, e) : i(e)) || e);
+  return l && e && _(s, o, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "info", this.dismissible = !1;
+  }
+  handleClose() {
+    this.emit("reke-close"), this.remove();
+  }
+  render() {
+    const r = {
+      alert: !0,
+      [`alert--${this.variant}`]: !0
+    };
+    return p`
+      <div part="alert" class=${u(r)} role="alert">
+        <span class="alert__content">
+          <slot></slot>
+        </span>
+        ${this.dismissible ? p`
+              <button
+                class="alert__close"
+                @click=${this.handleClose}
+                aria-label="Close"
+              >
+                &times;
+              </button>
+            ` : c}
+      </div>
+    `;
+  }
+};
+t.styles = v;
+n([
+  m({ reflect: !0 })
+], t.prototype, "variant", 2);
+n([
+  m({ type: Boolean, reflect: !0 })
+], t.prototype, "dismissible", 2);
+t = n([
+  f("reke-alert")
+], t);
+export {
+  t as RekeAlert
+};

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

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

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

@@ -0,0 +1,106 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const n = [
+  r,
+  o`
+    :host {
+      display: block;
+    }
+
+    .alert {
+      display: flex;
+      align-items: center;
+      gap: var(--reke-space-sm, 12px);
+      padding: 12px var(--reke-space-md, 16px);
+      border-radius: var(--reke-radius, 4px);
+      border: none;
+      border-left: 3px solid;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      line-height: 1.5;
+      box-sizing: border-box;
+    }
+
+    /* === Variants === */
+
+    .alert--success {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 10%, transparent);
+      border-color: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .alert--error {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 10%, transparent);
+      border-color: var(--reke-color-danger, #EF4444);
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .alert--warning {
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 10%, transparent);
+      border-color: var(--reke-color-warning, #F59E0B);
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .alert--info {
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 10%, transparent);
+      border-color: var(--reke-color-secondary, #3B82F6);
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    /* === Content === */
+
+    .alert__content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    /* === Dismissible === */
+
+    .alert__close {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      background: transparent;
+      border: none;
+      color: currentColor;
+      opacity: 0.5;
+      cursor: pointer;
+      padding: 0;
+      font-size: 16px;
+      line-height: 1;
+      transition: opacity 0.15s ease;
+    }
+
+    .alert__close:hover {
+      opacity: 1;
+    }
+
+    .alert__close:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    /* === Enter animation === */
+
+    :host {
+      animation: alert-in var(--reke-transition-normal, 0.2s ease) both;
+    }
+
+    @keyframes alert-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `
+];
+export {
+  n as styles
+};

package/dist/components/reke-badge/reke-badge.d.ts

@@ -1,6 +1,7 @@
 import { RekeElement } from '../../shared/base-element.js';
-export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
-export type BadgeSize = 'sm' | 'md';
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'outline';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeShape = 'pill' | 'square';
 /**
  * @tag reke-badge
  * @summary A badge component for displaying labels, statuses, and counts.
@@ -19,6 +20,7 @@ export declare class RekeBadge extends RekeElement {
     static styles: import("lit").CSSResult[];
     variant: BadgeVariant;
     size: BadgeSize;
+    shape: BadgeShape;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"reke-badge.d.ts","sourceRoot":"","sources":["../../../src/components/reke-badge/reke-badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAa;IAGlC,IAAI,EAAE,SAAS,CAAQ;IAEd,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"reke-badge.d.ts","sourceRoot":"","sources":["../../../src/components/reke-badge/reke-badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,WAAW;IACxC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,YAAY,CAAa;IAGlC,IAAI,EAAE,SAAS,CAAQ;IAGvB,KAAK,EAAE,UAAU,CAAU;IAElB,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,44 @@
+import { html as n } from "lit";
+import { property as m, customElement as u } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { RekeElement as c } from "../../shared/base-element.js";
+import { styles as h } from "./reke-badge.styles.js";
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (r, s, o, p) => {
+  for (var e = p > 1 ? void 0 : p ? v(s, o) : s, l = r.length - 1, i; l >= 0; l--)
+    (i = r[l]) && (e = (p ? i(s, o, e) : i(e)) || e);
+  return p && e && d(s, o, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "default", this.size = "md", this.shape = "pill";
+  }
+  render() {
+    const r = {
+      badge: !0,
+      [`badge--${this.variant}`]: !0,
+      [`badge--${this.size}`]: !0,
+      [`badge--${this.shape}`]: !0
+    };
+    return n`
+      <span part="badge" class=${f(r)}>
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+t.styles = h;
+a([
+  m({ reflect: !0 })
+], t.prototype, "variant", 2);
+a([
+  m({ reflect: !0 })
+], t.prototype, "size", 2);
+a([
+  m({ reflect: !0 })
+], t.prototype, "shape", 2);
+t = a([
+  u("reke-badge")
+], t);
+export {
+  t as RekeBadge
+};

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

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

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

@@ -0,0 +1,95 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const n = [
+  r,
+  o`
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-weight: var(--reke-font-weight-medium, 500);
+      border: 1px solid transparent;
+      line-height: 1;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    /* === Shape === */
+
+    .badge--pill {
+      border-radius: 9999px;
+    }
+
+    .badge--square {
+      border-radius: var(--reke-radius, 4px);
+    }
+
+    /* === Sizes === */
+
+    .badge--sm {
+      padding: 2px 8px;
+      font-size: 11px;
+    }
+
+    .badge--md {
+      padding: 4px 10px;
+      font-size: 12px;
+    }
+
+    .badge--lg {
+      padding: 5px 14px;
+      font-size: 13px;
+    }
+
+    /* === Variants === */
+
+    .badge--default {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .badge--primary {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 15%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 30%, transparent);
+    }
+
+    .badge--secondary {
+      background-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 15%, transparent);
+      color: var(--reke-color-secondary, #3B82F6);
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 30%, transparent);
+    }
+
+    .badge--danger {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 15%, transparent);
+      color: var(--reke-color-danger, #EF4444);
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 30%, transparent);
+    }
+
+    .badge--warning {
+      background-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 15%, transparent);
+      color: var(--reke-color-warning, #F59E0B);
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 30%, transparent);
+    }
+
+    .badge--success {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 15%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 30%, transparent);
+    }
+
+    .badge--outline {
+      background-color: transparent;
+      color: var(--reke-color-text-ghost, #737373);
+      border-color: var(--reke-color-border, #252525);
+    }
+  `
+];
+export {
+  n as styles
+};

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

@@ -0,0 +1,64 @@
+import { nothing as d, html as u } from "lit";
+import { property as a, customElement as c } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { RekeElement as f } from "../../shared/base-element.js";
+import { styles as m } from "./reke-button.styles.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, l, o) => {
+  for (var e = o > 1 ? void 0 : o ? y(i, l) : i, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (e = (o ? p(i, l, e) : p(e)) || e);
+  return o && e && b(i, l, e), e;
+};
+let s = class extends f {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1;
+  }
+  handleClick(t) {
+    if (this.disabled || this.loading) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.emit("reke-click");
+  }
+  render() {
+    const t = {
+      button: !0,
+      [`button--${this.variant}`]: !0,
+      [`button--${this.size}`]: !0,
+      "button--loading": this.loading
+    };
+    return u`
+      <button
+        part="button"
+        class=${h(t)}
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled || this.loading}
+        aria-busy=${this.loading}
+        @click=${this.handleClick}
+      >
+        <span class="spinner" aria-hidden="true"></span>
+        ${this.variant !== "icon-only" ? u`<slot name="prefix"></slot>` : d}
+        <slot></slot>
+        ${this.variant !== "icon-only" ? u`<slot name="suffix"></slot>` : d}
+      </button>
+    `;
+  }
+};
+s.styles = m;
+r([
+  a({ reflect: !0 })
+], s.prototype, "variant", 2);
+r([
+  a({ reflect: !0 })
+], s.prototype, "size", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "loading", 2);
+s = r([
+  c("reke-button")
+], s);
+export {
+  s as RekeButton
+};

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

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