@safe-stars/components
Version:
React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.
1 lines • 14.6 kB
Source Map (JSON)
{"version":3,"file":"index-2v8aP99g.cjs","sources":["../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-button/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-button/index.js"],"sourcesContent":["import { css } from 'lit';\nexport default css `\n :host {\n width: var(--local-width);\n position: relative;\n }\n\n button {\n border: none;\n border-radius: var(--local-border-radius);\n width: var(--local-width);\n white-space: nowrap;\n }\n\n /* -- Sizes --------------------------------------------------- */\n button[data-size='md'] {\n padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);\n height: 36px;\n }\n\n button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {\n padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);\n }\n\n button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {\n padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);\n }\n\n button[data-size='lg'] {\n padding: var(--wui-spacing-m) var(--wui-spacing-2l);\n height: 48px;\n }\n\n /* -- Variants --------------------------------------------------------- */\n button[data-variant='main'] {\n background-color: var(--wui-color-accent-100);\n color: var(--wui-color-inverse-100);\n border: none;\n box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);\n }\n\n button[data-variant='inverse'] {\n background-color: var(--wui-color-inverse-100);\n color: var(--wui-color-inverse-000);\n border: none;\n box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);\n }\n\n button[data-variant='accent'] {\n background-color: var(--wui-color-accent-glass-010);\n color: var(--wui-color-accent-100);\n border: none;\n box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);\n }\n\n button[data-variant='accent-error'] {\n background: var(--wui-color-error-glass-015);\n color: var(--wui-color-error-100);\n border: none;\n box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);\n }\n\n button[data-variant='accent-success'] {\n background: var(--wui-color-success-glass-015);\n color: var(--wui-color-success-100);\n border: none;\n box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);\n }\n\n button[data-variant='neutral'] {\n background: transparent;\n color: var(--wui-color-fg-100);\n border: none;\n box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);\n }\n\n /* -- Focus states --------------------------------------------------- */\n button[data-variant='main']:focus-visible:enabled {\n background-color: var(--wui-color-accent-090);\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent-100),\n 0 0 0 4px var(--wui-color-accent-glass-020);\n }\n button[data-variant='inverse']:focus-visible:enabled {\n background-color: var(--wui-color-inverse-100);\n box-shadow:\n inset 0 0 0 1px var(--wui-color-gray-glass-010),\n 0 0 0 4px var(--wui-color-accent-glass-020);\n }\n button[data-variant='accent']:focus-visible:enabled {\n background-color: var(--wui-color-accent-glass-010);\n box-shadow:\n inset 0 0 0 1px var(--wui-color-accent-100),\n 0 0 0 4px var(--wui-color-accent-glass-020);\n }\n button[data-variant='accent-error']:focus-visible:enabled {\n background: var(--wui-color-error-glass-015);\n box-shadow:\n inset 0 0 0 1px var(--wui-color-error-100),\n 0 0 0 4px var(--wui-color-error-glass-020);\n }\n button[data-variant='accent-success']:focus-visible:enabled {\n background: var(--wui-color-success-glass-015);\n box-shadow:\n inset 0 0 0 1px var(--wui-color-success-100),\n 0 0 0 4px var(--wui-color-success-glass-020);\n }\n button[data-variant='neutral']:focus-visible:enabled {\n background: var(--wui-color-gray-glass-005);\n box-shadow:\n inset 0 0 0 1px var(--wui-color-gray-glass-010),\n 0 0 0 4px var(--wui-color-gray-glass-002);\n }\n\n /* -- Hover & Active states ----------------------------------------------------------- */\n @media (hover: hover) and (pointer: fine) {\n button[data-variant='main']:hover:enabled {\n background-color: var(--wui-color-accent-090);\n }\n\n button[data-variant='main']:active:enabled {\n background-color: var(--wui-color-accent-080);\n }\n\n button[data-variant='accent']:hover:enabled {\n background-color: var(--wui-color-accent-glass-015);\n }\n\n button[data-variant='accent']:active:enabled {\n background-color: var(--wui-color-accent-glass-020);\n }\n\n button[data-variant='accent-error']:hover:enabled {\n background: var(--wui-color-error-glass-020);\n color: var(--wui-color-error-100);\n }\n\n button[data-variant='accent-error']:active:enabled {\n background: var(--wui-color-error-glass-030);\n color: var(--wui-color-error-100);\n }\n\n button[data-variant='accent-success']:hover:enabled {\n background: var(--wui-color-success-glass-020);\n color: var(--wui-color-success-100);\n }\n\n button[data-variant='accent-success']:active:enabled {\n background: var(--wui-color-success-glass-030);\n color: var(--wui-color-success-100);\n }\n\n button[data-variant='neutral']:hover:enabled {\n background: var(--wui-color-gray-glass-002);\n }\n\n button[data-variant='neutral']:active:enabled {\n background: var(--wui-color-gray-glass-005);\n }\n\n button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {\n padding-left: var(--wui-spacing-m);\n }\n\n button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {\n padding-right: var(--wui-spacing-m);\n }\n }\n\n /* -- Disabled state --------------------------------------------------- */\n button:disabled {\n background-color: var(--wui-color-gray-glass-002);\n box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);\n color: var(--wui-color-gray-glass-020);\n cursor: not-allowed;\n }\n\n button > wui-text {\n transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);\n will-change: opacity;\n opacity: var(--local-opacity-100);\n }\n\n ::slotted(*) {\n transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);\n will-change: opacity;\n opacity: var(--local-opacity-100);\n }\n\n wui-loading-spinner {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n opacity: var(--local-opacity-000);\n }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../../components/wui-loading-spinner/index.js';\nimport '../../components/wui-text/index.js';\nimport { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nconst SPINNER_COLOR_BY_VARIANT = {\n main: 'inverse-100',\n inverse: 'inverse-000',\n accent: 'accent-100',\n 'accent-error': 'error-100',\n 'accent-success': 'success-100',\n neutral: 'fg-100',\n disabled: 'gray-glass-020'\n};\nconst TEXT_VARIANT_BY_SIZE = {\n lg: 'paragraph-600',\n md: 'small-600'\n};\nconst SPINNER_SIZE_BY_SIZE = {\n lg: 'md',\n md: 'md'\n};\nlet WuiButton = class WuiButton extends LitElement {\n constructor() {\n super(...arguments);\n this.size = 'lg';\n this.disabled = false;\n this.fullWidth = false;\n this.loading = false;\n this.variant = 'main';\n this.hasIconLeft = false;\n this.hasIconRight = false;\n this.borderRadius = 'm';\n }\n render() {\n this.style.cssText = `\n --local-width: ${this.fullWidth ? '100%' : 'auto'};\n --local-opacity-100: ${this.loading ? 0 : 1};\n --local-opacity-000: ${this.loading ? 1 : 0};\n --local-border-radius: var(--wui-border-radius-${this.borderRadius});\n `;\n const textVariant = this.textVariant ?? TEXT_VARIANT_BY_SIZE[this.size];\n return html `\n <button\n data-variant=${this.variant}\n data-icon-left=${this.hasIconLeft}\n data-icon-right=${this.hasIconRight}\n data-size=${this.size}\n ?disabled=${this.disabled}\n >\n ${this.loadingTemplate()}\n <slot name=\"iconLeft\" @slotchange=${() => this.handleSlotLeftChange()}></slot>\n <wui-text variant=${textVariant} color=\"inherit\">\n <slot></slot>\n </wui-text>\n <slot name=\"iconRight\" @slotchange=${() => this.handleSlotRightChange()}></slot>\n </button>\n `;\n }\n handleSlotLeftChange() {\n this.hasIconLeft = true;\n }\n handleSlotRightChange() {\n this.hasIconRight = true;\n }\n loadingTemplate() {\n if (this.loading) {\n const size = SPINNER_SIZE_BY_SIZE[this.size];\n const color = this.disabled\n ? SPINNER_COLOR_BY_VARIANT['disabled']\n : SPINNER_COLOR_BY_VARIANT[this.variant];\n return html `<wui-loading-spinner color=${color} size=${size}></wui-loading-spinner>`;\n }\n return html ``;\n }\n};\nWuiButton.styles = [resetStyles, elementStyles, styles];\n__decorate([\n property()\n], WuiButton.prototype, \"size\", void 0);\n__decorate([\n property({ type: Boolean })\n], WuiButton.prototype, \"disabled\", void 0);\n__decorate([\n property({ type: Boolean })\n], WuiButton.prototype, \"fullWidth\", void 0);\n__decorate([\n property({ type: Boolean })\n], WuiButton.prototype, \"loading\", void 0);\n__decorate([\n property()\n], WuiButton.prototype, \"variant\", void 0);\n__decorate([\n property({ type: Boolean })\n], WuiButton.prototype, \"hasIconLeft\", void 0);\n__decorate([\n property({ type: Boolean })\n], WuiButton.prototype, \"hasIconRight\", void 0);\n__decorate([\n property()\n], WuiButton.prototype, \"borderRadius\", void 0);\n__decorate([\n property()\n], WuiButton.prototype, \"textVariant\", void 0);\nWuiButton = __decorate([\n customElement('wui-button')\n], WuiButton);\nexport { WuiButton };\n//# sourceMappingURL=index.js.map"],"names":["css","__decorate","decorators","target","key","desc","c","r","d","i","SPINNER_COLOR_BY_VARIANT","TEXT_VARIANT_BY_SIZE","SPINNER_SIZE_BY_SIZE","WuiButton","LitElement","textVariant","html","size","color","resetStyles","elementStyles","styles","property","customElement"],"mappings":"4HACA,MAAeA,EAAAA,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,ECDf,I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","x_google_ignoreList":[0,1]}