reke-ui 0.1.0 → 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

@@ -128,6 +128,139 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/reke-badge/reke-badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "RekeBadge",
+          "cssProperties": [
+            {
+              "description": "Default variant background color.",
+              "name": "--reke-color-surface",
+              "default": "#1A1A1A"
+            },
+            {
+              "description": "Default variant text color.",
+              "name": "--reke-color-text",
+              "default": "#E5E5E5"
+            },
+            {
+              "description": "Default variant border color.",
+              "name": "--reke-color-border",
+              "default": "#252525"
+            },
+            {
+              "description": "Primary/success variant accent color.",
+              "name": "--reke-color-primary",
+              "default": "#22C55E"
+            },
+            {
+              "description": "Danger variant accent color.",
+              "name": "--reke-color-danger",
+              "default": "#EF4444"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The inner badge element.",
+              "name": "badge"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for badge text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "BadgeVariant"
+              },
+              "default": "'default'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "BadgeSize"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "BadgeShape"
+              },
+              "default": "'pill'",
+              "attribute": "shape",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "BadgeVariant"
+              },
+              "default": "'default'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "BadgeSize"
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "BadgeShape"
+              },
+              "default": "'pill'",
+              "fieldName": "shape"
+            }
+          ],
+          "superclass": {
+            "name": "RekeElement",
+            "module": "/src/shared/base-element.js"
+          },
+          "tagName": "reke-badge",
+          "customElement": true,
+          "summary": "A badge component for displaying labels, statuses, and counts."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RekeBadge",
+          "declaration": {
+            "name": "RekeBadge",
+            "module": "src/components/reke-badge/reke-badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "reke-badge",
+          "declaration": {
+            "name": "RekeBadge",
+            "module": "src/components/reke-badge/reke-badge.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/reke-button/reke-button.ts",
@@ -321,121 +454,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/reke-badge/reke-badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "RekeBadge",
-          "cssProperties": [
-            {
-              "description": "Default variant background color.",
-              "name": "--reke-color-surface",
-              "default": "#1A1A1A"
-            },
-            {
-              "description": "Default variant text color.",
-              "name": "--reke-color-text",
-              "default": "#E5E5E5"
-            },
-            {
-              "description": "Default variant border color.",
-              "name": "--reke-color-border",
-              "default": "#252525"
-            },
-            {
-              "description": "Primary/success variant accent color.",
-              "name": "--reke-color-primary",
-              "default": "#22C55E"
-            },
-            {
-              "description": "Danger variant accent color.",
-              "name": "--reke-color-danger",
-              "default": "#EF4444"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The inner badge element.",
-              "name": "badge"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for badge text.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "BadgeVariant"
-              },
-              "default": "'default'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "BadgeSize"
-              },
-              "default": "'md'",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "BadgeVariant"
-              },
-              "default": "'default'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "BadgeSize"
-              },
-              "default": "'md'",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "RekeElement",
-            "module": "/src/shared/base-element.js"
-          },
-          "tagName": "reke-badge",
-          "customElement": true,
-          "summary": "A badge component for displaying labels, statuses, and counts."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "RekeBadge",
-          "declaration": {
-            "name": "RekeBadge",
-            "module": "src/components/reke-badge/reke-badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "reke-badge",
-          "declaration": {
-            "name": "RekeBadge",
-            "module": "src/components/reke-badge/reke-badge.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/reke-card/reke-card.ts",
@@ -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"}