@safe-stars/components
Version:
React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.
218 lines (189 loc) • 8.71 kB
JavaScript
"use strict";const n=require("./index-CtZaCMo8.cjs"),t=require("./if-defined-MmHKu2JE.cjs");require("./index--KmZMQQE.cjs");const g=n.i`
: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 r=function(s,o,i,c){var l=arguments.length,e=l<3?o:c===null?c=Object.getOwnPropertyDescriptor(o,i):c,u;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(s,o,i,c);else for(var d=s.length-1;d>=0;d--)(u=s[d])&&(e=(l<3?u(e):l>3?u(o,i,e):u(o,i))||e);return l>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"},b={lg:"paragraph-600",md:"small-600"},h={lg:"md",md:"md"};let a=class extends n.i$1{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??b[this.size];return n.x`
<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=h[this.size],i=this.disabled?v.disabled:v[this.variant];return n.x`<wui-loading-spinner color=${i} size=${o}></wui-loading-spinner>`}return n.x``}};a.styles=[n.resetStyles,n.elementStyles,g];r([t.n()],a.prototype,"size",void 0);r([t.n({type:Boolean})],a.prototype,"disabled",void 0);r([t.n({type:Boolean})],a.prototype,"fullWidth",void 0);r([t.n({type:Boolean})],a.prototype,"loading",void 0);r([t.n()],a.prototype,"variant",void 0);r([t.n({type:Boolean})],a.prototype,"hasIconLeft",void 0);r([t.n({type:Boolean})],a.prototype,"hasIconRight",void 0);r([t.n()],a.prototype,"borderRadius",void 0);r([t.n()],a.prototype,"textVariant",void 0);a=r([t.customElement("wui-button")],a);
//# sourceMappingURL=index-2v8aP99g.cjs.map