@safe-stars/components
Version:
React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.
296 lines (267 loc) • 9.1 kB
JavaScript
import { i as g, r as b, h as p, a as h, x as d } from "./index-B5pm1jHN.js";
import { n as r, c as w } from "./if-defined-CTZGcMnO.js";
import "./index-BecCY-CK.js";
const f = g`
:host {
width: var(--local-width);
position: relative;
}
button {
border: none;
border-radius: var(--local-border-radius);
width: var(--local-width);
white-space: nowrap;
}
/* -- Sizes --------------------------------------------------- */
button[data-size='md'] {
padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
height: 36px;
}
button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);
}
button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {
padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
}
button[data-size='lg'] {
padding: var(--wui-spacing-m) var(--wui-spacing-2l);
height: 48px;
}
/* -- Variants --------------------------------------------------------- */
button[data-variant='main'] {
background-color: var(--wui-color-accent-100);
color: var(--wui-color-inverse-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
}
button[data-variant='inverse'] {
background-color: var(--wui-color-inverse-100);
color: var(--wui-color-inverse-000);
border: none;
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);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
button[data-variant='accent-error'] {
background: var(--wui-color-error-glass-015);
color: var(--wui-color-error-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
}
button[data-variant='accent-success'] {
background: var(--wui-color-success-glass-015);
color: var(--wui-color-success-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
}
button[data-variant='neutral'] {
background: transparent;
color: var(--wui-color-fg-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
/* -- Focus states --------------------------------------------------- */
button[data-variant='main']:focus-visible:enabled {
background-color: var(--wui-color-accent-090);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='inverse']:focus-visible:enabled {
background-color: var(--wui-color-inverse-100);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='accent']:focus-visible:enabled {
background-color: var(--wui-color-accent-glass-010);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='accent-error']:focus-visible:enabled {
background: var(--wui-color-error-glass-015);
box-shadow:
inset 0 0 0 1px var(--wui-color-error-100),
0 0 0 4px var(--wui-color-error-glass-020);
}
button[data-variant='accent-success']:focus-visible:enabled {
background: var(--wui-color-success-glass-015);
box-shadow:
inset 0 0 0 1px var(--wui-color-success-100),
0 0 0 4px var(--wui-color-success-glass-020);
}
button[data-variant='neutral']:focus-visible:enabled {
background: var(--wui-color-gray-glass-005);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-gray-glass-002);
}
/* -- Hover & Active states ----------------------------------------------------------- */
(hover: hover) and (pointer: fine) {
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='accent-error']:hover:enabled {
background: var(--wui-color-error-glass-020);
color: var(--wui-color-error-100);
}
button[data-variant='accent-error']:active:enabled {
background: var(--wui-color-error-glass-030);
color: var(--wui-color-error-100);
}
button[data-variant='accent-success']:hover:enabled {
background: var(--wui-color-success-glass-020);
color: var(--wui-color-success-100);
}
button[data-variant='accent-success']:active:enabled {
background: var(--wui-color-success-glass-030);
color: var(--wui-color-success-100);
}
button[data-variant='neutral']:hover:enabled {
background: var(--wui-color-gray-glass-002);
}
button[data-variant='neutral']:active:enabled {
background: var(--wui-color-gray-glass-005);
}
button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
padding-left: var(--wui-spacing-m);
}
button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
padding-right: var(--wui-spacing-m);
}
}
/* -- Disabled state --------------------------------------------------- */
button:disabled {
background-color: var(--wui-color-gray-glass-002);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
color: var(--wui-color-gray-glass-020);
cursor: not-allowed;
}
button > wui-text {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
::slotted(*) {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
wui-loading-spinner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: var(--local-opacity-000);
}
`;
var t = function(s, o, i, n) {
var c = arguments.length, e = c < 3 ? o : n === null ? n = Object.getOwnPropertyDescriptor(o, i) : n, l;
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") e = Reflect.decorate(s, o, i, n);
else for (var u = s.length - 1; u >= 0; u--) (l = s[u]) && (e = (c < 3 ? l(e) : c > 3 ? l(o, i, e) : l(o, i)) || e);
return c > 3 && e && Object.defineProperty(o, i, e), e;
};
const v = {
main: "inverse-100",
inverse: "inverse-000",
accent: "accent-100",
"accent-error": "error-100",
"accent-success": "success-100",
neutral: "fg-100",
disabled: "gray-glass-020"
}, x = {
lg: "paragraph-600",
md: "small-600"
}, y = {
lg: "md",
md: "md"
};
let a = class extends h {
constructor() {
super(...arguments), this.size = "lg", this.disabled = !1, this.fullWidth = !1, this.loading = !1, this.variant = "main", this.hasIconLeft = !1, this.hasIconRight = !1, this.borderRadius = "m";
}
render() {
this.style.cssText = `
--local-width: ${this.fullWidth ? "100%" : "auto"};
--local-opacity-100: ${this.loading ? 0 : 1};
--local-opacity-000: ${this.loading ? 1 : 0};
--local-border-radius: var(--wui-border-radius-${this.borderRadius});
`;
const o = this.textVariant ?? x[this.size];
return d`
<button
data-variant=${this.variant}
data-icon-left=${this.hasIconLeft}
data-icon-right=${this.hasIconRight}
data-size=${this.size}
?disabled=${this.disabled}
>
${this.loadingTemplate()}
<slot name="iconLeft" =${() => this.handleSlotLeftChange()}></slot>
<wui-text variant=${o} color="inherit">
<slot></slot>
</wui-text>
<slot name="iconRight" =${() => this.handleSlotRightChange()}></slot>
</button>
`;
}
handleSlotLeftChange() {
this.hasIconLeft = !0;
}
handleSlotRightChange() {
this.hasIconRight = !0;
}
loadingTemplate() {
if (this.loading) {
const o = y[this.size], i = this.disabled ? v.disabled : v[this.variant];
return d`<wui-loading-spinner color=${i} size=${o}></wui-loading-spinner>`;
}
return d``;
}
};
a.styles = [b, p, f];
t([
r()
], a.prototype, "size", void 0);
t([
r({ type: Boolean })
], a.prototype, "disabled", void 0);
t([
r({ type: Boolean })
], a.prototype, "fullWidth", void 0);
t([
r({ type: Boolean })
], a.prototype, "loading", void 0);
t([
r()
], a.prototype, "variant", void 0);
t([
r({ type: Boolean })
], a.prototype, "hasIconLeft", void 0);
t([
r({ type: Boolean })
], a.prototype, "hasIconRight", void 0);
t([
r()
], a.prototype, "borderRadius", void 0);
t([
r()
], a.prototype, "textVariant", void 0);
a = t([
w("wui-button")
], a);
//# sourceMappingURL=index-pInRTqdB.js.map