reke-ui 0.1.0 → 0.1.2

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"}

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

@@ -0,0 +1,229 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const n = [
+  r,
+  o`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--reke-space-xs, 8px);
+      border: 1px solid transparent;
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-weight: var(--reke-font-weight-medium, 500);
+      cursor: pointer;
+      transition:
+        background-color var(--reke-transition-fast, 0.12s ease),
+        border-color var(--reke-transition-fast, 0.12s ease),
+        color var(--reke-transition-fast, 0.12s ease),
+        box-shadow var(--reke-transition-normal, 0.2s ease),
+        transform var(--reke-transition-normal, 0.2s ease);
+      text-decoration: none;
+      line-height: 1;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    /* === Sizes === */
+
+    .button--xs {
+      padding: var(--reke-space-2xs, 6px) var(--reke-space-xs, 8px);
+      font-size: var(--reke-font-size-2xs, 11px);
+    }
+
+    .button--sm {
+      padding: var(--reke-space-xs, 8px) var(--reke-space-md, 16px);
+      font-size: var(--reke-font-size-xs, 12px);
+    }
+
+    .button--md {
+      padding: var(--reke-space-sm, 12px) var(--reke-space-xl, 24px);
+      font-size: var(--reke-font-size-sm, 13px);
+    }
+
+    .button--lg {
+      padding: var(--reke-space-md, 16px) var(--reke-space-2xl, 28px);
+      font-size: var(--reke-font-size-md, 14px);
+    }
+
+    /* === Variants === */
+
+    .button--primary {
+      background-color: var(--reke-color-primary, #22C55E);
+      color: var(--reke-color-on-primary, #0A0A0B);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .button--primary:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 88%, black);
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 88%, black);
+      box-shadow: var(--reke-shadow-glow-primary, 0 0 20px rgba(34, 197, 94, 0.35));
+      transform: translateY(-1px);
+    }
+
+    .button--primary:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--secondary {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .button--secondary:hover:not(:disabled) {
+      background-color: var(--reke-color-surface-hover, #202020);
+      border-color: var(--reke-color-border-hover, #3A3A3A);
+      color: var(--reke-color-text, #E5E5E5);
+      transform: translateY(-1px);
+      box-shadow: var(--reke-shadow-lift-sm, 0 4px 16px rgba(0, 0, 0, 0.35));
+    }
+
+    .button--secondary:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--ghost {
+      background-color: transparent;
+      color: var(--reke-color-text-ghost, #737373);
+      border-color: transparent;
+    }
+
+    .button--ghost:hover:not(:disabled) {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border-subtle, #1F1F1F);
+    }
+
+    .button--danger {
+      background-color: var(--reke-color-danger, #EF4444);
+      color: #FFFFFF;
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .button--danger:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 88%, black);
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 88%, black);
+      box-shadow: var(--reke-shadow-glow-danger, 0 0 20px rgba(239, 68, 68, 0.35));
+      transform: translateY(-1px);
+    }
+
+    .button--danger:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--danger-outline {
+      background-color: transparent;
+      color: var(--reke-color-danger, #EF4444);
+      border-color: var(--reke-color-danger, #EF4444);
+    }
+
+    .button--danger-outline:hover:not(:disabled) {
+      background-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 10%, transparent);
+      box-shadow: var(--reke-shadow-glow-danger, 0 0 20px rgba(239, 68, 68, 0.35));
+      transform: translateY(-1px);
+    }
+
+    .button--danger-outline:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: none;
+    }
+
+    .button--icon-only {
+      background-color: var(--reke-color-surface, #1A1A1A);
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border, #252525);
+    }
+
+    .button--icon-only:hover:not(:disabled) {
+      background-color: var(--reke-color-surface-hover, #202020);
+      border-color: var(--reke-color-border-hover, #3A3A3A);
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .button--icon-only.button--xs {
+      padding: var(--reke-space-2xs, 6px);
+    }
+
+    .button--icon-only.button--sm {
+      padding: var(--reke-space-xs, 8px);
+    }
+
+    .button--icon-only.button--md {
+      padding: var(--reke-space-sm, 12px);
+    }
+
+    .button--icon-only.button--lg {
+      padding: var(--reke-space-md, 16px);
+    }
+
+    /* === Loading === */
+
+    .button--loading {
+      position: relative;
+      color: transparent !important;
+      pointer-events: none;
+    }
+
+    .spinner {
+      display: none;
+    }
+
+    .button--loading .spinner {
+      display: block;
+      position: absolute;
+      width: 1em;
+      height: 1em;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      color: inherit;
+    }
+
+    .button--loading.button--primary .spinner {
+      color: var(--reke-color-on-primary, #0A0A0B);
+    }
+
+    .button--loading.button--secondary .spinner,
+    .button--loading.button--ghost .spinner,
+    .button--loading.button--icon-only .spinner {
+      color: var(--reke-color-text, #E5E5E5);
+    }
+
+    .button--loading.button--danger .spinner {
+      color: #FFFFFF;
+    }
+
+    .button--loading.button--danger-outline .spinner {
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `
+];
+export {
+  n as styles
+};

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

@@ -1,6 +1,7 @@
 import { RekeElement } from '../../shared/base-element.js';
 export type CardVariant = 'default' | 'elevated' | 'outlined';
 export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export type CardAccent = 'none' | 'primary' | 'secondary' | 'danger' | 'warning';
 /**
  * @tag reke-card
  * @summary A card container component with multiple variants and padding options.
@@ -13,11 +14,17 @@ export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
  * @cssprop [--reke-color-border=#252525] - Card border color.
  * @cssprop [--reke-shadow-md=0 4px 6px rgba(0,0,0,0.3)] - Elevated variant shadow.
  * @cssprop [--reke-radius=4px] - Card border radius.
+ * @cssprop [--reke-shadow-lift] - Shadow applied on hover when interactive.
+ * @cssprop [--reke-shadow-glow-primary] - Glow shadow for accent=primary on hover.
  */
 export declare class RekeCard extends RekeElement {
     static styles: import("lit").CSSResult[];
     variant: CardVariant;
     padding: CardPadding;
+    /** Enables hover lift + border glow effect. */
+    interactive: boolean;
+    /** Accent color shown on hover border (requires interactive=true). */
+    accent: CardAccent;
     private _hasHeader;
     private _hasFooter;
     private _onSlotChange;

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

@@ -1 +1 @@
-{"version":3,"file":"reke-card.d.ts","sourceRoot":"","sources":["../../../src/components/reke-card/reke-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,WAAW;IACvC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,WAAW,CAAa;IAGjC,OAAO,EAAE,WAAW,CAAQ;IAEnB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,aAAa;IAOZ,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"reke-card.d.ts","sourceRoot":"","sources":["../../../src/components/reke-card/reke-card.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjF;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,WAAW;IACvC,OAAgB,MAAM,4BAAU;IAGhC,OAAO,EAAE,WAAW,CAAa;IAGjC,OAAO,EAAE,WAAW,CAAQ;IAE5B,+CAA+C;IAE/C,WAAW,UAAS;IAEpB,sEAAsE;IAEtE,MAAM,EAAE,UAAU,CAAU;IAEnB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,aAAa;IAOZ,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KAEvB;CACF"}

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

@@ -0,0 +1,70 @@
+import { html as n } from "lit";
+import { property as i, state as d, customElement as p } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { RekeElement as v } from "../../shared/base-element.js";
+import { styles as m } from "./reke-card.styles.js";
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (a, e, l, r) => {
+  for (var s = r > 1 ? void 0 : r ? g(e, l) : e, c = a.length - 1, h; c >= 0; c--)
+    (h = a[c]) && (s = (r ? h(e, l, s) : h(s)) || s);
+  return r && s && _(e, l, s), s;
+};
+let t = class extends v {
+  constructor() {
+    super(...arguments), this.variant = "default", this.padding = "md", this.interactive = !1, this.accent = "none", this._hasHeader = !1, this._hasFooter = !1;
+  }
+  _onSlotChange(a, e) {
+    const r = e.target.assignedNodes({ flatten: !0 }).length > 0;
+    a === "header" ? this._hasHeader = r : this._hasFooter = r;
+  }
+  render() {
+    const a = {
+      card: !0,
+      [`card--${this.variant}`]: !0,
+      [`card--padding-${this.padding}`]: !0,
+      "card--interactive": this.interactive,
+      [`card--accent-${this.accent}`]: this.accent !== "none"
+    };
+    return n`
+      <div class=${f(a)}>
+        ${this._hasHeader ? n`
+          <div class="card-header">
+            <slot name="header" @slotchange=${(e) => this._onSlotChange("header", e)}></slot>
+          </div>
+        ` : n`<slot name="header" @slotchange=${(e) => this._onSlotChange("header", e)} style="display:none"></slot>`}
+        <div class="card-body">
+          <slot></slot>
+        </div>
+        ${this._hasFooter ? n`
+          <div class="card-footer">
+            <slot name="footer" @slotchange=${(e) => this._onSlotChange("footer", e)}></slot>
+          </div>
+        ` : n`<slot name="footer" @slotchange=${(e) => this._onSlotChange("footer", e)} style="display:none"></slot>`}
+      </div>
+    `;
+  }
+};
+t.styles = m;
+o([
+  i({ reflect: !0 })
+], t.prototype, "variant", 2);
+o([
+  i({ reflect: !0 })
+], t.prototype, "padding", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "interactive", 2);
+o([
+  i({ reflect: !0 })
+], t.prototype, "accent", 2);
+o([
+  d()
+], t.prototype, "_hasHeader", 2);
+o([
+  d()
+], t.prototype, "_hasFooter", 2);
+t = o([
+  p("reke-card")
+], t);
+export {
+  t as RekeCard
+};

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

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

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

@@ -0,0 +1,150 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as a } from "lit";
+const e = [
+  r,
+  a`
+    :host {
+      display: block;
+    }
+
+    .card {
+      border-radius: var(--reke-radius, 4px);
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      overflow: hidden;
+      transition:
+        border-color var(--reke-transition-normal, 0.2s ease),
+        box-shadow var(--reke-transition-normal, 0.2s ease),
+        transform var(--reke-transition-normal, 0.2s ease);
+    }
+
+    /* === Variants === */
+
+    .card--default {
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .card--elevated {
+      background: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      box-shadow: var(--reke-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
+    }
+
+    .card--outlined {
+      background: transparent;
+      border: 1px solid var(--reke-color-border, #252525);
+    }
+
+    /* === Interactive hover === */
+
+    .card--interactive {
+      cursor: pointer;
+    }
+
+    .card--interactive:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2));
+      border-color: var(--reke-color-border-hover, #3A3A3A);
+    }
+
+    .card--interactive:active {
+      transform: translateY(0);
+      box-shadow: var(--reke-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
+    }
+
+    /* === Accent hover borders === */
+
+    .card--interactive.card--accent-primary:hover {
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 50%, transparent);
+      box-shadow:
+        var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
+        var(--reke-shadow-glow-primary, 0 0 20px rgba(34, 197, 94, 0.15));
+    }
+
+    .card--interactive.card--accent-secondary:hover {
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 50%, transparent);
+      box-shadow:
+        var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
+        var(--reke-shadow-glow-secondary, 0 0 20px rgba(59, 130, 246, 0.15));
+    }
+
+    .card--interactive.card--accent-danger:hover {
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 50%, transparent);
+      box-shadow:
+        var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
+        var(--reke-shadow-glow-danger, 0 0 20px rgba(239, 68, 68, 0.15));
+    }
+
+    .card--interactive.card--accent-warning:hover {
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 50%, transparent);
+      box-shadow:
+        var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
+        0 0 20px color-mix(in srgb, var(--reke-color-warning, #F59E0B) 15%, transparent);
+    }
+
+    /* === Padding (applied to .card-body) === */
+
+    .card--padding-none .card-body {
+      padding: 0;
+    }
+
+    .card--padding-sm .card-body {
+      padding: 12px;
+    }
+
+    .card--padding-md .card-body {
+      padding: 16px;
+    }
+
+    .card--padding-lg .card-body {
+      padding: 24px;
+    }
+
+    /* === Header === */
+
+    .card-header {
+      border-bottom: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .card--padding-none .card-header {
+      padding: 0;
+    }
+
+    .card--padding-sm .card-header {
+      padding: 12px;
+    }
+
+    .card--padding-md .card-header {
+      padding: 16px;
+    }
+
+    .card--padding-lg .card-header {
+      padding: 24px;
+    }
+
+    /* === Footer === */
+
+    .card-footer {
+      border-top: 1px solid var(--reke-color-border, #252525);
+    }
+
+    .card--padding-none .card-footer {
+      padding: 0;
+    }
+
+    .card--padding-sm .card-footer {
+      padding: 12px;
+    }
+
+    .card--padding-md .card-footer {
+      padding: 16px;
+    }
+
+    .card--padding-lg .card-footer {
+      padding: 24px;
+    }
+  `
+];
+export {
+  e as styles
+};