@safe-stars/components/dist/index-CDG4cf1q.js

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

import { i as v, r as b, h as g, a as h, x as l } from "./index-B5pm1jHN.js";
import { n as r, c as w } from "./if-defined-CTZGcMnO.js";
import "./index-CIwP1liu.js";
const p = v`
  button {
    border: none;
    border-radius: var(--wui-border-radius-3xl);
  }

  button[data-variant='main'] {
    background-color: var(--wui-color-accent-100);
    color: var(--wui-color-inverse-100);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  button[data-variant='accent'] {
    background-color: var(--wui-color-accent-glass-010);
    color: var(--wui-color-accent-100);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
  }

  button[data-variant='gray'] {
    background-color: transparent;
    color: var(--wui-color-fg-200);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  button[data-variant='shade'] {
    background-color: transparent;
    color: var(--wui-color-accent-100);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  button[data-size='sm'] {
    height: 32px;
    padding: 0 var(--wui-spacing-s);
  }

  button[data-size='md'] {
    height: 40px;
    padding: 0 var(--wui-spacing-l);
  }

  button[data-size='sm'] > wui-image {
    width: 16px;
    height: 16px;
  }

  button[data-size='md'] > wui-image {
    width: 24px;
    height: 24px;
  }

  button[data-size='sm'] > wui-icon {
    width: 12px;
    height: 12px;
  }

  button[data-size='md'] > wui-icon {
    width: 14px;
    height: 14px;
  }

  wui-image {
    border-radius: var(--wui-border-radius-3xl);
    overflow: hidden;
  }

  button.disabled > wui-icon,
  button.disabled > wui-image {
    filter: grayscale(1);
  }

  button[data-variant='main'] > wui-image {
    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
  }

  button[data-variant='shade'] > wui-image,
  button[data-variant='gray'] > wui-image {
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  @media (hover: hover) and (pointer: fine) {
    button[data-variant='main']:focus-visible {
      background-color: var(--wui-color-accent-090);
    }

    button[data-variant='main']:hover:enabled {
      background-color: var(--wui-color-accent-090);
    }

    button[data-variant='main']:active:enabled {
      background-color: var(--wui-color-accent-080);
    }

    button[data-variant='accent']:hover:enabled {
      background-color: var(--wui-color-accent-glass-015);
    }

    button[data-variant='accent']:active:enabled {
      background-color: var(--wui-color-accent-glass-020);
    }

    button[data-variant='shade']:focus-visible,
    button[data-variant='gray']:focus-visible,
    button[data-variant='shade']:hover,
    button[data-variant='gray']:hover {
      background-color: var(--wui-color-gray-glass-002);
    }

    button[data-variant='gray']:active,
    button[data-variant='shade']:active {
      background-color: var(--wui-color-gray-glass-005);
    }
  }

  button.disabled {
    color: var(--wui-color-gray-glass-020);
    background-color: var(--wui-color-gray-glass-002);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
    pointer-events: none;
  }
`;
var i = function(n, t, e, s) {
  var c = arguments.length, o = c < 3 ? t : s === null ? s = Object.getOwnPropertyDescriptor(t, e) : s, u;
  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(n, t, e, s);
  else for (var d = n.length - 1; d >= 0; d--) (u = n[d]) && (o = (c < 3 ? u(o) : c > 3 ? u(t, e, o) : u(t, e)) || o);
  return c > 3 && o && Object.defineProperty(t, e, o), o;
};
let a = class extends h {
  constructor() {
    super(...arguments), this.variant = "accent", this.imageSrc = "", this.disabled = !1, this.icon = "externalLink", this.size = "md", this.text = "";
  }
  render() {
    const t = this.size === "sm" ? "small-600" : "paragraph-600";
    return l`
      <button
        class=${this.disabled ? "disabled" : ""}
        data-variant=${this.variant}
        data-size=${this.size}
      >
        ${this.imageSrc ? l`<wui-image src=${this.imageSrc}></wui-image>` : null}
        <wui-text variant=${t} color="inherit"> ${this.text} </wui-text>
        <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
      </button>
    `;
  }
};
a.styles = [b, g, p];
i([
  r()
], a.prototype, "variant", void 0);
i([
  r()
], a.prototype, "imageSrc", void 0);
i([
  r({ type: Boolean })
], a.prototype, "disabled", void 0);
i([
  r()
], a.prototype, "icon", void 0);
i([
  r()
], a.prototype, "size", void 0);
i([
  r()
], a.prototype, "text", void 0);
a = i([
  w("wui-chip-button")
], a);
//# sourceMappingURL=index-CDG4cf1q.js.map